ES6 内容补充

ES6相关新增

基础值类型（symbol、bigInt）
变量声明修饰关键词（let 、const）
数组新增（Array.of、 Array.from、find、findIndex、fill、flat、includes）
字符串新增（startsWith 、endsWith 、includes、repeat）

ES6新增

对象新增

对象内的简写

属性值简写（属性值为变量如果属性名和属性值的变量名一致就可以省略对应的值）
方法简写（方法可以省略对应的function 直接使用属性名(){}）

//之前的写法
let age = 18
var obj = {
	name:'jack',
    age:age, //指定age属性值为age的变量值
	sayHello:function(){
		console.log('hello')
	}
}
//简写
var obj = {
    name:'name',
    //属性值为变量 如果属性名和属性值的变量名一致 就可以省略对应的值
    age, //指定age属性值为age的变量值
    //方法可以省略对应的function 直接使用属性名(){}
	sayHello(){
		console.log('hello')
	}
}

解构赋值

对象的解构赋值使用{}

对象的解构是通过对应的key来指定的也就是是位置随便变化（声明的变量名得是对象key得名字）

//对象的解构赋值
var obj = {
    say(){
        console.log('说')
    },
    sayHello(){
        console.log('hello')
    },
    name:'jack'
}
//对象的解构赋值是通过key来指定的
var {name,say,sayHello} = obj
say()
sayHello()
console.log(name)

数组的解构赋值使用[]

数组的解构赋值时通过对应的下标来指定的也就是说位置需要一一对应（声明的变量名随便定义）

//数组的解构赋值 通过位置一一对应来进行接收的
var [,,,,,f] = [1,2,3,4,5,6]
console.log(f) //6

函数新增

默认参数（在定义形参的时候指定默认值）

// 参数默认值
//指定参数默认值 a值默认为0 b的值默认为0
function sum(a = 0, b = 0) {
    return a + b
}
console.log(sum(1, 2)) //3
console.log(sum(1)) //1
console.log(sum()) //0

箭头函数

箭头函数是匿名函数，需要具备名字实现其复用性那么需要将它赋值给对应的变量，其变量名就是它的函数名。

基础书写

var 函数名 = (形参,形参...) => { 函数体 }

示例

var sayHello = (name)=>{
	console.log(`hello ${name}`)
}
//调用
sayHello('张三') //打印hello 张三

箭头函数的特性

没有arguments
没有this （根据作用域查找）
没有原型的（不能被new）

箭头函数的简写

如果有且只有一个形参可以省略()
如果函数体中只有一句代码那么可以省略 {}
如果函数体中只有一句代码且省略了{} 且你需要返回值那么必须省略return关键词

//箭头函数简写
//如果形参有且只有一个可以省略()
var handler = name => {}
//如果函数体中代码只有一行 可以省略 {}
var handler = name => console.log('你好'); 
// handler()
//如果函数体中代码只有一行 且对应的{} 被省略了 那么需要返回值的话 必须省略return
var handler = name => name + '你好'
console.log(handler('jack')) //jack 你好

扩展运算符（...）

主要是用于打开数组，暴露里面的内容

// ...扩展运算符 打开数组暴露里面的内容
console.log(...[1, 2, 3])
// 扩展运算符打开的内容 可以自动填入到接收多个参数的函数内
var str = ""
var str = str.concat(...['a', 'b', 'c']) // str.concat('a','b','c')
console.log(str);
//定义接收不定参数个数的方法
// 接收多个参数 arg就是一个数组
function sum(...arg) {
    console.log(arg)
    return arg.reduce((prev, v) => prev + v)
}
console.log(sum(1, 2, 3, 4, 5))
//数组内容的拷贝 可以完成数组内容的浅拷贝
var arr = [1,2,3,4,5,6,{name:'jack'}]
var newArray = [...arr]
console.log(newArray)
console.log(newArray == arr) //false
console.log(newArray[6] == arr[6]) //true

对象方法新增

静态方法

Object.is 判断俩个对象是否是一个
Object.assign 将后面的参数对象内容拷贝到第一个参数对象中
Object.keys 获取对象中的所有的key组成的数组
Object.values 获取对象中的所有的值组成的数组
Object.entries 获取对象中所有的key value组成的数组

// Object.is 判断俩个对象是否是一个 类似于===
console.log(Object.is('a','a'))//true
console.log('a' === 'a')//true
console.log(Object.is(new String('a'),String('a'))) //false
console.log(new String('a') === String('a')) //false
console.log(Object.is({},{})) //false
//Object.is 和 === 区别在于 解决NaN != NaN的问题
console.log(NaN === NaN) //false
console.log(Object.is(NaN,NaN)) //true
//Object.assign 将后面参数对象中的属性 填入到第一个参数对象内  并返回这个对象
//实现对象的浅拷贝
var obj = {name:'jack',age:18}
var newObj = Object.assign({},obj)
console.log(newObj)
console.log(newObj == obj)//false 
var newObj = Object.assign({id:1},obj,{email:"123"})
console.log(newObj)
var firstObj = {}
var newObj = Object.assign(firstObj,obj,{email:"123"})
console.log(newObj)
console.log(firstObj)
console.log(firstObj == newObj) //true 返回的是第一个对象
//Object.keys Object.values Object.entries
var obj = {name:'jack',age:18}
console.log(Object.keys(obj)) //抽取所有的key 组成一个数组
console.log(Object.values(obj)) //抽取所有的值 组成一个数组
console.log(Object.entries(obj)) //抽取所有的键值对 组成一个数组（二维数组）

