模块管理使用babel工具来做ES5以上代码的浏览器解析的兼容处理
url: https://babeljs.io/
1、解构赋值
// // 数组
var arr = ['aaa', 'zzz', 'ddd', 'fff']
// // 解构赋值
var [a, z, d, f] = arr
console.log(a); // aaa
console.log(z); // zzz
console.log(d); // ddd
console.log(f); // fff
// // 设置默认值
var [a, z, d, f, e="eee"] = arr
console.log(e); // eee
// // 向后解构
var [, , d1] = arr
console.log(d1); // ddd
// // 数组解构数组
var [a, ...itemArr] = arr
console.log(a); // aaa
console.log(itemArr); // [ 'zzz', 'ddd', 'fff' ]
// 对象
var obj = {
number: 1,
local: '深圳'
}
var {number, local} = obj
console.log(number); // 1
console.log(local); // 深圳
// 默认值
var { time: newTime = '12:30 '} = obj
console.log(newTime); // 12:30
// 参数解构
function foo({number, local}) {
console.log(number, local) // 1 深圳
}
foo(obj)
2、类方法class
class foo {
// 接受参数
constructor(value) {
this.value = value
}
thing() {
console.log(this.value + 1);
}
// 静态方法
static personMethod() {
console.log("static1")
}
}
// 类也是构造函数
console.log(foo);
// extends关键字实现类的继承
class fee extends foo {
// 接受参数
constructor(value) {
super(value)
}
// 重写父类方法
personMethod() {
super.thing()
console.log(this.value + 2)
console.log(this.value + 3)
}
// 重写父类静态方法
static staticMethod() {
super.personMethod()
console.log("static2")
console.log("static3")
}
}
var p1 = new fee(1) // 传参数调用
p1.thing() // 调用原型方法
fee.staticMethod() // 静态方法可以直接调用
p1.personMethod() // 调用重写父类静态方法
3、模板字符串
let num = 10
let local = '深圳'
let thing = `在${local}有${num}元人民币`
console.log(thing); // 在深圳有10元人民币
thing = `在${local}有${num * 100}元人民币`
console.log(thing); // 在深圳有1000元人民币
thing = `在${local}有${num===10 ? "三千万" : 100}元人民币`
console.log(thing); // 在深圳有三千万元人民币
function moneyFn() {
return "六千万"
}
thing = `在${local}有${moneyFn()}元人民币`
console.log(thing); // 在深圳有六千万元人民币
4、Symbol在对象中表示唯一的属性名
// 1.ES6之前, 对象的属性名(key)
var obj = {
name: "why",
friend: { name: "kobe" },
age: 18
}
obj['newName'] = "james"
console.log(obj)
// 2.ES6中Symbol的基本使用
const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2)
// ES2019(ES10)中, Symbol还有一个描述(description)
const s3 = Symbol("aaa")
console.log(s3.description)
// 3.Symbol值作为key
// 3.1.在定义对象字面量时使用
const obj = {
[s1]: "abc",
[s2]: "cba"
}
// 3.2.新增属性
obj[s3] = "nba"
// 3.3.Object.defineProperty方式
const s4 = Symbol()
Object.defineProperty(obj, s4, {
enumerable: true,
configurable: true,
writable: true,
value: "mba"
})
console.log(obj[s1], obj[s2], obj[s3], obj[s4])
// 注意: 不能通过.语法获取
// console.log(obj.s1)
// 4.使用Symbol作为key的属性名,在遍历/Object.keys等中是获取不到这些Symbol值
// 需要Object.getOwnPropertySymbols来获取所有Symbol的key
console.log(Object.keys(obj))
console.log(Object.getOwnPropertyNames(obj))
console.log(Object.getOwnPropertySymbols(obj))
const sKeys = Object.getOwnPropertySymbols(obj)
for (const sKey of sKeys) {
console.log(obj[sKey])
}
// 5.Symbol.for(key)/Symbol.keyFor(symbol)
const sa = Symbol.for("aaa")
const sb = Symbol.for("aaa")
console.log(sa === sb)
const key = Symbol.keyFor(sa)
console.log(key)
const sc = Symbol.for(key)
console.log(sa === sc)
5、Set数据结构，Set中存放的元素是不会重复
// 10, 20, 40, 333
// 1.创建Set结构
const set = new Set()
set.add(10)
set.add(20)
set.add(40)
set.add(333)
set.add(10)
// 2.添加对象时特别注意:
set.add({})
set.add({})
const obj = {}
set.add(obj)
set.add(obj)
// console.log(set)
// 3.对数组去重(去除重复的元素)
const arr = [33, 10, 26, 30, 33, 26]
// const newArr = []
// for (const item of arr) {
// if (newArr.indexOf(item) !== -1) {
// newArr.push(item)
// }
// }
const arrSet = new Set(arr)
// const newArr = Array.from(arrSet)
// const newArr = [...arrSet]
// console.log(newArr)
// 4.size属性
console.log(arrSet.size)
// 5.Set的方法
// add
arrSet.add(100)
console.log(arrSet)
// delete
arrSet.delete(33)
console.log(arrSet)
// has
console.log(arrSet.has(100))
// clear
// arrSet.clear()
console.log(arrSet)
// 6.对Set进行遍历
arrSet.forEach(item => {
console.log(item)
})
for (const item of arrSet) {
console.log(item)
}
5、WeakSet数据结构，WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收,WeakSet不能遍历
const weakSet = new WeakSet()
// 1.区别一: 只能存放对象类型
// TypeError: Invalid value used in weak set
// weakSet.add(10)
// 强引用和弱引用的概念(看图)
// 2.区别二: 对对象是一个弱引用
let obj = {
name: "why"
}
// weakSet.add(obj)
const set = new Set()
// 建立的是强引用
set.add(obj)
// 建立的是弱引用
weakSet.add(obj)
// 3.WeakSet的应用场景
const personSet = new WeakSet()
class Person {
constructor() {
personSet.add(this)
}
running() {
if (!personSet.has(this)) {
throw new Error("不能通过非构造方法创建出来的对象调用running方法")
}
console.log("running~", this)
}
}
let p = new Person()
p.running()
p = null
p.running.call({name: "why"})
6、Map数据结构,可以通过其他数据类型作为key
// 1.JavaScript中对象中是不能使用对象来作为key的
const obj1 = { name: "why" }
const obj2 = { name: "kobe" }
// const info = {
// [obj1]: "aaa",
// [obj2]: "bbb"
// }
// console.log(info)
// 2.Map就是允许我们对象类型来作为key的
// 构造方法的使用
const map = new Map()
map.set(obj1, "aaa")
map.set(obj2, "bbb")
map.set(1, "ccc")
console.log(map)
const map2 = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]])
console.log(map2)
// 3.常见的属性和方法
console.log(map2.size)
// set
map2.set("why", "eee")
console.log(map2)
// get(key)
console.log(map2.get("why"))
// has(key)
console.log(map2.has("why"))
// delete(key)
map2.delete("why")
console.log(map2)
// clear
// map2.clear()
// console.log(map2)
// 4.遍历map
map2.forEach((item, key) => {
console.log(item, key)
})
for (const item of map2) {
console.log(item[0], item[1])
}
for (const [key, value] of map2) {
console.log(key, value)
}
7、WeakMap数据结构,没有forEach和for of的方式进行遍历
const obj = {name: "obj1"}
// 1.WeakMap和Map的区别二:
const map = new Map()
map.set(obj, "aaa")
const weakMap = new WeakMap()
weakMap.set(obj, "aaa")
// 2.区别一: 不能使用基本数据类型
// weakMap.set(1, "ccc")
// 3.常见方法
// get方法
console.log(weakMap.get(obj))
// has方法
console.log(weakMap.has(obj))
// delete方法
console.log(weakMap.delete(obj))
// WeakMap { <items unknown> }
console.log(weakMap)
// 应用场景(vue3响应式原理)
const obj1 = {
name: "why",
age: 18
}
function obj1NameFn1() {
console.log("obj1NameFn1被执行")
}
function obj1NameFn2() {
console.log("obj1NameFn2被执行")
}
function obj1AgeFn1() {
console.log("obj1AgeFn1")
}
function obj1AgeFn2() {
console.log("obj1AgeFn2")
}
const obj2 = {
name: "kobe",
height: 1.88,
address: "广州市"
}
function obj2NameFn1() {
console.log("obj1NameFn1被执行")
}
function obj2NameFn2() {
console.log("obj1NameFn2被执行")
}
// 1.创建WeakMap
const weakMap = new WeakMap()
// 2.收集依赖结构
// 2.1.对obj1收集的数据结构
const obj1Map = new Map()
obj1Map.set("name", [obj1NameFn1, obj1NameFn2])
obj1Map.set("age", [obj1AgeFn1, obj1AgeFn2])
weakMap.set(obj1, obj1Map)
// 2.2.对obj2收集的数据结构
const obj2Map = new Map()
obj2Map.set("name", [obj2NameFn1, obj2NameFn2])
weakMap.set(obj2, obj2Map)
// 3.如果obj1.name发生了改变
// Proxy/Object.defineProperty
obj1.name = "james"
const targetMap = weakMap.get(obj1)
const fns = targetMap.get("name")
fns.forEach(item => item())
8、默认参数和剩余参数
// ES5以及之前给参数默认值
/**
* 缺点:
* 1.写起来很麻烦, 并且代码的阅读性是比较差
* 2.这种写法是有bug
*/
// function foo(m, n) {
// m = m || "aaa"
// n = n || "bbb"
// console.log(m, n)
// }
// 1.ES6可以给函数参数提供默认值
function foo(m = "aaa", n = "bbb") {
console.log(m, n)
}
// foo()
foo(0, "")
// 2.对象参数和默认值以及解构
function printInfo({name, age} = {name: "why", age: 18}) {
console.log(name, age)
}
printInfo({name: "kobe", age: 40})
// 另外一种写法
function printInfo1({name = "why", age = 18} = {}) {
console.log(name, age)
}
printInfo1()
// 3.有默认值的形参最好放到最后
function bar(x, y, z = 30) {
console.log(x, y, z)
}
// bar(10, 20)
bar(undefined, 10, 20)
// 4.有默认值的函数的length属性
function baz(x, y, z, m, n = 30) {
console.log(x, y, z, m, n)
}
console.log(baz.length)
function foo(...args, m, n) {
console.log(m, n)
console.log(args)
console.log(arguments)
}
foo(20, 30, 40, 50, 60)
// rest paramaters必须放到最后
// Rest parameter must be last formal parameter
function foo(m, n = m + 1) {
console.log(m, n)
}
foo(10);
9、let-const
// var foo = "foo"
// let bar = "bar"
// const constant(常量/衡量)
// const name = "abc"
// name = "cba"
// 注意事项一: const本质上是传递的值不可以修改
// 但是如果传递的是一个引用类型(内存地址), 可以通过引用找到对应的对象, 去修改对象内部的属性, 这个是可以的
// const obj = {
// foo: "foo"
// }
// // obj = {}
// obj.foo = "aaa"
// console.log(obj.foo)
// 注意事项二: 通过let/const定义的变量名是不可以重复定义
// var foo = "abc"
// var foo = "cba"
let foo = "abc"
// SyntaxError: Identifier 'foo' has already been declared
let foo = "cba"
console.log(foo)
