首页 » JavaScript » ES5中新增的方法

ES5中新增的方法

Array

filter

对数组中的每个元素都执行一次指定的函数(callback),并且创建一个新的数组,该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略,同时,新创建的数组也不会包含这些元素。

//过滤掉小于 10 的数组元素:

//代码:
function isBigEnough(element, index, array) {
    return (element >= 10);
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// 12, 130, 44

map

//将所有的数组元素转换为大写:

var strings = ["hello", "Array", "WORLD"];
function makeUpperCase(v){
    return v.toUpperCase();
}
var uppers = strings.map(makeUpperCase);
// uppers is now ["HELLO", "ARRAY", "WORLD"]
// strings is unchanged

some

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 true,如果发现这个元素,some 将返回 true,如果回调函数对每个元素执行后都返回 false ,some 将返回 false。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。

//检查是否有数组元素大于等于10:

function isBigEnough(element, index, array) {
    return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true

every

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 false,如果发现这个元素,every 将返回 false,如果回调函数对每个元素执行后都返回 true ,every 将返回 true。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略

//测试是否所有数组元素都大于等于10:

function isBigEnough(element, index, array) {
    return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

forEach

//打印数组内容:

function printElt(element, index, array) {
    document.writeln("[" + index + "] is " + element + "<br />");
}
[2, 5, 9].forEach(printElt);
// Prints:
// [0] is 2
// [1] is 5
// [2] is 9

lastIndexOf

语法

var index = array.lastIndexOf(searchElement[, fromIndex]);

参数说明

searchElement: 要搜索的元素

fromIndex : 开始搜索的位置,默认为数组的长度(length),在这样的情况下,将搜索所有的数组元素。搜索是反方向进行的。

功能说明

比较 searchElement 和数组的每个元素是否绝对一致(===),当有元素符合条件时,返回当前元素的索引。如果没有发现,就直接返回 -1 。

//查找符合条件的元素:

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

indexOf

功能与lastIndexOf()一样,搜索是正向进行的

//查找符合条件的元素:
var array = [2, 5, 9];
var index = array.indexOf(2);
// index is 0
index = array.indexOf(7);
// index is -1

reduce

[0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array){
    return accumulator + currentValue;
});
//10

reduceRight

reduceRight() 方法接受一个函数作为累加器(accumulator),让每个值(从右到左,亦即从尾到头)缩减为一个值。(与 reduce() 的执行方向相反)

[[0,1],[2,3],[4,5]].reduceRight(function(previousValue, currentValue, index, array) {
    return previousValue.concat(currentValue);
}, []);
//[4,5,2,3,0,1]

isArray

用于确定传递的值是否是一个 Array

Array.isArray([1,2,3]);
// true
Array.isArray({foo:123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

Object

create

使用指定的原型对象和属性创建一个新对象。

语法:

Object.create(proto[, propertiesObject])
// Shape - superclass
function Shape() {
    this.x = 0;
    this.y = 0;
}

// superclass method
Shape.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
    console.info('Shape moved.');
};

// Rectangle - subclass
function Rectangle() {
    Shape.call(this); // call super constructor.
}

// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
    rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
    rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'
Object.create(Object.prototype, {
    // foo is a regular 'value property'
    foo: {
        writable: true,
        configurable: true,
        value: 'hello'
    },
    // bar is a getter-and-setter (accessor) property
    bar: {
        configurable: false,
        get: function() {
            return 10;
        },
        set: function(value) {
            console.log('Setting `o.bar` to', value);
        }
        /* with ES5 Accessors our code can look like this
        get function() { return 10; },
        set function(value) {
          console.log('Setting `o.bar` to', value);
        } */
    }
});

keys

返回一个由给定对象的所有可枚举自身属性的属性名组成的数组,数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致(两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性)

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = {
    0: 'a',
    1: 'b',
    2: 'c'
};
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var anObj = {
    100: 'a',
    2: 'b',
    7: 'c'
};
console.log(Object.keys(anObj)); // ['2', '7', '100']

// getFoo is property which isn't enumerable
var myObj = Object.create({}, {
    getFoo: {
        value: function() {
            return this.foo;
        }
    }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

getOwnPropertyNames

返回一个直接在给定对象的所有属性(可枚举或不可枚举)的数组。

var arr = ['a', 'b', 'c'];
console.log(Object.getOwnPropertyNames(arr).sort());
// logs ["0", "1", "2", "length"]

// Array-like object
var obj = {
    0: 'a',
    1: 'b',
    2: 'c'
};
console.log(Object.getOwnPropertyNames(obj).sort());
// logs ["0", "1", "2"]

// Logging property names and values using Array.forEach
Object.getOwnPropertyNames(obj).forEach(
    function(val, idx, array) {
        console.log(val + ' -> ' + obj[val]);
    }
);
// logs
// 0 -> a
// 1 -> b
// 2 -> c

// non-enumerable property
var my_obj = Object.create({}, {
    getFoo: {
        value: function() {
            return this.foo;
        },
        enumerable: false
    }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort());
// logs ["foo", "getFoo"]

enumerable

用来控制所描述的属性,如果一个属性的enumerable为false,下面三个操作不会取到该属性。

  • for..in
  • Object.keys
  • JSON.stringify

Function

bind

创建一个新的函数,当被调用时,将其this指向提供的值。

this.x = 9; // this refers to global "window" object here in the browser
var module = {
    x: 81,
    getX: function() {
        return this.x;
    }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();
// returns 9 - The function gets invoked at the global scope

// Create a new function with 'this' bound to module
// New programmers might confuse the
// global var x with module's property x
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81
function list() {
    return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(null, 37);

var list2 = leadingThirtysevenList();
// [37]

var list3 = leadingThirtysevenList(1, 2, 3);
// [37, 1, 2, 3]

String

trim

会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR)。

var orig = '   foo  ';
console.log(orig.trim()); // 'foo'

Date

now

返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数。

Date.now();
//1496032949223

浏览器支持:Internet Explorer 9+

此文章发表在 JavaScript. 将 固定链接 加入收藏.