• es6函数的扩展


    扩展运算符

    含义

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

    扩展运算符的应用

    (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' ]
    

      

    (2)与解构赋值结合

    扩展运算符可以与解构赋值结合起来,用于生成数组。

    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   // []
    

      如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错.

    (3)函数的返回值

    JavaScript的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

    var dateFields = readDateFields(database);
    var d = new Date(...dateFields);
    

      

    (4)字符串

    扩展运算符还可以将字符串转为真正的数组。

    [...'hello']
    // [ "h", "e", "l", "l", "o" ]
    let str = 'xuD83DuDE80y';
    
    str.split('').reverse().join('')
    // 'yuDE80uD83Dx'
    
    [...str].reverse().join('')
    // 'yuD83DuDE80x'

      如果不用扩展运算符,字符串的reverse操作就不正确。

    (5)实现了Iterator接口的对象

    任何Iterator接口的对象,都可以用扩展运算符转为真正的数组。

    var nodeList = document.querySelectorAll('div');
    var array = [...nodeList];
    

      (6)Map和Set结构,Generator函数

    let map = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);
    
    let arr = [...map.keys()]; // [1, 2, 3]
    var go = function*(){
      yield 1;
      yield 2;
      yield 3;
    };
    
    [...go()] // [1, 2, 3]

      函数式编程有一个概念,叫做柯里化(currying),意思是将多参数的函数转换成单参数的形式。

    尾递归 


    /*使用ES6的尾递归优化的Fibonacci递归算法*/


    function Fibonacci2 (n , ac1 = 1 , ac2 = 1) { if( n <= 1 ) {return ac2}; return Fibonacci2 (n - 1, ac2, ac1 + ac2); }


    /*使用ES6的尾递归优化的求阶乘递归算法*/

    function fac(n,tatal = 1){
    	if(n === 1) return tatal;
    	return fac(n-1,n*tatal);
    }
    console.log(fac(5));
    

      尾递归优化只在严格模式下生效,那么正常模式下就是采用“循环”换掉“递归”。减少调用栈

  • 相关阅读:
    【微信小程序】数组操作
    iOS中html打开APP传参
    给radio加自己的样式(图片)
    TCP和IP的三次握手和第四次挥手
    什么是HTTP协议
    http和https的区别
    微信小程序-点击图片预览
    JAVASE
    thinkphp自学笔记
    前端必须掌握的30个CSS选择器
  • 原文地址:https://www.cnblogs.com/detanx/p/es6hs.html
Copyright © 2020-2023  润新知