ES6的扩展

1.ES6介绍？

ECMAScript和JavaScript：
ECMA是标准，JS是实现；
类似于HTML5是标准，IE10、Chrome、FF都是实现；
换句话说，将来也能有其他XXXScript来实现ECMA；
ECMAScript简称ECMA或ES；

目前版本：
- 低级浏览器主要支持ES 3.1
- 高级浏览器正在从ES 5过渡到ES 6

es6：
ECMAScript 6.0 的简称 ECMA-2015，是 JavaScript 语言的下一代标准。

ECMAScript：
ECMA 是制定js的标准化组织。
ECMAScript规定了浏览器脚本语言的标准。

ECMAScript 和 javascript 关系：
ECMAScript是JavaScript的规格（标准）
JavaScript是ECMAScript的一种实现。

语法提案的批准流程：
Stage 0 - Strawman（展示阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段） //查不多定了 可以用了
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）

es6特点:
严谨 简洁

2.ES6的扩展？

1.新增了块级作用域(let,const)
2.新增了定义类的语法糖(class)
3.新增了一种新的基本数据类型(symbol)
4.新增了变量的解构赋值
5.函数允许设置默认值，引入了rest参数，新增了箭头函数
6.数组新增了一些API，如isArray/from/of方法；数组实例新增了entries(),keys(),和value方法
7.对象和数组新增了扩展运算符
8.ES6新增了模块化（import/export）
9.ES6新增了Set和Map数据结构
10.ES6提供了Proxy函数，用来生成Proxy实例
11.ES6新增了生成器（Generator）和遍历器（Interator）

3.let const?

let const 是：
ES6新增的两个重要的关键字，它们的作用都是定义变量。

