ECMAScript 篇

一. 什么叫ES6

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [1] 。
另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。

二. ES6怎么转ES5

安装babel:cnpm install babel/core --save
安装转码规则：cnpm install @babel/preset-env --save
安装转码命令：cnpm install @babel/cli --save-dev(dev表示开发环境下安装)
命令行转码：
- npx babel example.js
- npx babel example.js -o es5.js(转码后生成一个名为es5.js的文件)

三. 解构赋值

数组的解构赋值
* 按顺序一一匹配

const [a,b,c] = [10,20,30]    // a=10,b=20,c=30
const [a,b,c]=[10,20,30,40]   // a=10,b=20,c=30,40没有和它匹配的
const [a,b,c,d]=[10,20,30]    // a=10,b=20,c=30,d=undefined
const [a,b,,c]=[10,20,30,40]  // a=10,b=20,c=40 30匹配给了空，40匹配给c

对象的解构赋值
- 注意：一般变量名应该和属性名保持一致
- 语法

const obj = {name:'wangjiajia',age:18
}
const {name,age} = obj
name    // 'wangjiajia'
age    // 18

四. 字符串新增方法

includes()：返回布尔值，判断一个字符串中是否包含某一个字符
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。/ endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
repeat(n)：返回一个新字符串，表示将原字符串重复n次
padStart(n,str)：在头部补全字符串 / padEnd(n,str)：在尾部补全字符串,n补全生效的最大长度，str补充的字符，多删少补。如果n小于等于原字符串长度返回原字符串本身。
trim()：消除字符串两端的空格。
- trimStart() 消除头部空格
- trimEnd() 消除尾部空格

const str = 'hello world'
const str1 = ' wangjiajia '
const str2 = 'hhh'
// 1.includes()
str.includes('e')    // true
str.includes('m')    // false// 2.startsWith()
str.startsWith('h')    // true
str.startsWith('m')    // false// 3.endsWith()
str.endsWith('d')    //  true
str.endsWith('m')    // false// 4.repeat()
str.repeat(3)    // 'hello worldhello worldhello world'// 5. padStart(n,str) / padStart(n,str)
str.padStart(5,'mm')   // 'hello world',原字符串超过了的最大生效长度，返回本身。
str.padEnd(5,'mm')   // 'hello world',同上
str2.padStart(5,'mm')  // 'mmhhh'
str2.padEnd(5,'mm')  // 'hhhmm'// 6.trim()
str1.trim()    // 'wangjiajia'

五. 数组新增方法

扩展运算符(不仅仅针对数组): 将内容转化成参数序列
Array.from()：将一个类数组对象或者可遍历对象转换成一个真正的数组。可以接受两个参数，第二个参数是一个函数对每个元素进行处理，将处理后的值放入返回的数组中。
Array.of()：用于将一组值转化为一个数组，主要是为了弥补Array和new Array的不足
forEach()：对数组中的每一个元素执行一次方法，本身返回undefined，不改变原数组。
map()：对数组中的每一个元素执行一次方法，返回一个新的等长度的数组，不改变原数组。
filter()：对数组中的每一个元素执行一次方法，过滤出满足条件的元素，返回满足过滤条件的元素，不改变原数组，不会对空数组进行检测，如果没有满足条件的则返回空数组。
some()：用于检测数组中的元素是否满足指定条件，只要有一个满足则返回true剩余元素不会再执行，如果都不满足则返回false，不改变原数组。
every()：用于检测数组中的元素是否都满足指定条件，只要有一个不满足则返回false，剩余元素不会再执行，全部满足则返回true,不改变原数组。
find()：用于查找数组中符合条件的第一个元素，不改变原数组，不会对空数组进行检测，如果没有返回undefined。
findIndex()：用于查找数组中符合条件的第一个元素的索引，不改变原数组，不会对空数组进行检测，如果没有返回-1。
reduce()：接收一个函数作为累加器，可以返回需要的结果，功能非常强大。

一. 扩展运算符

const arr1 = [1,2,3]
const arr2 = [4,5,6]
// 1.可用于解构赋值[arrNew1,...arrNew2] = [1,2,3,4,5]  // arrNew1=1,arrNew2=[2,3,4,5]// 2.可用于数组合并
const arrMerge = [...arr1,...arr2]   // [1, 2, 3, 4, 5, 6]// 3.可用于数组深拷贝
const arrCloneDeep = [...arr1]  // [1,2,3]
arr1[1] = 8
arr1   //  [1, 8, 3]
arrCloneDeep    // [1,2,3] 修改arr1并没有影响到// 4.可用于求最值
const maxNum = Math.max(...arr)    // 最大值8
const minNum = Math.max(...arr)    // 最小值1

