ES6新特性

命令行工具

常用的命令行工具有两种：

• cmd命令行工具
• PowerShell命令行工具

CMD命令行

1. 打开命令行窗口

   1. win:打开窗口：win+R,cmd
   2. mac:command+空格，输入terminal

2. 选择盘符：盘符名+:,c:

3. 查看盘符及目录文件与文件夹：win:dir,mac:ls

4. 清空命令行信息：win:cls,mac:clear

5. 进入文件夹或目录:cd+文件夹名称

6. 返回上级目录:cd../

7. 快速补全目录或文件夹名称:tab

8. 创建文件夹：mkdir 文件夹名称

9. 查看历史输入的命令：上下按键

PowerShell打开方式

1. 打开方式

   1. 在开始位置搜索PowerShell打开
   2. 在对应的文件按住 shift+右键 打开

2. 其他保持一致

ECMAScript6 简介

ECMAScript和JavaScript的关系

ECMAScript是JavaScript的规格，后者是前者的实现，在一般场合下，二者可以相互替换。

ES6新特性

1. let和const命令
2. 变量的解构赋值
3. 字符串扩展
4. 函数扩展
5. 数组扩展
6. 对象扩展
7. 运算符扩展
8. Promise对象
9. Class
10. 继承

node.js的安装

node.js安装地址

大量的库

在安装node.js的同时，会附带一个npm命令，npm是一个Node包管理工具

npm镜像

由于服务器在国外，访问速度较慢，我们可以用国内的镜像

阿里镜像地址
npm镜像地址

在命令行运行如下命令即可
npm install -g cnpm --registry=https://registry.npmmirror.com

Babel转码器

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在老版本浏览器执行。这意味着，我们可以用，ES6的方式编写，而不用担心环境的问题。

浏览器支持性查看https://caniuse.com/

Babel官网https://babeljs.io/

安装流程

• 安装Babel

安装在项目的根目录下npm install --save-dev @babel/core

• 配置文件.babelrc

Babel的配置文件是.babelrc，新建一个.babelrc,存放在根目录下。使用Babel的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下（将这段代码粘贴到.babelrc中）

{
    "presets":[],
    "plugins":[]
}

• 转码规则

presets字段是设定转码规则，官方提供以下规则集，可以按需安装(在项目根目录下安装)

npm install --save-dev @babel/preset-env

• 将规则加入.babelrc

{
    "presets":["@babel/env"],
    "plugins":[]
}

Babel命令行转码

根目录

npm install --save-dev @babel/cli

基本用法如下

npx babel 需转码的文件

将结果写入一个文件

npx babel 需转码的文件 -o 转出的文件名

或

npx babel 需转码的文件 -out-file 转出的文件名

let命令

ES6新增了let命令，用于声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块中有效。

let块级作用域

    <script>
        /*
        1.var 关键字值函数级别作用域
        2.let 关键字
            1.是块级作用域

        */
        if(true){
            var i = 10
        }
        document.write(i)

        if(true){
            let j = 20
            alert(j)
        }
        document.write(j)   // 这个就不会响应
    </script>

在for循环中就很适合用let

<script>
    for(let i = 0 ;i<10;i++){
        document.write(i)           
    }
    document.write(i) // 打印不出来
</script>

const命令

const声明一个只读变量，一旦声明，常量的值就不可以改变。

const声明的变量不可改变值，这意味着 const一旦声明变量，就必须立即初始化，不能以后赋值。

const的作用域和let相同，是块级作用域

const必须先声明再使用

const声明的常量，不可重复声明

对象解构赋值

解构可以用于对象

    <script>

        var user = {
            name :"iwen",
            age:20
        }

        const {name,age} = user // 将user解开，赋给name和age
        console.log(name,age); // 直接调用，而不使用user.name,user.age
    </script>
</body>

对象的属性没有次序，但是变量名必须和属性名相同

字符串扩展

字符串Unicode表示法

ES6加强了对Unicode的支持，允许采用\uxxxx 形式表示一个字符

字符串遍历接口

for...of循环遍历

    <script>
        for (let i of "Hello"){
            document.write(i)
        }
    </script>

模板字符串

是增强版的字符串，用反引号标识。它可以当做普通字符串使用，也可以定义多行字符串，或者在字符串中嵌入变量。

一般在HTML中

    <script>
        var url = "http://httpbin.org"
        var str = "测试"

        var test = "<a href='"+url+"'>"+str+"</a>"
        console.log(test);
    </script>

使用模板字符串

<script>
    var test = `<a href="${url}">${str}</a>`
</script>

字符串新增方法

传统上 js只有indexOf方法，可以确定一个字符串是否包含在另一个字符串中.

ES6又提供了三种方法includes()、startsWith()、endsWith()

• includes(): 返回布尔值，表示是否找到了参数字符串
• startsWith(): 返回布尔值，表示参数是否在原字符串的头部
• endsWith(): 返回布尔值，表示参数是否在原字符串的尾部

    <script>
        let s = "Hello World"
        var s1 = s.startsWith("Wo",3) //false
        var s2 = s.includes(" ")    // true
        var s3 = s.endsWith("ld")   //  true
        document.write(s1,s2,s3)
    </script>

repeat()

repeat()方法返回一个字符串，表示将原字符串重复n次

    <script>
        var s = "Hello World"
        var s4 = s.repeat(3)
    </script>

trimStart()和trimEnd()

用于去掉前空格或后空格

at()

接受一个整数作为参数返回参数指定位置的字符，支持负索引

<script>
    const str = "hello"
    str.at(1) //e
    str.at(-1) //0
</script>

如果参数超出了字符串的范围，则返回undefined

数组扩展-扩展运算符

扩展运算符是三个点 ...。将一个数组转为用逗号分隔的参数序列

    <script>
        console.log([1,2,3]);   //(3) [1, 2, 3]
        console.log(...[1,2,3]);    // 1 2 3
        console.log(1,2,...[3,4,5,6],7,8);  //1 2 3 4 5 6 7 8
        console.log(...[1,2,3],...[4,5,6]); //1 2 3 4 5 6
    </script>

数组扩展-新增方法

Array.from()

用于将类数组转为真正的数组

常见的类数组有3类：

• arguments
• 元素集合
• 类似数组的对象

Array.of()

用于将一组值转为数组

对象的扩展

属性简介表示法

ES6允许在大括号中，直接写入变量和函数，作为对象的属性和方法。

<script>
        var name = "iwen"
        var age = 20
        var user = {
            // 属性名和属性值的名称相同，就可以省略
            // name:name,
            name,
            age
        }
        console.log(user.name,user.age); //iwen 20

    </script>