ES6

ES6是花费6年才最终敲定，因此增加了很多js新特性

let和const

let
1.具备块级作用域
2.在域解析的时候不会提升
3.let不允许在同一个作用域下声明已经存在的变量
4.在for循环中的应用
const
1.具备以上let前三点
2.声明时必须赋值
3.声明的常量如果是数据类型的时候不可改变值，如果是引用类型：对象里面的值如何变化，是没有关系的

const a = 10
a = 5
//结果：Uncaught TypeError: Assignment to constant variable. at <anonymous>:1:3
const b = {num:10}
b.num = 5
//结果 5

变量解构解析

匹配模式，只要等号两边模式相同，左边变量就可以被赋予对应的值

数组的解构赋值

let [a,b,c]=[1,3,4]
console.log(a,b,c) // 1 3 4

let [a,[[b],c]] = [1,[[5],9]]
console.log(a,b,c) // 1 5 9

let [a,b,……r] = [10,20,30,40,50,60,70,80]
console.log(a) //10
console.log(b) //20
console.log(r) //[30,40,50,60,70,80]

对象的解构赋值

let {a,b} = {b:'bbb',a:'aaa'}
console.log(a,b) // aaa bbb

let{a:b}={a:1}
console.log(b) // 1
console.log(a) // a is not defined

复杂的示例

var arr = [
  {
    a:1,
    b:[200,300,400]
  },
  {
    m:10,
    n:20
  }
]
var [{b},{n}] = arr
console.log(b) //[200,300,400] 
console.log(n) //20
var [{b:[x]}] = arr
console.log(x) //200

基本类型的解构赋值

使用较少

let [a,b,c,d] = '1234'
console.log(a,b,c,d) //1 2 3 4

let {length:len}="cj"
console.log(len) // 2

模块化

默认情况下就是异步加载(defer),即先加载html，加载好下载js，然后立刻执行
import 写法无论写在什么位置，都会被提前调用
一个模块多次被加载只执行一遍

import {m,n} from './a.js' //引入指定模块
import abc from './a.js' //引入默认模块

export {m,n} //导出指定模块
export default 100 //导出默认模块

模块导出的是对原来值的引用

不可以直接在导入模块后修改值
可以通过融入模块提供的方法修改被导入模块内部的值
所有导入的内容都是 引用关系

//a.js
var num = 0
var add = function(){
   num ++
}
export {num,add}
//b.js
import {num,add} from './a.js'
add()
add()
add()
add()
add()
console.log(num)
//main.js
import {num,add} from './a.js'
import './b.js'  // 5
console.log(num) //5

数据结构详解

数据结构——Set

本质是一个集合类数据结构，类似数组的形式
set是一组无序且唯一的项组成的集合。
特点：key和value相同，没有重复的value

const s = new Set([1,2,3,3,2,2,1,4])
console.log(s) // Set(4) {1, 2, 3, 4}

//Set类的属性
s.size //4 获取set类的长度
//Set类的方法
// 1.set.add(value)  添加一个数据
s.add(5) // Set(5){1,2,3,4,5}
// 2.set.delete(value)  删除指定数据，返回布尔值，表示删除是否成功
s.delete(5) //true
// 3.set.has(value) 判断该值是否为Set的成员，返回一个布尔值
s.has(1) //true
// 4.set.clear() 清除所有数据，没有返回值
s.clear()
// 5.keys() 返回键名的遍历器   SetIterator {1, 2, 3, 5, 6}
// 6.values() 返回键值的遍历器 SetIterator {1, 2, 3, 5, 6}
// 7.entries() 返回键值对的遍历器 SetIterator {1, 2, 3, 5, 6}
// 6.forEach() 回调函数遍历每个成员
s.forEach((value,key,set) => {})

数据结构——Map

字典型数据结构，字典使用的是[键,值]的形式储存数据
为了解决对象“键”仅为字符串的局限性，Map的“键”的范围不限于字符串如果有相同的键，则会取最后一个值

const map = new Map([
  ['a',1],
  ['b',2]
])
console.log(map)//结果： Map(2){'a'=>1,'b'=>2}

var map = new Map([['abc',1],['abc',2]])
console.log(map) //Map(1) {"abc" => 2} 

//Map类的属性
map.size //2
//Map类的方法
//1.set(key,value) 新增
//2.get(key) 获取key对应的键值
//3.delete(key) 删除某个键，返回布尔值
//4.has（key） 返回布尔值
//5.clear() 清除所有数据，无返回值
//6.keys（）返回键名的遍历器
//7.values() 返回键值的遍历器
//8.entries() 返回键值对
//9.forEach()

iterator和for-of

基本概念:
ES6新增Set和Map两种数据结构，加上原本的数组和对象，一共行程4种数据集合。
Iterator是一种接口，为不同的数据结构提供统一的访问机制。任何数据结构只要部署该接口，就可以完成遍历操作。
作用：
为各种数据结构，提供一个统一、简便的访问接口
使得数据结构的成员能够按某种次序排列
新增遍历命令 for of，Iterator接口主要提供for of消费

