ES6学会这些就够了

1.变量声明 const 和 let
在ES6之前，我们都是用 var 关键字声明变量：无论在何处声明，都会被视为声明在函数的'最顶部'(不在函数内即在全局作用域的最顶部)这就是'函数变量提升';
ES6时代，我们通常用 let 和 const 来声明变量(let 和 const 都是块级作用域：说白了{}大括号内的代码块即为 let 和 const 的作用域)：
    let 表示变量：let 的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
    const 表示常量：const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了（如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行）

2.模板字符串
①字符串拼接：将表达式嵌入字符串中进行拼接，用${}来界定
    //ES5 
    var name = 'lux'
    console.log('hello' + name)
    //es6 这种用途是趋势，需要熟练掌握
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux
②多行字符串原样输出用反引号(``)
    const template = `
    <div>
        <span>hello world</span>
    </div>`
③处理字符串几个常用的方法：
    // 1.includes：判断是否包含然后直接返回布尔值
    const str = 'hahay'
    console.log(str.includes('y')) // true

    // 2.repeat: 获取字符串重复n次
    const str = 'he'
    console.log(str.repeat(3)) // 'hehehe'
    //如果你带入小数, Math.floor(num) 来处理
    // s.repeat(3.1) 或者 s.repeat(3.9) 都当做成 s.repeat(3) 来处理

    // 3. startsWith 和 endsWith 判断是否以 给定文本 开始或者结束
    const str =  'hello world!'
    console.log(str.startsWith('hello')) // true
    console.log(str.endsWith('!')) // true

3.函数
①函数默认参数：在定义函数时给参数一个初始值，以便在参数没有被传递进去时使用。
②箭头函数：箭头函数最直观的三个特点：
(1)不需要 function 关键字来创建函数
(2)省略 return 关键字
(3)继承当前上下文的 this 关键字
    //例如：
    [1,2,3].map(x => x + 1)
    
    //等同于：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this))
当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；例如:
var people = name => 'hello' + name    //参数name就没有括号

4.更方便的数据访问--解构
①ES5我们提取对象中的信息方法如下：

    const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)
②在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，解构能让我们从对象或者数组里取出数据存为变量：
    //对象
    const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)
    //数组
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'

5.Spread Operator 展开运算符,三个点(...)
①组装对象或者数组
    //数组
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]
    
    //对象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
②获取数组或者对象除了前几项或者除了某几项的其他项
    //数组
    const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //对象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

对于 Object 而言，还可以用于组合成新的 Object 当然如果有重复的属性名，下边覆盖上边
const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
ES6学会这些就够了

猜你喜欢
