ES6-11新特性

代码不高兴

已于 2022-08-21 21:59:29 修改

阅读量102

点赞数

分类专栏：前端文章标签： es6 javascript 前端

于 2022-07-24 18:41:53 首次发布

本文链接：https://blog.csdn.net/qq_30258495/article/details/125962640

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ES6新特性

声明

let
- 不支持重复声明
- 没有变量函数提升
- 块作用域
- 不影响作用域链条
const
- 定义常量
- 一般常量名大写（潜规则）
- 块级作用域
- 不能修改
- 对声明的对象或数组，可以修改里面的值（地址值不能变）
解构赋值
- 对象和数组类似

let arr = [1,2,3,4]
let [a,b,c,d] = arr
console.log(a,b,c,d)
/*1,2,3,4*/

语法

模板字符串``
- `字符串字符串${变量}字符串字符串`
扩展运算符...
- 把数组转换成参数序列
- 数组合并[...[],...[]]
- 数组克隆let arr2 = [...arr1]//浅拷贝
- 将为数组转化为新数组let arr = [...(document.querySelectAll('div'))]

对象与数组

对象

Object.is()判断两个值是否相等，NaN和NaN也会相等
Object.assign(obj1,obj2)合并两个对象，后面会把前面重名的覆盖
Object.setProtoTypeOf(obj,protoObj)设置原型对象

简写

{name:name,age:age}简写为{name,age}

函数

function(a=10){}给形参提供默认值
function([a,b]){} function({name,age}){}与解构赋值混用
fun(a,...rest){}rest以数组方式存储除a以外的形实参
- ...rest必须放在最后

function fun1(a,...rest){
	console.log(rest)
}
fun1(1,2,3)
/*[2,3]*/

箭头函数
- ()=>{}
- this值始终指向声明时的作用域（静态的）
- call()也不能改变箭头函数的this
- 不能作为构造函数
- 没有arguments变量
- 形参只有一个可省略()
- 代码体只有一句可省略{}，默认return这一句的结果
- 不适合做回调函数

symbol

是一种新类型，代表一个独一无二的值，这个值我们看不见，但在内存中存在
当作键不会被遍历到
可以转换成字符串，布尔值
语法Symbol('描述')描述可有可无
不是构造函数

let symbol= Symbol('特殊值')
	let obj = {
		name:'xz',
		[symbol]:'密码'
	}
console.log(Object.keys(obj))
/*[ 'name' ]*/

迭代器iterable

一些内置类型拥有默认的迭代器行为，其他类型（如 Object）则没有,所以不能用for of
数组，字符串，map，set都默认有迭代器行为供for of使用，但是for in可以用
为对象添加迭代器

let obj = {
	arr:[1,2,3,4,5,6],
	[Symbol.iterator] () {
		let that = this
		let index = 0
		return {
			next () {
				if (index < that.arr.length) {
					return { value: that.arr[index++], done: false }//value即为for of中的val
				} else {
					return { value: undefined, done: true }
				}
			}
		}
	}
}
for (let val of obj) {
	console.log(val)
}

[Symbol.iterator](){return 迭代器对象}

生成器

语法function *fun(){}
yield相当于是函数暂停器，每一次执行实例.next()函数都会在对应顺序yield语句处暂停

//生成器函数
function* fun2 (arg) {
	console.log(arg)
	let a = yield 111
	console.log(a)
	yield 222
	yield 333
}
//使用生成器，iterator是一个迭代器对象
let iterator = fun2('参数')//这里不会执行fun2函数最开始的语句
console.log(iterator.next())/*参数 {value:111,done:false}*/在yield 111执行完后暂停
console.log(iterator.next('a'))/*a {value:111,done:false}*/在yield 222执行完后暂停，并把'a'当作yield 111语句整体的返回值
console.log(iterator.next())/*{value:111,done:false}*/在yield 333执行完后暂停
console.log(iterator.next())/*{value:undefined,done:true}*/执行最后剩下的语句

构造函数Promise

封装ajax

//创建promise实例
//resolve和reject均是函数，构造函数自带，分别向promise.then(fun(data),fun2(err))的fun,fun2传递参数
let promise = new Promise(function(resolve,reject){
  let xhr = new XMlHttpRequest()
  xhr.open('get','url')
  xhr.send()
  xhr.onReadStateChange = function(){
    if(xhr.readStates === 4){
      if((300-xhr.status) <= 100){
        resolve(xhr.response)
      }else{
        reject(xhr.status)
      }
    }
  }
})
promise.then(function(data){
  ...//成功操作
},function(err){
  ...//失败操作
})

.then(fun,fun1)
- 可以链式调用
- then(()={},()={}).then()
- then的返回值为promise对象
- 上一个返回promise对象的状态值决定调用下一个then中的回调中的哪一个
- 详情见promise基础
.catch(fun)用于处理错误操作

set

里面不允许有重复的值
可用于数组去重
let set = new Set(['','','',''])
set.add()添加
set.delete()删除
set.clear()清空
set.has()确认是否有

