在 ES6 中,新增了扩展运算符 ...
,可以将数组或者对象进行展开,方便使用, ES9 中的扩展运算符又进一步增强了其功能。
扩展运算符的基本用法
扩展运算符 ...
用于对数组或者对象进行展开,如下:
-- -------------------- ---- ------- -- ----- --- ---- - --- -- --- --- ---- - --- -- --- --- ---- - --------- --------- ------------------ -- --- -- -- -- -- -- -- ----- --- ---- - - ----- ------- ---- -- - --- ---- - - ---- -------- - --- ---- - --------- --------- ------------------ -- - ----- ------- ---- --- ---- -------- -
对象展开时,应当注意以下问题
1. 对象展开时,如果出现相同的属性,则后者会覆盖前者
let obj1 = {a: 1, b: 2}; let obj2 = {a: 3, c: 4}; let obj3 = {...obj1, ...obj2}; console.log(obj3); // {a: 3, b: 2, c: 4}
2. 对象展开只会展开可枚举属性
let obj1 = Object.create({a: 1}); obj1.b = 2; let obj2 = {...obj1}; console.log(obj2); // {b: 2}
3. 展开属性不一定是自身属性
let obj1 = {a: 1}; let obj2 = Object.create(obj1); obj2.b = 2; let obj3 = {...obj2}; console.log(obj3); // {b: 2, a: 1}
扩展运算符的新增功能
1. Object.fromEntries()
将一个二维数组转为对象,使用扩展运算符可以简化操作:
let arr1 = [['name', 'Lucy'], ['age', 20]]; let obj1 = Object.fromEntries(arr1); console.log(obj1); // {name: 'Lucy', age: 20} let arr2 = [['a', 1], ['b', 2]]; let obj2 = {...Object.fromEntries(arr2), c: 3}; console.log(obj2); // {a: 1, b: 2, c: 3}
2. 替代函数封装 arguments 对象
函数封装时,可以使用扩展运算符替代传统的 arguments 对象:
-- -------------------- ---- ------- -------- ------------ - ------------------ - ------ -- --- -- --- -- -- -- ---------- -------- ---------- -------- - ------------------ - ------ -- -- --- -- --- -- --
总结
通过本文的介绍,我们可以知道 ES9 中的扩展运算符不仅仅可以简化对象或者数组的展开操作,同时还能针对某些常见的实际场景提供更加实用的方法,掌握这些基础知识以及小技巧,可以帮助开发者更好、更高效地开发前端应用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/645c65bd968c7c53b0ec253b