ES6基础教程

时间 2019-12-06

原文原文链接

学习ES6的前置知识：html

熟练掌握ES5的知识：由于ES6只是ES5的升级，因此你必须对ES5的基本语法达到熟练的程度，若是你还不了解ES5的基本语法，仍是脚踏实地从头开始。
了解ES6：据说并在工做学习中见过ES6，并了解ES6的用途。

第1节：ES6的开发环境搭建

工欲善其事，必先利其器。因此咱们第1节就是搭建一个基本的ES6开发环境。如今的Chrome浏览器已经支持ES6了，可是有些低版本的浏览器仍是不支持ES6的语法，这就须要咱们把ES6的语法自动的转变成ES5的语法。若是你听过我Vue课程的话，应该知道Webpack是有自动编译转换能力的，除了Webpack自动编译，咱们还能够用Babel来完成。这节课咱们就使用Babel把ES6编译成ES5。前端

创建工程目录：

先创建一个项目的工程目录，并在目录下边创建两个文件夹：src和distvue

src：书写ES6代码的文件夹，写的js程序都放在这里。
dist：利用Babel编译成的ES5代码的文件夹，在HTML页面须要引入的时这里的js文件。

编写index.html：

文件夹创建好后，咱们新建一个index.html文件。java

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
        <!DOCTYPE html> 
       
        <html  
        lang 
        = 
        "en" 
        > 
       
        <head> 
       
        <title> 
        </title> 
       
        <meta  
        charset 
        = 
        "UTF-8" 
        > 
       
        <meta  
        name 
        = 
        "viewport" 
          
        content 
        = 
        "width=device-width, initial-scale=1" 
        > 
       
                <script src="./dist/index.js"></script> 
       
        </head> 
       
        <body> 
       
                Hello ECMA Script 6 
       
        </body> 
       
        </html>

须要注意的是在引入js文件时，引入的是dist目录下的文件。webpack

 
         1 
       
        <script  
        src 
        = 
        "./dist/index.js" 
        > 
        </script>

编写index.js

在src目录下，新建index.js文件。这个文件很简单，咱们只做一个a变量的声明，并用console.log()打印出来。git

咱们用了let声明，这里let是ES6的一种声明方式，接下来咱们须要把这个ES6的语法文件自动编程成ES5的语法文件。程序员

初始化项目

在安装Babel以前，须要用npm init先初始化咱们的项目。打开终端或者经过cmd打开命令行工具，进入项目目录，输入下边的命令：es6

-y表明所有默认赞成，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产package.json文件。github

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
        { 
       
        "name" 
        : 
          
        "es6" 
        , 
       
        "version" 
        : 
          
        "1.0.0" 
        , 
       
        "description" 
        : 
          
        "" 
        , 
       
        "main" 
        : 
          
        "index.js" 
        , 
       
        "scripts" 
        : 
          
        { 
       
        "test" 
        : 
          
        "echo \"Error: no test specified\" && exit 1" 
       
        } 
        , 
       
        "keywords" 
        : 
          
        [ 
        ] 
        , 
       
        "author" 
        : 
          
        "" 
        , 
       
        "license" 
        : 
          
        "ISC" 
       
        }

能够根据本身的须要进行修改，好比咱们修改name的值。web

全局安装Babel-cli

在终端中输入如下命令,若是你安装很慢的话，可使用淘宝镜像的cnpm来进行安装。安装cnpm的方法，你们本身百度吧。

虽然已经安装了babel-cli，只是这样还不能成功进行转换，若是你不相信能够输入下边的命令试一下。

你会发现，在dist目录下确实生产了index.js文件，可是文件并无变化，仍是使用了ES6的语法。由于咱们还须要安装转换包才能成功转换，继续往下看吧。

本地安装babel-preset-es2015 和 babel-cli

安装完成后，咱们能够看一下咱们的package.json文件，已经多了devDependencies选项。

 
         1 
       
         2 
       
         3 
       
         4 
       
        "devDependencies" 
        : 
          
        { 
       
        "babel-cli" 
        : 
          
        "^6.24.1" 
        , 
       
        "babel-preset-es2015" 
        : 
          
        "^6.24.1" 
       
        }

新建.babelrc

在根目录下新建.babelrc文件，并打开录入下面的代码

这个文件咱们创建完成后，如今能够在终端输入的转换命令了，此次ES6成功转化为ES5的语法。