map

长得和对象相似，但是键值不局限于字符串
let map = new Map()
map.set(键,值)添加
map.delete(键)删除
map.get(键)获取
map.clear()清空
map.size()返回map包含元素个数
map.has(键)确认是否有
map.keys()返回含所有键的迭代器对象
map.values()返回含所有值的迭代器对象
可以for of遍历
可以用扩展运算符

类

语法class 类名{constructor(){}}
继承语法class 子类名 extends 父类名{constructor(){super()}}

//es5对象继承
function Phone(name){
	this.name = name
}
function Air(name,age){
	Phone.call(this,name)
	this.age = age
}
let oppo = new Air('oppo','19')
console.log(oppo)
/*Phone{name:'oppo',age:'19'}*/

//es6类继承
class Phone {
	constructor(name) {
		this.name = name
	}
	fun () {
		console.log('父类')
	}
}
class Air extends Phone {
	constructor(name,age) {
		super(name)
		this.age = age
	}
	fun(){
		console.log('子类');
	}
}
Phone.unique = '独有'
let oppo = new Air('oppo','18')
console.log(oppo)
/*Phone{name:'oppo',age:'18'}*/
oppo.fun()
/*子类*/

Number

Number.EPSILON最小精度，小于此数判定相等
Number.isFinite(1)检查是否为有限数
Number.NaN()是否为NaN
Number.parseInt()转换成整数
Number.parseFloat()转换成浮点数
Number.isInteger()是否为整数

Math

Math.trunc()抹除小数
Math.sign()检查类型，以返回值判断
- 1正数
- 0零
- -1负数

模块化

导入
- import * as xx from 'url'通用
- import {m1,m2} from 'url'适用于统一暴露，解构赋值法
- import {default as xx} from 'url'适用于默认暴露
- import xx from from 'url'只适用于默认暴露
导出
- export xx
- export{xx,xx}
- export default {}

babel

高级js语法转换成低级js语法方便低版本浏览器解析
具体参见webpack基础

ES7新特性

includes检测数组中是否包含某个值，返回布尔值
- arr.includes(值)
**指数运算符，与Math.pow()一样
- 2**10===1024//true

ES8新特性

async函数

语法
- async function fun(){}
特性
- 返回值为一个promise对象
- 函数内return一个非promise对象值，那fun的返回值为成功共promise对象
- 函数内return一个promise对象
  - promise对象的成功与失败的状态和值与fun返回的promise对象一样

await

必须写在async函数中
await右侧表达式一般为promise对象
await返回的是promise成功的值
await返回的promise失败了就会抛出异常，用try...catch捕获处理

对象

Object.values(obj)返回对象所有值构成的数组
Object.entries(obj)返回对象所有键值所构成的数组[[key,value],[key,value]]方面转成map
Object.getOwnPropertyDescriptors(obj)返回对象所有属性的描述对象

//对象完整声明
let obj = {
  name:{
    value:'xz',
    writable:true,
    ...
  }
}

ES9新特性

对象

扩展运算符…
- ...obj不行，因为没有迭代器
- {...obj}在这样就ok

正则扩展

命名捕获
- (?<name>.*)捕获括号中的内容除了可以用下标访问，还可以通过捕获名name获取
- 捕获名存在exec()返回值的groups属性中

let str = `da<a>dddd</a>da`
let reg = /<a>(?<name>.*)<\/a>/
console.log(reg.exec(str).groups.name);
/* dddd */

反向断言
- /d(?=啊)/正向断言，匹配d后面是啊的d
- /(?=<啊)d/反向断言，匹配d前面是啊的d
dotAll模式
- .元字符代表除了换行符的任意单个符号
- /./s加了模式匹配符s，.就会匹配任意字符

ES10新特性

对象

Object.fromEntries()将二维数组或map对象转为对象

字符串

str.trimStart()清除字符串前面空格
str.trimEnd()清除字符串后面空格

数组

arr.flat(n)将数组降低n个深度
arr.flatMap(item=>[item*10])遍历arr并降低返回值一个深度

Symbol

symbol.prototype.description()获取symbol的描述

ES11新特性

类

公有属性与私有属性

class Phone{
  //共有属性
  name;
  //私有
  #age;
}

promise

Promise.all([p1,p2])p1和p2都成功才返回成功的promise
Promise.allSettled([p1,p2])永远返回一个成功的promise；p1,p2的状态和值都能在返回值里找到

字符串

str.match(reg)返回值为可迭代对象，常用于批量提取内容的时候

语法

?.可选链操作，可直接判断上一级是否存在，免去对象深度过深要进行判断

let obj = {
  name:'xz',
  obj2:{
    name:'xz',
    obj3:{
      name:'xz'
    }
  }
}
//两式等价
console.log(obj ? (obj.obj2 ? (obj.obj2.obj3 ? obj.obj2.obj3.name : 0) : 0) : 0)
console.log(obj?.obj2?.obj3?.name)