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)
posted on 2021-12-02 14:31  秃头大宝贝  阅读(186)  评论(0)    收藏  举报