读书笔记:深入理解ES6 (三)

摘要:
第3章功能本章主要介绍对ES6规范中功能知识的一些修改和改进。主要目的是使JavaScript编程不易出错,更灵活。第1节函数参数1.1的默认值在ES5中,需要进一步判断函数体中的参数值。如果不满足条件,将给出默认值。例如:functionmakeRequest(url,timeout,callback){timeout=timeout||2

第三章 函数

这一章主要介绍了在ES6规范中,对于函数这一块知识进行的一些修订和改进,主要目的就是让使用JavaScript编程可以更少出错,同时也更加灵活。

第1节. 函数形参的默认值

  1.1 在ES5中,在函数体内要对形参的值进行进一步的判断,如果不满足条件,则给其一个默认值。例如:

function makeRequest(url, timeout, callback) 
{
    timeout = timeout || 2000;
    
    //other code          
}

    而在ES6中,为了更加简化函数体的代码,给形参赋默认值的操作可以直接在写参数的时候加上,以此减少函数体内的代码量。例如:

function makeRequest(url, timeout = 2000, callback)
{
        //other code
}      

   

   1.2 默认参数值对 arguments 对象的影响。

    在ES5非严格模式下,函数命名参数的变化会体现在 arguments 对象中。即,参数值改变后,arguments 对象中原来存储的值会同时发生改变;而在ES5严格模式和ES6中,参数值改变后,arguments 对象中的值不会改变,仍旧是原来的值。

第2节 处理无命名参数

  2.1 无命名参数,即没有显式声明的参数。在ES5中,可以使用 arguments  对象来表示和进行相应操作。

  2.2 在ES6中,可以使用三个点 (...) 加上一个参数名来表示不定参数。例如:

function pick( object, ...keys )
{
    // other code   
}

  注意:不定参数在使用的时候有两个限制:

        1)每个函数只能声明一个,且只能放在参数的末尾;

      2)不定参数不能用于对象字面量 setter 之中。

第3节 增强的Function构造函数

  在ES5中,可以像下面这样使用构造函数:

var add = new Function( "first", "second", "return first + second" );

console.log( add(1, 1) ); // 2

  在ES6中,Function构造函数可以使用默认参数和不定参数。例如:

var add = new Function("first", "second=first", "return first + second");

console.log( add(1, 1) ); //2
console.log( add(1) ); //2

var pickFirst = new Function( "...args", "return args[0]" );

console.log( pickFirst(1, 2) ); // 1

第4节 展开运算符

  4.1 什么是展开运算符?

  使用三个点 (...) 加上一个数组的名字,例如下面的 "...values" :

let values = [25, 50, 75, 100];
...values // 这个就是展开运算符

  4.2 展开运算符的好处是什么?

  好处就是可以让数组的元素可以作为单个的字符来使用。例如:

  Math.max()方法中,只能传入字符串作为参数,但是如果想传入一个数组,然后找到这个数组的最大值,这个时候怎么办呢?这个时候可以使用展开运算符。如下:

let values = [25, 50, 75, 100];
Math.max( ...values );

 

第5节 name属性

  5.1 JavaScript中,有多种定义函数的方式。例如:正常定义的函数、函数表达式、匿名函数等。为了便于调试函数,于是在ES6中,添加了函数的 name 属性。该属性的值可以返回当前的函数名。

  5.2 当然也有一些特殊的情况,会在函数名的前面加上一些字符串前缀。例如:

    getter函数,函数名前面会有get

    setter函数,函数名前面会有set

    bind()函数,函数名前面会有bound

  5.3 注意,函数name属性不一定和原函数名完全相同,所以它只是一个调试的辅助信息,而不能用它来获取对函数的引用。

第6节 明确函数的多种用途

  6.1 JavaScript函数有两个不同的内部方法:[[ Call ]] 、 [[ Construct ]]。

    当通过 new 关键字调用函数的时候,执行的是 [[ Construct ]] 函数。如果不是通过 new 关键字来调用函数,那么执行的就是 [[ Call ]] 函数。

  6.2 不是所有函数都有 [[ Construct ]]方法。

    例如ES6中的箭头函数就没有这个[[ Condtruct ]]方法。

  6.3 在ES6中,可以通过 new.target 这个属性来判断是否是通过 new 关键字调用的函数。

