• ES6,数组的扩展,扩展运算符(...)。


    扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

    let array = [5,10];
    let items = [1,2];
    array.push(...items) console.log(array); //[5,10,1,2]

    扩展运算符后面还可以放置表达式。

    const arr = [
      ...(x > 0 ? ['a'] : []),
      'b',
    ];


    1.代替apply
    // ES5 的写法
    function f(x, y, z) {
      // ...
    }
    var args = [0, 1, 2];
    f.apply(null, args);
    
    // ES6的写法
    function f(x, y, z) {
      // ...
    }
    let args = [0, 1, 2];
    f(...args);

     

    另一个例子是通过push函数,将一个数组添加到另一个数组的尾部。

    // ES5的 写法
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    Array.prototype.push.apply(arr1, arr2);
    
    // ES6 的写法
    let arr1 = [0, 1, 2];
    let arr2 = [3, 4, 5];
    arr1.push(...arr2);



    (2)合并数组

    扩展运算符提供了数组合并的新写法。

    const arr1 = ['a', 'b'];
    const arr2 = ['c'];
    const arr3 = ['d', 'e'];
    
    // ES5 的合并数组
    arr1.concat(arr2, arr3);
    // [ 'a', 'b', 'c', 'd', 'e' ]
    
    // ES6 的合并数组
    [...arr1, ...arr2, ...arr3]
    // [ 'a', 'b', 'c', 'd', 'e' ]





    二、对象的扩展
    const foo = 'bar';
    const baz = {foo};
    baz // {foo: "bar"}
    
    // 等同于
    const baz = {foo: foo};

    除了属性简写,方法也可以简写。

    const o = {
      method() {
        return "Hello!";
      }
    };
    
    // 等同于
    
    const o = {
      method: function() {
        return "Hello!";
      }
    };

    变量的解构赋值用途很多。

    (1)交换变量的值

    let x = 1;
    let y = 2;
    
    [x, y] = [y, x];
    

    上面代码交换变量xy的值,这样的写法不仅简洁,而且易读,语义非常清晰。

    (2)从函数返回多个值

    函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

    // 返回一个数组
    
    function example() {
      return [1, 2, 3];
    }
    let [a, b, c] = example();
    
    // 返回一个对象
    
    function example() {
      return {
        foo: 1,
        bar: 2
      };
    }
    let { foo, bar } = example();



    (4)提取 JSON 数据

    解构赋值对提取 JSON 对象中的数据,尤其有用。

    let jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    };
    
    let { id, status, data: number } = jsonData;
    
    console.log(id, status, number);





    三、编码风格

    解构赋值

    使用数组成员对变量赋值时,优先使用解构赋值。

    const arr = [1, 2, 3, 4];
    
    // bad
    const first = arr[0];
    const second = arr[1];
    
    // good
    const [first, second] = arr;
     

    字符串 § 

    静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。

    // bad
    const a = "foobar";
    const b = 'foo' + a + 'bar';
    
    // acceptable
    const c = `foobar`;
    
    // good
    const a = 'foobar';
    const b = `foo${a}bar`;




    函数的参数如果是对象的成员,优先使用解构赋值。

    // bad
    function getFullName(user) {
      const firstName = user.firstName;
      const lastName = user.lastName;
    }
    
    // good
    function getFullName(obj) {
      const { firstName, lastName } = obj;
    }
    
    // best
    function getFullName({ firstName, lastName }) {
    }


  • 相关阅读:
    六大关系整理
    pthread_create多线程执行顺序诡异现象
    WinForm中 事件 委托 多线程的应用
    伪ajax上传文件
    Webx小应用的实现整理与分析
    IL反编译的实用工具
    MVC4+WebApi+Redis Session共享练习(上)
    虚拟化平台cloudstack新版本的调试
    【c++】指针参数是如何传递内存的
    NPinyin 中文转换拼音代码
  • 原文地址:https://www.cnblogs.com/ygyy/p/13602811.html
Copyright © 2020-2023  润新知