JS解构和 ... 运算符

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) // 1console.log(arr)  // [2, 3, 4]
}
fun(1,2,3,4)

持续更新。。。想到啥补点啥

JS解构和 ... 运算符相关推荐

JS(解构) 之数组和对象中提取数据总结
解构含义解构功能含义:从复杂数据类型中(数组或对象)中提取数据的过程. JS(解构) 之数组从数组中提取首个元素方式一:基于数组下标提取元素 const names = ['zzg', 'zcx ...
JS解构的5种有趣用法
定期回顾我写的JS代码,我发现解构运算无处不在. 获取对象的属性和访问数组内容是都是很常用的操作.而解构运算使得这些操作变得非常简单明了. 在这篇文章中,我将会讲解JS解构不同于常见用法的五种使用技巧 ...
JS解构赋值：数组解构和对象解构
一种为变量赋值的新语法,一次可以为多个变量赋值. 分成两种情况: 数组解构 let [变量的集合] = [正常的数组] 举例说明: let [x, y, z] = [10, 16, 21]; 上述代码 ...
【javascript】js解构赋值中使用别名
let person = {name:"沉默小管",age:18 } //js的解构,把name别名成myName,之后就可以使用myName替换name let {name:my ...
解构给默认值_5个 JS 解构有趣的用途
1. 交换变量通常交换两个变量的方法需要一个额外的临时变量,来看看例子: let a = 1; let b = 2; let temp; temp = a; a = b; b = temp; a; ...
JS 语法糖 0 —— 解构
文章目录 1.数组解构 1.1 简介 1.2 完全解构 1.3 不完全解构 1.4 数组解构的条件 1.5 默认值 2.对象解构 2.1 简介 2.2 解构对象方法 2.3 默认值 2.4 注意点 3 ...
ES6基础语法（let、const、解构赋值、模板字符串、简化对象、箭头函数、扩展运算符）（一）
系列文章目录第二章:ES6深入(Symbol.类.迭代器.Set.Map)(二) 第三章:ES6深入(生成器.Promise.async/await)(三) 第四章:ES6+新增API拓展(对象AP ...
es6中的变量解构对象数组函数
文章目录一.变量/常量声明二.解构 2.1.数组解构 2.2对象解构 3.3.字符串解构 4.数值解构 5.布尔值解构三.对象 3.1.对象简写 3.2API拓展四.扩展运算符五.数组 5. ...
JavaScript对象解构
JS对象解构 1. 什么是对象解构 ? 2. 基础使用 2.1) 变量在解构表达式中声明变量直接使用属性的名称变量使用自定义名称 2.2) 变量在解构表达式前声明 3. 嵌套解构 4. 函数参数列 ...

JS解构和 ... 运算符

1. 数组解构使用方括号`[]`

2. 对象解构使用花括号`{}`

3. 数组解构和对象解构的区别

4. `...` 运算符

JS解构和 ... 运算符相关推荐

最新文章

热门文章

JS解构和 ... 运算符

1. 数组解构 使用方括号[]

2. 对象解构 使用花括号{}

3. 数组解构和对象解构的区别

4. ... 运算符

JS解构和 ... 运算符相关推荐

最新文章

热门文章

1. 数组解构使用方括号`[]`

2. 对象解构使用花括号`{}`

4. `...` 运算符