来自阮一峰大佬《EMCAScript 6入门》总结精炼

let和const

let:声明变量
const:声明只读常量且必须赋初始值,常量值不可修改,声明对象可修改对象的属性

  • 没有变量提升(即:脚本开始运行时提前声明为unefined的变量)、拥有临时性死区(声明前调用会报错)
  • 不允许重复声明同名变量
  • 拥有块级作用域(即:超出当前变量声明作用域无法调用该变量)

解构赋值

数组:位置顺序解构
对象:数据结构相同且同名变量解构
字符串 :位置顺序解构,可解构length(let {length:len} = ‘test’)
函数:根据传入参数类型不同 按照以上规则解构

  • 可指定默认值(即:let [f = ‘ff’] = [] || let {obj=”obj”} = {})
  • 可完全解构(即:等号两边数据结构完全相等)
  • 可不完全解构(即:等号两边数据结构相等,但等号左边只解构部分变量)

模板字符串

` ` 使用模板字符串

${}在模板字符串中使用变量

  • 可多行使用(即 `` 可换行)
  • 可使用反斜杠转义\(即 \ ` 使用)
  • 可通过 ${} 调用函数(即${fn()})
  • 可嵌套模板字符串
    总之,hin实用

字符串拓展方法

includes():返回布尔值,表示是否找到了参数字符串;

let str = 'Uyoahz!';
str.includes('a') // true

startsWith():返回布尔值,表示字符串是否以参数字符串开头,区分大小写。

str.startsWith('Uy') // true
str.startsWith('uy') // false

endsWith():返回布尔值,表示字符串是否以参数字符串结束,同样区分大小写。

str.endsWith('!') // true

repeat():返回一个新字符串,表示将原字符串重复n次。

'hello'.repeat(2) // "hellohello"

padStart():字符串不够指定长度,将头部补全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

padEnd():字符串不够指定长度,将尾部补全。

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

trimStart():消除字符串头部的空格(返回的都是新字符串,不会修改原始字符串)。

const s = '  abc  ';
s.trimStart() // "abc  "

trimEnd():消除尾部的空格 (返回的都是新字符串,不会修改原始字符串)

s.trimEnd() // "  abc"

matchAll():返回一个正则表达式在当前字符串的所有匹配
replaceAll():可以一次性替换所有匹配。

'aabbcc'.replaceAll('b', '_') // 'aa__cc'

at():接受一个整数作为参数,返回参数指定位置的字符,支持负索引

const str = 'hello';
str.at(1) // "e"

数值拓展

二进制

前缀用`0b`或`0b`表示(即:`0b111110111 === 503 // true`)

八进制

前缀用`0o`表示(即:`0o767 === 503 // true`)

数值分隔符

为了增加数值可读性 使用下划线(`_`)作为分隔符 (即`let budget = 1_000_000_000_000;`)
  • 不能放在数值的最前面(leading)或最后面(trailing)。
  • 不能两个或两个以上的分隔符连在一起。
  • 小数点的前后不能有分隔符。
  • 科学计数法里面,表示指数的e或E前后不能有分隔符。

BigInt 只用来表示整数,没有位数的限制,任何位数的整数都可以精确表示

  • 可以使用BigInt()进行类型转换
  • BigInt 类型的数据必须添加后缀n
  • BigInt 不能与普通数值进行混合运算。
  • 可以使用Boolean()Number()String()这三个方法,将 BigInt 可以转为布尔值、数值和字符串类型,转为字符串时后缀n会消失。
  • BigInt 与字符串混合运算时,会先转为字符串,再进行运算。

实例方法

用的最多的也就前两个了
**Number.isFinite()**:用来检查一个数值是否为有限的(finite),即不是Infinity
**Number.isNaN()**:用来检查一个值是否为NaN(Not a Number)
Number.isInteger(): 用来判断一个数值是否为整数
Number.parseInt:用来转换为正整数数值
Number.parseFloat:来转换为双浮点数值
Number.EPSILON:极小的常量,它表示 1 与大于 1 的最小浮点数之间的差
Number.MAX_SAFE_INTEGER: 表示javascript能精表示的整数最大值
Number.MIN_SAFE_INTEGER: 表示javascript能精表示的整数最小值
Number.isSafeInteger():用来判断一个整数是否落在javascript能表示最大值和最小值之内
Math.trunc():用于去除一个数的小数部分,返回整数部分
Math.sign():用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值
Math.cbrt():用于计算一个数的立方根
Math.clz32():将参数转为 32 位无符号整数的形式,然后返回这个 32 位值里面有多少个前导 0
Math.imul:返回两个数以 32 位带符号整数形式相乘的结果,返回的也是一个 32 位的带符号整数
Math.fround:返回一个数的32位单精度浮点数形式
Math.hypot:返回所有参数的平方和的平方根
Math.expm1(x):返回 ex - 1,即Math.exp(x) - 1
Math.log1p(x):返回1 + x的自然对数,即Math.log(1 + x)。如果x小于-1,返回NaN
Math.log10(x):返回以 10 为底的x的对数。如果x小于 0,则返回 NaN
Math.log2(x):返回以 2 为底的x的对数。如果x小于 0,则返回 NaN
Math.sinh(x): 返回x的双曲正弦
Math.cosh(x): 返回x的双曲余弦
Math.tanh(x): 返回x的双曲正切
Math.asinh(x): 返回x的反双曲正弦
Math.acosh(x): 返回x的反双曲余弦
Math.atanh(x): 返回x的反双曲正切

函数拓展

函数默认值

(即:函数的参数指定默认值)

  • 可以和解构一起使用(即:function foo({x, y = 5}){}
  • 通常参数默认值的位置在尾部,方便使用默认值忽略(即:function f(x = 1, y),只传一个参数则x无法正常使用默认值忽略)
  • 使用默认值会导致函数了length属性失真(即:因为length属性的含义是,该函数预期传入的参数个数。某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了)
  • 设置默认值会在函数初始化时产生单独作用域,初始化结束作用域消失 即:
var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2

rest参数

即:==`...变量`用于接受函数多余参数

name属性

即:返回该函数的函数名 `函数名.name`

箭头函数

=> (即:function foo = () => {}

  • 没有自己的this对象,内部使用this会采用调用时上级作用域this
  • 不可以对箭头函数使用new命令,否则会抛出错误
  • 不可以使用 arguments 对象,如果要用,可以用 rest 参数代替
  • 不可以使用yield命令,箭头函数不能用作 Generator 函数
    Function.prototype.toString()(即:方法返回函数代码本身,以前会省略注释和空格)
    catch 的参数省略(即:try {} catch {}

数组拓展

拓展运算符

...将一个数组转为用逗号分隔的参数序列

数组空位

数组的某一个位置没有任何值,ES6则是明确将空位转为undefined

静态方法

Array.from() 用于将两类对象转为真正的数组: (array-like object)和(iterable)和 (Set) 和(Map)
即:

let s = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(s); // ['a', 'b', 'c']

Array.of() 用于将一组值,转换为数组 (即:Array.of(3, 11, 8) // [3,11,8])

实例方法

  1. copyWithin() 在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原数组),返回当前数组。会修改当前数组 (即:[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
  2. find() 用于找出第一个符合条件的数组成员。然后返回该成员。如果没有符合条件的成员,则返回undefined
  3. findIndex() 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
  4. fill() 使用给定值,填充一个数组 (即:['a', 'b', 'c'].fill(7) // [7, 7, 7])
  5. includes() 返回一个布尔值,表示某个数组是否包含给定的值
  6. flat() 将多维数组处理成一维数组,返回一个新数组
  7. flatMap() 使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同 (即:[1, 2, [3], [4, 5], 6].flatMap(num => num) // [1, 2, 3, 4, 5, 6]
  8. at() ES2022新增,接受一个整数作为参数,返回对应位置的成员,并支持负索引。这个方法不仅可用于数组,也可用于字符串和类型数组 (即:[5, 12, 8, 130, 44].at(-2) // 130)

对象拓展

属性简洁表示法

允许在大括号里面,直接写入变量和函数,作为对象的属性和方法

即:const foo = {name:name,method(){}}

属性名表达式 字面量定义对象(即:obj['a'+'bc'] = 123;
方法name属性 将对象方法函数,返回函数名
如果使用取值函数和存值函数则如下:

const obj = {
  get foo() {},
  set foo(x) {}
};
const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
descriptor.get.name // "get foo"
descriptor.set.name // "set foo"
有两种特殊情况:`bind`方法创造的函数,`name`属性返回`bound`加上原函数的名字;`Function`构造函数创造的函数,`name`属性返回`anonymous`。

super

指向当前对象的原型对象。(即:super.xxx等同于Object.getPrototypeOf(this).xxx

静态方法

Object.getOwnPropertyNames()返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。
Object.getOwnPropertySymbols()返回一个数组,包含对象自身的所有 Symbol 属性的键名。
Reflect.ownKeys() 返回一个数组,包含对象自身的(不含继承的)所有键名

Object.getOwnPropertyNames()Object.getOwnPropertySymbols()Reflect.ownKeys() 都遵守同样的属性遍历的次序规则

  • 首先遍历所有数值键,按照数值升序排列。
  • 其次遍历所有字符串键,按照加入时间升序排列。
  • 最后遍历所有 Symbol 键,按照加入时间升序排列。

Object.is()  方法判断两个值是否为同一个值。
Object.assign() 忽略enumerable为false的属性,属性从一个或多个源对象复制到目标对象,返回修改后的对象。因为 Object.assign() 只复制属性值,假如源对象是一个对象的引用,它仅仅会复制其引用值
Object.getOwnPropertyDescriptors() 所指定对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。
__proto__属性 用来读取或设置当前对象的原型对象
Object.setPrototypeOf() 用来设置一个对象的原型对象(prototype),返回参数对象本身
Object.getPrototypeOf() 用于读取一个对象的原型对象
Object.entries() 返回数据的迭代对象,包含该对象的键值对数组
Object.keys() 返回数据的迭代对象,包含该对象的键名数组
Object.values() 返回数据的迭代对象,包含该对象的值名数组
Object.fromEntries()用于将一个键值对数组转为对象。
Object.hasOwn() 判断是否为自身的属性

JavaScript 对象的属性分成两种:自身的属性和继承的属性。对象实例有一个hasOwnProperty()方法,可以判断某个属性是否为原生属性。ES2022 在Object对象上面新增了一个静态方法Object.hasOwn(),也可以判断是否为自身的属性

运算符拓展

指数运算符

(即:**) 右结合,多个指数运算符连用时,是从最右边开始计算

链判断运算符

ES2020 引入了“链判断运算符” 判断对象是否存在。

短路机制 ?.运算符相当于一种短路机制,只要不满足条件,就不再往下执行
括号的影响 如果有圆括号包裹,只对圆括号颞部产生影响 (即(a?.b).c)
右侧不得为十进制数值 (即:foo?.3:0 会被解析成三元运算符进行处理)

  • obj?.prop // 对象属性是否存在
  • obj?.[expr] // 同上
  • func?.(...args) // 函数或对象方法是否存在

Null 判断运算符

ES2020  Null 判断运算符?? 只有运算符左侧的值为nullundefined时,才会返回右侧的值 (即:user.name ?? 'zhangsan'

逻辑赋值运算符

ES2021 引入 三个运算符||=&&=??=相当于先进行逻辑运算,然后根据运算结果,再视情况进行赋值运算。

  • x ||= y == x || (x = y)
  • x &&= y == x && (x = y)
  • x ??= y == x ?? (x = y)

Proxy

Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。
Proxy 目标对象的透明代理 即不做任何拦截的情况下,也无法保证与目标对象的行为一致 ,因为 Proxy 代理目标对象内部的this关键字会指向 Proxy 代理

支持的拦截方法
get(target, propKey, receiver) 拦截对象属性的读取 (即:proxy.fooproxy['foo'])
set(target, propKey, value, receiver) 拦截对象属性的设置,返回一个布尔值(即:proxy.foo = vproxy['foo'] = v
has(target, propKey) 拦截 in 操作符的捕捉器。(即:propKey in proxy
deleteProperty(target, propKey) 拦截delete 操作符的捕捉器。(即:delete proxy[propKey]
ownKeys(target) 拦截Object.getOwnPropertyNames(proxy)Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性
getOwnPropertyDescriptor(target, propKey) 拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
defineProperty(target, propKey, propDesc) 拦截Object.defineProperty(proxy, propKey, propDesc)Object.defineProperties(proxy, propDescs),返回一个布尔值。
preventExtensions(target) 拦截Object.preventExtensions(proxy),返回一个布尔值。
getPrototypeOf(target) 拦截Object.getPrototypeOf(proxy),返回一个对象。
isExtensible(target) 拦截Object.isExtensible(proxy),返回一个布尔值。
setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
apply(target, object, args) 拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)proxy.call(object, ...args)proxy.apply(...)
construct(target, args) 拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)

Proxy.revicable()

返回一个可取消的 Proxy 实例。
revoke属性是一个函数,可以取消Proxy实例。当执行revoke函数之后,再访问Proxy实例,会抛出错误。(即:let {proxy, revoke} = Proxy.revocable(target, handler)


ES6 万字极简总结,帮你快速过一遍知识点! ——作者:JS心法

-------- 本文结束感谢阅读 --------

UyoAhz