简化转化命令：

在学习vue 的时候，可使用npm run build 直接利用webpack进行打包，在这里也但愿利用这种方式完成转换。打开package.json文件，把文件修改为下面的样子。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
        { 
       
        "name" 
        : 
          
        "es6" 
        , 
       
        "version" 
        : 
          
        "1.0.0" 
        , 
       
        "description" 
        : 
          
        "" 
        , 
       
        "main" 
        : 
          
        "index.js" 
        , 
       
        "scripts" 
        : 
          
        { 
       
        "build" 
        : 
          
        "babel src/index.js -o dist/index.js" 
       
        } 
        , 
       
        "keywords" 
        : 
          
        [ 
        ] 
        , 
       
        "author" 
        : 
          
        "" 
        , 
       
        "license" 
        : 
          
        "ISC" 
        , 
       
        "devDependencies" 
        : 
          
        { 
       
        "babel-cli" 
        : 
          
        "^6.24.1" 
        , 
       
        "babel-preset-es2015" 
        : 
          
        "^6.24.1" 
       
        } 
       
        }

修改好后，之后咱们就可使用 npm run build 来进行转换了。

第2节：新的声明方式

经过上节课的学习咱们已经能够愉快的写代码了。在文章开始以前，我仍是要强调一件事情:你们必定要亲自动手敲代码，学习编程这个事儿，不本身动手练习是学不会的。若是你上节课尚未搭建好，你仍是先把环境搭建好，再学习这节课。

之前咱们在声明时只有一种方法，就是使用var来进行声明，ES6对声明的进行了扩展，如今能够有三种声明方式了。

字面理解ES6的三种声明方式：

var：它是variable的简写，能够理解成变量的意思。
let：它在英文中是“让”的意思，也能够理解为一种声明的意思。
const：它在英文中也是常量的意思，在ES6也是用来声明常量的，常量你能够简单理解为不变的量。

var声明：

var在ES6里是用来升级全局变量的，咱们能够先做一个最简单的实例，用var声明一个变量a,而后用console.log进行输出。

咱们能够看到JSPang在控制台已经被打印出来了。那如何理解它的做用是声明全局变量那？咱们用匿名函数给他进行一个包裹，而后在匿名函数中调用这个a变量，看看能不能调用到。

能够看到控制台输出了JSPang，这证实var确实是全局的。若是你觉的这个不够直观说明var是全局声明，还能够用区块的方式进行调用测试，先看下面的代码。

这时打印出来的值是多少呢？对，应该是3，由于var是全局声明的，会覆盖上面声明的a变量。

let局部声明

经过两个简单的例子，咱们对var的全局声明有了必定了解。那跟var向对应的是let，它是局部变量声明。仍是上面的例子，咱们试着在区块里用let声明。

这时候控制台打印出来的值就是2了。若是咱们只在区块里声明，再也不外部声明，咱们打印a时就会报错，显示找不到变量。

 
         1 
       
         2 
       
         3 
       
         4 
       
        { 
       
        let 
          
        a 
        = 
        3 
        ; 
       
        } 
       
        console 
        . 
        log 
        ( 
        a 
        ) 
        ;// 报错i is not defined

上面两个例子说明了let是局部变量声明，let声明只在区块内起做用，外部是不能够调用的。

有些刚接触JavaScript的小伙伴会疑惑了，我感受let尚未var好用，其实let是防止你的数据污染的，在大型项目中是很是有用处的。如今看一个循环的例子，咱们来看一下let的好处。

用var声明的循环

你会发现循环体外的i变量被污染了，若是在外部再使用i时就会出现问题，这是开发者不想看到的。咱们再利用let声明，就能够解决这个问题。

用let声明的循环

你执行时会发现控制台报错了，找不到循环体外的i变量。经过两种声明的比较，能够明白let在防止程序数据污染上仍是颇有用处的。咱们要努力去习惯用let声明，减小var声明去污染全局空间，在vue的使用中也要注意这点。

const声明常量

在程序开发中，有些变量是但愿声明后在业务层就再也不发生变化了，简单来讲就是从声明开始，这个变量始终不变，就须要用const进行声明。

咱们来一段用const声明错误的代码，在错误中学习const的特性也是很是好的。

在编译这段代码的过程当中，你就会发现已经报错，没法编译了，缘由就是咱们const声明的变量是不能够改变的。const是很好理解的，我就不做过多的解释说明了。

