ES6

数据类型

  • number、boolean、string、null、undefined

  • Object（Array、Function、Date、RegExp、Error)）

  • Symbol、BigInt

const、let、块级作用域{}

  • 不允许重复声明

  • 不存在变量提升

  • 暂时性死区

字符串扩展

- includes
- repeat
- startWith
- endWith

模板字符串

==解构赋值==

  • 解构不成功undefined

  • 解构赋值规则：只要等号右边的值不是对象或数组，就先将其转为对象，undefined和null无法转为对象，因此无法进行解构

  • 字符串解构：const [a, b, c, d, e] = "hello"

  • 数值解构：const { toString: s } = 123

  • 布尔解构：const { toString: b } = true

  • 对象解构

    • 形式：const { x, y } = { x: 1, y: 2 }

    • 默认：const { x, y = 2 } = { x: 1 }

    • 重命名：const { x, y: z } = { x: 1, y: 2 }

    • ;({ name: user.name, email: user.email, ...userDetails } = obj)

  • 数组解构

    const csvFileLine = '1997,John Doe,US,john@doe.com,New York'
const { 2: country, 4: state } = csvFileLine.split(',')

  • 函数参数解构

    • function Func([x = 0, y = 1]) {}

    • function Func({ x = 0, y = 1 } = {}) {}

  • 应用场景

    • 排除对象不需要的属性：const {prop1, prop2, ...otherProps} = obj

    • 交换变量值：[x, y] = [y, x]

    • 返回函数多个值：const [x, y, z] = Func()

    • 定义函数参数：

      • Func([1, 2]){} 数组有序

      • Func({x, y, z}) {} 对象可无序

    • 提取 JSON 数据：const { name, version } = packageJson

    • 定义函数参数默认值：function Func({ x = 1, y = 2 } = {}) {}

    • 遍历 Map 结构：for (let [k, v] of Map) {}

    • 输入模块指定属性和方法：const { readFile, writeFile } = require("fs")

for of 可迭代对象原理Symbol.iterator

let obj = {
	current: 0,
	max: 5,
	[Symbol.iterator]() {
		return {
			current: this.current,
			max: this.max,
			next() {
				if (this.current === this.max) {
					return { value: undefined, done: true }
				} else {
					return { value: this.current++, done: false }
				}
			},
		}
	},
}

for (let c of obj) console.log(c)

Iterator

//手写迭代器
function makeIterator(array) {
	let nextIdx = 0
	return {
		next() {
			return nextIdx < array.length
				? { value: array[nextIdx++], done: false }
				: { value: undefined, done: true }
		},
	}
}

let it = makeIterator(['a', 'b'])
it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }

数值扩展

  • Number.EPSILON

  • Number.MIN_SAFE_INTEGER

  • Number.MAX_SAFE_INTEGER

  • Number.parseInt()

  • Number.parseFloat()

  • Number.isFinite()

  • Number.isNaN()

  • Number.isInteger()

  • Number.isSafeInteger()

对象扩展

  • 简洁表示

  • 属性名可使用表达式

  • API

    • Object.is()

    • Object.assign()

    • Object.keys()、Object.values()、Object.entries()

    • Object.getPrototypeOf()

    • Object.setPrototypeOf()

    • Object.getOwnPropertyDescriptors()

    • Object.entries()

    • Object.fromEntries()

  • 属性遍历

    • for-in

    • Object.keys()、Object.values()

    • Object.getOwnPropertyNames()

    • Object.getOwnPropertySymbols()

    • Reflect.ownKeys()

      • 规则

        • 首先遍历所有数值键，按照数值升序排列

        • 其次遍历所有字符串键，按照加入时间升序排列

        • 最后遍历所有Symbol键，按照加入时间升序排列

  • 链判断操作符(?.)：是否存在对象属性(不存在返回undefined且不再往下执行)

    • 对象属性：obj?.prop、obj?.[expr]

    • 函数调用：func?.(...args)

  • 空判断操作符(??)：是否值为 undefined 或 null，是则使用默认值

数组扩展

==扩展运算符(...)==

  • 浅克隆数组(对象)：const arr = [...arr1]

  • 浅合并数组(对象)：const arr = [...arr1, ...arr2]

  • 拼接数组：arr.push(...arr1)

  • 代替 apply：Math.max.apply(null, [x, y]) => Math.max(...[x, y])

  • 转换字符串为数组：[..."hello"]

  • 转换字符串为对象：{ ..."hello" }

  • 转换数组为对象：{ ...[1, 2] }

  • 转换类数组为数组：[...Arguments, ...NodeList]

  • 转换可遍历对象为数组：[...String, ...Set, ...Map, ...Generator]

  • 与数组解构赋值结合：const [x, ...rest] = [1, 2, 3]

  • 对象克隆(同Object.assign):const objCopy = { ...obj, ...objOthers }

  • 与对象解构赋值结合：const { x, ...rest } = { x: 1, y: 2, z: 3 }

  • 修改现有对象部分属性：const obj = { x: 1, ...{ x: 2 } }

