JavaScript解构赋值

1、解构赋值

* 左右结构要相同

• 数组
  一般的赋值方法是对单个变量进行赋值，现在可以对多个变量以相同的结构赋值，按顺序赋值

let [a, b] = [1, 2]
console.log(a, b) //1 2

此时左右同为数组结构，因为右边为数组，左边赋值的时候需要写出类似的结构，变量a,b是当前作用域的变量

• 剩余参数 rest

let [a, ...b] = [1,2,3,4,5,6]
console.log(a,b) // 1 [2,3,4,5,6]
let [c, ...d] = [7]
console.log(c,d) // 7 []

其中b是将剩余的参数全部拿到了，所以是一个数组，如果拿不到就是undefined，数组 d 就是空数组

• 默认值
  如果
  1.匹配到的值是undefined
  2.有默认值，则是默认值

let [,b=1,c=2] = ['a', 'b']
console.log(b,c) // 'b' 2
let [x=1, y=x] = [2]
console.log(x,y) // 2 2

• 对象
  对象解构赋值时赋值对象的属性值，所以匹配的时候需要对象的属性名相同。

let {name, age} = {age=18, name='name'}
console.log(name,age) // 'name' 18

如果是变量名与属性名不一致，则结构上需保证两边的属性名匹配

let {
	name: myName,
	age: myAge
} = {
	name: 'name',
	age: 18
}
console.log(myName,myAge) // 'name' 18

• 函数传参解构赋值

function add([a=0,b=0]){
	return a + b
}
add([1,2,3,4]) // 3

2、扩展运算符

扩展运算符spread(…)
将…后面的参数拆分开使用或者赋值，…后面跟数组，接受参数的时候…后面是最后一个参数

function fn(...arr){
	for(let i = 0; i < arr.length; i++){
		console.log(arr[i])
	}
}
fn(1,2,3,4,5) // 1 2 3 4 5

let [a, ...b] = [1,2,3,4,5]
console.log(a,b) // 1 [2,3,4,5]

function foo(x,...y){
    console.log(x,y);
} 
foo(...[1,...[2,3],5,...[6,7]]) // 1 [2,3,5,6,7]

合并数组

let a = [1, 2]
let b = [3, 4]
let c = a.concat(b) // [1,2,3,4]
let d = [...a,...b] // [1,2,3,4]

拆分字符串

let str = 'abc'
let arr1 = str.split('') // ['a', 'b', 'c']
console.log([...str])  // ['a', 'b', 'c']