// 解构 // 解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值 // 数组解构赋值: var arr = ['this is string', 2, 3]; // 传统方式 // var a=arr[0]; // var b=arr[1]; // var c=arr[2]; console.log('-----------------数组解构-----------------') //解构赋值,是不是简洁很多? var [a, b, c] = arr console.log(a); console.log(b); console.log(c); console.log('-----------------嵌套数组解构-----------------') // 嵌套数组解构: var arr2 = [[1, 2, [3, 4]], 5, 6]; var [[d, e, [f, g]], h, i] = arr2 console.log(d); // 1 console.log(e); // 2 console.log(f); // 3 console.log(g); // 4 console.log(h); // 5 console.log(i); // 6 console.log('-----------------函数传参解构-----------------') var arr3 = ["asdasdasd", "asd", 7788]; function fn1([a, b, c]) { //传的是数组 console.log(a); //asdasdasd console.log(b); //asd console.log(c); //7788 } fn1(arr3) console.log('-----------------for循环解构-----------------') var arr4 = [[11, 12], [21, 22], [31, 32]]; for (let [a, b] of arr4) { console.log(a) console.log(b) } //11 12 21 22 31 32] console.log('-----------------对象赋值解构-----------------') var obj = { name: "涛哥", sex: "man", age: "29", son: { sonName: "汤圆", sonSex: "boy", sonAge: "1" } } var {name, sex, age, son} = obj; console.log(name + ' ' + sex + ' ' + age); console.log(son); console.log('-----------------对象传参解构-----------------') var obj2 = { name: 'ss', sex: 'women', age: 26, son: { sonName: '大熊', sonSex: 'male', sonAge: 1 } }; function fn2({name, sex, age}) { //传的是对象 console.log(name + ' ' + sex + ' ' + age); } fn2(obj2) console.log('----------------- 变量名与对象属性名不一致解构-----------------') var obj3 = { name: 'chris', sex: 'male', age: 26 }; var {name: nickname, age: howOld} = obj3 //改变对象属性名 console.log(nickname + ' ' + howOld); //chris 26 console.log('----------------- 嵌套对象解构:-----------------') var obj4 = { name: 'ccc', sex: 'women', age: 50, son: { sonName: '镜像', sonSex: 'male', sonAge: 13 } }; var {name, sex, age, son: {sonName, sonSex, sonAge}} = obj4 console.log(sonName + ' ' + sonSex + ' ' + sonAge); obj5 = { name: 'xiaoxiao', sex: 'male', age: [1, 2, 3] } var {name, sex, age: [a, b, c]} = obj5; console.log(name + "------" + c); console.log('----------------- 嵌套对象属性重名,解构时需要更改变量名:-----------------') var obj6 = { name: 'AAAA', sex: 'ddd', age: 55, son: { name: '小父', sonSex: 'gay', sonAge: 27 } }; //赋值解构 var {name: myName, son: {name, sex, age}} = obj6 console.log(myName) console.log(name) //传参解构 function fn3({sex, age, name, son: {name: smallName, sonSex, sonAge}}) { console.log(name + ' ' + sex + ' ' + age + ' ' + smallName + ' ' + sonSex + ' ' + sonAge) } fn3(obj6); console.log('----------------- 循环解构对象:-----------------') var arr5 = [{name: '催催', age: 26}, {name: '笑笑', age: 27}, {name: '转转', age: 28}] for (let {name, age} of arr5) { console.log(name + ' ' + age + ' ') } console.log('----------------- 解构的特殊应用场景:-----------------') //变量互换 var x = 1; var y = 2 var [x, y] = [y, x] console.log(x, y) //2 1 //字符串解构 var str = 'love'; var [h, i, j, k] = str console.log(h);//l console.log(i);//o console.log(j);//v console.log(k);//e console.log('------------------- 扩展运算符 ---------------------') console.log('------------------- 扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值---------------------') var foo = function (a, b, c) { console.log(a); console.log(b); console.log(c); } var arr6 = [1, 2, 3]; //传统写法 foo(arr6[0], arr6[1], arr6[2]); console.log('-------------------使用扩展运算符----------') foo(...arr6) console.log('-------------数组深拷贝----------') var arr7 = [1, 2, 3]; var arr8 = arr7; var arr9 = [...arr7]; console.log(arr7 === arr8); // true 说明arr7和arr8指向同一个数组 console.log(arr7 === arr9); // false 说明arr7和arr9指向不同数组 console.log('--------------把一个数组插入另一个数组字面量----------') var arr10 = [...arr7, 5, 6, 7] console.log(arr10) console.log('--------------字符串转数组----------') var str2 = "iloveyou"; var arr11 = [...str2]; console.log(arr11) //["i", "l", "o", "v", "e", "y", "o", "u"] console.log('------------------- rest运算符 ---------------------') console.log('------------------- rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组 ---------------------') console.log('------------------- 主要用于不定参数,所以ES6开始可以不再使用arguments对象 ---------------------') var bar = function (...items) { for (let item of items) { console.log(item) } } bar(1, 2, 3, 4); console.log('------------------- 分割符 ---------------------') var bar2 = function (a, b, ...items) { console.log(a) console.log(b) console.log(items) } bar2(3, 45, 523, 5); console.log('------------------- rest运算符配合解构使用:---------------------') var [g, ...rest] = [1, 2, 3, 4]; console.log(g);//1 console.log(rest);//[2, 3, 4]
ES6解构和扩展运算符
最新推荐文章于 2022-09-22 19:11:42 发布