API

  • Array.from()

  • Array.isArray

  • Array.of()

  • keys()、values()、entries() 返回遍历器对象，可用for-of自动遍历或next()手动遍历

  • includes()

  • fill()

  • find()、findIndex()

  • flat()

==函数扩展==

参数默认值

  • 指定某个参数不能省略

    const required = () => {
	throw new Error('Missing parameter')
}
const add = (a = required(), b = required()) => a + b

rest/spread 剩余参数

const sortNumbers = (...numbers) => numbers.sort()

箭头函数

  1. 没有 this,函数体里面的 this 是箭头函数定义时所在对象,不是运行时(this 看上一级，若上级是箭头函数继续往上找), 作用域是栈内存不是堆内存

  2. 不能改变this绑定,即使通过call、apply、bind

  3. 不能用作构造函数

  4. 没有原型对象

  5. 没有自己的 super 和 new.target 绑定

  6. 没有 arguments,但有...

  7. 形参名称不能重复

  8. 返回对象时必须在对象外面加上括号

  9. 不可用 yield,因此不能用 Generator 函数

Symbol

- const s = Symbol(str)
- Symbol.for()
- Symbol.keyFor()
- Symbol.toPrimitive
- `Symbol值`作为对象属性名时，只能用方括号运算符(`[]`)读取，不能用点运算符(`.`)读取

Set

  • 去重字符串：[...new Set(str)].join("")

  • 去重数组：[...new Set(arr)]或Array.from(new Set(arr))

  • 集合数组

    • 声明：const a = new Set(arr1)、const b = new Set(arr2)

    • 并集：new Set([...a, ...b])

    • 交集：new Set([...a].filter(v => b.has(v)))

    • 差集：new Set([...a].filter(v => !b.has(v)))

  • WeakSet

  • 遍历顺序：插入顺序

  • 添加多个NaN时，只会存在一个NaN

  • 添加相同的对象时，会认为是不同的对象

Map

  • 遍历顺序：插入顺序

  • 添加多个以NaN作为键时，只会存在一个以NaN作为键的值

  • Object结构提供字符串—值的对应，Map结构提供值—值的对应

==Promise==(见实现)

Proxy & Reflect

  • 定义：修改某些操作的默认行为

    const user = {
	_name: 'Guest',
	get name() {
		return this._name
	},
}

handler = {
  //读取未知属性报错、读取数组负数索引的值、封装链式操作、生成DOM嵌套节点
	get(target, key, receiver) {
		//return target[key]
    //receiver指向proxy或继承于它的对象
		return Reflect.get(target, key, receiver)
	},
  //数据绑定(Vue数据绑定实现原理)、确保属性值设置符合要求、防止内部属性被外部读写
	set(target, key, val, receiver) {
		return Reflect.set(target, key, val, receiver)
	},
	//k in obj 隐藏内部属性不被发现、排除不符合属性条件的对象
	has() {},
  //保护内部属性不被删除
  deleteProperty() {},
	//for in  保护内部属性不被遍历
	ownKeys() {},
	construct() {},
  //拦截函数
	apply() {},
}

const userProxy = new Proxy(user, handler)

let admin = {
	__proto__: userProxy,
	_name: 'Admin',
}

console.log(admin.name)

==Class==

