ES6知识点

最新推荐文章于 2024-08-07 21:58:12 发布

Yootooki

最新推荐文章于 2024-08-07 21:58:12 发布

阅读量717

点赞数 12

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/qq_46978442/article/details/139355372

版权

1.var、let、const 三者区别

1.1变量提升

var声明的变量有变量提升：可以在声明之前调用，只为undefined；

let和const声明的变量没有变量提升：必须在声明后调用

1.2暂时性死区

var是没有暂时性死区；

let和const是有暂时性死区，必须要声明变量之后才能使用；

1.3块级作用域

var没有块级作用域（全局声明）；

let和const有块级作用域（局部声明）；

1.4重复声明

var允许重复声明；

let和const不允许在同一作用域内重复声明；

1.5修改声明的变量

var和let可以修改声明的变量

const不能修改声明的变量，const声明的是一个常量，该值是不可以被修改的；

2.ES6数组新增的扩展

2.1扩展运算符的使用

通过...可以将一个数组转为逗号分隔的参数序列,(用做参数)

console.log(...[a,b,c]);//a b c

也可用于数组的合并
const arr1=[1,2];
const arr2=[3,4];
const arr3=[...arr1,...arr2];
console.log(arr3);//[1,2,3,4]
也可用于数组的复制（浅拷贝）
const arr1=[1,3];
const [...arr2]=arr1;//arr2为[1,3]
也可用于解构
const [a,...b]=[1,2,3,4,5];//a为1，b为[2,3,4,5]
如果用于数组赋值，只能放在最后一位（下面是错误例子）
const [...a,b]=[1,2,3,4,5,];//报错

2.2构造函数新增的方法

Array.from()

1.将两类对象转为真正的数组：类似数组的对象、可遍历的对象（包括Set和Map）

2.可接受第二个参数对每个元素进行处理，并将处理后的值放入返回的数组

eg：Array.form([1,2,3],(i)=>i+i);//[2,4,6]

Array.of()

1.将一组值转换为数组

eg：Array.of(1,2,3);//[1,2,3]

注意：没有参数是返回一个空数组，只有一个参数时是指定数组的长度，参数为两个或两个以上才会返回一个新数组

实例对象新增的方法

copyWithin(target，start，end):将指定位置的成员复制到其他位置（会覆盖原有的成员），然后返回当前数组

target必填：从该位置替换，为负数则倒着数，

start可选：从此位置开始读取数据，默认值是0，若为负数则倒着数

end可选：到此位置结束读取数据，默认为数组长度，为负值表示从结束位置开始数

eg：[a,b,c,d].copyWithin(0,2);将从这个数组中从索引为2开始到数组结束的数据（c,d）复制到索引为0开始的位置，覆盖了a和b ，最后结果为：[c,d,c,d]

find((value,index,arr)=>{})：找出第一个符合条件的数组成员,参数是回调函数，接受三个参数，分别为当前值，当前索引，原数组

findIndex()：返回第一个符合条件的数组成员的索引，如果所有成员都不符合，则返回-1

fill():使用给定值填充数组（浅拷贝）

eg：[a,b,c].fill(1)；//[1,1,1]

eg:new Array(3).fill(3)；//[3,3,3]
如果有第二个第三个参数，分别为填充的起始位置和结束位置

keys():对键名进行遍历；

values():对键值进行遍历；

entries():对键值对进行遍历；

for(let index of ["a","b"].keys()){
    console.log(index);
    //0 
    //1
}
for(let value of ["a","b"].values()){
    console.log(value);
    //a
    //b
}
for(let [index,value] of ["a","b"].entries()){
    console.log(index,value);
    //0,"a"
    //1,"b"
}

includes():用于判断数组是否含给定的值，第二个参数表示搜索的起始位置，默认为0，参数为负数表示从结尾开始数

sort():默认设置为稳定的排序算法

3.函数新增了哪些扩展

3.1参数

ES6允许函数的参数设置默认值，函数的形参是默认声明的，不需要再次进行声明 add(x,y=5)

3.2属性

函数的length属性

length返回没有指定默认值的参数个数，rest不会计入length属性，如果设置了默认参数但是该参数不在末尾那么length属性也不计入后面的参数

(function(a){}).length//1
(function(a,b=0,c)).length//1
(function(...values){}).length//0

函数的name属性

