JavaScript初学必备 之 ES6（中）

今日歌曲分享：——有我呢

目录

续上篇：ES（上）

五、ES6解构赋值

六、ES6对象简写

七、ES6展开运算符

---

续上篇：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，即后面覆盖前面。