ES6 学习笔记

男娘i 2023-01-02 15:24 221阅读 0赞

### 文章目录 ###

*  ES6 学习笔记
 *   *  一、ES6介绍
     *  二、ES6兼容性
     *  三、变量 let 和 常量 const
     *  四、函数
     *   *  4.1 箭头函数
         *   *  4.1.1 箭头函数没有单独的this
         *  五、参数展开符
     *  六、解构赋值
     *   *  6.1 对象的解构赋值
         *  6.2 数组的解构赋值
     *  七、数组方法
     *   *  7.1 map 映射
         *  7.2 reduce 汇总
         *  7.3 filter 过滤
         *  7.4 forEach 循环迭代
     *  八、字符串方法
     *   *  8.1 startsWith
         *  8.2 endsWith
         *  8.3 字符串模版
     *  九、Symbol
     *  十、Map 与 Set
     *   *  10.1 Map 对象
         *  10.2 Maps 和 Objects 的区别
         *  10.3 Set 对象
     *  十一、Class 类
     *  十二、ES6 模块
     *   *  12.1 export 与 import
         *  12.2 import 命令的特点
         *  12.3 export default 命令
     *  十三、Promise
     *   *  13.1 Promise 对象
         *  13.2 Promise 状态
         *  13.3 then 方法
         *  13.4 Promise.all(promiseArray)方法
         *  13.5 Promise.race(\[p1, p2, p3\])
     *  十四、generator
     *   *  14.1 Generator 函数组成
         *  14.2 执行机制
         *  14.3 yield
         *  14.4 next
         *  14.5 return
         *  14.6 generator-实例
     *  十五、async/await
     *   *  15.1 async
         *   *  15.1.1 语法
             *  15.1.2 返回值
         *  15.2 await
         *   *  15.2.1 语法
             *  15.2.2 返回值
     *  十六、ES7 预览

# ES6 学习笔记 #

## 一、ES6介绍 ##

ECMAScript 和 JavaScript

*  ECMA 是标准，JS 是实现
 *  ECMAScript 简称 ECMA 或 ES

## 二、ES6兼容性 ##

ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, NodeJS

*  解决不兼容办法，编译、转换
 *  在线转换
 *  或者提前编译

[Babel 中文网][Babel]

*  [Babel 入门教程 阮一峰][Babel _]
 *  Babel 是一个 JavaScript 编译器
 *  一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
 *  现在就用 ES6 编写程序，而不用担心现有环境是否支持

## 三、变量 let 和 常量 const ##

var 的问题

*  可以重复声明，没有报错和警告
 *  无法限制修改
 *  全局变量，挂载在顶层对象(window)
 *  没有块级作用域， `{ }`
 *  会出现变量提升  
    变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

let 和 const

*  不能重复声明
 *  都是块级作用域, `{ }` 块内声明的，块外无效
 *  let 是变量，可以修改
 *  const 是常量，不能修改

## 四、函数 ##

### 4.1 箭头函数 ###

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。

箭头函数，就是function函数的简写

*  如果只有一个参数，`()` 可以省
 *  如果只有一个`return`，`{}`可以省

// 普通函数
    function name() { 
    
    }
    // 箭头函数，去掉 function， 加上 =>
    () => { 
    
    }

#### 4.1.1 箭头函数没有单独的this ####

箭头函数的 this 始终指向函数定义时的 this，而非执行时

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：

*  如果是该函数是一个构造函数，this指针指向一个新的对象
 *  在严格模式下的函数调用下，this指向undefined
 *  如果是该函数是一个对象的方法，则它的this指针指向这个对象
 *  call和apply可以改变this的指向，但是在箭头函数中是无效的。

function Person() { 
      // Person() 构造函数定义 `this`作为它自己的实例.
      this.age = 0;
    
      setInterval(function growUp() { 
        // 在非严格模式, growUp()函数定义 `this`作为全局对象,
        // 与在 Person()构造函数中定义的 `this`并不相同.
        this.age++;
      }, 1000);
    }
    
    var p = new Person();

在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。

function Person() { 
      var that = this;
      that.age = 0;
    
      setInterval(function growUp() { 
        // 回调引用的是`that`变量, 其值是预期的对象.
        that.age++;
      }, 1000);
    }

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

function Person(){ 
      this.age = 0;
    
      setInterval(() => { 
        this.age++; // |this| 正确地指向 p 实例
      }, 1000);
    }
    
    var p = new Person();

### 五、参数展开符 ###

参数扩展／展开 `...args`

