zoukankan      html  css  js  c++  java
  • ES6 常用总结——第三章(数组、函数、对象的扩展)

    1.1. Array.from()

    Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构SetMap)。

    下面是一个类似数组的对象,Array.from将它转为真正的数组。

    let arrayLike = {
    
        '0': 'a',
    
        '1': 'b',
    
        '2': 'c',
    
        length: 3};
    
    // ES5的写法var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
    
    // ES6的写法let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
    
    Array.from([1, 2, 3])
    
    // [1, 2, 3]
    
    Array.from('hello')
    
    // ['h', 'e', 'l', 'l', 'o']
    
     
    

      

     

    Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

    Array.from(arrayLike, x => x * x);
    
    // 等同于Array.from(arrayLike).map(x => x * x);
    
     
    
    Array.from([1, 2, 3], (x) => x * x)
    
    // [1, 4, 9]
    

      

    1.2. Array.of()

    Array.of方法用于将一组值,转换为数组。

    Array.of(3, 11, 8) // [3,11,8]
    
    Array.of(3) // [3]
    
    Array.of(3).length // 1
    

      

    1.3. 数组实例的entries()keys()values()

    ES6提供三个新的方法——entries()keys()values()——用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

    for (let index of ['a', 'b'].keys()) {
    
      console.log(index);
    
    }
    
    // 0// 1
    
    for (let elem of ['a', 'b'].values()) {
    
      console.log(elem);
    
    }
    
    // 'a'// 'b'
    
    for (let [index, elem] of ['a', 'b'].entries()) {
    
      console.log(index, elem);
    
    }
    
    // 0 "a"// 1 "b"
    

      

    1.4. 函数参数的默认值

    ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。

    function log(x, y = 'World') {
    
      console.log(x, y);}
    
    log('Hello') // Hello World
    
    log('Hello', 'China') // Hello China
    
    log('Hello', '') // Hello
    

      

    参数变量是默认声明的,所以不能用letconst再次声明。

    function foo(x = 5) {
    
      let x = 1;
    
     // error
    
      const x = 2; 
    
    // error
    
    }
    

      

    上面代码中,参数变量x是默认声明的,在函数体中,不能用letconst再次声明,否则会报错。

    1.5. 扩展运算符的应用

    1)合并数组

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

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

      

    1.6. 箭头函数

    ES6 允许使用箭头=>)定义函数。

    var f = v => v;

    上面的箭头函数等同于:

    var f = function(v) {

      return v;

    };

    示例

     

    $(function() {
    
           var a=()=>{
    
             const [a, b, c, d, e] = 'hello';
    
                console.log(a+"__"+b+"__"+c+"__"+d+"__"+e);
    
           }
    
            a();//不带参数
    
    //h__e__l__l__o
    
        var b=(name,password)=>{
    
             
    
                console.log("用户名:"+name+",密码:"+password);
    
           }
    
          b("张三","123456");//带参数
    
    //用户名:张三,密码:123456
    
            });
    

      

     

    1.7. 对象的扩展

    1.8. 属性的简洁表示法

    ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

    var foo = 'bar';
    
    var baz = {foo};
    
    baz // {foo: "bar"}
    
    // 等同于var baz = {foo: foo};
    

      

    上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。

    1.9. 属性的遍历

    ES6 一共有5种方法可以遍历对象的属性。

    1for...in

    for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

    2Object.keys(obj)

    Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)。

    3Object.getOwnPropertyNames(obj)

    Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)。

    4Object.getOwnPropertySymbols(obj)

    Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性。

    5Reflect.ownKeys(obj)

    Reflect.ownKeys返回一个数组,包含对象自身的所有属性,不管属性名是 Symbol 或字符串,也不管是否可枚举。

    以上的5种方法遍历对象的属性,都遵守同样的属性遍历的次序规则。

    • 首先遍历所有属性名为数值的属性,按照数字排序。
    • 其次遍历所有属性名为字符串的属性,按照生成时间排序。
    • 最后遍历所有属性名为 Symbol 值的属性,按照生成时间排序。
    Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
    
    // ['2', '10', 'b', 'a', Symbol()]
    

      

    上面代码中,Reflect.ownKeys方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性210,其次是字符串属性ba,最后是 Symbol 属性。

     

    注释:对于Object.valuesES2017刚出来的函数,大多数浏览器不支持,暂时就不列出来了

     

    brew uninstall --force libimobiledevice ios-webkit-debug-proxy
    brew install --HEAD libimobiledevice ios-webkit-debug-proxy

     

  • 相关阅读:
    Mock Server 之 moco-runner 使用指南二
    Mock Server 之 moco-runner 使用指南一
    性能测试流程图
    从程序员到项目经理(11):每个人都是管理者【转载】
    从程序员到项目经理(10):程序员加油站 --要执着但不要固执【转载】
    从程序员到项目经理(9):程序员加油站 -- 再牛也要合群【转载】
    从程序员到项目经理(8):程序员加油站 -- 不要死于直率【转载】
    从程序员到项目经理(7):程序员加油站 -- 完美主义也是一种错【转载】
    从程序员到项目经理(6):程序员加油站 -- 懂电脑更要懂人脑【转载】
    从程序员到项目经理(5):程序员加油站 -- 不是人人都懂的学习要点【转载】
  • 原文地址:https://www.cnblogs.com/dinghouchuanqi/p/7149371.html
Copyright © 2011-2022 走看看