写给女朋友的ES6新语法(常更)

一、对象的解构赋值

解构赋值 : 变量赋值的简写
解构精髓 : 当变量名 和 对象属性值一致的时候,只需要写一个

• 取出对象的属性 赋值 给 变量

    let obj = {
        name : '张三',
        age : '18',
        sex : '女'
    }
    //ES5
    let name = obj.name
    let age = obj.age
    let sex = obj.sex
    //ES6
    let {name,age,sex} = obj
    console.log(name,age,sex) // '张三',18,'女'

• 取出变量的属性 赋值 给 对象

    let username = 'admin'
    let password = '123456''
    //ES5 
    let p = {
        username : username,
        password : password
    }
    //ES6
    let p = {
        username,
        password,
        say(){
        console.log(111)
        }
    }
    console.log(p) //{username : 'admin' , password : '123456'}
    p.say() // 111

二、数组解构

• 取出数组元素 赋值给变量

    let arr = [10,20,30]
    // ES5
    let n1 = arr[0]
    let n2 = arr[1]
    let n3 = arr[2]
    let n4 = arr[3]
    
    //ES6
    let [n1,n2,n3,n4] = arr
    console.log(n1,n2,n3,n4) // 10,20,30,undefined

• 取出变量的值 赋值给数组元素

    let num1 = 1
    let num2 = 2
    let arr1 = [num1,num2]

三、数组findIndex方法

作用 : 查找元素下标 findIndex方法特点 :

1. 回调函数执行次数 != 数组长度
2. 回调函数内部的return

• return true : 循环结束.找到满足条件的元素,返回值为下标
• return false : 循环继续.如果所有的元素全部遍历还是没找到,最终返回值为 -1 代码如下 :

    let arr = [
        {name: '张三',age : 20},
        {name: '李四',age : 18},
        {name: '王五',age : 16}
    ]
    // 需求 : 找出名字为王五的人在哪里
    let res = arr.findIndex(item=>{
        if(item.name == '王五'){
            return true
        }else {
            return false
        }
    })
    //js高级可简写为 :
    let res = arr.findIndex(item => item.name == '王五')
    console.log(res) // 2 如没有此元素,则返回 -1