1.ECMAScript
## 介绍
* 一般来说ECMAScript可以认为是javascript
* javascript对ECMAScript进行了扩展
### javascript组成
* ECMAScript(核心)
* 扩展-->浏览器端
* DOM
* BOM
* 扩展-->服务器端
* NODEJS
## ES版本变化
1. ES5 发布于2009年
2. ES6 发布于2015年
3. ES7 发布于2016年
2.数组函数的扩展
* Array.prototype.indexOf(value)
* 返回value在Array中第一次出现的下标
* Array.prototype.lastIndexOf(value)
* 返回value在Array中第一次出现的下标
* Array.prototype.forEach(function(item, index, arr){})
* 遍历整个数组
* Array.prototype.map(function(item, index){})
* 遍历整个数组并将每个值按照回调函数的return的结果进行修改,返回值为修改好的数组
* Array.prototype.filter(function(item, index){})
* 遍历整个数组并将每个值按照回调函数的return的结果进行过滤,不满足则丢弃,返回值为修改好的数组
函数的扩展
* Function.prototype.bind(obj)
* 将函数内的this值修改为obj并将修改好的函数返回， 常用作为回调函数
* Function.prototype.call(obj, para1, para2...)
* 立即调用函数并将函数内的this值修改为obj并将修改好的函数返回, 与apply区别在于参数不同
* Function.prototype.apply(obj, [para1, para2...])
* 立即调用函数并将函数内的this值修改为obj并将修改好的函数返回
3.let和const
### let
* 作用与var类似, 用于声明变量
* 特点：
* 在块作用域里有效
* 不能重复声明
* 不会预处理, 不会发生提升
* 应用：
* 循环遍历加监听
* 取代var是趋势
### const
* 特点：
* 值不能修改
* 其余与let相同
* 应用：
* 保存不需要修改的数据
4.结构赋值
* 从对象或者数组中提取数据并将其赋值给变量(多个)
* 给对象解构赋值
* `let {a,b} = {a: 'bbb', b: 'ccc'}`
* 按照对象名来进行取值
* 给数组解构赋值
* `let [a,b] = [1, 'aaaa']`
* 按照下标顺序赋值
* 用途：
* 给多个参数赋值
* 应用给函数形参与实参
5.模板字符串
* 简化字符串的拼接
* 使用``对字符串进行拼接
* 变量的部分使用${xxx}代替
6.对象简写
对象的简写
* 属性值与属性名相同时可以只写属性名
* 函数的function可以省略
7.箭头函数
不能作为构建实例化对象
不能使用arguments变量
* 特点：
* 简洁
* 箭头函数的this与谁调用无关，而是定义时所处对象的this
* 扩展理解
1. 先看箭头函数外层有没有函数，有则为普通函数的this，没有就是window
2. 如果外层也是箭头函数继续重复第一步的操作
8.点点点（…）扩展运算符
let e=['我的','你的','好']
//声明一个函数
function c(){
console.log(arguments)
}
c(...e)
const r=['2','3']
//数组的合并
const er=[...e,...r]
console.log(er)
//当可变参数前也声明了形参时会自动从自己里剔除相应数量形参
function foo(a, ...value){
console.log(value)
}
foo(1,2,3,4,5) //2,3,4,5
扩展用法
let a = [1,6]
let b = [2,3,4,5]
a = [1, ...b, 6]
console.log(a) //[1,2,3,4,5,6]
9.形参默认值
//形参初始值，具有默认参数一般靠后
function add(a,b,c=10){
return a+b+c
}
let result=add(1,2)
console.log(result) //13
10.promise对象
* promise对象: 代表了将来某个将要发生的事件(通常是异步操作)
* 有了promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数
* ES6的Promise是个构造函数，用来生成promise实例
* 参数函数resolve的参数可以是另一个promise，此时当前promise会等待另一个promise状态发生改变时才继续执行
* promise共有三个状态：
* pendding 初始化状态
* fullfilled 成功状态
* rejected 失败状态
* 基本步骤
// 1. 创建promise的实例
let url = ''
function getNews(url){
let xmlRequest = new XMLHttpRequest(url)
let promise = new Promise((resolve, reject)=>{
// promise处于初始化状态
xmlRequest.onreadystatechange = ()=>{
if(xmlRequest.readystate === 4){
if(xmlRequest.state === 200){
xmlRequest.open('get', url)
console.log(xmlRequest.responseText)
// 2. 指定进入成功状态时的回调函数的逻辑
resolve(xmlRequest.responseText)
}else{
// 3. 指定进入失败状态时的回调函数的逻辑
reject('失败了')
}
}
}
})
// 返回promise以创建下一条链式调用
return promise
}
getNews(url)
.then((data)=>{
// fullfilled状态，步骤2中的回调函数
let {newUrl} = JSON.parse(data)
// 返回promise以继续创建下一条链式调用
return getNews(newUrl) // 重新创建了新的promise来重复执行函数getNews
}, (error)=>{
// rejected状态，步骤3中的回调函数
console.log(error)
})
.then((data)=>{
// fullfilled状态，步骤2中的回调函数
console.log('完成')
}, (error)=>{
// rejected状态，步骤3中的回调函数
console.log(error)
})
.catch(error=>{ //通常不会给then指定第二个错误回调，而是使用catch方法来捕获错误
console.log(error)
})
.finally(()=>{}) //在执行完then或者catch回调后就执行，本质两者回调中的逻辑交集，发布于ES8
10.1Promise来封装ajax请求操作
//promise进行封装
const p=new Promise(
(resovle,reject)=>{
//1、创建对象
let xhr=new XMLHttpRequest()
//2、初始化
xhr.open("GET","https://api.apiopen.top/getJoke")
// 3、发送
xhr.send();
// 4、绑定事件处理响应结果
//promise进行封装
const p=new Promise(
(resovle,reject)=>{
})
xhr.onreadystatechange=function(){
//判断
if(xhr.readyState===4){
// 判断状态码200到299
if(xhr.status>=200&&xhr.status<300){
//表示成功
resovle(xhr.response)
}else{
//失败
reject(xhr.response)
}
}
}
})
//指定回调
p.then(function(value){
console.log(value)
},function(reason){
console.log(reason)
})
11.symbol
在ES5中由于对象的属性名是个字符串，可能造成命名冲突
* 比如想给别人创建的对象添加新属性时，新属性名可能与原属性名冲突，此时可用symbol解决
* 在ES6中新增加的基本类型
* 表示一个独一无二的值，无法与其他值进行运算包括拼串
* 创建时不使用new运算符，因为它不是对象而是一个原始类型的值
* 不会被for in 与for of遍历到
let symbol = Symbol()
console.log(symbol) //symbol()
//可以传参作为它的标识符
let symbol1 = Symbol('one')
console.log(symbol) //symbol(one)
//如果传入参数是一个对象则调用toString方法来作为标识符
let obj = {
toString(){
return 'abc'
}
}
let symbol2 = Symbol(obj)
console.log(symbol) //symbol(abc)
12.iterator遍历器
* 是一个接口机制，为各种不同的数据结构提供统一的访问机制
* 作用：
* 为各种数据结构提供一种统一简洁的接口
* 使得数据结构能按一定次序排列
* ES6创造一种新的遍历方式for of，带有iterator接口的数据才能被遍历
* 工作原理：
* 创建一个指针对象(遍历器对象)，指向数据结构的起始位置
* 调用next方法，指针自动指向数据结构的第一个成员
* 继续调用next方法，指针指向下一个成员直到指向最后一个成员
* 每调用一个next方法返回一个对象包含value与done
* value表示当前的值，done表示是否遍历完成，布尔值
* 当遍历结束时(最后一个值的next)value为undefined，done返回true
```javascript
//模拟遍历器接口
let arr = [1,2,3,4,5]
let iterator = (arr)=>{
let index = 0
return index >= arr.length?{value: arr[index], done: false}:{value: undefined, done: true}
}
* 将iterator接口部署到指定数据结构上，可以使用for of遍历
* 数组，字符串，arguments，map容器，set容器自带iterator接口
let arr = [1,2,3,4,5]
for(let i of arr){
console.log(i)
}
//1,2,3,4,5
let str = 'abcdefg'
for(let i of str){
console.log(i)
}
//a,b,c,d,f,g
function foo(a,b,c,d){
for(let i of arguments){
console.log(i)
}
}
foo(1,2,3,4)//1,2,3,4
```
* 对对象使用for of时会调用对象内Symbol.iterator的函数
```javascript
//给对象添加模拟遍历器
obj = {
[Symbol.iterator](){
return { index: 0,
next:function(){
return this.index<=3?{value: this.index++, done: false}:{value: undefined, done: true}
}}
}
}
13.async函数
* ES7语法
* 真正意义上解决异步回调，同步流程表达异步操作
* 本质是generator的语法糖
* async函数返回值为promise
```javascript
async function foo(){
await 异步操作
await 异步操作
}
```
* 例子
function getNews(url){
let promise = new Promise((resolve, reject)=>{
if(url === 'aaa'){
resolve(url)
}else{
//参数函数的执行不会终止后续逻辑但是由于状态只会转变一次，因此回调需要二选一
resolve(false) //此种回调可以让失败的逻辑交给async函数本身处理
reject('普通函数失败') //此种回调可以让失败逻辑交给async函数的then方法来执行
}
})
return promise
}
async function test(){
let result = await getNews('bbb') //await后的函数只有promise为成功状态才会继续执行
//此处的if判断是建立在上个函数调用resolve的基础上
if(result===false){ //可以借用给resolve传递false来表示promise实际为fullfilled状态
console.log('async函数失败') //针对fullfilled状态需要执行的逻辑
}else{
console.log(result) //成功状态执行的逻辑
}
result = await getNews('aaa')
console.log(result)
return 'async函数成功'
}
//处理异步执行过程中发生的成功或者失败的逻辑
test().then((data)=>{
console.log(data) //成功执行此处，data的值为async函数return的值
},(error)=>{
console.log(error) //失败执行此处
})
14. class
* 通过class定义类/实现类的继承
* 在类中使用constructor来实现类的属性继承
* 使用函数简写的形式给类添加一个方法
* 子类使用extends继承父类
* 子类在constructor中使用super来调用父类继承的属性
* 子类可以通过父类的方法重写来实现调用自己的方法
class Person{
constructor(name, age){ //属性继承
this.name = name
this.age = age
}
getName(){ //创建父类方法
console.log(this.name, this.age)
}
}
class SalaryPerson extends Person{
constructor(name, age, salary){
super(name, age) //继承父类属性
this.salary = salary
}
getName(){ //重写父类方法
console.log(this.name, this.age, this.salary)
}
}
let aPerson = new SalaryPerson('aa', 16,2000)
console.log(aPerson)
15.扩展
### 字符串扩展
* `str.includes(str)` 判断是否包含指定字符串
* `str.startWith(str)` 判断是否以指定字符串开头
* `str.endWith(str)` 判断是否以指定字符串结尾
* `str.repeat(count)` 返回重复了指定次数的字符串
### 数值扩展
* 二进制与八进制表示法：0b开头表示二进制，0o表示八进制
* `number.isFinite(i)` 判断是否是有限数
* `number.isNaN(i)` 判断是否是NaN
* `number.parseInt(str)` 字符串转化为整数
* `number.isInteger(i)` 判断是否是整数
* `Math.trunc(i)` 小数转化为整数
### 数组对象的扩展
* `Array.from(v)` 将伪数组转化为真数组
* `Array.of(v1,v2,v3)` 将一系列数据转化为数组
* `Array.find(function(item, index, arr){})` 找到满足条件的第一个值
对象的扩展
* `Object.is(v1, v2)` 判断两个数据是否相等，底层是判断字符串
* `Object.assign(target, source, [source, source])` 将源对象的属性添加到目标对象上
* 从ES6开始__proto__可以被操作
16.拷贝
* 拷贝数据：
* 基本数据类型
* 拷贝后生成一份新的数据，修改新数据不会改变原数据的值
* 对象/数组
* 拷贝后是传递原数据的引用地址，修改新数据会改变原数据的值
* 深拷贝：
* 拷贝的不是引用地址
* 浅拷贝：
* 拷贝的是引用地址
* 几种拷贝方法：
1. 直接赋值 浅拷贝
2. Object.assign() 浅拷贝
3. Array.prototype.concat() 浅拷贝
4. Array.prototype.slice() 浅拷贝
5. JSON.parse(JSON.stringify()) 深拷贝, 但是内容中不能包括函数，否则是null
* 深拷贝的实现要求
* 拷贝的内容里不能有对象/数组
* 深拷贝的实现
function clone(target){
let value = null
if(checkedType(target) === 'Object'){
value = {} //如果形参为对象则创建对象字面量
}else if(checkedType(target) === 'Array'){
value = [] //如果形参为数组则创建数组字面量
}else{
return target
}
for(let i in target){ //遍历对象或者数组
value[i] = arguments.callee(target[i]) //递归调用判断对象或者数组中的值
}
return value
function checkedType(obj){
return Object.prototype.toString.call(obj).slice(8, -1) //调用原型上纯净的方法
}
}
17.set与map容器
#### set容器
* 无序的不可重复的多个value的集合体
* Set(array) 将数组转化为set容器
* set.add()
* set.delete()
* set.has()
* set.clear()
可用来解决数组内数据重复问题
#### map容器
* 无序的key不重复的多个key-value的集合体
* Map(array) 将两维数组转化为map容器
* map.set(key, value)
* map.get(key)
* map.delete(key)
* map.has(key)
* map.clear()
* map.size
## ES7新增
* 指数运算符`**`
* Array.prototype.includes(value) 判断某个值是否在数组内
18.模块化
1.导入
1.
导入 一个 没有 导出 任何 接口的 文件 （js或者其他类型文件）
直接 import 引入 文件即可，相当于 文件在引入的位置处运行（模块化，变量不会互相污染）
import './assets/a.css'
import './assets/a.js'
2.
+ 引入第三方模块 （下载在node_modules中的模块）
引入时 直接写文件名即可，如果 导出 接口 需要使用变量接收
```js
import 变量名 from '包名'
import Vue from 'vue'
import VueRouter from 'vue-router'
3.
在另一个文件中导入
1 全部引入
import * as obj from './assets/c.js'
obj是对象 属性 就是 模块中所有的接口名
2 按需引入
import { a, b, fn } from './assets/c.js' 利用对象的结构赋值
自定义模块导入导出 注意：自定义的模块 即使同一目录 也一定要加 ./
+ 定义一个 文件 导出 多个 接口
- export 多次导出
// a.js
export const a = 10
export const b = [1, 2, 3]
export const fn = () => {
console.log(111)
}
- export 统一导出
const a = 10
const b = [1, 2, 3]
const fn = () => {
console.log(111)
}
export {
a,
b,
fn
}
导出默认值
export defualt 值
// eg
export default [1, 2, 3, 4]
导入
直接import时声明变量接收值 import arr from './js/d'
注意：一个文件只能出现一次 export default
