此处列举主要的:
-
let与块级作用域
{
let foo = 'foo'
}
console.log(foo) // 报错
-
const关键字
const a = 1
a = 2 //报错
-
对象简写
const name = 'foo'
const obj = {
name,
sayHi(){
console.log('hi')
}
}
-
解构赋值
数组解构
const [a,b] = [1,2]
对象解构
{name, age} = {name:'foo', age: 19}
-
字符串扩展
//模板字符串
`${变量/表达式}`
//字符串新增方法:
startsWith() 返回布尔值
endsWith() 返回布尔值
includes() 返回布尔值
repeat()
padStart() ES8 补全 //message.padStart(100, '#') padEnd() ES8 补全 //message.padEnd(100, '#')
matchAll() ES10 message.matchAll(/\w/) //返回迭代器(是所有匹配到的结果)
trimStart() ES10
trimEnd() ES10
-
数值扩展
//指数运算符:
2 ** 2 //2的2次方
//二进制和八进制
0b10 // 二进制
0o71 //八进制
//Math对象新增方法:
Math.trunc() 去掉小数部分
Math.sign() 判断一个数字是正数、负数、还是0
Math.cbrt() 求立方根
Math.hypot() 求所有参数的平方和的平方根(用于勾股定理计算斜边长度)
-
参数默认值
function foo(a=1){
}
-
剩余参数
function foo(...num){
console.log(num) //得到的是数组
}
-
箭头函数
const foo = ()=>{}
1. 无this
2. 无arguments
3. 不能作为构造函数
4. 不能作为生成器
-
扩展运算符
const num = [1,2,3]
console.log(...num) //1 2 3
-
Array函数新增方法
Array.from() 把类数组/字符串转为纯数组
Array.of() 创建数组,参数是数组的成员(任意个数的参数)
-
Array实例新增方法
find() 参数是回调函数,返回第一个满足条件的元素
findIndex() 参数是回调函数,返回第一个满足条件的元素的索引
fill() 填充数组,覆盖数组中所有的元素;适合填充 new Array(20)创建的数组
includes() 判断数组中是否包含某个元素,返回布尔值; ES7新增的
flat() 把数组拉平(多维数组变为一维数组),参数默认是1(只拉1层), 可设置Infinity,不论维位数租 ES10新增
flatMap() 参数是回调函数,相当于map和flat的结合 ES10新增
-
对象扩展运算符...(与数组类似)
-
Object函数新增方法
Object.is() 用于比较两个数据是否相等,返回布尔值; 类似于全等,不同点NaN和Nan相等、+0和-0不相等
Object.assign() 合并对象
Object.getOwnPropertyDescriptor() 获取某个自身属性的描述信息
Object.getOwnProppertyDescriptors() 获取对象所有自身属性的描述信息 ES8新增
Object.getPrototypeOf() 获取对象的原型
Object.setPrototypeOf() 给对象设置原型
Object.keys() 返回数组,由对象的属性名组成。
Object.values() 返回数组,由对象的属性值组成。 ES8新增
Object.entries() 返回二维数组,由属性名和属性值 组成 ES8新增
Object.getOwnPropertyNames() 返回数组,有对象的属性名组成
Object.formEntries()
Object.entries()的逆运算 ES8新增
-
Class语法(定义类)
// 定义类
class Person {
// 属性,会添加到实例上
// 把所有的属性在这里声明
name = null;
age = null;
// 定义构造方法 实例化的时候自动执行
constructor(name, age = 10) {
this.name = name;
this.age = age;
}
// 方法,添加到原型上
say() {
console.log('MY Name is ' + this.name);
}
eat() {
console.log('My age is ' + this.age);
}
// 静态方法 没有添加到实例上,构造函数本身的方法
// static getClassName() {
// console.log('类名是 Person 构造函数本身的方法');
// }
}
// Person.getClassName(); // 相当于 Person.getClassName = function(){}
console.log(Person); //输出整个函数
console.log(typeof Person); // Function
console.log(Person.name); // Person ===> name指的是这个对象的名字
// 不能调用
// Person();
// 实例化
var p = new Person('曹操', 19);
console.log(p); // Person {name: "曹操", age: 19}
p.say(); // MY Name is 曹操
var p1 = new Person('吕布', 21);
console.log(p1); // Person {name: "吕布", age: 21}
p1.say(); // MY Name is 吕布
var p2 = new Person();
console.log(p2); // Person {name: undefined, age: 10}
-
Class的静态方法static
class Person{
static 方法名() {
}
}
Person.方法名()
// 静态方法没有添加给实例,添加给构造函数(类)本身
-
Class的getter和setter
class Person {
firstName = '东方';
lastName = '不败';
get fullName() {
return this.firstName + '_' + this.lastName;
}
set fullName(val) {
const name = val.split('_');
this.firstName = name[0];
this.lastName = name[1];
}
}
let p = new Person();
console.log(p); //Person {firstName: "东方", lastName: "不败"}
console.log(p.fullName); //可读可写 东方_不败
-
extends继承
1. 使用 extends 来继承
2. 继承之后:
子类的实例的原型指向父类的一个实例
子类自己的原型指向父类 (静态方法也可以继承)
3. 可以在子类上添加属性和方法
4. 在子类上重写父类的方法,子类重写的方法必须调用super()
class 子类 extends 父类 {
constructor() {
super();
}
}
-
新数据类型Symbol
1. 创建一Symbol数据(只能调用,不能实例化)
Symbol()
2. symbol数据特点:
① 每创建一个symbol类型的数据,都是唯一的。
② symbol类型的数据可以作为属性名,同字符串一样
3. 应用:
给对象添加属性(不会被覆盖)
4. 注意:(可以作为对象的属性名,(字符串)symbol创建的都是唯一的)
for...in、Object.keys()、Object.values()、Object.entries()、Object.getOwnPropertyNames() 这些方法都取不到属性名时Symbol类型的属性
Object.getOwnPropertySymbols() 获取类型是symbol的属性名
Reflect.ownKeys(obj) 获取对象自身所有的属性(不论属性名时什么类型)
-
新数据类型BigInt
通过 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 两个属性获得
如果整数超过了这个范围,无法按照整型的方式存储,计算会造成不精确
// 1. 字面量
var a = 100n
console.log(typeof a); //bigint
// 2 转换函数
var b = BigInt(1000)
console.log(b); //1000n
-
Set
new Set(); //创建的是空的Set
new Set(数组); //把数组变为Set,去掉重复的值
new Set(类数组)
//Set实例的方法
add(value) 添加一个值
delete(value) 删除一个值
has(value) 判断是否存在某个值
clear() 删除所有的值
keys() 返回遍历器
values() 返回遍历器
entries() 返回遍历器
forEach() 用于遍历 size 属性 获取Set成员的个数
-
Map
// 创建空的
new Map();
// 创建的时候,指定初始值
new Map([ [key,value], [key,value] ]);
get(key) 获取指定key的值
set(key,value) 设置或添加某个key的值
delete(key) 删除指定的某个key和他值
clear() 清空所有
has(key) 判断某个key是否存在
keys() 返回遍历器,所有key的集合
values() 返回遍历器,所有值的集合
entries() 返回遍历器,所有key-value的集合(二维)
forEach() 用于遍历
-
iterable可遍历对象
把部署了 iterator 接口的数据结构,称之为'iterable'(可遍历对象)
可以使用 for...of 遍历 iterable对象
iterator接口部署在了数据结构的Symbol.iterator属性上
一个对象,只有具有Symbol.iterator属性,且该属性指向一个返回遍历器的函数,该对象就是
Array
Set
Map
String
Arguments
NodeList
HTMLcollection
-
generator 生成器
生成器就是生成遍历器的函数
function* 生成器名() {
yield 值;
yield 值;
yield 值;
yield 值;
}
-
yield 关键字
yeild关键返回一个值, 遍历的时候每次得到就是yield的值 调用next(),执行到yield就会停止; 下一次调用next(),执行到下一个yield停止
调用生成器函数的时候,函数内不会执行
当调用next()的时候,才开始执行生成器函数内的代码; 执行到yield停止
-
使用生成器函数给对象部署iterator接口
const obj = {
name: '曹操',
age: 18,
score: 80,
height: 170
};
// 把obj变为一个 iterable
// 部署iterator接口
obj[Symbol.iterator] = function* (){
for (let i in obj) {
yield [i, obj[i]];
}
};
for (let i of obj) {
console.log(i); //可遍历对象
}
-
模块
模块中导出数据
// 模块内部
function say() {}
function eat() {}
export {
say,
eat
}
导入模块
import {say, eat} from '模块文件路径';
-
Proxy
-
Promise