ECMAScript 6
2020-08-07 10:10:42 0 举报
AI智能生成
javascript ES6学习总结
作者其他创作
大纲/内容
变量声明、命令
let
不存在变量提升、不允许重复声明
暂时性死区:凡是在声明之前就使用这些变量,就会报错
块级作用域:let命令所在的代码块内有效。
非全局顶层变量,通过window.xxx获取为undefined
const
不存在变量提升、不允许重复声明
一旦声明,常量的值就不能改变。
非全局顶层变量,通过window.xxx获取为undefined
import
export
export default
class
ES6 声明变量的六种方法
var
function
let
const
import
class
ES6 数据类型
基本类型
String
undefined
null
number
boolean
Symbol
引用类型
Object
Function
Array
ES6 新增方法
字符串(13个)
字符串补全长度
padStart()
用于头部补全
接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。
padEnd()
用于尾部补全
接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。
字符串查找
includes()
返回布尔值,表示是否找到了参数字符串
子主题
startsWith()
返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith()
返回布尔值,表示参数字符串是否在原字符串的尾部。
字符串消除空格
trimStart()
trimEnd()
String.raw()
String.fromCodePoint()
可以识别大于0xFFFF的字符,弥补了String.fromCharCode()方法的不足。
repeat()
方法返回一个新字符串,表示将原字符串重复n次。
参数如果是小数,会被取整。
repeat的参数是负数或者Infinity,会报错
normalize()
codePointAt()
matchAll()
方法返回一个正则表达式在当前字符串的所有匹配
对象(10个)
Object.is()
与严格比较运算符(===)的行为基本一致。
与===的不同
+0不等于-0
+0 === -0 //true
Object.is(+0, -0) // false
NaN等于自身
NaN === NaN // false
Object.is(NaN, NaN) // true
Object.assign()
常见用途
添加属性
添加方法
克隆对象
子主题
设置默认参数
数组替换
Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]
// [4, 5, 3]
方法特点
方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
方法的第一个参数是目标对象,后面的参数都是源对象。
目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
方法实行的是浅拷贝,而不是深拷贝
注意事项
浅拷贝
方法实行的是浅拷贝,而不是深拷贝,源对象某个属性的值是对象,拷贝得到的是对象的引用。
同名属性的替换
对于嵌套的对象,遇到同名属性,Object.assign会进行属性替换
数组的处理
可以用来处理数组,但是会把数组视为对象。
Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]
// [4, 5, 3]
取值函数的处理
只能进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制。
Object.getOwnPropertyDescriptors()
返回指定对象所有自身属性(非继承属性)的描述对象。
原型相关
__proto__属性
用来读取或设置当前对象的prototype对象
从兼容性的角度,都不要使用这个属性
Object.setPrototypeOf()
方法的作用与__proto__相同,用来设置一个对象的prototype对象,返回参数对象本身
Object.setPrototypeOf(object, prototype)
Object.getPrototypeOf()
用于读取一个对象的原型对象
Object.getPrototypeOf(1)
// Number {[[PrimitiveValue]]: 0}
// Number {[[PrimitiveValue]]: 0}
参数是undefined或null,会报错
对象遍历
Object.keys()
返回数组,结果是参数对象自身的(不含继承的)所有可遍历属性的key名。
var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]
Object.keys(obj)
// ["foo", "baz"]
Object.values()
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]
Object.values(obj)
// ["bar", 42]
Object.entries()
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
Object.fromEntries()
Object.fromEntries()方法是Object.entries()的逆操作,用于将一个键值对数组转为对象。
Object.fromEntries([
['foo', 'bar'],
['baz', 42]
])
// { foo: "bar", baz: 42 }
['foo', 'bar'],
['baz', 42]
])
// { foo: "bar", baz: 42 }
ES6 扩展
字符串
正则
数值
Number.isInteger()
Number.EPSILON
函数
数组
Array.from()
方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)
子主题
子主题
对象
解构赋值
数组
对象
Module 语法
export
import
import()
适用场景
按需加载。
条件加载
动态的模块路径
子主题
跨模块常量
for...of
数组
set
map
类似数组的对象(比如arguments对象、DOM NodeList 对象)
Generator 对象
字符串
async/await
使用形式
函数申明
async function foo() {}
函数表达式
const foo = async function () {};
对象的方法
let obj = { async foo() {} };
obj.foo().then(...)
obj.foo().then(...)
class方法
class Storage {
constructor() {
this.cachePromise = caches.open('avatars');
}
async getAvatar(name) {
const cache = await this.cachePromise;
return cache.match(`/avatars/${name}.jpg`);
}
}
const storage = new Storage();
storage.getAvatar('jake').then(…);
constructor() {
this.cachePromise = caches.open('avatars');
}
async getAvatar(name) {
const cache = await this.cachePromise;
return cache.match(`/avatars/${name}.jpg`);
}
}
const storage = new Storage();
storage.getAvatar('jake').then(…);
箭头函数
const foo = async () => {};
promise
使用
方法
Promise.all()
接受一个数组作为参数
可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。
只有等到它们的结果都返回了,或者其中有一个变为rejected,才会触发then
Promise.race()
一个实例率先改变状态,p的状态就跟着改变
Promise.allSettled()
只有等到所有这些参数实例都返回结果,不管是fulfilled还是rejected,包装实例才会结束
Promise.any()
Promise.resolve()
Promise.reject()
Promise.try()
module语法
export
可输出变量、函数
使用as 如 export { v1 as streamV1} 重命名,可以用不同的名字输出多次
import
如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。
import命令输入的变量都是只读的,不能改写
但如果import值是对象,可以添加。但不建议这样做
import命令具有提升效果,会提升到整个模块的头部,首先执行
import语句会执行所加载的模块,因此可以有下面的写法。import 'lodash';
多次重复执行同一句import语句,那么只会执行一次
模块的整体加载
用星号(*)指定一个对象,所有输出值都加载在这个对象上面。
import * as circle from './circle'; 通过circle取export所有的值
export default
import _, { each, forEach } from 'lodash';
export 与 import 的复合写法
先输入后输出同一个模块,import语句可以与export语句写在一起。
写成一行以后,foo和bar实际上并没有被导入当前模块,只是相当于对外转发了这两个接口,导致当前模块不能直接使用foo和bar。
import()
按需加载。
条件加载
动态的模块路径
根据函数结果加载不同文件
收藏
0 条评论
下一页