这节课咱们学了ES6的3种声明方式，var、let、const，这三种方式各有所长，既然已经学习了新技术，咱们就要拥抱它，试着在你的项目中根据状况用let和const进行声明吧，不要再只使用var了。

下节课咱们将讲解数据的解构，很高兴你能和我一块儿学习，成长为更好的本身。

第3节：变量的解构赋值

ES6容许按照必定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中能够大量减小咱们的代码量，而且让咱们的程序结构更清晰。也许你仍是不太明白，那先来一个最简单的数组解构赋值来进行赋值。

数组的解构赋值：

简单的数组解构：

之前，为变量赋值，咱们只能直接指定值。好比下面的代码：

而如今咱们能够用数组解构的方式来进行赋值。

上面的代码表示，能够从数组中提取值，按照位置的对象关系对变量赋值。

数组模式和赋值模式统一：

能够简单的理解为等号左边和等号右边的形式要统一，若是不统一解构将失败。

若是等号两边形式不同，极可能得到undefined或者直接报错。

解构的默认值：

解构赋值是容许你使用默认值的，先看一个最简单的默认是的例子。

 
         1 
       
         2 
       
        let 
          
        [ 
        foo 
          
        = 
          
        true 
        ] 
          
        = 
        [ 
        ] 
        ; 
       
        console 
        . 
        log 
        ( 
        foo 
        ) 
        ; 
          
        //控制台打印出true

上边的例子数组中只有一个值，可能你会多少有些疑惑，咱们就来个多个值的数组，并给他一些默认值。

 
         1 
       
         2 
       
        let 
          
        [ 
        a 
        , 
        b 
        = 
        "JSPang" 
        ] 
        = 
        [ 
        '技术胖' 
        ] 
       
        console 
        . 
        log 
        ( 
        a 
        + 
        b 
        ) 
        ; 
          
        //控制台显示“技术胖JSPang”

如今咱们对默认值有所了解，须要注意的是undefined和null的区别。

 
         1 
       
         2 
       
        let 
          
        [ 
        a 
        , 
        b 
        = 
        "JSPang" 
        ] 
        = 
        [ 
        '技术胖' 
        , 
        undefined 
        ] 
        ; 
       
        console 
        . 
        log 
        ( 
        a 
        + 
        b 
        ) 
        ; 
          
        //控制台显示“技术胖JSPang”

undefined至关于什么都没有，b是默认值。

 
         1 
       
         2 
       
        let 
          
        [ 
        a 
        , 
        b 
        = 
        "JSPang" 
        ] 
        = 
        [ 
        '技术胖' 
        , 
        null 
        ] 
        ; 
       
        console 
        . 
        log 
        ( 
        a 
        + 
        b 
        ) 
        ; 
          
        //控制台显示“技术胖null”

null至关于有值，但值为null。因此b并无取默认值，而是解构成了null。

对象的解构赋值

解构不只能够用于数组，还能够用于对象。

 
         1 
       
         2 
       
        let 
          
        { 
        foo 
        , 
        bar 
        } 
          
        = 
          
        { 
        foo 
        : 
        'JSPang' 
        , 
        bar 
        : 
        '技术胖' 
        } 
        ; 
       
        console 
        . 
        log 
        ( 
        foo 
        + 
        bar 
        ) 
        ; 
          
        //控制台打印出了“JSPang技术胖”

注意：对象的解构与数组有一个重要的不一样。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

圆括号的使用

若是在解构以前就定义了变量，这时候你再解构会出现问题。下面是错误的代码，编译会报错。

要解决报错，使程序正常，咱们这时候只要在解构的语句外边加一个圆括号就能够了。

 
         1 
       
         2 
       
         3 
       
        let  
        foo 
        ; 
       
        ( 
        { 
        foo 
        } 
          
        = 
        { 
        foo 
        : 
        'JSPang' 
        } 
        ) 
        ; 
       
        console 
        . 
        log 
        ( 
        foo 
        ) 
        ; 
          
        //控制台输出jspang

字符串解构

字符串也能够解构，这是由于，此时字符串被转换成了一个相似数组的对象。

总结：这节课的内容很简单，可是也有一些细节须要注意，但愿你能动手把解构练习一遍，在实战项目中解构Json数据格式仍是很广泛的，有了ES6得帮助，提升了很多工做效率。

