1. 数组解构 使用方括号[]
-
1.1 交换变量
let a = 1; let b = 2; let c = 3; [a, b, c] = [c, b, a]; console.log(a); // 3 console.log(b); // 2 console.log(c); // 1
-
1.2 访问数组中的元素
const arr = [,3]; const [a = '1'] = arr; const [, b = '2'] = arr; console.log(a); // 1 console.log(b); // 3
2. 对象解构 使用花括号{}
-
将对象内部属性提取到外部变量
const obj = {a: 1, b: 2}; const {a, b} = obj; console.log(a); // 1 console.log(b); // 2
function add({a, b}) { return a+b; } let res = add({a: 1, b:2}); console.log(res); // 3
注意:
如果花括号在等式的右边,那么你正在声明一个对象
const obj = { a: 1, b: 2 }
如果花括号在等式左边,那么你正在解构一个对象
const { res } = obj;
如果属性名称与对象中的变量名称相同,可以使用属性简写:
// 这里写两遍 name const name = 'Michael' const person1 = { name: name } // 对象属性简写 const person2 = { name }
3. 数组解构和对象解构的区别
- 数组使用
[]
; 对象使用{}
- 对象具有属性名称,解构时需使用这些属性名称
- 数组按顺序排列解构
4. ...
运算符
-
展开(扩展)运算符(Spread)
展开运算符用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中;如果用于数组,数组里面的所有对象都是基础数据类型,将所有基础数据类型重新拷贝到新的数组中。
const arr1 = [1,2,3,4] console.log([...arr1, 4,5,6]) // [1, 2, 3, 4, 4, 5, 6] console.log([ 4,...arr1,5,6]) // [4, 1, 2, 3, 4, 5, 6]
如果用于对象,则同名属性会被覆盖
const obj1 = {d:4, a:1, b:2 } console.log({...obj1, c:3, d:4}) // {d: 4, a: 1, b: 2, c: 3} console.log({ c:3,...obj1, d:4}) // {c: 3, d: 4, a: 1, b: 2}
展开运算符对对象实例的拷贝是一种浅拷贝,基础数据会复制一份,但是引用数据拷贝的是它的引用
const obj1 = {a:1, b:2, c:{age: 3}} const obj2 = {...obj1} obj2.a = 2 obj2.c.age = 100 console.log(obj1) // {a: 1, b: 2, c: {age: 100}} console.log(obj2) // {a: 2, b: 2, c: {age: 100}}
展开运算符可以和解构赋值结合起来
const [a, ...b] = [1,2,3,4,5] console.log(a) // 1 console.log(b) // [2, 3, 4, 5]
展开运算符可以把字符串拆成数组
console.log([..."hello"]) // ["h", "e", "l", "l", "o"]
-
剩余运算符(Rest)
const arr1 = [1,2,3] const [a, ...b] = arr1 console.log(a) // 1 console.log(b) // [2, 3]
const obj1 = {a:1, b:2, c:3} const {a, ...obj2} = obj1 console.log(obj2) // {b: 2, c: 3} console.log(a) // 1
剩余运算符只能放在最后:
const arr1 = [1,2,3,4,5] const [...b,a] = arr1 // 报错: Rest element must be last element const [a,...b,c] = arr1 // 报错: Rest element must be last element
注意:
...
可以叫展开运算符(Spread),也可以叫剩余运算符(Rest)
具体这个操作符是什么意思,要看怎么使用它。
剩余运算符一般用在函数的参数里,这样可以让函数的参数不受限制。
function fun(item, ...arr) {
console.log(item) // 1
console.log(arr) // [2, 3, 4]
}
fun(1,2,3,4)
持续更新。。。想到啥补点啥