第7节 块级函数

  7.1 先抛出4个概念:

    ES5 非严格模式、ES5严格模式; ES6 非严格模式、ES6 严格模式。

  7.2 块级函数是什么?

    块级函数即在代码块中声明的一个函数。例如:

"use strict"

if (true)
{
    //在ES5中抛出语法错误,在ES6中不报错
    function doSomething()
    {
         // 空函数
     }      
}

  7.3 在ES5严格模式中,此种声明会报错。

    在ES6中,此种声明式合法的,不会报错。但是有一个小小的区别:

      ~在ES6 严格模式中,块级函数会被提升至代码块顶部,用完即销毁;

      ~在ES6 非严格模式中,块级函数会被提升至外围函数或者全局作用域的顶部

第8节 箭头函数

  8.1 定义:

    箭头函数是使用箭头 ( => ) 定义的函数。

  8.2 与传统函数的区别:

  • 没有this /  super / arguments / new.target 绑定
  • 不能通过 new 关键字调用    
  • 没有原型(Prototype)
  • 不可以改变 this 的绑定
  • 不支持 arguments 对象
  • 不支持重复的命名参数

  8.3 箭头函数与this。

    如果箭头函数被非箭头函数包裹,则 this 绑定的是最近一层非箭头函数的 this 。否则 this 的值会被设置为全局对象。

  8.4 使用场景。

    所有使用匿名函数的地方都适合使用箭头函数来改写。同时,箭头函数也适合数组处理。

第9节 尾调用优化

  9.1 什么是尾调用?

    当一个函数作为另一个函数的最后一条语句被调用时,就叫做尾调用。例如:

1 function doSomething()
2 {
3     return doSomethingElse(); //尾调用 
4 }

  9.2 使用场景:

    当写递归函数的时候,可以使用这一特性。除非你尝试优化一个函数,否则无须思考此类问题。

(本节完)

  

    

免责声明:文章转载自《读书笔记:深入理解ES6 (三)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Allegro绘制PCB流程pycharm2017版本永久激活下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

001.TypeScript简介.md

TypeScript是一门开源的,由微软开发维护的,发布于2012年10月的静态类型的语言; 他是ECMAScript的超集,支持JavaScript的所有语法和语义,并且在此基础之上提供了更多额外的特性,例如静态类型和更丰富的语法。 1. TypeScript的优点 1.1. 编译时类型检查 所有的动态语言,包括JavaScript,其在编写过程中一些拼...

【ECMAScript5】ES5基础

一、语法 区分大小写。 变量是弱类型的,可以初始化为任意值,也可以随时改变变量所存数据的类型。 每行结尾的分号可有可无,但是建议加上。 注释 单行注释以双斜杠开头(//) 多行注释以单斜杠和星号开头(/*),以星号和单斜杠结尾(*/) 代码块:用{ } 包起来的 二、变量 使用 var (variable的缩写)运算符声明变量。 可以用一个var...

ES6+转ES5(webpack+babel、指定多个js文件、自动注入)

  接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件。   所需环境node、npm、设置淘宝镜像请参考上篇进行安装,地址:https://www.cnblogs.com/puyongsong/p/12036090.html 一、新建项目...

HTML5, CSS3, ES5新的web标准和浏览器支持一览 转

本文整理了一些最重要(或者说人气比较高罢)的新标准,虽然它们多数还只是w3c的草案,离Recommendation级别还早,却已经成为新一轮浏览器大战中备受追捧的明星,开发者社区里也涌现出大量相关的demo和API封装,有些已经进入生产环境(比如google在iphone上实现的gmail离线应用),其实我觉得如今的web领域里,从厂商私有技术转换成委员会...

ES5中新增的Array方法详细说明

一、前言-索引 ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了。 ES5中新增了写数组方法,如下: forEach(js v1.6) map(js v1.6) filter(js v1.6) some(js v1.6) every(js v1.6) indexOf...

如何把es6的代码转成es5,ECMAScript 2015+代码转换神器——Babel

Babel是一个JavaScript编译器 Babel是一个工具链,主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript。以下是Babel可以为您做的主要事情: . 转换语法. 目标环境中缺少Polyfill功能(通过@ babel / polyfill). 源代码转换(codemods). 和更...