ES6 基础笔记(大致)

ES6

let/var 区别

let是块级作用域

var全局

const也是块级

• 对于数组和对象的元素进行修改,不算作对常量的修改,不会报错

  • 因为并没有修改const定义变量指向的地址(指针)

解构

ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值

反引号

是ES6新增的,之前是'',"",ES6新增``

• 可以包括换行符

• ''只能使用+加号连接

特性

1. 可以直接出现换行符

2. 变量拼接

箭头函数

• 适合与this无关的回调函数

• 不适合与this有关的回调

rest参数

• 用于获取函数的实参,用来代替arguments

1.ES5获取实参的方式

function date(){
    console.log(arguments)
}
date('aaa','bbb','ccc')
​
console:
是一个对象

2.ES6 rest参数(...args)

function date(...args){
    console.log(args)
}
date('aaa','bbb','ccc')
console:
是一个数组
* rest参数必须放到参数最后
function date(a,b,...args){
    console.log(a);
    console.log(b);
    console.log(args);
}
date(1,2,3,4,5,6)
console:
    a=1,
    b=2,
    args=[3,4,5,6]

扩展运算符[...]

[...] 扩展运算符能将[数组]转换为逗号分隔的参数序列

eg

const tf = ['a','b','c']
funtion chunwan(){
    console.log(arguments)
}
chunwan(tf)
console:
是一个数组,只有[0]为全部

const tf = ['a','b','c']
function chunwan(){
    console.log(arguments)
}
chunwan(...tf)
console:
[0]:'a'
[1]:'b'
[2]:'c'

Symbol 基本使用(?

• ES6引入了一种新的原始数据类型Symbol,表示独一无二的值,他是js语言的第七种数据类型,是一种类似于字符串的数据类型

• 特点

  1. Symbol的值是唯一的,用来解决命名冲突的问题

  2. Symbol值不能与其他数据进行运算

  3. Symbol定义的对象属性不能使用for...in循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名

• javascript数据类型

  • USONB you are so niubility

    • u undefined

    • s string symbol

    • o object

    • n null number

    • b boolean

1.Symbol 基本使用

迭代器(Iterator)

• 迭代器是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署Iterator接口,就可以完成遍历操作

  • ES6创造了一种新的遍历命令for...of循环,Iterator接口主要提供for...of消费

  • 原生具备iterator接口的数据(可用for of遍历)

    • Array

    • Arguments

    • Set

    • Map

    • String

    • TypedArray

    • NodeList

• Iterator是Symbol内置属性 Symbol.Iterator

  • 使用方法

    • let Iterator = xiyouSymbol.Iterator

    • console.log(Iterator.next())

• 需要自定义迭代数据时,需要想到迭代器

生成器

• 生成器函数是ES6提供的一种一步变成解决方案,语法行为与传统函数完全不同

书写方式

function * hanshu(){
    console.log('aaaaa')
}
let iterator = gen();
iterator.next();

yield 函数代码分隔符

function * hanshu(){
   console.log('1')
    yield '一只没有耳朵'
    console.log('2')
    yield '一只没有尾巴'
    console.log('3')
    yield '真奇怪'
}
​
iterator.next();
iterator.next();
iterator.next();
​
//每次执行一部分
//遍历
for(let v of hanshu()){
    console.log(v)
}

⭐Promise

• Promise 是 ES6引入的异步编程的解决方案，语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

使用方法

1. resolve(成功)

//实例化Promise对象
const p = new Promise(function(resolve,reject){
    setTimeout(function(){
        //假设data为数据库的数据
        let data = '数据库中用户数据'
        //调用resolve即为成功
        resolve(data)//假设回调成功
    }，1000)
})
​
//调用promise后，可以调用promise对象then方法
//then方法接收两个参数，第一个成功后（resolve）调用，第二个失败时调用（reject）
p.then(function(value){
    console.log(value)
}，function(reason){
    console.log(reason)
})

2.reject(失败)

//实例化Promise对象
const p = new Promise(function(resolve,reject){
    setTimeout(function(){
        //失败
        let err = '数据读取失败'
        reject(err)
    }，1000)
})
​
//调用promise后，可以调用promise对象then方法
//then方法接收两个参数，第一个成功后（resolve）调用，第二个失败时调用（reject）
p.then(function(value){
    console.log(value)
}，function(reason){
    console.log(reason)
})

Promise封装读取文件

Promise封装Ajax请求

• then方法的返回结果是Promise对象，对象状态有回调函数执行结果决定

Promise函数可以链式调用

p.then(value=>{
​
•           new Promise(){
•               ..............
​
}).then(value=>{
​
})

• 可以通过链式调用解决回调函数地狱

Set 集合

ES6提供了新的数据结构Set（集合），它类似于数组，但成员的值都是唯一的，集合实现了Iterator接口，所以可以使用【扩展运算符】和【for...of...】进行遍历集合的属性和方法

1. size 返回集合的元素个数

2. add 增加一个新元素，放回当前集合

3. delete 删除元素，返回boolean值

4. has 检测集合中是否包含某个元素，返回boolean值

Map

ES6提供了Map数据结构，也是键值对的集合，但是键的范围不限于字符串,各种类型的值(包括对象)都可以当做键,Map也实现了Iterator接口,所以可以使用【扩展运算符】和【for...of...】进行遍历集合的属性和方法

1. size 返回Map元素个数

2. set 增加一个新元素,返回当前Map

3. get 返回键名对象的键值

4. has 检测Map中是否包含某个元素,返回boolean值

5. clear 清空集合返回undefined

class 类

ES6提供了更接近传统语言的写法，引入了class（类）这个概念，作为对象的模板，通过class关键字可以定义类。

基本上ES6的class可以看作只是一个语法糖，他的绝大部分功能ES5都可以做到，新的class写法只是让对象圆形的写法更加清晰，更像面向对象编程的语法而已

知识点

1. class声明类

2. constructor定义构造函数初始化

3. extends继承父类

4. super调用父级构造方法

5. static定义静态此方法和属性

6. 父类方法可以重写

数值扩展

1. 二进制和八进制

2. Number.isFinite 检测一个数是否为优先数

3. Number.isNaN 检测一个数值是否为NaN

4. Number.parseInt Number.parseFloat 字符串转整数

5. Number.isInteger 判断一个数是否为整数

6. Math.trunc 将数字的小数部分抹掉

7. Math.sign 判断一个数到底为正数 负数 还是零

对象方法扩展

1. Object.is 判断两个值是否完全相等

   判断NaN和NaN时为true,而===为false

2. Object.assign(模板,覆盖的) 对象的合并(后面的把前面的覆盖掉)

3. Object.setPrototypeOf 设置原型对象

模块化

模块化规范产品

ES6之前的模块化规范有

1. CommonJS => NodeJS,Browserify

2. AMD => requireJS

3. CMD => seaJS

ES6 模块化语法

模块功能主要有两个命令构成 export 和import

• export命令用于规定模块的对外接口

• import命令用于输入其他模块提供的功能

1.暴露=>export

2.导入=>import

1) import

2) 解构赋值

eg

import{school,teach} from './src/js/ms.js'
console.log(school)

babel(略)

ES7 新特性

ES8新特性

async 和 await

回顾异步编程解决方案

1. 生成器函数

2. Promise

3. async await