返回该函数的函数名，如果将一个具名函数赋值给一个变量，返回的是这个具名函数原本的名字，构造函数返回的函数实例，name属性的值为anonymous，bind返回的函数，name会加上bound前缀

const add=function(){};//add.name()为"add"
const f = function a(){};//f.name()为"a"
(new Function).name;//"anonymous"

function zoo(){};
zoo.bind({}).name;//"bound zoo"
(function(){}).bind({}).name;//"bound"

作用域

如果设置了参数的默认值，函数进行声明初始化时参数会形成一个单独的作用域

箭头函数

使用箭头（=>）来定义函数

4.对象新增了哪些扩展

4.1属性的简写

ES6中，如果对象的键名与值名相等的时候可以进行简写

4.2super关键字

this关键字总是指向函数所在的当前对象，ES6新增了一个super，指向当前对象的原型对象

4.3属性的遍历

for ...in:循环遍历对象自身和继承的可枚举属性（不含Symbol属性）
Object.keys(obj):返回一个包括自身对象（不包含继承的）所有可枚举属性（不含Symbol属性）的键名数组
Object.getOwnPropertyNames(obj):返回一个包含对象自身的所有属性（包括不可枚举属性，不包括Symbol属性）的键名数组
Object.getOwnPropertySymbols(obj):返回一个包含对象自身所有Symbol属性的键名数组
Reflect.ownKeys(obj):返回一个数组，包含对象自身的（不含继承的）所有键名，不管是Symbol或字符串，也不管是否可枚举

属性遍历次序规则：

数值键名，数值升序--->字符串键名，加入时间升序--->Symbol键，加入时间升序

4.4对象新增的方法

Object.is():严格判断两个值是否相等，与（===）有两处不同

+0===-0；//ture Object.is(+0,-0);//false

NaN===NaN；//false Object.is(NaN,NaN);//true

Object.assign(target,source1,source2)：数据源可有多个，用于对象的合并，将源对象source所有可枚举的属性，复制到目标对象target上，第一个参数为目标对象，后面的参数都是源对象，该方法是浅拷贝，遇到同名属性会进行替换

const target={a:1,b:1};
const source1={b:2,c:2};
const source2={c:3};
Object.assign(target,source1,source2);//target为{a:1,b:2,c:3}

Object.setPrototypeOf():用来设置一个对象的原型对象

Object.setPrototypeOf(object,prototype);//设置object对象的原型对象为prototype

Object.getPrototypeOf():用来读取一个对象的原型对象

Object.getPrototypeOf(object);获取object的原型对象

Object.keys():返回自身的所有可遍历属性的键名的数组
Object.values():返回自身的所有可遍历属性的键对应的值的数组
Object.entries():返回自身所有可遍历属性的键值对的数组

注意：都不包含继承的

Object.fromEntries():用于将一个键值对数组转为对象

5.ES6中的Promise及使用场景

1.promise，实现异步编程，解决回调地狱问题

2.异步操作的优点：

链式操作降低了编码难度

代码可读性增强

5.1状态

promise有三种状态

pending（进行中）
fulfilled（已成功）
rejected（已失败）

对象的状态是由异步操作的结果来决定当前是那种状态，一旦状态发生了改变，就不会再变

5.2用法

promise是一个构造函数，用来生成Promise实例

const promise=new Promise(function(resolve,reject){});

包含两个参数：resolve和reject

resolve函数是将对象的状态由pending变成fulfilled
reject函数是将对象的状态由pending变成rejected

实例的方法：

then():实例状态发生改变时执行的回调函数，第一个参数是resolved状态的回调函数，第二个是rejected状态的回调函数，该方法返回的是一个新的Promise实例
catch():是.then(null,rejection)或.then(undefined,rejection)的别名，发生错误的回调函数
finally():不管promise对象最后的状态如何，都会执行的操作

promise的方法：

all()

const p=Promise.all([p1,p2,p3]);

参数为数组，成员为Promise实例

p的状态由p1、p2、p3...共同决定

如果三个状态都为fulfilled则p的状态变为fulfill，返回值组成一个数组传递给p的回调函数
如果三个状态中有一个是rejected则p的状态变为rejected，第一个状态为reject实例的返回值会传递给p的回调函数

注意：如果作为参数的promise实例自己定义了catch，那么他被rejected就不会再触发promise.all()的catch()