第4节：扩展运算符和rest运算符

上节课学的解构已经能够大大增长咱们的开发效率，这节课咱们学习扩展运算符和rest运算符，它们都是…（三个点）。它们能够很好的为咱们解决参数和对象数组未知状况下的编程，让咱们的代码更健壮和简洁。

对象扩展运算符（…）：

当编写一个方法时，咱们容许它传入的参数是不肯定的。这时候可使用对象扩展运算符来做参数，看一个简单的列子：

这时咱们看到控制台输出了 1,2,3，undefined，这说明是能够传入多个值，而且就算方法中引用多了也不会报错。

扩展运算符的用处：

咱们先用一个例子说明，咱们声明两个数组arr1和arr2，而后咱们把arr1赋值给arr2，而后咱们改变arr2的值，你会发现arr1的值也改变了，由于咱们这是对内存堆栈的引用，而不是真正的赋值。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
        let  
        arr1 
        = 
        [ 
        'www' 
        , 
        'jspang' 
        , 
        'com' 
        ] 
        ; 
       
        let  
        arr2 
        = 
        arr1 
        ; 
       
        console 
        . 
        log 
        ( 
        arr2 
        ) 
        ; 
       
        arr2 
        . 
        push 
        ( 
        'shengHongYu' 
        ) 
        ; 
       
        console 
        . 
        log 
        ( 
        arr1 
        ) 
        ;

控制台输出：

 
         1 
       
         2 
       
        [ 
        "www" 
        , 
          
        "jspang" 
        , 
          
        "com" 
        ] 
       
        [ 
        "www" 
        , 
          
        "jspang" 
        , 
          
        "com" 
        , 
          
        "shengHongYu" 
        ]

这是咱们不想看到的，能够利用对象扩展运算符简单的解决这个问题，如今咱们对代码进行改造。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
        let  
        arr1 
        = 
        [ 
        'www' 
        , 
        'jspang' 
        , 
        'com' 
        ] 
        ; 
       
        //let arr2=arr1; 
       
        let  
        arr2 
        = 
        [ 
        . 
        . 
        . 
        arr1 
        ] 
        ; 
       
        console 
        . 
        log 
        ( 
        arr2 
        ) 
        ; 
       
        arr2 
        . 
        push 
        ( 
        'shengHongYu' 
        ) 
        ; 
       
        console 
        . 
        log 
        ( 
        arr2 
        ) 
        ; 
       
        console 
        . 
        log 
        ( 
        arr1 
        ) 
        ;

如今控制台预览时，你能够看到咱们的arr1并无改变，简单的扩展运算符就解决了这个问题。

rest运算符

若是你已经很好的掌握了对象扩展运算符，那么理解rest运算符并不困难，它们有不少类似之处，甚至不少时候你不用特地去区分。它也用…（三个点）来表示，咱们先来看一个例子。

这时候控制台打印出了7，说明咱们arg里有7个数组元素，这就是rest运算符的最简单用法。

如何循环输出rest运算符

这里咱们用for…of循环来进行打印出arg的值，咱们这里只是简单使用一下，之后咱们会专门讲解for…of循环。

for…of的循环能够避免咱们开拓内存空间，增长代码运行效率，因此建议你们在之后的工做中使用for…of循环。有的小伙伴会说了，反正最后要转换成ES5，没有什么差异，可是至少从代码量上咱们少打了一些单词，这就是开发效率的提升。

总结：咱们这节课学习了对象扩展运算符和reet运算符，它们两个仍是很是相似的，可是你要本身区分，这样才能在工做中运用自如。在之后的课程中还会有不少关于扩展运算符和rset运算符的妙用，让咱们一块儿期待吧。

第5节：字符串模版

这节咱们主要学习ES6对字符串新增的操做，最重要的就是字符串模版，字符串模版的出现让咱们不再用拼接变量了，并且支持在模板里有简单计算操做。小伙伴们是否是已经摩拳擦掌等不急了那？那咱们就开始吧。

字符串模版

先来看一个在ES5下咱们的字符串拼接案例:

 
         1 
       
         2 
       
         3 
       
        let  
        jspang 
        = 
        '技术胖' 
        ; 
       
        let  
        blog 
          
        = 
          
        '很是高兴你能看到这篇文章，我是你的老朋友' 
        + 
        jspang 
        + 
        '。这节课咱们学习字符串模版。' 
        ; 
       
        document 
        . 
        write 
        ( 
        blog 
        ) 
        ;

