ES6语法特性

LET声明变量

//声明变量的格式
let a;
let b,c,d;

• 变量不能重复命名

//let star = 1
//let star = 2

• 块级作用域 全局，函数，Eval

{
    let girl = '周杨青'
}
//console.log(girl)无法访问girl变量

• 不存在变量升级，不允许在声明变量之前使用变量
• 不影响作用域链

{
    let school = 'siqu'
    funtion foo(){
        console.log(school)
        //在这里依然可以使用school
    }
    foo()
}

const定义常量

• 一定要赋初值

const A;

• 一般常量使用大写（潜规则）

const a = 100;

• 常量的值不能修改

SCHOOL = "siqu"

• 块级作用域

const PLAYER = 'UZI'

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

const TEAM = ['UZI','MXLG','Ming','Letme']

变量的解构赋值

允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

• 数组的解构

const F4 = ['小沈阳','刘能']
let [xiao,liu] = F4

• 对象的解构

const zhao = {
    name:'zhao',
    age:23
    xiaopin:function(){
        console.log("我可以演小品")
    }
}
let {name,age,xiaopin} = zhao

模板字符串

ES6引入新的声明字符串的方式

• 声明

let str = `这是一个字符串`
console.log(str,typeof str)

• 内容中可以直接出现换行符

let Str = `<ul>
    <li>沈腾</li>
</ul>`

• 可以直接进行变量的拼接

let lovest = '魏翔'
let out = "${lovest}是我心目中最搞笑的演员"
console.log(out);

简化对象写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法，这样书写更加简洁

let name = "siqu"
let change = function(){
    console.log("改变")
}
​
//如果key和value是相同的，那么可以简写
const school = {
    name,
    change,
}

箭头函数

ES6允许使用【箭头】(=>)定义函数

//声明函数
let fn = function(){
}
​
let fn = (a,b) =>{
    return a+b
}
​
//调佣函数
//let result = fn(1,2)
//console.log(result)

• this是静态的，this始终指向函数声明时所在作用域下this的值

function getName(){
    console.log(this.name)
}
let getName2 = ()=>{
    console.log(this.name);
}
​
window.name = "siqu"
const school = {
    name:"AT"
}
​
//直接调用
//getName()
//getName2()
​
//call方法调用
getName.call(school)    //
getName2.call(school)   //它的this始终是window

• 不能作为构造函数实例化函数

let Person = (name,age) =>{
    this.name = name;
    this.age = age;
}
​
let me = new Person("xiao",30)  //错误，不能使用箭头函数用来作为构造函数

• 不能使用arguments变量

let fn = () =>{
    //console.log(arguments)
}

• 箭头函数的简写

//1.省略小括号，当形参有且只有一个的时候
let add = n=>{
    return n+n;
}
​
//2.省略花括号，当代码体只有一条语句的时候
let pow = (n) => n*n;
//此时return语句必须省略，执行结果就是返回值
​
​

• 从数组中返回偶数的元素

const arr = [1,6,9,10,100,25]
const reuslt = arr.filter(item => item % 2 === 0)
console.log(result)
​
//箭头函数适合于与this无关的回调，定时器，数组的方法回调
//箭头函数不适合与this有关的回调，事件回调，对象的方法
​

函数参数的默认值设置

• 允许给函数参数赋值初始值

function add(a,c = 10,b){
    return a+b+c;
}

• 与解构赋值结合

function conect({host = "127.0.0.1",username})

rest参数

rest参数，用于获取函数的实参，用来代替arguments

//rest 参数
funtion date(...args){
    console.log(args);
    //args是一个接收参数的数组    
}

• rest参数必须要放到参数最后

扩展运算符

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

//声明一个数组
const tfboys = ['易烊千玺','王源']
​
//声明一个函数
function chunwan(){
    console.log(arguments)
}
chunwan(...tfboys)  //相当于chunwan('易烊千玺','王源')

• 扩展运算符的使用

//1.数组的合并
const kuaizi = ['王太利','肖央']
const name = ['san','si']
const s = [...kuaizi,...name]
console.log(s)
​
//数组的克隆
const kuaizi = ['王太利','肖央']
const san = [...kuaizi]
console.log(san)
​
//将伪数组编程真正的数组
const divs = document.querySelectorAll("div")
const divArr = [...divs]
console.log(dirArr)

Symbol基本使用

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

Symbol特定

• Symbol的值是唯一的，用来解决命名冲突的问题
• Symbol值不能与其他数据进行运算
• Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Rflect.ownKeys来获取对象的所有键名

