ES6学习

ECMAScript6.0 (ES6)

ECMA（European computer manufactures association，欧洲计算机制造联合会）

var

1. 全局作用
2. 变量提升

let

1. 变量不能重复声明
2. 块级作用域
3. 不存在变量提升
4. 不影响作用域链

const

1. 声明常量（不能重复）
2. 必须初始化
3. 不能修改
4. 块级作用域
5. 常量数组可修改

解构赋值

可以是数组，对象

const arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a, b);

const p = {
    name: '张三',
    age: 10,
    run: function () {
        console.log('run run run');
    }

}
let { name, age, run } = p
console.log(name)
run();

模板字符串

1. ``,反引号
2. 可换行
3. 变量拼接

对象的简化写法

let name = '张三'
let change = function () {
    console.log('change change');
}

let obj = {
    name,
    change,
    running() {
        console.log('running');
    }
}
console.log(obj);
obj.change()

箭头函数

1. this的静态属性，永远指向windows
2. 不能作为构造函数实例化对象
3. 不能使用arguments参数列表
4. 简写

   // 简写
   function pow(n){
       return n*n 
   }
   // 
   let pow = n => n * n
   console.log(pow(9));

5. 适合于this无关的调用，如定时器，数组的方法回调
6. 不适合与this有关的调用，事件回调，对象方法

rest参数

必须要方法参数最后

 function fn1() {
    console.log(arguments);
}
fn1(12, 3, 3, 4, 5)


function fn2(...args) {
    console.log(args);
}
fn2(1, 2, 3, 4)

扩展运算符[…]

1. 数组合并
2. 数组克隆
3. 将伪数组变为真正的数组

   let arr = [1, 2, 3, 4]
   function fn() {
       console.log(arguments);
   }
   fn(arr)
   fn(...arr)
   // 数组合并
   let arr1 = ['abc', 'def', 'ghi']
   let arr2 = ['jkl', 'mno']
   let res1 = arr1.concat(arr2)
   let res2 = [...arr1, ...arr2]
   console.log(res1);
   console.log(res2);
   
   // 数组克隆
   const color = ['R', 'G', 'B', 'A']
   const c = [...color]
   console.log(c);
   // 将伪数组变为真正的数组
   let divs = document.querySelectorAll('div')
   console.log(divs);
   let divArr = [...divs]
   console.log(divArr);

Symbol

1. 表示独一无二的值，它是JavaScript中的第七种数据类型(其余数据类型：USONB—->you are so NB，对，就是你狠牛逼😄，相信聪明的你一定想出来了u:undefined,s:string,o:object,n:null、number,b:boolean)，是一种类似于字符串的数据类型
2. 值唯一，解决命名冲突
3. 不能与其他数据进行运算
4. 定义的对象属性不能用for…in遍历，但是可以使用Reflect.ownKeys来获取对象的所有属性
   MDN

迭代器

for...of

1. 创建一个指针对象，指向当前数据结构的起始位置
2. 第一次调用next方法指针自动指向数据结构的第一个成员
3. 接下来不断调用next方法，指针一直后移，直到指向最后一个成员
4. 每调用next方法返回一个包含value和done属性对象

let arr = [1, 2, 3, 4]

for (let item of arr) {
    console.log(item);
}
let iter = arr[Symbol.iterator]()
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

1. 对象不可遍历，给对象加迭代器

let obj = {
        name: '一班',
        stus: [1, 2, 3, 34, 4, 5],
        // 因为对象没用迭代器，所以造一个
        [Symbol.iterator]() {
            let index = 0
            let _this = this
            return {
                next: function () {
                    if (index < _this.stus.length) {
                        index++
                        return { value: _this.stus[index], done: false }
                    } else {
                        return { value: undefined, done: true }
                    }
                }
            }

        }
    }
    // 遍历对象中的数组
    for (let v of obj) {
        console.log(v);
    }

生成器

一个特殊的函数

// 一个特殊的函数
// 异步编程 ajax,node,fs
/* function* gen() {
    console.log('哈哈哈');
}
console.log(gen().next()); */
function* gen() {
    // yield函数代码的分割符
    yield 1
    console.log(111);

    yield 2
    console.log(222);

    yield 3
    console.log(333);
}
let iter = gen()
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

for (let v of gen()) {
    console.log(v);
}

Promise

set

let s=new Set()

1. 元素个数：size
2. 添加：add()
3. 删除：delete()
4. 检测：xxx.has('xxx')
5. 清空：xxx.clear()
6. 遍历：for(let v of xxx)
7. 数组去重，交集，并集，差集

map

let m=new Map()

1. m.set(key,value) key可以是对象，value可以是数组或者函数
2. m.get(key)
3. m.size
4. m.delete(key)
5. m.clear()
6. for(let v of m){}

class

http://javascript.ruanyifeng.com/oop/prototype.html#toc4

1. 静态成员或静态方法用static修饰
2. 继承通过super()关键字
3. gettter()和setter()

数值

1. 精度问题（0.1+0.2）
2. 进制（0b,0o,0d,0x）
3. isNaN()
4. parseInt()
5. parseFloat()
6. Number.isInteger()
7. Math.trunc() 抹掉小数
8. Math.sign() 放回 1 0 -1 分别表示1 0 -1

对象方法

1. Object.is(val1,val2) 判断两个值是否完全相等
2. Object.assign() 对象的合并
3. Object.setPrototypeOf() 设置原型对象

模块化

1. 防止命名冲突
2. 代码复用
3. 高维护性

export

对外接口

// 分别暴露(m1.js)
export const name='张三'

export function test(){
    console.log('test模块化');
}

// 同一暴露(m2.js)
const name = '张三'

function test() {
    console.log('test模块化');
}

export {
    name,
    test
}

// 默认暴露(m3.js)
export default {
    school: '清华',
    change: function () {
        console.log('chage');
    }
}

import

// 通用导入（导入全部）
import * as m1 from 'm1.js'
// 机构赋值（分别暴露）
import { name, test } from 'm2.js'
import {default as m3} from 'm3.js'
// 简便形式
import m3 from 'm3.js'

ES7新特性

1. 判断数组中有没有子项
   • indexOf:返回索引，存在返回第一次出现的索引，不存在返回-1
   • includes:true or false

async

1. 返回结果为pormise对象
2. 返回结果为promise

   async function test(){
       
       /* return 111;
       return 'xxx';
       throw new Error('xxx') */
   
       return new Promise((resolve,reject){
           resolve('成功')
           // reject('失败')
       })
   }

await

1. 必须和async一起使用
2. await右侧表达式一般为pormise对象
3. await返回成功后的值
4. 失败就会抛出异常，需用try…catch捕获

async和await结合读取文件

const fs = require('fs')
const path = require('path')

function readFile01() {

    return new Promise((resolve, reject) => {
        fs.readFile(path.join(__dirname, '../files/001.txt'), 'utf-8', (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

function readFile02() {

    return new Promise((resolve, reject) => {
        fs.readFile(path.join(__dirname, '../files/002.txt'), 'utf-8', (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

function readFile03() {

    return new Promise((resolve, reject) => {
        fs.readFile(path.join(__dirname, '../files/003.txt'), 'utf-8', (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

async function getData() {
    let data1 = await readFile01()
    let data2 = await readFile02()
    let data3 = await readFile03()
    console.log(data1);
    console.log(data2);
    console.log(data3);
}

getData()