ES5下必须用+jspang+这样的形式进行拼接，这样很麻烦并且很容易出错。ES6新增了字符串模版，能够很好的解决这个问题。字符串模版再也不使用‘xxx’这样的单引号，而是换成了xxx这种形式，也叫链接号。这时咱们再引用jspang变量就须要用${jspang}这种形式了，咱们对上边的代码进行改造。

 
         1 
       
         2 
       
         3 
       
        let  
        jspang 
        = 
        '技术胖' 
        ; 
       
        let  
        blog 
          
        = 
          
        `很是高兴你能看到这篇文章，我是你的老朋友 
        $ 
        { 
        jspang 
        }。这节课咱们学习字符串模版。 
        ` 
        ; 
       
        document 
        . 
        write 
        ( 
        blog 
        ) 
        ;

能够看到浏览器出现了和上边代码同样的结果。并且这里边支持html标签，能够试着输入一些。

 
         1 
       
         2 
       
         3 
       
        let  
        jspang 
        = 
        '技术胖' 
        ; 
       
        let  
        blog 
          
        = 
          
        ` 
        < 
        b 
        >很是高兴你能看到这篇文章 
        < 
        / 
        b 
        >，我是你的老朋友 
        $ 
        { 
        jspang 
        }。 
        < 
        br 
        / 
        >这节课咱们学习字符串模版。 
        ` 
        ; 
       
        document 
        . 
        write 
        ( 
        blog 
        ) 
        ;

对运算的支持：

强大的字符串模版，在实际开发中，咱们可让后台写一个活动页面，而后轻松的输出给用户。

字符串查找

ES6还增长了字符串的查找功能，并且支持中文哦，小伙伴是否是很兴奋。仍是拿上边的文字做例子，进行操做。

查找是否存在:

先来看一下ES5的写法，其实这种方法并不实用，给咱们的索引位置，咱们本身还要肯定位置。

 
         1 
       
         2 
       
         3 
       
        let  
        jspang 
        = 
        '技术胖' 
        ; 
       
        let  
        blog 
          
        = 
          
        '很是高兴你能看到这篇文章，我是你的老朋友技术胖。这节课咱们学习字符串模版。' 
        ; 
       
        document 
        . 
        write 
        ( 
        blog 
        . 
        indexOf 
        ( 
        jspang 
        ) 
        ) 
        ;

这是网页中输出了20，咱们还要本身判断。

ES6直接用includes就能够判断，再也不返回索引值，这样的结果咱们更喜欢，更直接。

 
         1 
       
         2 
       
         3 
       
        let  
        jspang 
        = 
        '技术胖' 
        ; 
       
        let  
        blog 
          
        = 
          
        '很是高兴你能看到这篇文章，我是你的老朋友技术胖。这节课咱们学习字符串模版。' 
        ; 
       
        document 
        . 
        write 
        ( 
        blog 
        . 
        includes 
        ( 
        jspang 
        ) 
        ) 
        ;

判断开头是否存在：

 
         1 
       
        blog 
        . 
        startsWith 
        ( 
        jspang 
        ) 
        ;

判断结尾是否存在：

须要注意的是：starts和ends 后边都要加s，我开始时常常写错，但愿小伙伴们不要采坑。

复制字符串

咱们有时候是须要字符串重复的，好比分隔符和特殊符号，这时候复制字符串就派上用场了，语法很简单。

固然ES6对字符串还有一些其它操做，由于实际工做中不太使用，这里就不做太多的介绍了。但愿你能动手练习一下，并把这些新特性应用到工做中，不然可能很快就忘记了。

第6节：ES6数字操做

前端编程工做中对数字的操做是很是多的，若是你对数字操做的很差，就很难写出使人惊奇的程序，因此咱们这节课重点学习一下ES6新增的一些数字操做方法。

二进制和八进制

二进制和八进制数字的声明并非ES6的特性，咱们只是作一个常识性的回顾，由于不少新人小伙伴会把他们当成字符串或者不知道是什么，因此这算是赠送的知识点。

二进制声明：

二进制的英文单词是Binary,二进制的开始是0（零），而后第二个位置是b（注意这里大小写均可以实现），而后跟上二进制的值就能够了。

