ES6 是 JavaScript 的重要版本之一,它引入了许多新的语法和 API,极大地拓展了 JavaScript 的能力。其中,ES6 对 Object 和 Array 进行了一系列的增强,使得它们的操作更加方便和高效。本文将详细介绍 ES6 中新增的 Object 和 Array 操作方法,并提供示例代码和指导意义。
Object 相关操作
Object.assign()
Object.assign() 方法用于将源对象的所有可枚举属性复制到目标对象中,并返回目标对象。语法如下:
Object.assign(target, ...sources)
其中,target 是目标对象,sources 是源对象。如果多个源对象具有相同的属性,则后面的属性将覆盖前面的属性。示例代码如下:
let target = { a: 1, b: 2 }; let source1 = { b: 3, c: 4 }; let source2 = { c: 5, d: 6 }; Object.assign(target, source1, source2); console.log(target); // { a: 1, b: 3, c: 5, d: 6 }
Object.keys()
Object.keys() 方法返回一个由目标对象的所有可枚举属性组成的数组。语法如下:
Object.keys(obj)
其中,obj 是目标对象。示例代码如下:
let obj = { a: 1, b: 2, c: 3 }; console.log(Object.keys(obj)); // ['a', 'b', 'c']
Object.values()
Object.values() 方法返回一个由目标对象的所有可枚举属性值组成的数组。语法如下:
Object.values(obj)
其中,obj 是目标对象。示例代码如下:
let obj = { a: 1, b: 2, c: 3 }; console.log(Object.values(obj)); // [1, 2, 3]
Object.entries()
Object.entries() 方法返回一个由目标对象的所有可枚举属性键值对组成的数组。语法如下:
Object.entries(obj)
其中,obj 是目标对象。示例代码如下:
let obj = { a: 1, b: 2, c: 3 }; console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]
Array 相关操作
Array.from()
Array.from() 方法将类数组对象或可迭代对象转换为数组。语法如下:
Array.from(arrayLike[, mapFn[, thisArg]])
其中,arrayLike 是类数组对象或可迭代对象,mapFn 是可选的映射函数,thisArg 是可选的映射函数的 this 值。示例代码如下:
let arrayLike = { length: 3, 0: 'a', 1: 'b', 2: 'c' }; console.log(Array.from(arrayLike)); // ['a', 'b', 'c']
Array.of()
Array.of() 方法创建一个包含任意数量参数的新数组。语法如下:
Array.of(element0[, element1[, ...[, elementN]]])
其中,element0 到 elementN 是新数组的元素。示例代码如下:
console.log(Array.of(1, 2, 3)); // [1, 2, 3]
Array.prototype.includes()
Array.prototype.includes() 方法判断目标数组是否包含指定的元素,并返回布尔值。语法如下:
array.includes(searchElement[, fromIndex])
其中,array 是目标数组,searchElement 是要查找的元素,fromIndex 是可选的起始搜索位置,默认为 0。示例代码如下:
let array = [1, 2, 3]; console.log(array.includes(2)); // true console.log(array.includes(4)); // false
Array.prototype.find()
Array.prototype.find() 方法返回目标数组中满足条件的第一个元素,如果没有找到则返回 undefined。语法如下:
array.find(callback[, thisArg])
其中,array 是目标数组,callback 是用于测试每个元素的函数,thisArg 是可选的回调函数的 this 值。示例代码如下:
let array = [1, 2, 3]; let result = array.find(function (element) { return element > 1; }); console.log(result); // 2
Array.prototype.findIndex()
Array.prototype.findIndex() 方法返回目标数组中满足条件的第一个元素的索引,如果没有找到则返回 -1。语法如下:
array.findIndex(callback[, thisArg])
其中,array 是目标数组,callback 是用于测试每个元素的函数,thisArg 是可选的回调函数的 this 值。示例代码如下:
let array = [1, 2, 3]; let index = array.findIndex(function (element) { return element > 1; }); console.log(index); // 1
总结
ES6 中的 Object 和 Array 新增的操作方法,可以极大地提高开发效率和代码质量。本文介绍了 Object.assign()、Object.keys()、Object.values()、Object.entries()、Array.from()、Array.of()、Array.prototype.includes()、Array.prototype.find() 和 Array.prototype.findIndex() 等方法,希望可以帮助读者更好地理解和应用这些 API。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/657bce25d2f5e1655d67a58c