ES 6解构

数组模型的解构

1. 可嵌套

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

2.可忽略

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

3.不完全解构

let [a = 1, b] = []; // a = 1, b = undefined

4.剩余运算符

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

5.字符串等

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

对象

1.可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

2.不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

3.剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

4.解构默认值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

5.延展操作符/扩展运算符 语法是三个点：...

扩展的作用：将数组展开
let arr = ["red","blue",green]
console.log(...arr)  // red blue green
 
-------------------------------------------------------
重置的作用：包装成数组，多用于函数传参
function show(...a){
    console.log(arguments) // 以前的用法 [1,2,3,4,5,6]
    console.log(a)  // [1,2,3,4,5,6]
}
show(1,2,3,4,5,6)
 
-------------------------------------------------------
剩余运算的作用：将剩余的参数包装成一个数组
function show(a,b,...c){
    console.log(a)  // 1
    console.log(b)  // 2
    console.log(c)  // [3,4,5,6]
}
show(1,2,3,4,5,6)
注意：包装剩余的参数一定要放在最后，不能放在其他文位置
function show(a,...b,c){
    // 浏览器会直接报错
}
show(1,2,3,4,5,6)
原文链接：https://blog.csdn.net/qq_41772754/article/details/88086876

6.复制数组、对象：浅拷贝

let arr = [1,2,3,4];
//let arr2 = Array.from(arr) // 以前的用法
let arr2 = [...arr]
console.log(arr2)  // [1,2,3,4]
 
 
let arr = {name:"a",age:12};
let arr2 = {...arr}
console.log(arr2)  // {name:"a",age:12}
原文链接：https://blog.csdn.net/qq_41772754/article/details/88086876