ES6 中新增的 Array 和 Object 方法介绍

在 ES6 中，新增了许多强大的 Array 和 Object 方法，它们大大简化了我们的代码，提高了开发效率。本文将详细介绍这些方法及其应用示例，希望能对前端开发带来帮助。

Array 方法介绍

Array.from()

Array.from() 方法接收一个类数组对象或可迭代对象作为参数，将其转化成一个真正的数组。该方法的语法如下：

Array.from(arrayLike[, mapFn[, thisArg]])

其中，arrayLike 参数是将要转换成数组的对象，可迭代对象是一个拥有可访问其元素的 length 属性和正整数索引的对象。mapFn 是一个映射函数，用于对每个元素进行处理，thisArg 是 mapFn 函数执行时的 this 值。

下面是一个示例：

let divList = document.querySelectorAll('div');
let divArray = Array.from(divList);
console.log(divArray);

Array.of()

Array.of() 方法可以将一组值转化成数组。该方法的语法如下：

Array.of(element0[, element1[, ...[, elementN]]])

下面是一个示例：

let numberArray = Array.of(1, 2, 3, 4, 5);
console.log(numberArray); // [1, 2, 3, 4, 5]
let stringArray = Array.of('JavaScript', 'ES6');
console.log(stringArray); // ['JavaScript', 'ES6']

Array.find()

find() 方法返回数组中第一个符合条件的元素。该方法的语法如下：

array.find(callback[, thisArg])

其中，callback 是用来测试每个元素的函数，返回 true 表示符合条件，false 表示不符合条件。thisArg 是可选的，为 callback 函数执行时使用的 this 值。

下面是一个示例：

let numberArray = [1, 5, 10, 15, 20];
let result = numberArray.find(function(element) { 
    return element > 10;
});
console.log(result); // 15

Array.findIndex()

findIndex() 方法返回数组中第一个符合条件的元素的索引值。该方法的语法如下：

array.findIndex(callback[, thisArg])

其中，callback 是用来测试每个元素的函数，返回 true 表示符合条件，false 表示不符合条件。thisArg 是可选的，为 callback 函数执行时使用的 this 值。

下面是一个示例：

let numberArray = [1, 5, 10, 15, 20];
let result = numberArray.findIndex(function(element) { 
    return element > 10;
});
console.log(result); // 3

Array.fill()

fill() 方法用一个固定值填充数组中从起始索引到终止索引之间的所有元素。该方法的语法如下：

array.fill(value[, start[, end]])

其中，value 是填充数组的固定值，start 是起始索引，end 是终止索引（不包含）。

下面是一个示例：

let numberArray = [1, 2, 3, 4, 5];
numberArray.fill(0, 2, 4); // 将索引2到4之间的元素使用0填充
console.log(numberArray); // [1, 2, 0, 0, 5]

Array.keys()

keys() 方法返回一个包含数组中每个索引键的可迭代对象。该方法的语法如下：

array.keys()

下面是一个示例：

let numberArray = [1, 2, 3, 4, 5];
let iterator = numberArray.keys();
for (let key of iterator) {
    console.log(key);
}

输出结果为：

0
1
2
3
4

Array.values()

values() 方法返回一个包含数组中每个值的可迭代对象。该方法的语法如下：

array.values()

下面是一个示例：

let numberArray = [1, 2, 3, 4, 5];
let iterator = numberArray.values();
for (let value of iterator) {
    console.log(value);
}

输出结果为：

1
2
3
4
5

Array.entries()

entries() 方法返回一个包含数组中每个索引键和值的可迭代对象。该方法的语法如下：

array.entries()

下面是一个示例：

let numberArray = [1, 2, 3, 4, 5];
let iterator = numberArray.entries();
for (let entry of iterator) {
    console.log(entry[0], entry[1]);
}

输出结果为：

0 1
1 2
2 3
3 4
4 5

Object 方法介绍

Object.assign()

assign() 方法用于将一个或多个源对象的属性值赋值到目标对象。该方法的语法如下：

Object.assign(target, ...sources)

其中，target 是目标对象，...sources 是一个或多个源对象。

下面是一个示例：

let targetObject = {};
let sourceObject1 = { name: 'Barry' };
let sourceObject2 = { age: 25 };
Object.assign(targetObject, sourceObject1, sourceObject2);
console.log(targetObject); // { name: 'Barry', age: 25 }

Object.is()

is() 方法判断两个值是否相同。该方法的行为与严格的 === 运算符相同，但是它可以正确的处理 NaN 和 -0。该方法的语法如下：

Object.is(value1, value2)

其中，value1 和 value2 是将要比较的值。

下面是一个示例：

console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(-0, 0)); // false
console.log(Object.is(-0, -0)); // true
console.log(Object.is(-0)); // false
console.log(Object.is(undefined, undefined)); // true
console.log(Object.is(null, undefined)); // false

Object.entries()

entries() 方法返回一个包含对象中每个键值对的可迭代对象。该方法的语法如下：

Object.entries(obj)

其中，obj 是将要返回键值对列表的目标对象。

下面是一个示例：

let targetObject = { name: 'Barry', age: 25 };
let entries = Object.entries(targetObject);
console.log(entries);

输出结果为：

[ [ 'name', 'Barry' ], [ 'age', 25 ] ]

Object.values()

values() 方法返回一个包含对象中每个值的可迭代对象。该方法的语法如下：

Object.values(obj)

其中，obj 是将要返回值的目标对象。

下面是一个示例：

let targetObject = { name: 'Barry', age: 25 };
let values = Object.values(targetObject);
console.log(values);

输出结果为：

[ 'Barry', 25 ]

Object.getOwnPropertyDescriptors()

getOwnPropertyDescriptors() 方法返回一个对象所有自身属性的描述符对象。该方法的语法如下：

Object.getOwnPropertyDescriptors(obj)

其中，obj 是将要返回自身属性描述符对象的目标对象。

下面是一个示例：

let targetObject = { name: 'Barry', age: 25 };
let descriptors = Object.getOwnPropertyDescriptors(targetObject);
console.log(descriptors);

输出结果为：

{
  name: { value: 'Barry', writable: true, enumerable: true, configurable: true },
  age: { value: 25, writable: true, enumerable: true, configurable: true }
}

总结

ES6 新增的 Array 和 Object 方法提供了很多有用的功能，使得代码更加简洁、高效。熟练掌握这些方法，可以提高前端开发效率，减少代码复杂度。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b25b2968c7c53b06b385a