Symbol

ES6新增Symbol数据类型
基本数据类型：Null Undefined Number Boolean String Symbol

内置对象的扩展详解

1. 字符串扩展

//模板字符串
let flag = true
let navName = '概览'
let html = `<ul>
<li>${'首页'}</li>
<li class="${falg ? 'show' : 'hide'}">${navName}</li>
</ul>`
//模板字符串方法
// repeat
let str1 = 'a'
let str2 = str1.repeat(3)  // 'aaa'

//includes() 是否包含
let str = 'qianduan';
str.includes('qi') //true
str.includes('ttt') // false

//startWith()  判断字符串是否以xxx开头
let str = 'qianduan'
str.startsWith('q') //true
str.startsWidth('a') //false

//endsWith() 判断是否以XXX结尾
let str = 'qianduan'
str.endsWith('n') //true
str.endsWidth('a') //true

2. 数组扩展

//Array.from()  将类数组转换成数组
let list = document.querySelectorAll('li');
Array.from(list)

//Array.of() 创建一个数组
let arr = Array.of(1) //[1]

//find() 查找符合条件的元素，返回第一个符合要求的元素
//findIndex() 返回符合条件元素的下标
let arr = [1,2,3,4]
let res = arr.find((a) => {
   return a < 2;
})  // 1
let resIndex = arr.findIndex((a) => {
   return a < 2;
})  // 0

//fill(str,[startIndex,endIndex]) 填充从startIndex到endIndex元素
let arr = [1,2,3,4]
arr.fill('abc') //['abc','abc,'abc','abc']
arr.fill('abc',1,3) //[1,'abc','abc',4]

3. 对象扩展

//Object.is()
console.log(Object.is(NaN,NaN)) //true
console.log(Object.is(-0,+0)) //false
//Object.assign() 
//用于对象的合并，将源对象所有可枚举属性复制到目标对象
let obj1 = {a:1}
let obj2 = {a:2,b:3}
let obj3 = {c:'abc'}
Object.assign(obj1,obj2,obj3) //{a:2,b:3,c:'abc'}

函数扩展

/*函数的扩展
* 1.为函数指定默认值
* 2.函数的rest参数
* 3.箭头函数
*/

//默认参数
function fn(a=10,b=20){
  console.log(a+b)
}
fn() //30
fn(0,10) //10

//rest参数形式为("...变量名"),用于获取函数的多余参数
//rest参数搭配的变量是一个数组,该变量将多余的参数放入数组
function sum(...arr){
  let res = 0
  arr.forEach((item,key) => {
    res += item
  })
  return res;
}
sum(1,2,3,4) //10

//rest参数前可以再写一个参数，但末尾不可以再写参数
function sum(base,...arr){} 
function sum(base,...arr,end){} //错误

箭头函数

//1.箭头函数体内没有自己的this对象。使用的时候，其内部的this是定义时所在环境的对象，而不是使用时所在环境的对象
//不能使用箭头函数使用call apply bind去改变其内部this指向
//2.箭头函数体内没有arguments对象，如果要使用，需要用Rest参数代替
//3.箭头函数不可以当作构造函数，不可以使用new命令，否则会抛错
const fn =  a => a 
const fn = function(a){
 return a;
}
const fn = (a,b) => a + b;
const fn = (a,b) => {
  a = a*2
  b = b*2
  return a + b
}
const fn = (a,b) => ({a,b}) //{a:1,b:2}

class基本使用

以下写法就是es5的语法糖，看起来更加清晰，es5中构造函数和类都是同一个函数
es5：https://github.com/Mirror198829/front-end/wiki/javascript

class Person{
  constructor(name,age){
     this.name = name
     this.age = age
 }
 //指定原型上的方法
 print(){
   console.log(this.name+'的年龄：'+this.age)
 }
}

总结如下：

Person中的constructor是构造方法，es5中的构造函数Person 对应es6中的Person的构造方法
this关键字指向实例对象
定义类的方法，前面不需要加上function关键字，类里面的方法之间不能用逗号分割，否则会报错
类中定义的方法都是定义在es5中的prototype属性上面
定义在类上的方法都是不可枚举的

console.log(Object.keys(Person.prototype)) // [] 是一个空数组，从而证明不可枚举

constructor是类的默认方法，通过new生成对象实例时，自动调用该方法。一个类必须有constructor方法，若未定义，一个空的constructor会被默认添加。
生成类的写法与es5相同，但如果未加new，像函数一样调用class，将会报错

class继承

ES5: https://github.com/Mirror198829/front-end/wiki/javascript#%E7%BB%A7%E6%89%BF

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ES6

目录

let&const

变量的解构解析

模块化详解

数据结构

Set

Map

iterator和for-of循环

Symbol数据类型

class的基本使用

class的继承

内置对象的扩展

函数的扩展，箭头函数

异步操作之Promise