1 class声明会提升,但不会初始化赋值,类似const、let`

2 class内部默认严格模式

3 class的所有方法(包括静态方法和实例方法)都是不可枚举的

4 class的所有方法(包括静态方法和实例方法)都没有原型对象prototype

5 必须使用new调用class

6 class内部无法重写类名

  • constructor

    • ES5 实质：先创造子类实例的 this,再将父类的属性方法添加到 this 上Parent.apply(this)

    • ES6 实质：先将父类实例的属性方法加到 this 上(调用 super()),再用子类构造函数修改 this

  • extends

  • super

    • 在普通方法中指向父类的原型对象,在静态方法中指向父类

  • static

  • ==class有两条原型链==

    • Child.__proto__ === Parent //核心目的是实现静态方法继承

    • Child.prototype.__proto__ === Parent.prototype

  • new.target

==Module==

  • export

    • 默认导出：export default Person(导入时可指定模块任意名称,无需知晓内部真实名称,只能使用一次)

    • 单独导出：export const name = "Jack"

    • 按需导出：export { age, name, sex }(推荐)

    • 改名导出：export { name as newName }

  • import

    • 默认导入：import anyName from "module1"

    • 整体导入：import * as Person from "module1"

    • 按需导入：import { age, name, sex } from "module1"

    • 改名导入：import { xxx, name as newName} from "module1"

    • 自执导入：import "module1"

    • 引入文件：import "xxxx.js"

    • 复合导入：import anyName, { name } from "module1"

  • 复合模式

  • CommonJS（同步） vs ESM（浏览器、服务器）

    • 导出方式不同

      • 具名导出/导入: Named Import/Export

      • 默认导出/导入: Default Import/Export

        // Named export/import
export { sum }
import { sum } from 'sum'

// Default export/import
export default sum
import sum from 'sum'

//CommonJS中，导入导出的只有一种
module.exports = sum

//exports仅仅是module.exports的引用而已
//exports = module.exports
// 以下两个是等价的
exports.a = 3
module.exports.a = 3

    • 动态依赖与静态依赖（export/import 提升，必须定义在顶层）：前者建立模块依赖关系是在运行时,后者是在编译时

      • require的模块路径可以动态指定，支持传入一个表达式，甚至可以通过if语句判断是否加载某个模块

        // calculator.js
module.exports = {
    name: 'calculator'
}
// index.js
const name = require('./calculator.js').name

    • 输出值得拷贝 vs 输出值得引用（read-only）

      //CommonJS
// a.js
let a = 1
let b = { num: 1 }
setTimeout(() => {
	a = 2
	b = { num: 2 }
}, 200)
module.exports = {
	a,
	b,
}

// main.js
let { a, b } = require('./a')
console.log(a, b)
setTimeout(() => {
	console.log(a, b)
}, 500)
      //ESM
// a.mjs
let a = 1
let b = { num: 1 }
setTimeout(() => {
	a = 2
	b = { num: 2 }
}, 200)
export { a, b }

// main.mjs
import { a, b } from './a.mjs'
console.log(a, b)
setTimeout(() => {
	console.log(a, b) // 2 { num: 2 }
}, 500)
      //ESM
//export {<变量>}这种方式一般称为命名式导出或者具名导出，导出的是一个变量的引用
//export default这种方式称为默认导出或者匿名导出，导出的是一个值
// a.js
let x = 10
let y = 20
setTimeout(() => {
	x = 100
	y = 200
}, 100)
export { x }
export default y

// main.mjs
import y, { x } from './a.mjs'
setTimeout(() => {
	console.log(x, y) // 100,20
}, 200)
      //ESM
// a.mjs
export let count = 1
export function add() {
  count++
}
export function get() {
  return count
}

// main.mjs
import { count, add, get } from './a.mjs'
console.log(count)  // 1
add()
console.log(count)  // 2
console.log(get())  // 2
      //CommonJS
// a.js
let count = 1
module.exports = {
  count,
  add() {
    count++
  },
  get() {
    return count
  },
}

// main.js
const { count, add, get } = require('./a')
console.log(count)  // 1
add()
console.log(count)  // 1
console.log(get())  // 2

    • 都可解决循环依赖

      • CommonJS使用的是模块缓存

        • 对应值得拷贝 -> 开辟新的内存

      • ESM使用的模块记录

        // CommonJS
// main.js
const bar = require('./bar.js')
console.log('当前是main.js内:', bar) // {}
module.exports = '在main.js内'

// bar.js
const main = require('./main.js')
console.log('当前是bar.js内:', main)
module.exports = 'bar.js内'

// 执行 node ./main.js  ， 输出：
当前是bar.js内: {}  // 解析：执行到bar.js内时，main.js还没有执行完，就没有东西导出，会默认导出空对象
当前是main.js内: bar.js内
        // ESM
// main.js
const bar = require('./bar.js')
console.log('当前是main.js内:', bar) // {}
module.exports = '在main.js内'

// bar.js
const main = require('./main.js')
console.log('当前是bar.js内:', main)
module.exports = 'bar.js内'

// 执行 node ./main.js  ， 输出：
当前是bar.js内: {}  // 解析：执行到bar.js内时，main.js还没有执行完，就没有东西导出，会默认导出空对象
当前是main.js内: bar.js内

    • CommonJS的export和module.export指向同一块内存，但由于最后导出的是module.export，所以不能直接给export赋值，会导致指向丢失

    • CommonJS查找模块时，核心模块和文件模块的查找都比较简单，对于react/vue这种第三方模块，会从当前目录下的node_module文件下开始，递归往上查找，找到该包后，根据package.json的main字段找到入口文件

  • 加载实现

    • 传统加载

      • 同步加载：<script src=""></script>

      • defer 异步加载：<script src="" defer></script>(顺序加载,渲染完再执行)

      • async 异步加载：<script src="" async></script>(乱序加载,下载完就执行)

    • 模块加载：<script type="module" src=""></script>(默认是defer加载)

  • import()：动态导入

    • require()同步加载，import()异步加载

    • 按需加载、条件加载、模块路径动态化

PreviousDOMNextJS-军规

Last updated