ES6之函数的扩展(二)

岳光发布于2019-08-26 11:55 / 2666人阅读

摘要：主要讲解参数严格模式属性返回函数的函数名箭头函数用定义函数参数引入参数其目的是为了获取函数的多余参数数组的扩展运算符的逆向形式将参数数列转为一个数组将一个数组转为逗号分隔的参数序列有点安能辨我是雄雌的感觉参数的情况数组的扩展运算的情

主要讲解:

1. rest参数
2. 严格模式
3. name属性 -- 返回函数的函数名
4. 箭头函数 -- 用 "=>" 定义函数

1.rest参数

        ...arguments                      <=>           ...[...]
引入rest参数其目的是为了获取函数的多余参数   <=>    数组的扩展运算符...的逆向形式
将参数数列转为一个数组                      <=>    将一个数组转为逗号分隔的参数序列

function push(arr,...items){  //有点安能辨我是雄雌的感觉
    if(Array.isArray(items)){
        array = array.concat(items); // rest参数的情况
    }else{
        array.push(...items);        // 数组的扩展运算的情况
    }
}
//rest参数
push([],1,23,4,45,56)       //[1,23,4,45,56]

//数组的扩展运算
push([],...[1,23,4,45,56]); //[1,23,4,45,56]

注意:
    1.rest参数必须位于函数参数末尾,且只能存在一个rest参数,否则报错
    2.函数的length属性不包括rest参数,就跟止步于默认值参数一样,不确定的事情不考虑在内

2.严格模式

es5中函数内部可以设定严格模式,es6中函数参数使用了默认值、解构赋值、或者扩展运算符的话就不能设定严格模式
伪代码:
    function doSomething(...items){
        "use strict";
        ...
    }
    //Uncaught SyntaxError: Illegal "use strict" directive in function with non-simple parameter list
    //由于代码中基本没有在函数内部使用严格模式的情况，这个就不多了解了

3.name属性 -- 返回函数的函数名

function push(arr,...items){}    
    push.name;
    //"push"
    
    push.bind({}).name
    //"bound push"
    
let sayHi = function(){}
    sayHi.name
    //"sayHi"
let sayHi = function realName(){}
    sayHi.name
    //"realName"
    
let sayHell = new Function("x","y","console.log(x,y)");
    sayHell.name
    //"anonymous"
    
    sayHell.bind({}).name
    //"bound anonymous"
//仅仅知道有这么一个属性，具体用处未知

4.箭头函数 -- 用 "=>" 定义函数

let sayHi = name => name;
等价于:
let sayHi = function(name){
    return name;
}

用法:
    i.单个参数时,可直接写参数名
    ii.0个或两个及两个以上参数必须加括号
        let f = () => 5;
        let f = (x,y) => x+y;
        
    iii.函数代码块多于一条语句,就要使用大括号括起来
        let f = (x,y) => { ...}

**箭头函数除了简化函数的写法,特别是匿名函数.另一个重要功能就是绑定定义时所在的作用域,而非运行时动态的作用域**

像click,setTimeout,setInterval这种运行时动态改变作用域的,写成箭头函数的形式则this仍然为代码定义处的this

//计时器一个
function Timer(){
    this.count = 0;
    
    setInterval(() => {this.count++;},1000);
}

let t = new Timer();

等价的写法:
function Timer(){
    this.count = 0;
    
    let __that = this;
    setInterval(function(){__that.count++;},1000);
}
//嵌套的情况,可以以此类推.其实就是在外层作用域创建一个变量指向this,然后内层使用.每一层都会创建该层的this指向供下一层使用.

如有bug请指正Thanks♪(･ω･)ﾉ!

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107829.html

ES6入门之函数的扩展

摘要：如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。等同于等同于注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行尾调用优化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函数参数的默认值 1.1 用法在ES6之前是不能为...

dackel 2019-08-02 16:15 评论0 收藏0
ES6入门之函数的扩展

摘要：如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。等同于等同于注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行尾调用优化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函数参数的默认值 1.1 用法在ES6之前是不能为...

graf 2019-08-23 17:10 评论0 收藏0
ES6入门之对象的扩展

摘要：循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。目前，只有对象方法的简写法可以让引擎确认，定义的是对象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 属性的简洁表示法在ES6中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。...

RiverLi 2019-05-23 11:58 评论0 收藏0
ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
ES6入门之对象的扩展

摘要：属性的简洁表示法在中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 属性的简洁表示法在ES6中允许直接写入变量...

AWang 2019-08-26 13:53 评论0 收藏0