李厚春吧 关注:3贴子:238
  • 13回复贴,共1

【rest】 rest参数分析

只看楼主收藏回复

es6 引入了rest参数,形式为 ...变量名 来获取多余的参数,这样就不需要用arguments rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。


IP属地:河南1楼2017-05-15 17:53回复
    利用 rest参数 做一个求和函数
    function add(...values) {
    let sum = 0;
    for (var value of values) {
    sum += value;
    }
    return sum;
    }
    console.log(add(3,3,23,4))


    IP属地:河南2楼2017-05-15 17:53
    回复
      // arguments变量的写法
      function sortNumbers() {
      return Array.prototype.slice.call(arguments).sort();
      }
      Array.prototype.slice.call(arguments)把所有的参数拿出来,sort() 再进行排序。
      // rest参数的写法
      const sortNumbers = (...numbers) => numbers.sort();
      上面是rest 参数代替arguments变量的例子。


      IP属地:河南3楼2017-05-15 17:59
      回复
        es5 用apply()的写法:
        function f(x, y, z) {
        return x + y + z;
        }
        var args = [2, 3, 4,6];
        f.apply(null, args);
        es6用扩展运算符的写法:
        function f(x, y, z) {
        return x + y + z;
        }
        var args = [2, 3, 4,6];
        f(...args);


        IP属地:河南5楼2017-05-15 18:26
        回复
          整理心情,明天重新开始


          IP属地:河南来自Android客户端6楼2017-05-18 22:32
          回复
            在es5里用 Array.prototype.push.apply(arr1,arr2) 来将数组2加入数组1里 返回的是新数组的长度。改变了原数组arr1.
            var arr1 = [0, 1, 2];
            var arr2 = ['张', '王', '赵'];
            var arr = Array.prototype.push.apply(arr1, arr2)
            console.log(arr1)
            //(6) [0, 1, 2, "张", "王", "赵"]


            IP属地:河南7楼2017-05-19 11:29
            回复
              但是在es6里可以这样写
              var arr1 = [0, 1, 2];
              var arr2 = ['张', '王', '赵'];
              var arr = arr1.push(...arr2);
              返回的仍然是arr这个数组的长度,改变的是arr1
              console.log(arr1)的结果为:[0, 1, 2, "张", "王", "赵"]


              IP属地:河南8楼2017-05-19 12:12
              回复
                一:扩展运算符来 扩展数组
                在es5里 我们这样:
                var arr1 = [1,22, 33];
                var arr2 = ['今天', '明天', '后天'];
                var arr3 = ['yestoday once more'];
                var arr = arr1.concat(arr2, arr3);
                console.log(arr1);
                console.log(arr);
                // [1, 22, 33]
                //[1, 22, 33, "今天", "明天", "后天", "yestoday once more"]
                这样返回的就是新的数组,原数组并没有改变
                来扩展数组


                IP属地:河南9楼2017-05-19 12:18
                回复
                  在es6里我们这样来扩展数组:
                  var arr1 = [1,22, 33];
                  var arr2 = ['今天', '明天', '后天'];
                  var arr3 = ['yestoday once more'];
                  var arr = [...arr1, ...arr2, ...arr3];
                  console.log(arr)
                  //[1, 22, 33, "今天", "明天", "后天", "yestoday once more"]


                  IP属地:河南10楼2017-05-19 12:20
                  回复
                    二: 扩展运算符和解构赋值结合,操作数组。
                    在es5里:
                    var list = [22, 3, 19]
                    var a = list[0], rest = list.slice(1);
                    console.log(rest);
                    我们这样来操作数组。
                    slice()方法的用处: slice(start, end) end可不写,start从1开始,如果为负,则倒着数。
                    在es6里:
                    [a, ...rest] = list;
                    其他的一些例子:
                    const [first, ...rest] = [1, 2, 3, 4, 5];
                    first // 1
                    rest // [2, 3, 4, 5]
                    const [first, ...rest] = [];
                    first // undefined
                    rest // []
                    const [first, ...rest] = ["foo"];
                    first // "foo"
                    rest // []
                    如果将扩展运算符用于数组赋值,只能放在最后,负责就报错。


                    IP属地:河南11楼2017-05-19 12:32
                    回复
                      三:函数的返回值。
                      JavaScript的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。
                      var dateFields = readDateFields(database);var d = new Date(...dateFields);
                      上面代码从数据库取出一行数据,通过扩展运算符,直接将其传入构造函数Date。


                      IP属地:河南12楼2017-05-19 12:37
                      回复
                        四: 字符串
                        用扩展运算符把字符串转换为真正的数组,并且可以识别32位的unicode字符。
                        [...'hello']
                        // [ "h", "e", "l", "l", "o" ]
                        'x\uD83D\uDE80y'.length // 4
                        [...'x\uD83D\uDE80y'].length // 3
                        上面代码的第一种写法,JavaScript会将32位Unicode字符,识别为2个字符,采用扩展运算符就没有这个问题。因此,正确返回字符串长度的函数,可以像下面这样写。
                        function length(str) {
                        return [...str].length;
                        }
                        length('x\uD83D\uDE80y') // 3
                        凡是涉及到操作32位Unicode字符的函数,都有这个问题。因此,最好都用扩展运算符改写。
                        let str = 'x\uD83D\uDE80y';
                        str.split('').reverse().join('')
                        // 'y\uDE80\uD83Dx'
                        [...str].reverse().join('')
                        // 'y\uD83D\uDE80x'
                        上面代码中,如果不用扩展运算符,字符串的reverse操作就不正确。


                        IP属地:河南13楼2017-05-19 12:43
                        回复
                          五:实现了Interator接口的对象
                          任何Iterator接口的对象,都可以用扩展运算符转为真正的数组。
                          var nodeList = document.querySelectorAll('div');
                          var array = [...nodeList];
                          上面代码中,querySelectorAll方法返回的是一个nodeList对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了Iterator接口。
                          对于那些没有部署Iterator接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。
                          let arrayLike = {
                          '0': 'a',
                          '1': 'b',
                          '2': 'c',
                          length: 3
                          };
                          // TypeError: Cannot spread non-iterable object.
                          let arr = [...arrayLike];
                          上面代码中,arrayLike是一个类似数组的对象,但是没有部署Iterator接口,扩展运算符就会报错。这时,可以改为使用Array.from方法将arrayLike转为真正的数组。
                          Array.from(arrayLike);


                          IP属地:河南14楼2017-05-19 12:52
                          回复
                            六:Map和Set结构,Generator函数
                            扩展运算符内部调用的是数据结构的Iterator接口,因此只要具有Iterator接口的对象,都可以使用扩展运算符,比如Map结构。
                            let map = new Map([
                            [1, 'one'],
                            [2, 'two'],
                            [3, 'three'],
                            ]);
                            let arr = [...map.keys()]; // [1, 2, 3]
                            Generator函数运行后,返回一个遍历器对象,因此也可以使用扩展运算符。
                            var go = function*(){
                            yield 1;
                            yield 2;
                            yield 3;
                            };
                            [...go()] // [1, 2, 3]
                            上面代码中,变量go是一个Generator函数,执行后返回的是一个遍历器对象,对这个遍历器对象执行扩展运算符,就会将内部遍历得到的值,转为一个数组。
                            如果对没有iterator接口的对象,使用扩展运算符,将会报错。
                            var obj = {a: 1, b: 2};
                            let arr = [...obj]; // TypeError: Cannot spread non-iterable object


                            IP属地:河南15楼2017-05-19 12:58
                            回复