ES6之函数的扩展(一)

PrototypeZ 发布于2019-08-26 11:55 / 1290人阅读

摘要：主要讲解参数默认值参数默认值位置函数的属性参数作用域参数默认值上面的代码完全等价于而中常用的默认值赋值方式此时会进行隐式转换的情况都会被赋值为不过如果需求就是如此那还是用此种方式书写

主要讲解：

1. 参数默认值
2. 参数默认值位置
3. 函数的length属性
4. "参数"作用域

1.参数默认值

function log(x,y="babe"){
    console.log(x,y);
}
  
log(1,"")
//1 ""

log(1,[])
//1 []

log(1,0)
//1 0

log(1,false)
//1 false

log(1,null)
//1 null
-----------------------------
log(1)
//1 "babe"

log(1,undefined)
//1 "babe"

上面的代码完全等价于:

function log(x,y){
    if(y === undefined){
        y = "babe";
    }
    console.log(x,y);
}

而es5中常用的默认值赋值方式

function log(x,y){
    y = y || "babe"; 
    // 此时y会进行隐式转换 0/""/[]/false 的情况都会被赋值为"babe",不过如果需求就是如此,那还是用此种方式书写
    console.log(x,y);
}

**可以发现一个问题ES6之后很多值比较都是完全等于undefined的情况,
不像es5,""/[]/0 隐式转换为 false , null == undefined //true
----一些美丽的瑕疵都被遮掉了，以后代码就显得一览无遗了

注意:es6中进行过内部包装转换的代码参数定义是采用let,故同一层级的作用域内不要出现多次声明,会报错

用途：解构赋值关键就是看变量个数 ,{...} 括起来的其实是一个参数，在后面进行解构了而已

function log({user,pwd="123456"}={}){
    console.log(`user: ${user},password: ${pwd}`);
}
log4()
//user: undefined,password: 123456

log4({user:"babe"})
//user: babe,password: 123456

阮老师书中说的练习可以这么理解:

function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
//m1中不仅对函数参数给了默认值{},而且对待解构的x,y分别赋予了默认值0
//m2中仅仅对函数参数给了默认值{x: 0, y: 0 } ,那这就仅在函数调用时未传参或者传undefined进去的时候，使用了默认值

2.参数默认值位置

通常写法是置于函数参数的最后,可以放中间,这样一来意义就不大了，还是要手动传进来(想使用默认值就得传undefined)

function log(user="babe",pwd){
    console.log(`user: ${user},password: ${pwd}`);
}
log(undefined,123)
//user: babe,password: 123
//可以发现这种写法就毫无意义了,方法扩展性为0。当然也不会有人这样写代码了

3.函数的length属性

指代函数语气传入的参数个数 -- 不包括指定了默认值的参数(由于正常写法默认参数置于最后,length属性也仅遍历到默认参前一个为止)

function log(user="babe",pwd){
    console.log(`user: ${user},password: ${pwd}`);
}
log.length //0

function log(pwd,user="babe"){
    console.log(`user: ${user},password: ${pwd}`);
}
log.length //1

4."参数"作用域

es5中函数参数的作用域与函数体作用域处于同一层级,es6中设置了默认值之后，会另外创建一层作用域，位于函数体上面,参数作用域中不存在的变量会往上一层找寻，直至找到window下

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

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

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

ES6入门之对象的扩展

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

RiverLi 2019-05-23 11:58 评论0 收藏0
ES6入门之对象的扩展

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

AWang 2019-08-26 13:53 评论0 收藏0
ES6入门之对象的扩展

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

yearsj 2019-08-05 17:04 评论0 收藏0
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学习手稿之基本类型扩展

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

tommego 2019-08-21 18:25 评论0 收藏0