*  收集剩余的参数，必须当到最后一个参数位置
 *  展开数组，简写，效果和直接把数组的内容写在这儿一样
 *  默认参数

function show(a, b, ...args) { 
        console.log(a)
        console.log(b)
        console.log(args)
    }
    console.log(show(1, 2, 3, 4, 5))
    
    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    let arr3 = [...arr1, ...arr2]
    console.log(arr3)
    
    function show2(a, b=5, c=8) { 
        console.log(a, b, c)
    }
    show2(88, 12)

## 六、解构赋值 ##

### 6.1 对象的解构赋值 ###

通过 “\{\}” 去简化键值对取值的操作

let obj = { 
        username:'webpilot',
        userid:12831,
        profession:'webDeveloper',
        region:'beijing'
    }//同样还是这个数据
     
    let { username,userid,profession,region} = obj;

就是从obj里面取出前面花括号里面变量所对应的值，并且对应的赋值给花括号里面的对象。

使用冒号设置别名

let { username:n} = obj;

通过等号设置默认值

let { username:n} = obj;

### 6.2 数组的解构赋值 ###

对象用的是 “\{\}” 而数组要用 “\[\]” 中括号

let arr = ['a','b','c','d','e','f','g'];
    let [first,second,third] = arr;
    console.log(first,second,third);//a b c

## 七、数组方法 ##

### 7.1 map 映射 ###

原数组被“映射”成对应新数组

*  map()会分配内存空间存储新数组并返回，不会修改原数组

let arr = [12, 5, 8]
    let result = arr.map(function (item) { 
        return item*2
    })
    let result2 = arr.map(item=>item*2) // 简写
    console.log(result)
    console.log(result2)
    
    let score = [18, 86, 88, 24]
    let result3 = score.map(item => item >= 60 ? '及格' : '不及格')
    console.log(result3)
    
    // 结果
    [ 24, 10, 16 ]
    [ 24, 10, 16 ]
    [ '不及格', '及格', '及格', '不及格' ]

### 7.2 reduce 汇总 ###

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

*  用于比如，算个总数，算个平均

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

*  total 必需。初始值, 或者计算结束后的返回值。
 *  currentValue 必需。当前元素
 *  currentIndex 可选。当前元素的索引
 *  arr 可选。当前元素所属的数组对象。

// 累加
    var arr = [1, 3, 5, 7]
    var result = arr.reduce(function (tmp, item, index) { 
        //tmp 上次结果，item当前数，index次数1开始
        console.log(tmp, item, index)
        return tmp + item
    })
    console.log(result)
    
    // 计算平均值
    var arr = [1, 3, 5, 7]
    var result = arr.reduce(function (tmp, item, index) { 
        if (index != arr.length - 1) {  // 不是最后一次
            return tmp + item
        } else { 
            return (tmp + item)/arr.length
        }
    })
    console.log(result)  // 平均值

### 7.3 filter 过滤 ###

filter将数组中符合条件的项组合成新的数组返回

*  filter 过滤器 保留为true的

var arr = [12, 4, 8, 9]
    var result = arr.filter(item => (item % 3 === 0) ? true : false)
    console.log(result)
    var result = arr.filter(item => item % 3 === 0)
    console.log(result)
    
    var arr = [
        {  title: '苹果', price: 10 },
        {  title: '西瓜', price: 20 },
    ]
    var result = arr.filter(json => json.price >= 20)
    console.log(result)

### 7.4 forEach 循环迭代 ###

forEach()不会返回数据，会修改原来的数组

var arr = [12, 4, 8, 9]
    var result = arr.forEach(item => console.log(item))
    var result = arr.forEach((item, index)=>console.log(item, index))

## 八、字符串方法 ##

### 8.1 startsWith ###

startsWith() 方法用于检测字符串是否以指定的子字符串开始。

var url = 'http://qq.com'
    console.log(url.startsWith('http')) // true

### 8.2 endsWith ###

判断参数字符串是否在原字符串的尾部。

var url = 'http://qq.com'
    console.log(url.endsWith('com')) // true

### 8.3 字符串模版 ###

