es6小结

作者: Love小六六 | 来源:发表于2017-10-17 17:04 被阅读0次
    1. 模板字符串
      字符串拼接不需要+,而是用``,变量用${变量名}表示
    function makeListHTML(arr) {
        return `<ul>${arr.map(function(item){
                return `<li><a href="${item.href}">${item.text}</a></li>`
            }).join('')}</ul>`
    }
    

    Tips:模板字符串里的变量的值取模板字符串定义时,变量的值,以后变量的值改变,模板字符串的值并不会变

    1. let 和 var
      let为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。
    var name = 'zach'
    while (true) {
        var name = 'obama'
        console.log(name)  //obama
        break
    }
    console.log(name)  //obama
    
    var name = 'zach'
    while (true) {
        let name = 'obama'
        console.log(name)  //obama
        break
    }
    console.log(name)  /zach
    
    1. 函数默认参数
    function Point(x = 0, y = 0) {
      this.x = x;
      this.y = y;
    }
    const p = new Point();
    
    1. 解构赋值
      ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
    let dog = {type: 'animal', hobbies:['eat','walk','sleep']}
    let {type:a,hobbies:[,b,c]} = dog
    console.log(a, b,c)   //animal walk sleep
    

    解构可以和默认参数一起使用

    function average({x=0,y=1}={}) {
        return `${x}和${y}平均值为${(x+y)/2}`;
    }
    average();//0和1平均值为0.5;
    average({x:3,y:4})//3和4平均值为3.5
    // 参数为对象
    
    1. 箭头函数
    var f = function(v) {
      return v;
    }
    var f = v=>v;
    var result = values.sort((a, b) => a - b);
    
    () => ... // 函数值内容只要一行,可省略 {}
    () => { ... } // 零个参数用 () 表示;
    x => { ... } // 一个参数可以省略 ();
    (x, y) => { ... } // 多参数不能省略 ()
    
    1. 扩散操作符和剩余操作符(...)
    • 扩散操作符
      用扩散操作符可以方便做的数组,对象的复制,合并操作等
    var arr = [1, 2, 3]
    // 复制数组
    var arr2 = ...arr 
    // 数组合并
    var arr3 = [0, ...arr, 4] // [0, 1, 2, 3, 4]
    // 对象合并
    var obj = {a:1,c:4}
    var obj2 = {b:2, ...obj} // {b:2,a:1,c:4}
    
    • 剩余操作符
      用于获取函数的多余参数,这样就不需要使用 arguments 对象了
    //写一个填充数组内容的函数 fillArray。第一个参数是要填充的数组,其余参数是填充的内容
    var fillArray=(arr, ...values)=>arr.push(...values);
    var arr = [1,2,3]
    fillArray(arr, 3, 4, 5)
    arr // [1,2,3,3, 4, 5]
    

    Tips:剩余操作符之后不能再有其他参数(即只能是最后一个参数)

    1. 对象拓展
    • Object.assign(target,...source)
      用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)
    //相同属性会被合并
    var o1 = { a: 1, b: 1, c: 1 };
    var o2 = { b: 2, f: 2 ,d:4};
    var o3 = { c: 3 };
    var o4 = {a:4,g:5};
    var obj = Object.assign({}, o1, o2, o3);
    //obj={a: 1, b: 2, c: 3, f: 2, d: 4}
    Object.assign(o4, o1);
    //o4={a: 1, g: 5, b: 1, c: 1}
    
    • Object.is()
      Object.is方法用来判断两个值是否相等,和 === 类似,比较时不会进行类型转换。
    不同点是
    +0 === -0 //true
    Object.is(+0, -0) // false
    NaN === NaN // false
    Object.is(NaN, NaN) // true
    

    相关文章

      网友评论

          本文标题:es6小结

          本文链接:https://www.haomeiwen.com/subject/qbdduxtx.html