Class 类

class关键词是ES6新增的用于类 ( 构建对象的模板 ) 声明的关键词。（类是对象的模板，对象是类的实例）

基础使用

class Person {
    //构造器 new对象的时候调用的方法
    constructor(name, age) {
        this.name = name //this指向当前构建的实例对象
        this.age = age
    }
    //static关键词用于在class中声明静态的属性及方法
    static sayHello(){
        console.log('hello')
    }
}
//class是用于构建对象的
let person = new Person('jack', 18)
console.log(person)
//静态方法调用 类名.方法
Person.sayHello()
//class中的extends关键词 用于class之间的继承
//继承可以获取父类所有的非私有属性及方法
class Son extends Person{
    constructor(name,age,sex){
        //如果使用了extends关键词 那么必须要在contructor中调用super方法
        super(name,age) //指向父类构造函数
        this.sex = sex
    }
}
let son = new Son('jack',20,'男')
console.log(son)
//class的extends关键词可以继承静态的属性及方法
Son.sayHello()

class是用于构建对象的它只能使用new关键词调用
class 的名字首字母必须大写
class中采用了严格模式
class中contructor方法表示当前的构造方法在new的时候会调用这个方法
class使用extends来实现继承它可以继承父类的非私有属性和方法
class如果使用extends关键词实现继承那么当前的类中的contructor中必须调用super方法（指向父类的构造方法）
class中使用static关键词来声明静态属性及方法通过类名可以直接调用

generator方法

用于控制代码的执行顺序的一个方法 (将异步代码同步执行)

基础定义

function* fn() {
    yield console.log(1) //分段 等待区
    yield console.log(2) //分段
    yield console.log(3) //分段
    yield console.log(4) //分段
}
//generator方法执行会返回一个generator对象
var obj = fn()
console.log(obj)
//next  return 都会返回一个对象 这个对象包含俩个属性  value属性 done 是否完成

//进入下一步 next 进入下一个
var value = obj.next() //1
console.log(value)
obj.next() //2
obj.next() //3
var value = obj.next() //4
console.log(value)
//返回一个你好 return 后面的next不再执行
var value =  obj.return('你好') //获取的对象里面的value为返回值 done 为true
console.log(value)
//抛出一个错误 throw 后面不再执行 
// obj.throw('错误')

主要方法

next 下一步
return 返回一个值结束当前的generator对象
throw 抛出一个错误（打印错误结束整个generator对象）

promise

es6新增的一个类，主要是用于将异步代码同步执行

Set

set是一个存储结构，它主要特点是存储的数据不重复（地址唯一）

set的构建

使用new关键词进行构建

//无参构建
var set = new Set() //构建一个空的set
console.log(set)
//有参构建 传入对应的iterable进行构建 iterable 迭代器接口 （所有的能被for of进行遍历的都是实现了iterable的）
//实现了iterable的有 数组  伪数组 ...
// var set = new Set(document.forms) //里面可以传入伪数组
var set = new Set([1,1,2,2,1,3,4,4,2]) //自动去除重复的数据iterable
console.log(set)

weakSet 用于存储对象的set

//weakSet 传入只读的对象数组 无法在内部访问对象
var weakSet = new WeakSet([{},{}])
console.log(weakSet)
// 添加方法 add
let obj = {name:'jack'}
weakSet.add(obj)
// 删除方法 delete
weakSet.delete(obj)
// 判断方法 hash
console.log(weakSet)

Map

map也是一个存储结构，里面的存储是使用键值对进行存储

map的构建

使用new关键词

//无参
var map = new Map()
//传入一个二维数组
var map = new Map([['name','jack'],['age','18']])
console.log(map)

weakMap key为对象的map

//weakMap
var wk = new WeakMap()

模块化

将对应的文件分成模块，进行相关的分类及使用。提高性能及对应的复用性。

模块化规范

AMD （代表作 require.js）（预加载）

CMD ( 代表作 Sea.js) （懒加载）

AMD和CMD的区别

AMD 是将对应的模块先进行优先加载，再使用

CMD 就近加载在使用的时候才进行加载

CMD性能更优,AMD它用户体验更佳

ES6的模块化

export 导出模块
import 导入模块

ES6模块化使用

在浏览器端使用ES6的模块化技术在script标签中声明 type= module

<script type="module"></script>

export导出

//导出对应的内容
//默认导出一个模块/文件 只能有一个
export default {
  name:'张三',
  sayHello(){
    console.log("你好");
  }
}

// 直接导出 export 可以存在多个
export const username = "李四"
export const password = "123456"
export const say = () => console.log('说话')


// 导出对象
let email = '123@qq.com'
let age = 18
export {
  email,
  age
}

import导入

导入export default的内容

//1.导入export default的内容
import index from "./index.js"
console.log(index.name)
index.sayHello()

导入export 直接到出内容

//2.导入export 导出的常量
//通过*来获取所有导出的内容 通过对应的as来指定名字
import * as index from "./index.js"
console.log(index.username)
console.log(index.password)
index.say()
//解构获取
import {username,password,say} from "./index.js"
console.log(username)
console.log(password)
say()
//3.导入 export 直接导出的对象
import * as index from "./index.js"
console.log(index.email)
console.log(index.age)
//解构获取
import {email,age} from "./index.js"
console.log(email)
console.log(age)

ES6 内容