1,解构赋值
- 解构对象和数组的区别是,对象解构出的属性名必须一致,而数组的随意。
1.1,解构对象
1.1.1,直接解构对象
允许将某个对象的字段的作用域本地化。
也就是说,提取自己需要的字段,并为它们创建相应的变量。并且这个变量的声明,会受到关键字var
或是let
的影响,
function fun() {
let person = {
name: 'www',
age: 100,
sex: 'girl'
}
var {name, sex} = person
console.log(name, sex) // www girl
}
console.log(window.sex) // undefined
复制代码
1.1.2,解构作为参数传入的对象
这里,解构了传入的对象
let getPerson = person => {
// let {firstname} = person
// console.log(`${firstname} is man`)
console.log(`${person.firstname} is man`)
}
let person = {
firstname: 'Beckham',
lastname: 'David'
}
getPerson(person)
复制代码
也可以直接在传参时解构
let getPerson = ({firstname}) => {
console.log(`${firstname} is man`)
}
let person = {
firstname: 'Beckham',
lastname: 'David'
}
getPerson(person)
复制代码
1.2,解构数组
1.2.1,基础用法
直接解构,是按数组的顺序进行的
let [first] = ['beijing', 'shanghai', 'shenzhen']
console.log(first) // beijing
let [first, second] = ['beijing', 'shanghai', 'shenzhen']
console.log(first, second) // beijing shanghai
复制代码
可以使用逗号,进行列表的匹配,跳过不需要的值
let [,,thrid] = ['beijing', 'shanghai', 'shenzhen']
console.log(thrid) // shenzhen
复制代码
1.2.2,其他用法
- 利用数组进行,变量声明并赋值时
let arr = ["one", "two", "three"];
let [first, second, third] = arr;
console.log(first); // "one"
console.log(second); // "two"
console.log(third); // "three"
复制代码
- 变量先声明后赋值时
let a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
复制代码
- 可以在解构赋值时,设置默认值
let a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
复制代码
- 交换变量,可以不用定义第三个变量
let a = 1;
let b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
复制代码
2,语义增强
与解构恰恰相反,可以从全局作用域中获取变量,并将其转为一个对象。
数组类似。
let name = 'Backham',
age = 100,
print = function () {
console.log(`${this.name},${this.age} `)
}
let person = {name, age, print}
person.print() // Backham,100
复制代码
3,扩展运算符(三点运算符)
3.1,数组
3.1.1,可以联合数组与数组,或数组与变量的内容
let country1 = ['beijing', 'shanghai', 'shenzhen']
let country2 = ['hangzhou', 'chengdu']
let all = [...country1, ...country2]
console.log(all.join()) // beijing, shanghai, shenzhen, hangzhou, chengdu
let c = 'suzhou'
let a = [c, ...country2]
console.log(a.join()) // suzhou, hangzhou, chengdu
复制代码
3.1.2,可以拆解数组
let [first, ...country] = ['beijing', 'shanghai', 'shenzhen']
console.log(country.join()) // shanghai,shenzhen
复制代码
3.1.3,可以进行浅克隆
tips,浅克隆:当对象或数组的字段值被复制时,字段所引用对象不会被复制。
let country = ['beijing', 'shanghai', 'shenzhen', {sex: 108}]
let country1 = [...country]
let c = country
console.log(c === country) //true,c和country指向同一个引用
console.log(country1 === country) // false,country1是一个新的数组
console.log(country[3] === country1[3]) //true
复制代码
用处,可以在使用一些会影响原数组的方法时,使用它的浅克隆对象。
比如,获取数组的最后一个元素,而不影响原数组(当然使用length-1
更优雅,这里只是举一个栗子)
let [...country] = ['beijing', 'shanghai', 'shenzhen']
let [last] = country.reverse()
console.log(last) // shenzhen
复制代码
3.2,对象
- 对象类似。