模板字符串相当于加强版的字符串，用反引号 \`,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

let info = `My Name is ${ name},I am ${ age+1} years old next year.`

## 九、Symbol ##

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。

## 十、Map 与 Set ##

### 10.1 Map 对象 ###

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

### 10.2 Maps 和 Objects 的区别 ###

*  一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
 *  Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
 *  Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
 *  Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

### 10.3 Set 对象 ###

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

// 数组去重
    var mySet = new Set([1, 2, 3, 4, 4]);
    [...mySet]; // [1, 2, 3, 4]
    
    // 并集
    var a = new Set([1, 2, 3]);
    var b = new Set([4, 3, 2]);
    var union = new Set([...a, ...b]); // {1, 2, 3, 4}

## 十一、Class 类 ##

class (类)作为对象的模板被引入，可以通过 class 关键字定义类

*  新版面向对象
    
     *  有了 class 关键字、构造器
     *  class 里面直接加方法
     *  继承，super 超类==父类

class User { 
        constructor(name, pass) { 
            this.name = name
            this.pass = pass
        }
    
        showName() { 
            console.log(this.name)
        }
        showPass() { 
            console.log(this.pass)
        }
    }
    
    var u1 = new User('able2', '111')
    u1.showName()
    u1.showPass()
    
    // 新版本继承
    class VipUser extends User { 
        constructor(name, pass, level) { 
            super(name, pass)
            this.level = level
        }
        showLevel(){ 
            console.log(this.level)
        }
    }
    
    v1 = new VipUser('blue', '123', 3)
    v1.showLevel()

constructor 方法是类的构造函数，是一个默认方法，通过 new 命令创建对象实例时，自动调用该方法。

在 constructor 中必须调用 super 方法，因为子类没有自己的 this 对象，而是继承父类的 this 对象，然后对其进行加工,而 super 就代表了父类的构造函数。

prototype 属性使您有能力向对象添加属性和方法。

## 十二、ES6 模块 ##

ES6 的模块化分为导出（export） @与导入（import）两个模块。

### 12.1 export 与 import ###

模块导入导出各种类型的变量，如字符串，数值，函数，类。

*  导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。
 *  不仅能导出声明还能导出引用（例如函数）。
 *  export 命令可以出现在模块的任何位置，但必需处于模块顶层。
 *  import 命令会提升到整个模块的头部，首先执行。

### 12.2 import 命令的特点 ###

**只读属性**：不允许在加载模块的脚本里面，改写接口的引用指向，即可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值。

**单例模式**：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import 。

**静态执行特性**：import 是静态执行，所以不能使用表达式和变量。

### 12.3 export default 命令 ###

*  在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
 *  export default 中的 default 是对应的导出接口变量。
 *  通过 export 方式导出，在导入时要加\{ \}，export default 则不需要。
 *  export default 向外暴露的成员，可以使用任意变量来接收。

var a = "My name is Tom!";
    export default a; // 仅有一个
    export default var c = "error"; 
    // error，default 已经是对应的导出变量，不能跟着变量声明语句
     
    import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收

## 十三、Promise ##

是异步编程的一种解决方案。

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

### 13.1 Promise 对象 ###

*  用同步的方式来书写异步代码
 *  Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数
 *  改善了可读性，对于多层嵌套的回调函数很方便
 *  充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口

function f1(resolve, reject) { 
      // 异步代码...
    }
    var p1 = new Promise(f1);
    p1.then(f2); // f1的异步操作执行完成，就会执行f2。

### 13.2 Promise 状态 ###

Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

### 13.3 then 方法 ###

then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

在 JavaScript 事件队列的当前运行完成之前，回调函数永远不会被调用。

可以添加多个回调函数，它们会按照插入顺序并且独立运行。

### 13.4 Promise.all(promiseArray)方法 ###

*  将多个Promise对象实例包装，生成并返回一个新的Promise实例
 *  promise数组中所有的promise实例都变为resolve的时候，该方法才会返回
 *  并将所有结果传递results数组中
 *  promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象
    
        var p1 = Promise.resolve(1),
            p2 = Promise.resolve(2),
            p3 = Promise.resolve(3);
        Promise.all([p1, p2, p3]).then(function (results) { 
            console.log(results);  // [1, 2, 3]
        });

### 13.5 Promise.race(\[p1, p2, p3\]) ###

*  Promse.race就是赛跑的意思
 *  哪个结果获得的快，就返回那个结果
 *  不管结果本身是成功状态还是失败状态

## 十四、generator ##

ES6 新引入了 Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。

### 14.1 Generator 函数组成 ###

Generator 有两个区分于普通函数的部分：

*  一是在 function 后面，函数名之前有个 \* ；
 *  函数内部有 yield 表达式。

其中 \* 用来表示函数为 Generator 函数，yield 用来定义函数内部的状态。

function* func(){ 
     console.log("one");
     yield '1';
     console.log("two");
     yield '2'; 
     console.log("three");
     return '3';
    }

### 14.2 执行机制 ###

Generator 函数不会像普通函数一样立即执行，而是返回一个指向内部状态对象的指针，所以要调用遍历器对象Iterator 的 next 方法，指针就会从函数头部或者上一次停下来的地方开始执行

f.next();
    // one
    // {value: "1", done: false}
     
    f.next();
    // two
    // {value: "2", done: false}
     
    f.next();
    // three
    // {value: "3", done: true}
     
    f.next();
    // {value: undefined, done: true}

调用 next 方法时，从 Generator 函数的头部开始执行，先是打印了 one ,执行到 yield 就停下来，并将yield 后边表达式的值 ‘1’，作为返回对象的 value 属性值，此时函数还没有执行完， 返回对象的 done 属性值是 false。

### 14.3 yield ###

`yield`

*  既可传参，又可以返回
 *  第一个`next()`传参无效，只用来启动

如果函数前漏掉 `*`

*  就是普通函数
 *  如果有`yield`会报错， `ReferenceError: yield is not defined`
 *  yield 只能在Generator函数内部使用

### 14.4 next ###

一般情况下，next 方法不传入参数的时候，yield 表达式的返回值是 undefined 。当 next 传入参数的时候，该参数会作为上一步yield的返回值。

sendp1.next();
    // start
    // {value: "2", done: false}
    sendp1.next();
    // one:undefined
    // {value: "3", done: false}
    sendp1.next();
    // two:undefined
    // total:NaN
    // {value: undefined, done: true}
    next传参
    var sendp2 = sendParameter();
    sendp2.next(10);
    // start
    // {value: "2", done: false}
    sendp2.next(20);
    // one:20
    // {value: "3", done: false}
    sendp2.next(30);
    // two:30
    // total:50
    // {value: undefined, done: true}

### 14.5 return ###

return 方法返回给定值，并结束遍历 Generator 函数。

return 方法提供参数时，返回该参数；不提供参数时，返回 undefined 。

### 14.6 generator-实例 ###

*  Promise 适合一次读一组
 *  generator 适合逻辑性的

// 带逻辑-generator
    runner(function * () { 
        let userData = yield $.ajax({ url: 'getUserData'})
    
        if (userData.type == 'VIP') { 
            let items = yield $.ajax({ url: 'getVIPItems'})
        } else { 
            let items = yield $.ajax({ url: 'getItems'})
        }
    })

// yield 实例，用同步方式写异步
    server.use(function * () { 
        let data = yield db.query(`select * from user_table`)
        this.body = data
    })

## 十五、async/await ##

async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。

async 是一个通过异步执行并隐式返回 Promise 作为结果的函数。可以说async 是Generator函数的语法糖，并对Generator函数进行了改进。

### 15.1 async ###

#### 15.1.1 语法 ####

async function name([param[, param[, ... param]]]) {  statements }

*  name: 函数名称。
 *  param: 要传递给函数的参数的名称。
 *  statements: 函数体语句。

#### 15.1.2 返回值 ####

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

async function helloAsync(){ 
        return "helloAsync";
      }
      
    console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
     
    helloAsync().then(v=>{ 
       console.log(v);         // helloAsync
    })

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。

### 15.2 await ###

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

#### 15.2.1 语法 ####

[return_value] = await expression;

expression: 一个 Promise 对象或者任何要等待的值。

#### 15.2.2 返回值 ####

返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。

await针对所跟不同表达式的处理方式：

*  Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
 *  非 Promise 对象：直接返回对应的值。

## 十六、ES7 预览 ##

数组

*  `arr.includes()` 数组是否包含某个东西
 *  数组的 arr.keys(), arr,entries()
 *  for … in 遍历数组 下标 key
 *  for … of 遍历数组 值 value, 不能用于json

let arr = ['a', 'b', 'c']
    console.log(arr.includes(1))
    
    for (let i in arr) { 
        console.log(i) // 循环的时下标 key
    }
    
    for (let i of arr) { 
        console.log(i) // 循环的是值 value
    }
    for (let i of arr.keys()) { 
        console.log('>'+i)
    }
    for (let [key, value] of arr.entries()) { 
        console.log('>' + key + value)
    }
    
    let json = {  a: 12, b: 5, c: 7 }
    for (let i in json) { 
        console.log(i)
    }

[Babel]: https://www.babeljs.cn
[Babel _]: http://www.ruanyifeng.com/blog/2016/01/babel.html