ES6
es6是全称ECMScript6.0是JavaScript语言的下一代标准
let命令
let命令，用来声明变量。let声明出来的变量他只在自己的代码块中可用而在代码块区域外使用此变量就会报错
let和var的区别
-
let它只可以在代码块中使用而且它不会污染到winds环境
-
var它不受代码块限制 但是var定义的变量会污染winds环境
const
用于定义常量 （常量但凡定义就不可以改变）
解构赋值
从数组或对象中提取值，给变量进行赋值，就是解构赋值
//正常变量赋值 let a=1; let b=2; let c=3; //使用解构赋值就是 let [a,b,c]=[1,2,3]
. . .用法
// ...的使用 let [a,...b]=[1,2,3] //那么 a=1 b=[2,3] let [a,b,...c]=['123'] // 那么 a='123' b=undefind c=[]
不完全解构(右边值多于变量)
//不完全解构 let [a,b]=[1,2,3] //a=1 b=2 let [a,[b],c]=[1,[2,3],4] // a=1 b=2 c=4
需要具备Iterator接口的数据才可以进行解构赋值
Set解构也可以进行解构赋值
解构赋值允许默认值当此变量有默认值那么解构赋值对它也就没有作用了
解构失败
左边多于右边
字符串拓展
注意：for( of) 是遍历出值 而for( in) 是遍历出索引
模板字符串
``也就是模板字符串，模板字符串的出现我们就不用再去拼接字符串从而使用变量了 需要使用变量的地方就直接${变量名即可}
模板编译
定义一个模板
模板使用<%...%>放置
JavaScript中使用<%=...%>输出JavaScript表达式
即
var template=`
<ul>
<% for(let i=0;i<10;i++){ %>
<li> <%= i %> </li>
<% } %>
</ul>
`
Es6字符串拓展
方法：
-
String.raw() 返回一个斜杠被转义
-
includes( ) 表示是否找到参数字符串 返回布尔值
-
startsWith( ) 表示参数字符串是否在原字符串的头部 返回布尔类型
-
endsWith( ) 表示参数字符串是否在原字符串的尾部 返回布尔值
-
repeat( n ) 返回一个新的字符串，将原来的字符串复制n次数
-
padStart(6,'abc' ) 目标字符串长度没有达到6那么就在目标字符串的开头用abc补充直到该字符串长度到6为止 （当目标字符串长度大于6就不补充了）
-
padEnd(6,'abc') 目标字符串长度没有达到6那么就在目标字符串的尾部用abc补充直到该字符串长度到6为止 （当目标字符串长度大于6就不补充了）
-
trim( ) 字符串消除空格
-
matchAll( ) 返回一个正则表达式在当前字符串的所有匹配
RegExp正则表达式
字符串有4个方法可以使用正则表达式
-
match( ) 匹配满足正则表达式的字符串
-
replace( ) 替换字符串 参数一旧的字符串 参数二要替换成的新的字符串
-
search( ) 查找匹配的字符串 返回该字符串在原来字符串中的起始位置
-
split( ) 将字符串切割成为数组
y修饰符
//y修饰符匹配两个或多个相连在一起的字符串 let s='aaa_aa_a' //从头开始匹配第一次就匹配出 aaa 但是要执行第二次就在第一次结束的位置开始往后找第二次就是aa
属性
-
RegExp.prototype.sticky 表示此正则表达式是否启用y
-
RegExp.prototype.flags 返回该正则表达式的修饰符（i,g,u,y...)
-
RegExp.prototype.source 该属性返回正则表达式的正文内容
后行断言
-
/x(?=y)/ 匹配x在y的前面那个
-
/(?<=y)x/ 匹配x在y的后面
数值扩展
-
Number.isFinite( ) 检测这个参数值是否是有限的值
-
Number.isNaN( ) s检测这个参数值是不是NaN
-
Number.parseInt( ) 将参数值转为整数
-
Number.parseFlot( ) 将参数值转为浮点数
-
Number.isInteger( ) 判断参数值是不是整数 返回布尔值
-
Math.trunc( ) 取出参数值的小数部分
-
Math.sign( ) 判断参数值为什么数值
-
参数为正数，返回+1
-
参数为负数，返回-1
-
参数为0，返回0
-
参数为-0，返回-0
-
其他值 ， 返回 NaN
-
函数扩展
Es6 推出了箭头函数
注意: 函数的length和传入函数的形参有关 一个形参length=1 但是当检测到形参有默认值那么就作废不计且停止后续的形参加进来
-
箭头函数它没有自己的this指向 箭头函数里面使用的this指向它的父级有this的如果没有一直往外找
-
箭头函数不可当作构造函数 也就是使用new命令
-
箭头函数不可以使用arguments对象
-
箭头函数不可以使用yield命令
数组扩展
扩展运算符
扩展运算符（spread) 是三个点（...)。
它就是将数组转为用逗号隔开的参数序列。
console.log(...[1,2,3]) // 1,2,3
扩展运算符也可以将字符串转换成数组
方法：
-
Array.from( ) 将类似于数组的对象和可遍历的对象转换成数组
-
Arrray.of( ) 将序列转换为数组
-
find( ) 用于找出第一个符合条件的数组成员，参数是一个回调函数可以接收三个参数依次是当前值，当前位置，和原数组
-
findIndex( ) 和find类型 但是它返回的是符合条件元素的索引 不符合的话就返回-1
-
fill( ) 填充数组 只传一个参数 此参数就替换数组的所有元素 三个参数的话 第一个参数填充的元素 第二个参数开始位置 第三个参数结束的位置
-
entries( ) 遍历键值对
-
keys( ) 遍历键
-
values( ) 遍历值
-
includes( ) 判断传入的参数是否包含在原数组中 返回值是布尔值
-
flat( ) 拉平多维数组 默认情况只拉一层 当我们传入参数几就拉平几层（二维数组拉成一维数组）
-
flatMap( ) 原数组的每一个成员执行一个函数（相当于 Array.prototypr.map() ）
-
Array.prototype.sort( ) 排序数组
对象扩展
es6 推出当对象的键值相等的时候只用写一个即可
对象解构赋值
let {x,y,...z}={x:1,y:2,A:4,B:9}
x // 1
y // 2
z // {A:4,B:9}
对象使用扩展运算符
let z={a:3,b:4};
let n={...z};
n // {a:3,b:4}
方法：
-
Object.is( ) 比较两个值是否相等 返回布尔值（不会隐式转换）
-
Object.assign( ) 用于合并对象给第一个参数对象（浅拷贝）
-
Object.getOwnPropertyDescriptors() 返回对象所有自身属性
-
Object.setPrototypeOf() 设置原型对象
-
Object.getPrototypeOf( ) 获取原型对象
-
Object.fromEntries( ) 将键值对数组 转为对象
Symbol
表示独一无二的值
Set 数据结构
Set
set里面的元素不可以重复 set就可以用于数组的去重
方法：
-
add( ) 添加参数数据
-
delete( ) 删除参数值 返回布尔值
-
has( ) 查看参数值是不是Set成员 返回布尔值
-
clear( ) 清空Set成员 没有返回值
-
size 获取Setd对象的大小
-
Set.prototype.keys() 返回键名的遍历器
-
Set.prototype.values() 返回键值的遍历器
-
Set.prototype.entries( ) 返回键值对的遍历器
-
Set.prototype.forEach( ) 使用回调函数遍历每一个成员
WeakSet
WeakSet结构与Set类似，也是不重复的值集合。但是WeakSet的成员只可以是对象
方法也和Set方法差不多
Map
map本质是键值对的集合（hash结构），但是传统上只能用字符串当作键。
const map new Map(['name','张三'],['title','Author']);
map.size // 2 获取map大小
map.has('name') // true 产看name是不是在map中
map.get('name') // 张三 获取name
map.has('title') // true
map.get('title') // Author
-
size 属性 返回map结构的成员总数
-
Map.prototype.set(key,value) 方法 设置map成员的key和对应的value key存在就更新
-
Map.prototype.get(key) 方法 通过key获取值 差不多就undefined
-
Map.prototype.has(key) 判断某个键是否在Map结构中
-
Map.prototype.delete(key) 通过key删除对应的成员
-
Map.prototype.clear() 删除Map结构中的所有成员
-
Map.prototype.keys() 返回键名的遍历器
-
Map.prototype.values() 返回键值的遍历器
-
Map.prototype.entries( ) 返回键值对的遍历器
-
Map.prototype.forEach( ) 使用回调函数遍历每一个成员 第二个参数用来绑定this
扩展运算符可以将map转成数组
Proxy 代理拦截器...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let ObjeUser={name:'张三',age:20};
let Myfun={
/*
* 三个参数值
* 第一个参数 目标对象
* 第二个参数 属性名
* 第三个参数 Proxy实例本本身
* */
get:function (target,_p) {
if (target.name==='张三'){
return '获取名字拦截变成了--》李四'
}
},
/*
* 四个参数
* 第一个参数 目标对象
* 第二个参数 属性名
* 第三个参数 属性值
* 第四个参数 Proxy实例本身
* */
set:function (_obj,_prop,_val) {
if (_prop===20){
_obj[_prop]=1234563
}
}
};
//参数一 拦截对象
// 参数二 拦截的操作步骤
let _MyProxy=new Proxy(ObjeUser,Myfun);
//也就是说当我们在读取_MyProxy.name的属性时候就会进行拦截
console.log(_MyProxy.name);
_MyProxy.age = 432;
console.log(_MyProxy);
</script>
</body>
</html>
Promise
异步编程的一种解决方案，它有三种状态但凡状态确定就不可以更改。pending(进行中) ，fulfilled(成功)，rejected(失败)
<script>
// resolve 成功
// reject 失败
const promise=new Promise(function (resolve, reject) {
//通过条件判断选择执行成功还是失败函数的回调
if (xxx){
resolve(value)
}else {
reject(error)
}
})
</script>
<script>
// resolve 成功
// reject 失败
const promise=new Promise(function (resolve, reject) {
//通过执行它是成功的传递参数data
resolve(data=123)
//then() 成功以后执行的一个回调函数res 是成功状态传递过来的参数数据
}).then((res)=>{
console.log(res)
})
</script>
方法：
-
then() 执行成功函数的回调方法 参数是一个函数 通常情况then() 方法里面的this是前一个then()回调返回的结果值
-
catch( ) 捕捉Promise所有错误的方法 失败的回调函数也可以在里面执行 参数函数
-
finally( ) 不管状态是成功还是失败都会执行的方法 参数函数
-
Promise.all( ) 参数一个存放多个Promise对象的数组 包装一个新的Promise实例（状态太由数组里面的Promise的状态决定 全成功才成功全失败才失败）
-
Promise.race( ) 参数多个Promies元素数组 包装成一个新的Promise 状态由数组里面元素的最先变化的那个状态控制
-
Promise.any( ) 参数多个Promies元素数组 包装成一个新的Promise 状态由数组里只要有一个成功状态此Promies就成功
-
Promise.resolve( ) 讲对象转换成Promise对象
Generator函数
function* helloWorldGenerator(){
yield 'One';
yield 'Tow';
yield 'ending'
}
var hw = helloWorldGenerator();
hw.next( ) //{value:'One',done:false}
hw.next( ) //{value:'Tow',done:false}
hw.next( ) //{value:'ending',done:true}
//Generator函数 function* 定义的
//函数内部是同步执行 而且每一次执行通过next( ) 去调用执行
//done 判断是不是到最后一个值
async函数
async函数也就是Generator函数的一个语法糖
// 正常使用
async function add(){
console.log('123')
await console.log('789')
await console.log('结尾')
}
//async 函数它不用手动去执行下一步
//而是 加了 await 开始的代码 要等上一句代码执行完成才执行它 从而也就是 同步编程
注意：
-
async 函数返回的是一个 Promise对象（async函数内部的 return 语句返回的值，会成为then 方法的回调函数的参数
266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