//创建Symbol
let s1 = Symbol('siqu')
let s2 = Symbol('siqu')``
console.log(s1 === s2)
​
//通过Symbol.for()进行创建
let s3 = Symbol.for("siqu1")
let s4 = Symbol.for("siqu2")
console.log(s3 === s4)
​
//不能与其他数据进行运算，
//let result = s + 100

迭代

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

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

 //声明一个数组
const xiyou = ['唐僧','孙悟空','猪八戒','沙僧']
​
//使用for...of循环进行遍历，遍历的结果是value
for(let v of xiyou){
    console.log(v)
}

• 工作原理

1. 创建一个指针对象，指向当前数据结构的起始位置
2. 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3. 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
4. 每调用next方法返回一个包含value和done属性的对象
5. 注意：要自定义遍历数据的时候，要想到迭代器

• 迭代器自定义遍历对象

        const banji ={
        name:"一班",
        stus:[
            'xiaoming',
            'daming',
            'xiaotian'
        ],
        //建立迭代器
        [Symbol.iterator](){
            let index = 0
            return {
                next:() =>{
                    if (index < this.stus.length){
                        const result =  {value:this.stus[index],done:false}
                        index ++
                        return result
                    }else{
                        return {value:undefined,done:true}
                    }
                }
            }
        }
    }
​
    for (let v of banji){
        console.log(v)
    }

生成器

生成器起始就是一个特殊的函数

用于异步编程

//定义生成器函数
function * gen(){
    console.log("hello")
}
​
//必须调用next方法才能执行
let ite = gen()
ite.next()

• 可以for…of来进行遍历

function *gen(){
    yield '疯狂'
    yield '世界'
    yield '典韦'
}
​
for(let v of gen()){
    console.log(v)
}
​
//使用next调用
//let ie = gen()
//ie.next()
//ie.next()
//ie.next()

• 可以在生成器函数当中传入参数

function *gen(arg){
    console.log(arg)
    
    let one = yield 111;
    console.log(one)
    
    let two = yield 222;
    console.log(two)
    
    let three = yield 333;
    console.log(three)
}
​
//执行获取迭代器对象
//整体方法传参数
let iterator = gen('AAA')
console.log(iterator.next());
​
//第一次调用next，参数会作为第一个yield的返回结果
console.log(iterator.next("bbb"))
//第二次调用next，参数会作为第二个yield的返回结果
console.log(iterator.next("ccc"))
//第三次调用next，参数会作为第三个yield的返回结果
console.log(iterator.next("ddd"))

生成器函数实例

//需求：1s后输出111,2s后输出222,3s后输出333
    function one(){
        setTimeout(() => {
            console.log("111")
            g.next()
        }, 1000);
    }
    function two(){
        setTimeout(() => {
            console.log("222")
            g.next()
        }, 2000);
    }
    function three(){
        setTimeout(() => {
            console.log("333")
            g.next()
        }, 3000);
    }
​
    function * gen(){
        yield one()
        yield two()
        yield three()
    }
​
    const g = gen()
    g.next()

生成器函数案例二

//需求：模拟获取：用户数据  订单数据   商品数据
    function getUser(){
        setTimeout(() => {
            let data = '用户数据'
            iterator.next(data)
        }, 1000);
    }
    function getOrders(){
        setTimeout(() => {
            let data = "订单数据"
            iterator.next(data)
        }, 1000);
    }
​
    function getGoods(){
        setTimeout(() => {
            let data = '商品数据'
            iterator.next(data)
        }, 1000);
    }
​
    function *gen(){
        //获取数据执行相关的处理
        let users = yield getUser()
        console.log(users)
        let orders = yield getOrders()
        console.log(orders)
        let goods = yield getGoods()
        console.log(goods)
    }
​
    let iterator = gen()
    iterator.next()

Promise

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

• Promise 构造函数：Promise(excutor){}
• Promise.prototype.then()
• Promise.prototype.catch()

    //实例化Promise对象
    const p = new Promise(function(resolve,reject){
        setTimeout(() => {
            let message = "数据读取成功"
​
            //成功则调用resoleve函数，p的状态更新为成功
            resolve(message)
        }, 1000);
    })
​
    //在then方法中
    //当p的状态为成功的时候调用，第一个参数方法
    //当p的状态为失败的时候调用，第二个参数方法
    p.then(function(value){
        console.log(value)
    },function(reason){    
        console.log(reason)
    })

使用Promise读取文件

//使用node.js
//使用回调函数来进行读取
const fs = require("fs")
​
// fs.readFile("./test.txte",function(err,data){
//     if (err)    throw err
//     console.log(data.toString())
// })
​
​
//使用Promis来读取文件
const p = new Promise(function(resolve,reject){
    fs.readFile('./test.txt',function(err,data){
        if (err) reject(err)
        resolve(data)
    })
})
​
p.then(function(value){
    console.log(value.toString())
},function(err){
    console.log("读取失败")
})

