展开语法
从拷贝说起
-
数组拷贝
JavaScriptJavaScript// ES5 提供的拷贝方式 var arr1 = [1, 2, 3]; var arr2 = [].concat(arr1); // 返回一个新的数组 var arr3 = arr1.slice(0); // 返回一个新的数组 console.log(arr2); //[1, 2, 3] console.log(arr3); //[1, 2, 3]// ES6 提供的拷贝方式 var arr1 = [1, 2, 3]; var arr2 = [...arr1]; var arr1 = [1, 2, 3]; console.log(arr2); //[1, 2, 3] console.log(arr3); //[1, 2, 3] -
字面量对象拷贝
JavaScriptJavaScript// ES5 提供的拷贝方式 let obj = {a: 1, b: 2, reg: /name/, handler: (i)=> i*2}; let copy1 = {}; for(let key in obj) { copy1[key] = obj[key]; } console.log(copy1); // { a: 1, b: 2, reg: /name/, handler: [Function: handler] } let copy2 = JSON.parse(JSON.stringify(obj)); console.log(copy2); // { a: 1, b: 2, reg: {} }，这种拷贝方式会使 正则变成 {}、函数丢失// ES6 提供的拷贝方式 let obj = {a: 1, b: 2, reg: /name/, handler: (i)=> i*2}; let copy = {...obj};
语法详情
-
在字符串中的使用
const arr = [...'hello']; console.log(arr); // ["h", "e", "l", "l", "o"] const arr = 'hello'.split(''); console.log(arr); // ["h", "e", "l", "l", "o"] -
在数组中的使用
const arr1 = [1, 2]; const arr2 = ['a', ...arr1]; const arr3 = [...arr1, ...arr2]; console.log(arr2); // ['a', 1, 2] console.log(arr3); // [1, 2, 'a', 1, 2] -
在字面量对象中的使用
const obj1 = {a: 1, b: 2}; const obj2 = {...obj1, c: 30}; console.log(obj2); // {a:1, b:2, c:30} const obj3 = {b: 20, c: 30}; const obj4 = {...obj2, ...obj3}; // 合并对象 console.log(obj4); // {a:1, b:20, c:30}
小结
可以把 … 加数组或字面量当作数组或字面量中的一项，任意放入数组或字面量中不同的位置；
可以通过展开语法对数组和字面量进行浅拷贝；
在函数传参数直接把数组中的项进行展开就可以达到传递多个参数的目的；
剩余参数
函数参数
-
所谓类数组对象，就是指可以通过索引属性访问元素并且拥有 length 属性的对象；
var arrLike = { 0: 'name', 1: 'age', 2: 'job', length: 3 } -
在 ES5 中，函数经常会传入不定参数，在传入不定参数时，ES5 的给出的解决方案是通过 arguments 对象来获取函数调用时传递的参数。 arguments 对象不是一个数组，它是一个类数组对象；尽管 arguments 是一个类数组且可遍历的变量，但它终究不是数组，它不支持数组方法，因此不能调用 arguments.forEeach() 等数组的方法
function fn() { console.log(arguments); } fn('hello', 7, 'ES6')![]( "类数组")
-
ES6 给出了完美解决方案 —— 剩余参数
function fn(name, ...args) { console.log(name); // 基础参数 console.log(args); // 剩下的参数组成的数组 } fn('ES6'); // 'ES6' // [] fn('hello', 7, 'ES6'); // "hello" // [7, "ES6"]
解构剩余参数
-
数组的解构赋值
let array = [1, 2, 3, 4, 5]; let [a, b, ...others] = array; console.log(a); // 1 console.log(b); // 2 console.log(others); // [3, 4, 5] -
对象的解构赋值
let {a, b, ...others } = {a: 1, b: 2, c: 3, d: 4, e: 5} console.log(a); // 1 console.log(b); // 2 console.log(others); // {c: 3, d: 4, e: 5}
小结
-
剩余参数是为了能替代函数内部的 arguments 而引入的；
-
和展开语法相反，剩余参数是将多个单个元素聚集起来形成一个单独的个体的过程；
打赏作者
您的打赏是我前进的动力
微信
支付宝
ES6+ const
上一篇
评论
