常用ES6

作者: 爱吃的根号三 | 来源:发表于2017-10-24 15:00 被阅读5次

    1. ``

    使用``包裹的字符串,仍然是字符串,但区别' ' 和 " "拥有更多的功能

    1.多行字符串
    let message = `Multiline
    string`;
    console.log(message);           // "Multiline
                                //  string"
    console.log(message.length);    // 16
    
    2.产生替换位
    let name = "Nicholas",
    message = `Hello, ${name}.`;
    console.log(message);    //Hello, Nicholas.
    
    3.标签化模板

    模板字符串的一种更高级的形式称为带标签的模板字符串。它允许您通过标签函数修改模板字符串的输出。标签函数的第一个参数是一个包含了字符串字面值的数组(在本例中分别为“Hello”,“world”和"");第二个参数,在第一个参数后的每一个参数,都是已经被处理好的替换表达式(在这里分别为“15”和“50”)。 最后,标签函数返回处理好的字符串。在下面的例子中,命名这个标签并没有什么特殊的地方,这个函数的名字可以是任何你想要的。

    var a = 5;
    var b = 10;
    
    function tag(strings, ...values) {
      console.log(strings[0]); // "Hello "
      console.log(strings[1]); // " world "
      console.log(strings[2]); // ""
      console.log(values[0]);  // 15
      console.log(values[1]);  // 50
    
      return "Bazinga!";
    }
    
    tag`Hello ${ a + b } world ${ a * b}`;
    // "Bazinga!"
    

    2.箭头函数 =>

    1.this与闭包
    2.简写

    在Array类的方法很常见

    let timeOut = setTimeout(
      () => next(action),
      action.meta.delay
    )
    

    3.解构

    4.扩展语句

    1.用于函数调用
    myFunction(...iterableObj)
    
    2.复制一个数组
    let arr = [1, 2, 3];
    let arr2 = [...arr]; // 就像是 arr.slice()
    
    arr2.push(4); 
    
    console.log(arr2) ;// [1, 2, 3, 4]
    // arr 不受影响
    
    3.一个更好的连接数组的方法
    let [arr1, arr2] = [[0, 1, 2], [3, 4, 5]];
    
    //直接连接
    console.log([...arr1, ...arr2]);
    

    let parts = ['shoulder', 'knees'];
    let Tshirts = ['Lee', 'Nike'];
    
    let lyrics = ['head', ...parts, 'and', 'toes']; //可以在任何位置
    
    4.将类数组对象转换成数组
    var nodeList = document.querySelectorAll('div');
    var array = [...nodeList];
    

    如果需要用[...nodeList],则确保nodeList为数组或者可遍历对象(iterables)
    (未完待续)

    相关文章

      网友评论

          本文标题:常用ES6

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