这时候浏览器的控制台显示出了21。

八进制声明：

八进制的英文单词是Octal，也是以0（零）开始的，而后第二个位置是O（欧），而后跟上八进制的值就能够了。

这时候浏览器的控制台显示出了438。

数字判断和转换

数字验证Number.isFinite( xx )

可使用Number.isFinite( )来进行数字验证，只要是数字，不管是浮点型仍是整形都会返回true，其余时候会返回false。

NaN验证

NaN是特殊的非数字，可使用Number.isNaN()来进行验证。下边的代码控制台返回了true。

判断是否为整数Number.isInteger(xx)

整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)

整数取值范围操做

整数的操做是有一个取值范围的，它的取值范围就是2的53次方。咱们先用程序来看一下这个数字是什么.

 
         1 
       
         2 
       
        let 
          
        a 
          
        = 
          
        Math 
        . 
        pow 
        ( 
        2 
        , 
        53 
        ) 
        - 
        1 
        ; 
       
        console 
        . 
        log 
        ( 
        a 
        ) 
        ; 
          
        //9007199254740991

在咱们计算时会常常超出这个值，因此咱们要进行判断，ES6提供了一个常数，叫作最大安全整数，之后就不须要咱们计算了。

最大安全整数

 
         1 
       
        console 
        . 
        log 
        ( 
        Number 
        . 
        MAX_SAFE_INTEGER 
        ) 
        ;

最小安全整数

 
         1 
       
        console 
        . 
        log 
        ( 
        Number 
        . 
        MIN_SAFE_INTEGER 
        ) 
        ;

安全整数判断isSafeInteger( )

 
         1 
       
         2 
       
        let 
          
        a 
        = 
          
        Math 
        . 
        pow 
        ( 
        2 
        , 
        53 
        ) 
        - 
        1 
        ; 
       
        console 
        . 
        log 
        ( 
        Number 
        . 
        isSafeInteger 
        ( 
        a 
        ) 
        ) 
        ; 
        //false

总结：这节课咱们学习了ES6数字的操做，方法不少，很零散，须要常常复习或者实战中慢慢熟悉。

第7节：ES6中新增的数组知识（1）

JSON数组格式转换

JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式，咱们先来看一下JSON的数组格式怎么写。

这就是一个标准的JSON数组格式，跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式均可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操做都存在于Array对象里。咱们就用Array.from(xxx)来进行转换。咱们把上边的JSON代码转换成数组，并打印在控制台。

实际开发中这种方法仍是比较经常使用的，毕竟节省了咱们代码行数，也让咱们的程序更清晰。

Array.of()方法：

它负责把一堆文本或者变量转换成数组。在开发中咱们常常拿到了一个相似数组的字符串，须要使用eval来进行转换，若是你一个老手程序员都知道eval的效率是很低的，它会拖慢咱们的程序。这时候咱们就可使用Array.of方法。咱们看下边的代码把一堆数字转换成数组并打印在控制台上：

固然它不只能够转换数字，字符串也是能够转换的，看下边的代码：

find( )实例方法:

所谓的实例方法就是并非以Array对象开始的，而是必须有一个已经存在的数组，而后使用的方法，这就是实例方法（不理解请看下边的代码，再和上边的代码进行比对，你会有所顿悟）。这里的find方法是从数组中查找。在find方法中咱们须要传入一个匿名函数，函数须要传入三个参数：

value：表示当前查找的值。
index：表示当前查找的数组索引。
arr：表示当前数组。

在函数中若是找到符合条件的数组元素就进行return，并中止查找。你能够拷贝下边的代码进行测试，就会知道find做用。

控制台输出了6，说明找到了符合条件的值，并进行返回了，若是找不到会显示undefined。

第8节：ES6中新增的数组知识（2）

fill( )实例方法：

fill()也是一个实例方法，它的做用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。

上边的代码是把数组从第二位到第五位用jspang进行填充。

数组的遍历

for…of循环：

这种形式比ES5的for循环要简单并且高效。先来看一个最简单的for…of循环。

for…of数组索引:有时候开发中是须要数组的索引的，那咱们可使用下面的代码输出数组索引。

能够看到这时的控制台就输出了0,1,2，也就是数组的索引。

同时输出数组的内容和索引：咱们用entries()这个实例方法，配合咱们的for…of循环就能够同时输出内容和索引了。

