今日歌曲分享:——有我呢
目录
续上篇:ES(上)
五、ES6解构赋值
1、大致理解
解构赋值是ES6中一种JS表达式,可以快速的从对象/数组中拿到属性/值,赋值给新变量,从而使用。
2、回顾之前
先回顾ES6之前我们是怎么从数组或对象中拿到属性/值——毫无疑问,利用点(.)或下标([ ]),比如:
let arr = ["aaa","bbb","ccc"]
console.log(arr[0],arr[1],arr[2]) //aaa bbb ccc
let obj ={
name:"boo",
age:20,
home:"beijing"
}
//利用点(.)
console.log(obj.age,obj.name,obj.home) //20 'boo' 'beijing'
//利用 []
console.log(obj["age"],obj["name"],obj["home"]) //20 'boo' 'beijing'
//毫无疑问,两种方式都能成功达到目的
ES6推出解构赋值语法,使得可以使用更为简洁方便的方式。
3、解构赋值
例一 简单数组
let arr = ["aaa","bbb","ccc"]
//创建一个一一对应的变量,接收数组中的值
let [x,y,z] = arr
console.log(x,y,z)
但需要注意,这个接收的变量要和数组内容一一对应,不适用于下面的情况:
let arr = ["aaa","bbb","ccc"]
//let [x,y,z] = arr
//无法单独拿出后面的值
let [z] = arr //错误写法,要一一对应
console.log(z)
例二 多维数组(嵌套数组)
直接创建一个结构对应的变量接收值(let [q,w,[e,r,[t]]] = arr2),如下:
//多维数组 嵌套数组
let arr2 = [1,2,[3,4,[5]]]
//之前想要拿到5
console.log(arr2[2][2][0]) //5
//利用解构赋值
//直接创捷一个结构对应的变量,接收值
let [q,w,[e,r,[t]]] = arr2
console.log(t) //5
当面对稍复杂的情况是,解构赋值的优点已经可以看到了——可以轻松拿到每一个值,书写方式也很简单。
例三 简单对象
创建的变量和数组类似,内容中写对应的属性,如下:
let obj ={
name:"boo",
age:20,
home:"beijing"
}
//解构赋值
let {name,age,home} = obj
console.log(name,age,home)
例四 复杂对象
当面对复杂的情况,就能明显的看到其优势:
//复杂对象
let obj = {
name:"boo",
age: 20,
location:{
province:"hn",
city:"zz"
},
hobby:[111,222,333]
}
//解构赋值,有助于在复杂对象那么多对象数据中轻松拿到自己想要的某个属性/值
let {
name,
age,
location:{
province,
city
},
hobby:[x,y,z]
} = obj
console.log(name,age,province,city,x,y,z)
当情况复杂起来,按照之前的方法无疑是麻烦的,而用解构赋值语法可以轻松得到每一个属性/值。
例五 交换数值
这是一个小用法,我们之前交换两个变量的值,通常会找创建一个temp,利用解构赋值也能做到这一点:
var a = 10
var b = 20
var [b,a] = [a,b]
console.log(a,b) //20 10
但一定要注意,此时不能用 let 设置变量,因为其面对重复定义a、b会报错。
4、命名冲突
在使用解构赋值时,常会遇到变量名冲突的情况,这时我们可以使用别名,方法如下:
let obj ={
name:"boo",
age:20,
home:"BJ"
}
//例子随便举得
let {name:xingming,age:nianling,home:jiaxiang} = obj
console.log(xingming,nianling,jiaxiang)
六、ES6对象简写
有的业务中,我们需要传入的某些变量去组合一个对象结构,此时如果对象的key值和所需的变量一样,就可以省略;如果内部有函数,还可以省略“:function”,如下:
//-------------------- 例一 ---------------------
let name = "boo"
let sex = "man"
let objPeople = {
name:name,
sex:sex
}
//当对象的key值和后面变量一样,可以省略。
//得到:
let objpeople2 = {
name,
sex
}
console.log(objPeople) //boo man
console.log(objpeople2) //boo man
//--------------------- 例二 ---------------------
let obj = {
number:"2134124",
getNumber:function (){
console.log(this.number)
}
}
obj.getNumber() //2134124
//内部有函数的情况下,可以省略 “:function”
let obj2 = {
number:"2134124",
getNumber(){
console.log(this.number)
}
}
obj2.getNumber() //2134124
七、ES6展开运算符
1、解释
也称为扩展运算符,写作:...
2、展开数组
下面是利用展开运算符拼接展开数组的简单例子:
//连接两个数组
let a = [1,2,3]
let b = [4,5,6]
//利用concat
console.log("使用concat()拼接:")
console.log(a.concat(b)) //[1,2,3,4,5,6]
//用一个变量接收数组a、b,展开前:
let c1 = [a,b]
console.log("展开前:")
console.log(c1) //得到数组: [[1,2,3],[4,5,6]]
//利用展开运算符(...)展开后:
let c2 = [...a,...b]
console.log("展开后:")
console.log(c2) //[1, 2, 3, 4, 5, 6]
3、复制数组
复制数组有很多方法,但想要成功复制要确保不能影响到原来的数组,如下:
let a = [1,2,3]
//错误的复制,后续对b的操作会影响到数组a
let b = a
b[2] = "有影响到你吗?"
console.log(a,b)
毫无疑问,此法不可取。几种复制数组的简单方法:
方法一 concat()
concat() 用于连接多个数组,不会更改原有数组,而是返回一个新数组,其中包括连接数组的值。
let a = [1,2,3]
let b = a.concat()
b[2] = "有影响到你吗?"
console.log(a,b)
方法二 slice()
slice() 方法以新的数组对象,返回数组中被选中的元素。slice() 方法选择从给定的 start 参数开始的元素,并在给定的 end 参数处结束。slice() 方法不会改变原始数组。
let a = [1,2,3]
let b = a.slice()
b[2] = "有影响到你吗?"
console.log(a,b)
方法三 扩展运算符
把a中的元素拿出来,不会影响到啊a:
let a = [1,2,3]
let b = [...a]
b[2] = "有影响到你吗?"
console.log(a,b)
以上都是浅复制。
4、用于参数(形参、实参)
上篇提到一个特殊的函数内部自建变量 arguments,能够在函数为设置形参时接收实参,拿到调用函数传来的所有实参,同时输出一个伪数组,如下:
let test = function (){
console.log(arguments)
}
test(1,2,3,4,5)
但是箭头函数没有arguments,如果遇到这种情况,可以借助扩展运算符:
let test1 = (...arr) => {
console.log(arr)
}
test1(1,2,3,4)
let test2 = (a,b,...arr) => {
console.log(arr)
}
test2(1,2,3,4) //前面的形参接收了1、2,后面的数组接受了其余的
相当与用一个arr数组展开后接收实参。普通函数也可以这么用。
以上是形参的用法,作为一个展开的函数接收参数列表中没有的实参。
下面是实参的例子:
let arr = [1,2,3]
let test = function (a,b,c){
console.log(a,b,c)
}
test(...arr) //传实参
当接收一个数组时,比如后端传来数组arr,需要测试比如谁最大谁最小,这时候就可以用展开运算符,当作实参把数组传进函数。
5、伪数组转换
伪数组转换可以使用Array.from(),从而进行数组的一些操作。
展开运算符也可以将伪数组转换为数组,如下:
let arr = [...arguments]
6、拼接对象
往常拼接对象,可以用for循环,而展开运算符也可以达到目的:
let obj1 = {
name:"boo",
age:18
}
let obj2 = {
location:"BJ"
}
let obj3 = {
...obj1,
...obj2
}
console.log(obj3)
如果两个对象有相同key值,后面的obi2覆盖obj1,即后面覆盖前面。