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)
}