let用法：
1.let定义的变量在代码块内有效
（let有自己的作用域 ，只要是有花括号就在一个作用域）
2.不能重复声明变量
(不能重复定义，但是在不同的作用域里面就可以进行再次定义）
3.不存在变量提升
（let变量必须先声明再使用，var可以先使用再声明）

let使用场景:
let可以解决循环里面加事件，事件里面的i值不能用的问题！
let主要在于方法和事件里面的可以修改的变量的定义。

const概念和用法:
const是定义一个常量，也是不能重复定义，只要是有一个花括号就有
一个作用域，不能修改，但是这些只要是在不同的作用域中就可以。
const声明一个只读变量，声明之后不允许。意味着，一旦声明必须 初始化，声明就赋值，否则会报错。

暂时性死区:
代码块内如果存在let或者const,代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量PI之前使用它会报错。

var let const的比较:
var和let之间优先选用let：let和var语义相同，但是let没有那么多副作用；
变量应该只在它声明的代码块内有效，var做不到这一点；
var有变量提升问题，但是let没有。
在let和const之间有优先选择const : const声明的变量不能改变，比较 符合函数式编程，
运算值不改变值，这样的话js编译器会对const进行优化，提高程序 运行效率。

优先级;
const>let>var

4.解构赋值？

概念和作用:
是ES6的一种语法，它允许我们按照一定的模式，提取数组和对象中的值，对变量进行赋值，这种方式被称之为结构赋值，它是对js赋值运算符的扩展。

注意的问题:
.表达式左右必须一致，使用左侧定义的值快速取出右侧对应的数值；
.定义和赋值必须放在一起，否则就会报错，取不到数据；
.表达式左边必须是js中的数据解构，否则也会报错；

作用：
让我们能够快速的从复杂的对象中取出我们想要的数据。

常见数值模型解析赋值:
1.基本赋值 let [m,n]=[1,2]
2.忽略赋值 let [a,b]=[1,2,3]
3.不完全解构 let [a,b,c]=[1,2]
4.字符串解构 let [a,b,c,d,e]=“hello”
5.解构默认值 let [a=1]=[]
6.剩余运算符赋值

常见对象模型解构赋值:
1.基本情况
let {name}={name:“zhangsan”} //name=“zhangsan”
let {name:foo}={name:“zhangsan”} //foo=“zhangsan”
2.嵌套忽略赋值
let {num:[x,{}]}={num:[1,{y:3}]}
3.不完全解构
let {num:{x,y}}={num:{x:1}}
4.剩余运算符
let [a,b,…rest]={a:1,b:2,c:3,d:4}
5.解构默认值
let {name:first=3,age:bb=18}={name:“zhangsan”}
使用场景:
1-变量交换 —>{let a=1;b=2;[a,b]—>ES5采用中间变量的方式进行存储；
2-函数返回多个值
—>
function fn(){
return[1,2]
}
let a,b;
[a,b]=fn();
---->
ES5先给一个变量获取函数的返回结果，再按索引获取两个值；

5.使用promise封装API接口思路?

首先先创建三个JS文件，分别是core.js(核心文件) config.js(配置文件) index.js(入口文件)

1.- 在核心文件中首先创建一个axios实例 里面写baseURL(请求头)和超时时间

• 抛出一个函数作用判断是get请求还是post请求
• 封装返回请求的方式
• 在核心文件里面引入配置文件里面的请求的封装方式

2.- 在配置文件中

• 封装请求方式
• 封装请求路径

3- 在入口文件中

• 引入核心文件和配置文件
• 在一个对象里面封装一个函数 return返回请求方式和请求地址和参数
• 抛出这个对象

4.最后把入口文件里面的对象引入到main.js里面，全局注册一下，Vue.prototype.$函数名=函数名

6.数组的扩展？

Array.from() 将两类对象转成数组；
Array.of() 将一组转换为数组；

var arrayLink={“0”:“a”,“1”:“b”,“2”:“c”,length:3};
var arr=Array.from(arrayLink);
console.log(arr); //[“a”,“b”,“c”]
console.log(typeof arr); //object
console.log(Array.from(“abcdefghi”));
//[“a”,“b”,“c”,“d”,“e”,“f”,“g”,“h”,“i”]
// Array.of() 将一组转换为数组
console.log(Array.of(1,2,3,4,5)) //[1,2,3,4,5]

copyWithin()
数组实例的copyWithin方法，在当前数组内部，
将指定位置的成员复制到其他位置（会覆盖原有成员），
然后返回当前数组。target、start、end三个参数
console.log([1,2,3,4,5].copyWithin(0,3))

find的()和findIndex()
数组实例的find方法，用于找出第一个符合条件的数组成员

forEach(callback[, thisObject]) 在数组每个元素项上执行callback

map(callback[, thisObject]) 在数组的每个单元项上执行callback函数，并把返回包含回调函数返回值的新数组

filter(callback[, thisObject]) 返回一个包含所有在回调函数上返回为true的元素的新数组（译者注：callback在这里担任的是过滤器的角色，当元素符合条件，过滤
器就返回true，而filter则会返回所有符合过滤条件的元素）。

every(callback[, thisObject]) 当数组中每一个元素在callback上被返回true时就返回true（译者注：同上，every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。

some(callback[, thisObject]) 只要数组中有一项在callback上被返回true，就返回true（译者注：同上，类似every，不过前者要求都符合筛选条件才返回true，后者只要有符合条件的就返回true

reduce(callback[, initialValue]) 使用回调函数 callback(firstValue, secondValue) 把数组列表计算成一个单一值

7.ES6实现数组去重？

 let  arr = [12,12,45,2,3,4,12,34,45,56,78,345];
//  console.log(Array.from(new Set(arr)))
//  console.log([...new Set(arr)])
    function uniqueen1(arr) {
        return  Array.from(new Set(arr))
    }
    function uniqueen2(arr) {
        return  [...new Set(arr)]
    }
    console.log(uniqueen2(arr))

8.Map数据结构?

let  map = new Map()
let i = 100;
map.set(i,"111");
var o = {p:"hello"};
map.set(o,"content");
console.log(map)
console.log(map.has(o))
map.delete(o)
console.log(map)
console.log(map.has(o))

//其他
let m  = new Map([["name","tom"],["age",18]])
console.log(m)
let mm = new Map().set(true,70).set({foo:"12"},["a","b"])
console.log(mm)
console.log([...mm])
mm.forEach((v,k)=>{
    console.log(v+" : "+k)
})
for(let i of mm.keys()){
    console.log(i)
}
for(let i of mm.values()){
    console.log(i)
}
for(let i of mm.entries()){
    console.log(i)
}