entries( )实例方法：

entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可让咱们在须要时用next()手动跳转到下一个值。咱们来看下面的代码：

总结：咱们经过两节课讲了ES6对数组的扩展，数组在咱们的实际开发中是特别重要的，几乎我天天都要编写数组的操做代码，因此这节课必定要在听完以后本身敲一遍代码。

第9节：ES6中的箭头函数和扩展

这节课开始，先不着急看ES6中的函数，而是回顾一下ES5中的函数写法。写一个函数，进行一个加法计算。

咱们声明了一个add函数，而后传入a和b两个值，返回a+b的值。而后咱们在控制台打印了这个函数的返回结果，这里是3.

默认值

在ES6中给咱们增长了默认值的操做，咱们修改上边的代码，能够看到如今只须要传递一个参数也是能够正常运行的。

主动抛出错误

在使用Vue的框架中，能够常常看到框架主动抛出一些错误，好比v-for必须有:key值。那尤大神是如何作到的那？其实很简单，ES6中咱们直接用throw new Error( xxxx ),就能够抛出错误。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
        function 
          
        add 
        ( 
        a 
        , 
        b 
        = 
        1 
        ) 
        { 
       
        if 
        ( 
        a 
          
        == 
          
        0 
        ) 
        { 
       
        throw 
          
        new 
          
        Error 
        ( 
        'This is error' 
        ) 
       
        } 
       
        return 
          
        a 
        + 
        b 
        ; 
       
        } 
       
        console 
        . 
        log 
        ( 
        add 
        ( 
        0 
        ) 
        ) 
        ;

函数中的严谨模式

咱们在ES中就常用严谨模式来进行编程，可是必须写在代码最上边，至关于全局使用。在ES6中咱们能够写在函数体中，至关于针对函数来使用。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
        function 
          
        add 
        ( 
        a 
        , 
        b 
        = 
        1 
        ) 
        { 
       
        'use strict' 
       
        if 
        ( 
        a 
          
        == 
          
        0 
        ) 
        { 
       
        throw 
          
        new 
          
        Error 
        ( 
        'This is error' 
        ) 
        ; 
       
        } 
       
        return 
          
        a 
        + 
        b 
        ; 
       
        } 
       
        console 
        . 
        log 
        ( 
        add 
        ( 
        1 
        ) 
        ) 
        ;

上边的代码若是运行的话，你会发现浏览器控制台报错，这是ES6中的一个坑，若是没人指导的话，可能你会陷进去一会。这个错误的缘由就是若是你使用了默认值，再使用严谨模式的话，就会有冲突，因此咱们要取消默认值的操做，这时候你在运行就正常了。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
        function 
          
        add 
        ( 
        a 
        , 
        b 
        ) 
        { 
       
        'use strict' 
       
        if 
        ( 
        a 
          
        == 
          
        0 
        ) 
        { 
       
        throw 
          
        new 
          
        Error 
        ( 
        'This is error' 
        ) 
        ; 
       
        } 
       
        return 
          
        a 
        + 
        b 
        ; 
       
        } 
       
        console 
        . 
        log 
        ( 
        add 
        ( 
        1 
        , 
        2 
        ) 
        ) 
        ;

得到须要传递的参数个数

若是你在使用别人的框架时，不知作别人的函数须要传递几个参数怎么办？ES6为咱们提供了获得参数的方法(xxx.length).咱们用上边的代码看一下须要传递的参数个数。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
        function 
          
        add 
        ( 
        a 
        , 
        b 
        ) 
        { 
       
        'use strict' 
       
        if 
        ( 
        a 
          
        == 
          
        0 
        ) 
        { 
       
        throw 
          
        new 
          
        Error 
        ( 
        'This is error' 
        ) 
        ; 
       
        } 
       
        return 
          
        a 
        + 
        b 
        ; 
       
        } 
       
        console 
        . 
        log 
        ( 
        add 
        . 
        length 
        ) 
        ;

这时控制台打印出了2，可是若是咱们去掉严谨模式，并给第二个参数加上默认值的话，这时候add.length的值就变成了1，也就是说它获得的是必须传入的参数。

箭头函数

在学习Vue的时候，我已经大量的使用了箭头函数，由于箭头函数真的很好用，咱们来看一个最简单的箭头函数。也就是上边咱们写的add函数，进行一个改变，写成箭头函数。