二. Array.from()

// 1.将一个类数组对象转成真正的数组
let arrayLike = {0: 'wangjiajia', 1: '18',2: '女',3: ['anhui','luan'],'length': 4
}
let arrArrayFrom = Array.from(arrayLike)   // ['wangjiajia', '18', '女', ['anhui','luan']]
Array.isArray(arrayLike)  // false
Array.isArray(arrArrayFrom)  // true
// 如果类数组对象不加length属性，会返回一个空数组
let arrayLike = {0: 'wangjiajia', 1: '18',2: '女',3: ['anhui','luan'],
}
let arrArrayFrom = Array.from(arrayLike)   // []
// 如果类数组对象的属性名是字符串，会返回由undefined组成的数组
let arrayLike = {name: 'wangjiajia', age: '18',sex: '女',friends: ['anhui','luan'],length: 4
}
let arrArrayFrom = Array.from(arrayLike) // [undefined, undefined, undefined, undefined]
// 总结：类数组对象必须要有length属性，属性名必须为number或者string类型的数字。// 2.将Set结构的数据转换为真正的数组
let arr = [1,2,3,3,4,5]
let set = new Set(arr)  // {1, 2, 3, 4, 5}
Array.from(set)  // [1, 2, 3, 4, 5]
Array.from(set,item => item*item)  // [1, 4, 9, 16, 25]// 3.将字符串转换为数组
let str = 'hello world!';
Array.from(str)  // ['h','e','l','l','o',' ','w','o','r','l','d','!']// 4.参数本身是一个数组，返回一个一模一样的数组
let arr3 = [1,2,3,4]
const arr4 = Array.from(arr3)
arr4   // [1,2,3,4]
arr3[1] = 8
arr3    // [1,8,3,4]
arr4    // [1,2,3,4]  可以看到改变arr3没有影响arr4，对于数组来说Array.from()深拷贝了一个新数组

三. Array.of()

Array.of(4)    // [4]
Array.of(1,2,3,4)   // [1,2,3,4]
Array(4)    // [empty × 4]
Array(1,2,3,4) // [1,2,3,4]
// 由此说明：使用Array定义数组的时候至少要有两个参数，如果只有一个参数，实际上是指定数组的长度，数组里面都是空元素。

四.forEach()

// forEach(item,index,arr)
// item:数组里面的每一个元素，必选
// index:数组的索引，可选
// arr:原数组本身，可选
const arr = [1,2,3,4]
const arr1 = []
const arr2 = arr.forEach(item => arr1.push(item*item))
arr   // [1,2,3,4]
arr1  // [1,4,9,16]
arr2  // undefined

五.map()

// map(item,index,arr)  参数含义同上,map()函数使用的频率非常高。
const arr = [1,2,3,4]
const arrMap = arr.map(item => item*item)
arr    // [1,2,3,4]
arrMap   // [1,4,9,16]

六.filter()

const arr = [1,2,3,4,5,6]
const arrFilter = arr.filter(item => item>2)
arr   // [1,2,3,4,5,6]
arrFilter    // [3,4,5,6]。过滤出满足条件的元素

七.some()

const arr = [1,2,3,4]
const arrSome1 = arr.some(item => item>2)
const arrSome2 = arr.some(item => item>10)
arr   // [1,2,3,4]
arrSome1    // true,检测是否有大于2的元素，只要有，剩余元素不再执行，返回true
arrSome2    // false,检测是否有大于10的元素，没有，返回false

八.every()

const arr = [1,2,3,4]
const arrEvery1 = arr.every(item => item>2)
const arrEvery2 = arr.every(item => item>0)
arr    // [1,2,3,4]
arrEvery1     // false,检测是否有大于2的元素，只要有一个不满足，剩余元素不再执行，返回false
arrEvery2     // true,检测是否有大于0的元素，全部满足，返回true

九.find()

const arr = [1,2,3,4,5,6]
const arrFilter = arr.find(item => item>2)
arr   // [1,2,3,4,5,6]
arrFilter    // 3  找到满足条件的第一个元素，找不到返回undefined

十.findIndex()

const arr = [1,2,3,4,5,6]
const arrFilter = arr.findIndex(item => item>2)
arr   // [1,2,3,4,5,6]
arrFilter    // 2 占到满足条件的第一个元素的索引，找不到返回-1

