ES6
1.let、const
let,const没有变量提升,有块级作用域,不能重复声明变量
const用于声明常量,一旦赋值就不可更改,声明的对象可更改
2.箭头函数
箭头函数没有自己的arguments对象,使用剩余参数(...args)替代。
this也是外层作用域的this,不能当做构造函数
3.解构赋值
按照一定模式从数组或对象中提取值,然后对变量进行赋值
数组:
let [a, b] = [1, 2]
// 以下的结果为右边数剩下的值所组成的数组
let [c, d ,...e] = [1, 2, 3, 4]
// 有默认值的写法
let [f = 100] = [] // f = 100
// 其中String也被视为类数组
let [a, b] = 'abcd' // a = a; b = b
对象:
变理名要与对象的属性名一样才可以:
let { foo } = { foo: 1, bar: 2 } // foo = 1
// 重新命名(后面那个才是新变量)
let { foo: newFoo } = { foo: 1, bar: 2 } // newFoo = 1
实际使用:
1.交换两个变量的值
[x, y] = [y, x]
2. 函数的封装
function fn({ x, y } = {}) {
console.log(x, y)
}
3.模板字符串
${}中可以使用任意的javaScript表达试、运算、引用对象属性、函数调用等。
可以换行,但是所有的空格和换行会被保留。
const h = 'hello'
`${ h } word`
4.函数默认值
5. ...运算符也叫扩展运算符
6.数组新增方法
find()
findIndex()
entries()
keys()
values()
includes()
7.对象属性的简写
let a = 100
{ a }
// 等同于
{ a: 100 }
8.新增对象的方法
Object.is()
Object.assign()
对象的一些遍历:
Object.keys()
Object.values()
Object.entries()
9. Symbol数据类型
Symbol是新的基本数据类型,表示独一无二的值。Symbol值一旦创建,就不能修改或者重新赋值,具有不可变性。Symbol值不会被隐式转换为其他类型,例如,将Symbol值与字符串相加会抛出TypeError错误。此外,Symbol值作为对象的属性名时,默认是不可枚举的,使用for...in循环或者Object.keys()方法无法获取到Symbol属性名。
用法
创建Symbol值可以使用Symbol()函数,该函数可以接受一个可选的描述参数,用于标识Symbol值的用途或含义。例如:
let sym = Symbol();
let symWithDescription = Symbol('description');
Symbol值可以作为对象的属性名使用,以确保属性名的唯一性,避免属性名冲突。
10.set、map数据结构
- set类似数组,但里面元素时唯一性的
可用于数组去重:
[...new Set([1,1,1,2,3,4,3])]
Array.from(new Set([1,1,1,2,3,4,3]))
- map为了解决javascript的对象只能用了符串作为键的问题。
map生成的对象不止有字符串可以作为键
可以接收数组作为参数,数组的成员是单个单个的键值对的数组
let map = new Map([
['name','东方不败'],
['title','西方求败']
])
console.log(map.size); // 2
console.log(map); // {"name" => "东方不败"}, {"title" => "西方求败"}
console.log(map.has('name')); // true
console.log(map.get('name')); // 东方不败
const m = new Map()
const obj = {a: 'aa'}
m.set(obj, 'obj as key')
m.get(obj) // 'obj as key'
m.delete(obj)
11.promise
是异步编程的一种解决方案。
特点:
状态不受外界影响(有三种状态:padding, fulfilled,redected)
一旦状态改变就不会再变。
用法:
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
}).then(res => {})
.catch(err => {})
12.class
ES5定义一个类:
function Point(x, y) {
this.x = x;
this.y = y;
}
var p = new Point(1, 2)
ES6的class:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
其中:
constructor方法是类的默认方法,通过new 命令生成对象时会调用该方法,如果声明类时没有定义constructor,会默认定义一个空的。
生成实例时必须用new ,不用会报错
不存在变里提升(选定义类,再new实例)
13.export default
export default是默认导出,文件里只有一个,文件的唯一出口,
依然用import 引入,但是不用{},因为只有一个出口,所以可以自定义变量名;
export是命名导出,一个文件可以有多个,就是可以设置多个出口;
import引入是得用{}指定导入哪些出口
ES7
1. Array.prototype.includes(n)//判断Array是否包含了n,返回布尔值。
2. 2**10; // 1024
ES8
async await 关键字
1.Object.values()//拿取对象的value
Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]
2. Object.entries()//将对像转成数组
Object.entries({a: 1, b: 2, c: 3}); // [["a", 1], ["b", 2], ["c", 3]]
3.String padding//在字符串前/后添加空格
'hello'.padStart(10); // " hello"
'hello'.padEnd(10) "hello "
ES9
1.正则表达式反向断言
(?=p)、(?<=p) p 前面(位置)、p 后面(位置)
(?!p)、(?<!p>) 除了 p 前面(位置)、除了 p 后面(位置)
2. 正则表达式dotAll模式 //‘.’可以匹配除回车外任何字符
ES10
1.Array.flat()和Array.flatMap()
[1, 2, [3, 4]].flat(Infinity); // [1, 2, 3, 4]
[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]
2. String.trimStart()和String.trimEnd()
//去除字符串首尾空白字符
ES11
1. ??空值处理, ?? 的左侧 运算符求值为undefined或null,返回其右侧。
null ?? '用户2' // '用户2'
false??'用户2' //false
2. 可选链?.
user.childer?.name // 前者undefined就会返回undefined,不像user.childer.name会直接报错
ES12
1. replaceAll 替换符合匹配规则的字符
'hello world'.replaceAll('l', ''); // "heo word"
2. 逻辑运算符和赋值表达式
a ||= b//等价于a = a || (a = b)
a &&= b//等价于a = a && (a = b)
a ??= b//等价于a = a ?? (a = b)