theme: channing-cyan
跟着coderwhy学习
1.字符串模板基本使用
- 在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly)。
ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接:
- 首先,我们会使用 `` 符号来编写字符串,称之为模板字符串;
- 其次,在模板字符串中,我们可以通过
${expression}
来嵌入动态的内容; ``js const message =
my name is ${name}, age is ${age}, height is ${height}` console.log(message)
const info =
age double is ${age * 2}
console.log(info)function doubleAge() { return age * 2 }
const info2 =
double age is ${doubleAge()}
console.log(info2) ```2. 标签模板字符串使用
模板字符串还有另外一种用法:标签模板字符串(Tagged Template Literals)。
来看一个普通的JavaScript的函数: ```js function foo(...args) { console.log(args) }
// [ 'Hello World'] foo('Hello World') ```
- 如果我们使用标签模板字符串,并且在调用的时候插入其他的变量:
- 模板字符串被拆分了;
- 第一个元素是数组,是被模块字符串拆分的字符串组合;
- 后面的元素是一个个模块字符串传入的内容;
js cpnst name = 'mint' const age = 18 // [ ['Hello ', ' World ', ''] ,'mint', 18 ] foo`Hello ${name} World ${age}`
### 3.【扩展】 React的styled-components库
4.函数的默认参数
- 在ES6之前,我们编写的函数参数是没有默认值的,所以我们在编写函数时,如果有下面的需求:
- 传入了参数,那么使用传入的参数;
- 没有传入参数,那么使用一个默认值;
- 而在ES6中,我们允许给函数一个默认值: ```js function foo(x=20, y=30) { console.log(x, y) }
foo(50, 100) // 50 100 foo() // 20 30 ```
js function foo() { var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20; var y = arguments.length > 0 && arguments[1] !== undefined ? arguments[1] : 30; console.log(x, y); }
5.函数默认值的补充
- 默认值也可以和解构一起来使用: ```js // 1.ES6可以给函数参数提供默认值 function foo(m = "aaa", n = "bbb") { console.log(m, n) }
// 2.对象参数和默认值以及解构 function printInfo({name, age} = {name: "why", age: 18}) { console.log(name, age) } ```
### 6.展开语法
- 展开语法(Spread syntax):
- 可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开;
- 还可以在构造字面量对象时, 将对象表达式按key-value的方式展开;
展开语法的场景:
- 在函数调用时使用;
- 在数组构造时使用;
- 在构建对象字面量时,也可以使用展开运算符,这个是在ES2018(ES9)中添加的新特性; ``` const names = ["abc", "cba", "nba"] const name = "mint" const info = {name: "mint", age: 18}
// 1.函数调用时 function foo(x, y, z) { console.log(x, y, z) }
// foo.apply(null, names) foo(...names) foo(...name)
// 2.构造数组时 const newNames = [...names, ...name] console.log(newNames)
// 3.构建对象字面量时ES2018(ES9) const obj = { ...info, address: "广州市", ...names } console.log(obj) ```
注意:展开运算符其实是一种浅拷贝; ``` const info = { name: 'mint', friend: {name: 'pika'} }
const obj = { ...info, name: 'pika-web'} // console.log(obj); obj.friend.name = 'andy'
console.log(info.friend.name) ```
7.数值的表示
- 在ES6中规范了二进制和八进制的写法: ```js const num1 = 100 // 十进制 100
// b -> binary const num2 = 0b100 // 二进制 4 // o -> octonary const num3 = 0o100 // 八进制 64 // x -> hexadecimal const num4 = 0x100 // 十六进制 256 ```
- 另外在ES2021新增特性:数字过长时,可以使用_作为连接符
js // 大的数值的连接符(ES2021 ES12) const num = 10_000_000_000_000_000 console.log(num) // 10000000000000000
8.Symbol的基本使用
- Symbol是什么呢?Symbol是ES6中新增的一个基本数据类型,翻译为符号。
那么为什么需要Symbol呢?
在ES6之前,对象的属性名都是字符串形式,那么很容易造成属性名的冲突;
比如原来有一个对象,我们希望在其中添加一个新的属性和值,但是我们在不确定它原来内部有什么内容的情况下,很容易造成冲突,从而覆盖掉它内部的某个属性;
比如我们前面在讲apply、call、bind实现时,我们有给其中添加一个fn属性,那么如果它内部原来已经有了fn属性了呢?
- 比如开发中我们使用混入,那么混入中出现了同名的属性,必然有一个会被覆盖掉;
- Symbol就是为了解决上面的问题,用来生成一个独一无二的值。
- Symbol值是通过Symbol函数来生成的,生成后可以作为属性名;
- 也就是在ES6中,对象的属性名可以使用字符串,也可以使用Symbol值;
- Symbol即使多次创建值,它们也是不同的:Symbol函数执行后每次创建出来的值都是独一无二的;
- 我们也可以在创建Symbol值的时候传入一个描述description: 这个是ES2019(ES10)新增的特性; ```js // 在ES6之前,对象的属性名(key) // var obj = { // name: 'mint', // friend: {name: 'pika'}, // age: 18 // } // // obj['name'] = 'soft' // console.log(obj)
// ES6中的Symbol使用 const s1 = Symbol() const s2 = Symbol()
console.log(s1 === s2) //false
// ES2019(ES10)中, Symbol还有一个描述(description) const s3 = Symbol("aaa") console.log(s3.description) //aaa ```
9.Symbol作为属性名
- 我们通常会使用Symbol在对象中表示唯一的属性名: ```js // 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) undefined
// 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]) } ```
10.相同值的Symbol
讲Symbol的目的是为了创建一个独一无二的值,那么如果我们现在就是想创建相同的Symbol应该怎么来做呢?
- 我们可以使用Symbol.for方法来做到这一点;
并且我们可以通过Symbol.keyFor方法来获取对应的key;
```js // 5.Symbol.for(key) / Symbol.keyFor(symbol) const sa = Symbol.for('aaa') const sb = Symbol.for('aaa') console.log(sa === sb);//true
const key = Symbol.keyFor(sa) console.log(key) //aa const sc = Symbol.for(key) console.log(sa === sc) //true ```
11.Set的基本使用
在ES6之前,我们存储数据的结构主要有两种:数组、对象。
- 在ES6中新增了另外两种数据结构:Set、Map,以及它们的另外形式WeakSet、WeakMap。
- Set是一个新增的数据结构,可以用来保存数据,类似于数组,但是和数组的区别是元素不能重复。
- 创建Set我们需要通过Set构造函数(暂时没有字面量创建的方式):
```js const set = new Set() set.add(10) set.add(20) set.add(40) set.add(333) // console.log(set) //Set { 10, 20, 40, 333 }
set.add(10) console.log(set) // Set { 10, 20, 40, 333 }
// 2.添加对象时特别注意: set.add({}) set.add({}) console.log(set) // Set { 10, 20, 40, 333, {}, {} } + 我们可以发现Set中存放的元素是不会重复的,那么Set有一个非常常用的功能就是给数组去重。
js // 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)// [ 33, 10, 26, 30 ] ```
12.Set的常见方法
- Set常见的属性:
- size:返回Set中元素的个数;
- Set常用的方法:
- add(value):添加某个元素,返回Set对象本身;
- delete(value):从set中删除和这个值相等的元素,返回boolean类型;
- has(value):判断set中是否存在某个元素,返回boolean类型;
- clear():清空set中所有的元素,没有返回值;
- forEach(callback, [, thisArg]):通过forEach遍历set;
- 另外Set是支持for of的遍历的。
```js / 4.size属性 console.log(arrSet.size) // 4
// 5.Set的方法 // add arrSet.add(100) console.log(arrSet)
// delete arrSet.delete(33) console.log(arrSet)
// has console.log(arrSet.has(100)) //true
// clear // arrSet.clear() console.log(arrSet) //Set { 10, 26, 30, 100 }
// 6.对Set进行遍历 arrSet.forEach(item => { console.log(item) // 10 26 30 100
})
for (const item of arrSet) { console.log(item) // 10 26 30 100 } ```
13.WeakSet使用
- 和Set类似的另外一个数据结构称之为WeakSet,也是内部元素不能重复的数据结构。
那么和Set有什么区别呢? + 区别一:WeakSet中只能存放对象类型,不能存放基本数据类型; ```js const weakSet = new WeakSet()
// TypeError: Invalid value used in weak set // weakSet.add(10)
+ 区别二:WeakSet对元素的引用是弱引用,如果没有其他引用对某个对象进行引用,那么GC可以对该对象进行回收; + add(value):添加某个元素,返回WeakSet对象本身; + delete(value):从WeakSet中删除和这个值相等的元素,返回boolean类型; + has(value):判断WeakSet中是否存在某个元素,返回boolean类型;
js let obj = { name: "mint" }// weakSet.add(obj)
const set = new Set() // 建立的是强引用 set.add(obj)
// 建立的是弱引用 weakSet.add(obj) ```
14.WeakSet的应用
注意:WeakSet不能遍历
- 因为WeakSet只是对对象的弱引用,如果我们遍历获取到其中的元素,那么有可能造成对象不能正常的销毁。
- 所以存储到WeakSet中的对象是没办法获取的;
那么这个东西有什么用呢?
事实上这个问题并不好回答,我们来使用一个Stack Overflow上的答案; ```js const personSet = new WeakSet() // const personSet = new Set() 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: 'mint'}) ```
15.Map的基本使用
- 另外一个新增的数据结构是Map,用于存储映射关系。
- 但是我们可能会想,在之前我们可以使用对象来存储映射关系,他们有什么区别呢?
- 事实上我们对象存储映射关系只能用字符串(ES6新增了Symbol)作为属性名(key);
- 某些情况下我们可能希望通过其他类型作为key,比如对象,这个时候会自动将对象转成字符串来作为key;
- 那么我们就可以使用Map: ```js // 1.JavaScript中对象中是不能使用对象来作为key的 const obj1 = {name: 'mint'} const obj2 = {name: 'pika'}
// const info = { // [obj1]: 'aaa', // [obj2]: 'bbb' // } // // console.log(info)// { '[object Object]': 'bbb' }
// 2.Map就是允许我们对象类型来作为key的 // 构造函数 const map = new Map() map.set(obj1, 'aaa') map.set(obj2, 'bbb') map.set(1, 'ccc') console.log(map) /* * Map { { name: 'mint' } => 'aaa', { name: 'pika' } => 'bbb', 1 => 'ccc' } * */
const map2 = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]]) console.log(map2) ```
16.Map的常用方法
- Map常见的属性:
- size:返回Map中元素的个数;
- Map常见的方法:
- set(key, value):在Map中添加key、value,并且返回整个Map对象;
- get(key):根据key获取Map中的value;
- has(key):判断是否包括某一个key,返回Boolean类型;
- delete(key):根据key删除一个键值对,返回Boolean类型;
- clear():清空所有的元素;
- forEach(callback, [, thisArg]):通过forEach遍历Map;
- Map也可以通过for of进行遍历。 ```js // 3.常见的属性和方法 console.log(map2.size);
// get(key) console.log(map2.get('mint'));
// has(key) console.log(map2.has("mint"))
// delete(key) map2.delete("mint") 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) } ```
17.WeakMap的使用
- 和Map类型的另外一个数据结构称之为WeakMap,也是以键值对的形式存在的。
那么和Map有什么区别呢?
- 区别一:WeakMap的key只能使用对象,不接受其他的类型作为key;
- 区别二:WeakMap的key对对象想的引用是弱引用,如果没有其他引用引用这个对象,那么GC可以回收该对象;
js const weakMap = new WeakMap() // Invalid·value ·used as weak map key weakMap.set(1, "abc ") // Invalid ·value used as weak map key weakMap.set( "aaa" , "cba")
```js const obj = {name: "obj1"} // 1.WeakMap和Map的区别二: const map = new Map() map.set(obj, "aaa") console.log(map); //Map { { name: 'obj1' } => 'aaa' }
const weakMap = new WeakMap() weakMap.set(obj, "aaa") console.log(weakMap) //WeakMap { }
// 2.区别一: 不能使用基本数据类型 // weakMap.set(1, "ccc") ```
WeakMap常见的方法有四个: + set(key, value):在Map中添加key、value,并且返回整个Map对象; + get(key):根据key获取Map中的value; + has(key):判断是否包括某一个key,返回Boolean类型; + delete(key):根据key删除一个键值对,返回Boolean类型; ```js // get方法 console.log(weakMap.get(obj))// aaa
// has方法 console.log(weakMap.has(obj)) // ture
// delete方法 console.log(weakMap.delete(obj)) // true // WeakMap { } console.log(weakMap) // WeakMap { } ```
18.WeakMap的应用
注意:WeakMap也是不能遍历的
- 因为没有forEach方法,也不支持通过for of的方式进行遍历;
- 那么我们的WeakMap有什么作用呢?
```js // 应用场景(vue3响应式原理) const obj1 = { name: 'mint', 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: 'pika', 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,obj2NameFn2]) obj1Map.set('age',[obj1AgeFn1,obj1AgeFn2]) weakMap.set(obj1, obj1Map)
// 2.2.对obj2收集的数据结构 const obj2Map = new Map() obj2Mpa.set('name', [obj2NameFn1,obj2NameFn2]) weakMap.set(obj2, obj2Map)
// 3.如果obj1.name发生了改变 // Proxy/Object.defineProperty obj1.name = 'soft' const targetMap = weakMap.get(obj1) const fns = targetMap.get('name') fns.forEach(item => item()) ```