十一.reduce()
reduce((preValue,curValue,curIndex,array)=>{},initValue)

preValue: 上一次调用callback时候的返回值。在第一次调用时，若指定了初始值initValue，其值就为initValue，否则为array[0]。必需
curValue: 当前正在处理的值，在第一次调用时，若指定了初始值initValue，其值就为array[0]，否则为array[1]。必需
curIndex: 当前正在处理的值的索引，在第一次调用时，若指定了初始值initValue，其值0，否则为1。可选
array: 用于遍历的数组，可选
initValue: 指定的初始值，可选

看几个reduce函数的用处：

// 1. 用于数组求和
const arr = [1,2,3,4,5]
const sum = arr.reduce((preValue,curValue)=>{return preValue + curValue
})
sum    // 15// 2. 统计数组或者字符串中每个每个元素出现的次数
const arr = ['杨幂','杨颖','杨洋','杨洋','杨迪','杨颖','杨颖']
const str = 'wangjiajiawwwjiajiawwwww'
// 传统for循环的办法
function getWordCnt(param){const obj = {}  // 定义一个对象用来接收统计结果for(let i of param){obj[i] = (obj[i] + 1) || 1}return obj
}
getWordCnt(arr)    // {杨幂: 1, 杨颖: 3, 杨洋: 2, 杨迪: 1}
getWordCnt(str)    // {w:9, a:5, n:1, g:1, j:4, i:4}// reduce()方法
function getWordCnt(param){if(typeof param === 'string'){   // 如果是字符串转化成数组在处理param = param.split('')}return param.reduce((preValue,curValue)=>{preValue[curValue] = (preValue[curValue] + 1) || 1return preValue},{})
}
getWordCnt(arr)    // {杨幂: 1, 杨颖: 3, 杨洋: 2, 杨迪: 1}
getWordCnt(str)    // {w:9, a:5, n:1, g:1, j:4, i:4}
// 可以看到reduce方法更加方便，reduce函数的用处远不止以上两个，实际中根据情况灵活运用，往往起到事半功倍的效果。

六. 函数扩展

箭头函数：()=>{}
* 箭头函数本身没有this,会沿着作用链向上一层一层的找来确定this的值
* 箭头函数中的this指向的是定义时的this，而不是执行时候的this。
* 如果只有一个参数括号可以省略，多个参数或者没有参数时候不可以省略，如果只有一个返回值{}可以省略
* 不能使用new 关键字
* 不能使用yeild
* 箭头函数不绑定arguments对象，如果需要传入多个参数可以使用rest形式（…变量）

七.symbol

es6里面新增加的基本类型。
通过symbol创建的变量是独一无二的，不存在命名冲突问题
同一个symbol()函数返回的值是不一样的

const a = Symbol(1)
const b = Symbol(1)
a === b    // false

通过symbol定义的变量不能和别的类型定义的变量一起运算，会报错

const a = Symbol(1)
const b =2
a + b   // 报错： Cannot convert a Symbol value to a number

八. Set和Map的用法

Set
- 概念：一种新的数据结构，本身是一个构造函数，接收一个数组或者具有迭代接口的其他数据结构，生成的数据没有重复元素，一般可用于数组去重。
- 使用方式：new Set()
- 方法：
  - new Set().add() 添加元素
  - new Set().delete() 删除元素，返回布尔值，删除成功返回true,删除失败返回false
  - new Set().has() 判断是否含有某个元素，返回布尔值
  - new Set().clear() 清空set数据结构
  - new Set().size 没有括号，返回此结构长度

const arr = [1,2,2,3,3,3,4,4,5]
const str = 'wangjiajiawwwjiajiawwwww'
// 1.添加元素
new Set(arr)   // Set{1,2,3,4,5}
new Set(str )    // Set{'w', 'a', 'n', 'g', 'j', 'i'}
new Set(arr).add(8)    // Set{1,2,3,4,5,8}// 2.删除元素
new Set(arr).delete(2)    // true
new Set(arr).delete(9)    // false// 3.判断是否含有某个元素
new Set(arr).has(2)    // true
new Set(arr).has(9)    // false// 4.清空set数据结构
new Set(arr).clear()  // undefined// 5.没有括号，返回此结构长度
new Set(arr).size    // 5

Set可以用于数组和字符串的去重

const arr = [1,2,2,3,3,3,4,4,5]
const str = 'wangjiajiawwwjiajiawwwww'
function deWeight(param){if(typeof param === 'string'){return Array.from(new Set(param)).join('')// return [...new Set(param)].join('')}return Array.from(new Set(param))// return [...new Set(param)]
}
deWeight(arr)    // [1, 2, 3, 4, 5]
deWeight(str)    // 'wangji'

Map
- 概念：类似于对象功能，本质上是键值对，用于做数据的映射
- 使用：new Map()
- 方法：
  - size 长度
  - set(键，值) 添加
  - get(键) 获取对应键的值
  - has(键) 判断当前键是否在结构中
  - delete(键) 删除当前键
  - clear() 清空数据结构
  - keys() 获得所有的键
  - values() 获得所有的值
  - entries() 获得所有的键值对构成的数组

const myMap = new Map([['name','wangjiajia'],['age',24]])
myMap    //  {'name' => 'wangjiajia', 'age' => 24}
myMap.size    // 2
myMap.set('sex','女')  //{'name' => 'wangjiajia', 'age' => 24, 'sex' => '女'}
myMap.get('name')    // 'wangjiajia'
myMap.has('name')    // true
myMap.delete('name')     // true
myMap.clear()      // undefined
myMap.keys()     // {'name', 'age'}
myMap.values()    // {'wangjiajia', 24}
myMap.entries()     // {'name' => 'wangjiajia', 'age' => 24}

九. var,let,const

var声明的变量具有变量提升（无论在函数体哪个位置声明变量都相当于在函数体的头部声明变量）
let和const声明的变量是块级变量只在当前作用域生效{},不具有变量提升
let和const声明的变量必须先声明后使用（暂时性死区）
let声明的变量是可以改变的，const声明的变量是不可以改变的（指的是不能改变内存地址，但是可以改变内部属性值，例如改变对象中的某一个属性）

十.模板字符串

${}

十一.模块化

导入：ES6使用关键字 import 导入模块（文件），有两种常用的方式：

import '模块名称'  from  '路径'；
import  '路径'；

导出：ES6 通过 export 和export default 导出模块。

let name = 'ren',age = 12;
export {name,age};
//注意：变量需要用大括号包裹，然后才能向外输出function testFun (){}
export {textFun}
export default function testFun (){}

export和export default的区别
- export和export default可以存在于同一个文件中。
- 一个文件可以用多个export,在导入的时候要用{}包裹，名称不能更换。
- 一个文件只能有一个default export,在导入的时候不要用{}包裹，名称能随意更换。

const arr = []
const obj = {}
function fun(){}
export {arr,obj}
export default fun// 引入的时候
import funTest,{arr,obj} from '路径'

十二.异步Promise

回调函数：一种解决异步编程的方法，当回调函数过多的时候会引发地狱回调问题。
地狱回调：在回调函数中继续使用回调函数，使得逻辑结构变得非常复杂。
说明：
- 一种解决异步编程的优秀方案，多用于项目中的网络请求。
- 以同步的形式来解决异步编程中可能会出现的地狱回调问题（链式）
- 三种状态：
  - pending：异步操作处于执行中
  - fulfilled：异步操作成功了，马上执行.then()
  - rejected：异步操作失败了，马上执行.catch()
- 语法：

// 三个实例方法：then(),catch(),finally()
new Promise((resolve,reject)=>{}).then(res => {'执行成功后的逻辑'}
).catch(error => {'执行失败后的逻辑'}
).finally()  // 不管成功或者失败都会执行
// 例子：
new Promise((resolve,reject)=>{resolve('成功了!')
}).then(res=>{console.log(res)    // 成功了！
})new Promise((resolve,reject)=>{reject('失败了!')
}).catch(error=>{console.log(error)   // 失败了！
})
// 注意：then()可以接收两个参数，第一个是成功后的回调，第二个是失败后的回调。当只写了一个参数，错误在catch中捕获，写了两个在第二个参数中捕获错误，此时catch不生效（就近原则）
new Promise((resolve,reject)=>{reject('失败了!')
}).then(res=>{console.log(res)
},error=>{console.log(error)    // 失败了！
})

Promise里面的方法
- Promise.all([p1,p2,…])
  - 只有当每一个promise的状态是成功整体才是成功，返回的结果会存储在一个数组中。只要有一个失败，整体的状态就是失败，返回第一个失败的结果。
- Promise.race([p1,p2,…]) 只要有一个状态率先改变，整体的状态就会改变。
- Promise.allSettled([p1,p2,…])：只有等到所有的参数实例都返回结果，不管是undefined还是rejected，包装实例才会结束。
- Promise.resolve() 等价于 new Promise(resolve => resolve(‘foo’))
- Promise.reject() 等价于 new Promise(reject=> reject(‘foo’))

十三.异步Generator

描述：也是一种解决异步编程的方法
说明：
- 本质上是一种状态机，里面封装了很多不同状态的数据
- 用来生成遍历器
- 通过yield命令暂停，next命令启动
- 返回的结果就是yield后面表达式的结果{value:‘’,done:true/false} true表示异步执行结束通常返回的结果是undefined，false表示异步没有结束
- 函数返回的结果是一个指针对象

function* name(){yield 'hello'   // {value:'hello',done:true}
}
var g=name(1)
g.next()

十四.异步Async

也是一种解决异步编程的优秀方案
优点：
- 不需要通过执行器，可以像普通函数一样被执行
- 通过async await的语句使得语义化更加清楚
- async返回的结果是一个promise,可以通过.then()的方法来处理返回结果
- await可以看做是.then()命令的语法糖,await得到的结果就是.then()处理后得到的结果
- 唯一的难点是对于错误机制的捕获

async function promiseFunction(){const promise = new Promise((resolve,reject)=>{setTimeout(()=>{resolve('执行成功');// reject('执行失败')},2000)})return promise
}
var res = await promiseFunction() <=> promiseFunction().then(res=>{console.log(res)  // '执行成功'
})
res    // 执行成功

错误机制的捕获

// 使用try{await...}catch(err){}，将正常流程代码写进try{}里面，如果执行成功走try{}，如果执行失败错误会被catch捕获到
async function promiseFunction(){const promise = new Promise((resolve,reject)=>{setTimeout(()=>{reject('执行失败')},2000)})return promise
}
try{const res = await promiseFunction()
}catch(err){console.log(err)    // '执行失败'
}

十五.class类

在es5中创建一个类：
- 创建一个构造函数 function fun(){}
- new 实例化 var f = new fun()
在es6中创建一个类：
- 利用class关键字
- 执行constructor函数
- new 实例化
- 语法：

class student {constructor(uname,age){this.uname = unamethis.age = age}
}
const stu = new student('wangjiajia',24)
stu.uname    // 'wangjiajia'
stu.age    // 24

类的继承

class Son extends Father{}
// 例如：
// 父类：
class Father{constructor(uname,age){this.uname = unamethis.age = agethis.getSecret = function (){return '这是一个秘密'}}getLook(){return '长得漂亮'}
}
// 子类：
// super：会作为函数调用时，代表父类的构造函数
class Child extends Father{constructor(uname,age){super(uname,age)}
}
const child = new Child('wangjiajia',24)
child.uname    // 'wangjiajia'
child.age    // 24
child.getSecret()    // '这是一个秘密'
child.getLook()  // '长得漂亮'

ECMAScript 篇相关推荐

【人人都能读标准】前言：为什么你学不精JavaScript？
本文为<人人都能读标准>-- ECMAScript篇的前言.我在这个仓库中系统地介绍了标准的阅读规则以及使用方式,并深入剖析了标准对JavaScript核心原理的描述. 我先从一个Java ...
深入理解JavaScript系列（10）：JavaScript核心（晋级高手必读篇）
http://www.cnblogs.com/TomXu/archive/2012/01/12/2308594.html 本篇是ECMA-262-3 in detail系列的一个概述(本人后续会翻译整 ...
ecmascript_TC39及其对ECMAScript的贡献
ecmascript by Parth Shandilya 通过Parth Shandilya TC39及其对ECMAScript的贡献 (TC39 and its contributions to ...
《MongoDB权威指南》迷你书连载一－入门篇
MongoDB 非常强大,同时也很容易上手.本章会介绍一些 MongoDB 的基本概念. 文档是 MongoDB 中数据的基本单元,非常类似与关系型数据库中的行(但是比行要复杂得多) 类似地,集可以被 ...
ECMAScript 6入门
预计在2014年底,ECMAScript 6将会正式发布,他的草案在13年3月份被冻结,后续提出新特性将会移至ECMASript 7中.目前还没有哪款浏览器实现了ES6的全部内容,兼容性最强的一款要数 ...
你的 mixin 兼容 ECMAScript 5 吗？
原文:Are your mixins ECMAScript 5 compatible? 作者:Nicholas C. Zakas 译文:你的 mixin 兼容 ECMAScript 5 吗? 译者:j ...
好程序员web前端分享HTML基础篇
好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...
《高性能javascript》领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）...
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...