es6重要知识点总结

68 阅读 0 评论 45 点赞

我是靠谱客的博主炙热花瓣，最近开发中收集的这篇文章主要介绍es6重要知识点总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

es6重要知识点总结

1.let与Const
let: 局部变量声明
特点:
1 只能在一对｛｝里面有用
2.不能重复声明
3.不会变量提升(在变量声明前会报错)
const: 常量声明
特点
1 声明必须复制
2 赋值不能修改(简单数据类型)
3 简易变量名大写
2.解构
1解构对象
示例：

let{name,age} = {name:"sir",age:23}
let{name:foo} = {name:"sir"}
//foo值就是sir
//...rest剩余值
// 默认值
let{name,age,weight=120} = { name:"sir",age:23}

特点
没有顺序
变量名毕雪花对象键名一致

2解构数组

let[a,b] = [12,18];
//a 12
b
18
//特点
//1可以嵌套 2 可以忽略
let[a,b[c,d,e]] = [1,2[3,4,5]]
c=3 d=4 e= 5
let [a,,b] = [1,2,3];
a 1
b 3
//剩余值
let [a,...rest]=[1,2,3,4,5]
rest [2,3,4,5]
//字符串
let [a,b,c,d]="中国加油"] ;
a 中
b 国
//默认值
let [a,b=20]=[30];
b 20
//如果解析出来的值是undefined 那么就会用默认值代替

3.字符串方法
trim() trimLeft() trimRight()
去掉空白，左边空白，右边空白
includes(s)
字符串是否包含s
startsWith(s)
是否以s开头
endsWith(s)
是否有s结尾
repeat(n)
将字符串重复n次
padStart(len,s)
以s字符串补齐len长度
padEnd(len,s)
以s字符串补齐len长度从后面

字符串模板
·大家好我的名字是${name} 今年我${age}岁了·
特点

可以在字符串模板里面任意换行
单双引号特殊符号不需要转义

4.数字方法
Number.isNaN()
检测是不是NaN
Number.isInteger()
是不是整数
运算符号
23 == 2X2X2
Number.parseInt
Number.parseFloat
转换为整数、浮点数

5.数组
1迭代方法
forEach()
遍历数组

map() 返回一个Array
通过原来的数组映射出新的数据

filter() 返回一个Array
如果遍历时返回的值为true 则最终返回时保留该元素
如果遍历时返回的值为false 则最终返回时过滤该元素

reduce(function(a,b){}) 返回一个Any
a参数是上一次遍历时的结果，
b参数是当前遍历元素

some() 返回一个bool
如果遍历的值有一个返回为true 最终返回结果为true
如果遍历的值所有都返回为false 最终返回的结果才为false

every()
如果遍历的值有一个返回为false 最终返回结果为false
如果遍历的值所有都返回为true 最终返回的结果才为true

find()
查找数组中符合条件的元素

findIndex()
查找数组中符合条件的元素的下标

flat(n)
扁平化数组 n是扁平的层级

includes(el)
查找数组是否包含el元素

fill(value,start,end)
填充数组 value填充值，start填充的开始位置，end 填充的结束位置？（可选）

copyWithin(rstart,start,end)
从数组中拷贝内容替换
rstart 替换开始的位置 start拷贝的开始，end拷贝结束

6.类
定义：创造实例对象的一个模板

示例 class 类名{} class Animal{}
constructor(){}
构造函数 示例
constructor(name,color){}
new Animal(“小乖乖”,"blue");

一般方法
say()
var d1 = new Animal():
d1.say()

静态方法
static toName(){}
Animal.toName() 调用

静态属性
Static price=100；
Animal.price 调用静态属性

继承
class 类名 extends 父类名{}
super()

class Dog extends Animal{
constructor(){
super();
}
}

getter setter

成对出现
不能够直接赋值和设置已经有的属性

consturctor(age){
this.age = age;
}
get Age(){
return this.age;
}
//d1.Age 调用大写的Age属性是会执行 get Age()这个函数
//返回的小写age的值
set Age(val){
this.age = val
}
//当 d1.Age=15抵用 set Age 这个方法
//最终设置是小写age的值

7 模块

导出 export

//1. 基本
export {name,age,fun,Animal}
//2. 使用as
export {Animal as An}
//3. default 默认
export default Animal;
//声明的时候导出

export default class Ball{}
//先声明再导出
class Ball{}
export default Ball;

2 导入 import

//1. 基本
import {name,age,fun,Animal}
from "./xx.js";
2.
import {An}
from “./xxx.js”
//import 也可以使用as
import {Animal as An} from “./xxx.js”;
var a1 = new An();
3.
import Animal from "./xxx.js"

8 Promise 承诺
定义：返回一个延期的承诺，用then来接受结果
resolve解决（兑现）
reject 拒绝
作用

按顺序执行异步调用
避免回调函数多层嵌套
基本写法

new Promise((resolve,reject)=>{
resolve(结果)
reject （原因）
})
.then(
res=>{},//获取结果
err=>{})// 捕捉错误
.catch(err=>{})//捕捉错误
//race
Promise.race([多个异步调用])
.then(res=>{返回的是最快resolve结果})
//all
Promise.all([多个异步调用])
.then(list=>{所有的resolve结果列表})

9.generator 生成器
定义：
遇到 yield 会挂起暂停
执行时候 next() 再次开始执行
通常去做异步请求
示例

function * say(){
yield "1";
yield "2";
yield "3"
}
var it = say();
it.next() //{value:"1",done:false}
it.next() //{value:"2",done:false}
it.next() //{value:"3",done:true}
it.next() //{value:undefined,done:true

10.async 异步 await 等待
异步编程

function say(){ return new Promise()}
async function doit(){
await say();
await say():
await say()
}
say()
.then(res=>{return say()})
.then(res=>{return say()})

11.proxy 代理
可以对目标对象的读取调用…进行拦截

let target = { name:"mumu",age:18};// 1目标对象
let handler = {
get(target,key){},
set(target,key,value,receiver){}
} //2处理
3. let proxy =
new Proxy(target,handler)

12 Reflect 反射
对对象进行一些操作，方便代理处理
Reflect.ownKeys(obj) 获得对象键的列表
Reflect.set(obj,key,value) 设置对象的值
Reflect.get(obj,key) 获取对象的值
Reflect.has(obj,key) 检测是否有某个值