then方法

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

如果回调函数中返回的结果是非promise类型的属性，状态为成功，返回值为对象的成功值，状态为失败，返回值是错误值

既然then方法返回的是一个Promise对象，因此就可以进行链式调用

//使用链式调用读取多个文件
const fs = require('fs')
​
const p = new Promise((reslove,reject)=>{
    fs.readFile('./test1.txt',(err,data)=>{
        reslove(data)
    })
})
​
p.then(function(value){
    return new Promise((reslove,reject)=>{
        fs.readFile('./test2.txt',(err,data)=>{
            reslove([value,data])
        })
    })
}).then(value =>{
    return new Promise((reslove,reject)=>{
        fs.readFile('./test3.txt',(err,data)=>{
            value.push(data)
            reslove(value)
        })
    })
}).then(value =>{
    console.log(value.join('\n'))
})

catch方法

指定当Promise的状态为失败的时候，所要执行的回调

不使用catch方法也可以，因为使用then方法可以指定两种状态的回调

const p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject("失败")
    },1000)
})
​
p.catch(function(value){
    console.warn(value)
})

Set集合

//声明一个set
let s = new Set()
//集合里面的内容是不重复的
let s2 = new Set(['大事儿','小事儿','小事儿'])
​
//删除元素
s2.delete("大事儿")
​
//元素个数
s2.size()
​
//添加新的元素
s2.add("喜事儿")
​
//检测
console.log(s2.has('糟心事儿'))
​
//清空
s2.clear()
console.log(s2)

类继承

class Phone{
    constructor(brand,price){
        this.brand = brand
        this.price = price
    }
​
    call(){
        console.log("我可以打电话")
    }
}
​
class SmartPhone extends Phone{
    constructor(brand,price,color){
        super(brand,price)
        this.color = color
    }
​
    photo(){
        console.log("我可以拍照片")
    }
}
​
let k = new SmartPhone("小米",1300,"black")
console.log(k.brand)
k.call()
k.photo()

子类重写父类方法

class SmartPhone extends Phone{
    constructor(brand,price,color){
        super(brand,price)
        this.color = color
    }
​
    photo(){
        console.log("我可以拍照片")
    }
    
    call(){
        //子类不能去调用父类的同名方法
        console.log("智能手机打电话")
    }
}

get和set方法

class Phone{
    //函数的返回值就是读取属性的值
    get price(){
        console.log("价格属性被读取了")
        return 1300
    }
    
    set price(newValue){
        console.log("价格属性被修改了")
        this.price = value
    }
}
​
let s = new Phone()
console.log(s.price())

数值扩展

• Number.EPSILON是JavaScript表示的最小精度
• 二进制和八进制

let b = 0b1010;
let o = 0o777;
let x = 0xff;   //十六进制

• Number.isFinite 检测一个数值是否为有限数
• Number.isNaN检测一个数值是否为NaN
• Number.parseInt Number.parseFloat字符串转整数
• Number.isInteger判断一个数是否为整数
• Math.trunc将数字的小数部分抹掉
• Math.sign判断一个数到底是正数 负数 还是零

对象方法扩展

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

console.log(Object.is(120,120))

• Object.assign对象的合并

Object.assign(config1,congfig2);
//后面的属性会覆盖前面的属性

• Object.setPrototypeOf Object.getPrototypeof

//设置原型对象  获取原型
Object.setPrototypeOf(school,l)

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

• 防止命名冲突
• 代码复用
• 高维护性

模块化规范产品

ES6之前的模块化规范有：

• CommonJS => NodeJS、Browserify
• AMD => requireJS
• CMD => seaJS

模块化语法

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

• export 命名用于规定模块的对外接口
• import 命令用于输入其他模块提供的功能

//m1.js
//分别暴露
export let school = 'siqu'
export function teach(){
    console.log("我们可以交个你开发技能")
}

//统一暴露
let school = 'siqu'
function findJob(){
    console.log(hello)
}
export {school,findJob}

//默认暴露
export default{
    school:'siqu',
    change:function(){
        console.log("hello")
    }
}

引入模块

//通用的引入方式
import * as m1 from "./.."

//解构赋值形式
import {school,teach} from './..'
​
//引入默认暴露
import {default as m3} from './..'

//简便形式  只能针对默认暴露
import m3 from './..'

//在html中引入口js文件
<script src = './..' type='module'></script>