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,即后面覆盖前面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值