首页 > temp > JavaScript教程 >
-
引用、浅拷贝及深拷贝 到 Map、Set（含对象assign、freeze方法、WeakMap、WeakSet及数
从引用聊到深浅拷贝，从深拷贝过渡到ES6新数据结构Map及Set，再到另一个map即
Array.map()和与其类似的Array.flatMap()，中间会有其他相关话题，例如Object.freeze()与Object.assign()等等。
前言
一边复习一边学习，分清引用与深浅拷贝的区别，并实现浅拷贝与深拷贝，之后通过对深拷贝的了解，拓展到ES6新数据结构Map及Set的介绍，再引入对另一个数组的map方法的使用与类似数组遍历方法的使用。通过一条隐式链将一长串知识点串联介绍，可能会有点杂，但也会有对各知识点不同之处有明显区分，达到更好的记忆与理解。
引用、浅拷贝及深拷贝
-
引用
通常在介绍深拷贝之前，作为引子我们会看见类似以下例子：
var testArr = [0, [1, 2]] var secArr = testArr secArr[0] = 'x' console.log(testArr) // [ 'x', [ 1, 2 ] ] 复制代码 -
浅拷贝
对于浅拷贝，其与引用的区别，我们一边实现浅拷贝，之后进行对比再解释，实现如下：
var testObj = { 'name': 'currName', 'nums': [1, [2, 3]], 'objs': { 'innerObj': 'content' } } var secObj = Object.assign({}, testObj) secObj.name = 'changedName' secObj.nums[0] = '一' secObj.nums[1] = ['二', '三'] secObj.objs['innerObj'] = 'changedContent' console.log(testObj) // { name: 'currName', // nums: [ '一', [ '二', '三' ] ], // objs: { innerObj: 'changedContent' } } console.log(secObj) // { name: 'changedName', // nums: [ '一', [ '二', '三' ] ], // objs: { innerObj: 'changedContent' } } 复制代码 -
Object.freeze()
freeze方法其效果在有一定程度与浅拷贝相同，但效果上还要比拷贝多上一层，即freeze冻结，但因为该方法自身 内部属性，该方法的名称又可以称为“浅冻结”，对于第一层数据，如浅拷贝一般，不可被新对象改变，但被freeze方法冻结过的对象，其自身也无法添加、删除或修改其第一层数据，但因为“浅冻结”这名称中浅的这一明显属性，freeze方法对于内部如果存在更深层的数据，是可以被自身修改，且也会被“=”号所引用给新的变量。
简单使用如下：
function deepCopy(content) { var retObj = {} for (const key in content) { if (content.hasOwnProperty(key)) { retObj[key] = typeof content[key] === 'object' ? deepCopy(content[key]) : content[key]; } } return retObj } var testObj = { 'name': 'currName', 'nums': [1, [2, 3]], 'objs': { 'innerObj': 'content' } } var secObj = deepCopy(testObj) secObj.name = 'changedName' secObj.nums[0] = '一' secObj.nums[1] = ['二', '三'] secObj.objs['innerObj'] = 'changedContent' secObj.age = 18 console.log(testObj) // { name: 'currName', // nums: [ 1, [ 2, 3 ] ], // objs: { innerObj: 'content' } } console.log(secObj) // { name: 'changedName', // nums: { '0': '一', '1': [ '二', '三' ] }, // objs: { innerObj: 'changedContent' }, // age: 18 } 复制代码 -
Version 2: 完善数组与对象组合嵌套的情况
此时对于内部存在的数组来说，会被转化为对象，键为数组的下标，值为数组的值，被存储在新的对象中，因此有了我们完善的第二版。
function objToMap (object) { let map = new Map() for (const key in object) { if (object.hasOwnProperty(key)) { map.set(key, object[key]) } } return map } var testObj = { 'name': 'currName', 'nums': [1, [2, 3]], 'objs': { 'innerObj': 'content' } } let map = objToMap(testObj) map.set('name', 'changedName') console.log(testObj) // { name: 'currName', // nums: [ 1, [ 2, 3 ] ], // objs: { innerObj: 'content' } } console.log(map) // Map { // 'name' => 'changedName', // 'nums' => [ 1, [ 2, 3 ] ], // 'objs' => { innerObj: 'content' } } 复制代码 -
Map自身方法介绍
含增删改查方法：set、get、has、delete；
遍历方法：keys、values、entries、forEach；
其他方法：size、clear。
需要注意的是forEach方法还可以接受第二个参数，改变第一个参数即回调函数的内部this指向。
let n = 100 let map = new Map() function upStairs (n) { if (n === 1) return 1 if (n === 2) return 2 if (map.has(n)) return map.get(n) let ret = upStairs(n - 1) + upStairs(n - 2) map.set(n, ret) return ret } console.log(upStairs(n)) // 573147844013817200000 复制代码
-
WeakMap
本节介绍在ES6中，与Map相关且一同发布的WeakMap数据结构。
-
WeakMap与Map区别
WeakMap与Map主要有下图三个区别：
区别 Map WeakMap “键”类型： 任何类型 Object对象 自身方法： 基本方法：set、get、has、delete；
遍历方法：keys、values、entries、forEach；
其他方法：size、clear。基本方法：set、get、has、delete。 键引用类型： 强引用 弱引用 此处我们对强弱引用进行简单介绍：弱引用在回收机制上比强引用好，在“适当”的情况将会被回收，减少内存资源浪费，但由于不是强引用，WeakMap不能进行遍历与size方法取得内部值数量。
-
WeakMap自身方法
含增删改查方法：set、get、has、delete。
<!--示例一--> let element = document.getElementById('box') let wMap = new WeakMap() wMap.set(element, {clickCount: 0}) element.addEventListener('click', () => { let countObj = wMap.get(element) countObj.clickCount++ console.log(wMap.get(element).clickCount) // click -> n+=1 }) <!--示例二--> const _age = new WeakMap() const _fn = new WeakMap() class Girl { constructor (age, fn) { _age.set(this, age) _fn.set(this, fn) } changeAge () { let age = _age.get(this) age = age >= 18 ? 18 : null _age.set(this, age) _age.get(this) === 18 ? _fn.get(this)() : console.log('error') } } const girl = new Girl(25, () => console.log('forever 18 !')) girl.changeAge() // forever 18 ! 复制代码
-
-
Set
介绍完ES6新增的Map与WeakMap数据结构，我们继续介绍一同新增的Set数据结构。
Set之于Array，其实有点像Map之于Object，Set是在数组的数据结构基础上做了一些改变，新出的一种类似于数组的数据结构，Set的成员的值唯一，不存在重复的值。以下将对Set数据结构作一些简单的介绍。
-
Set与Array之间的相互转换
Set可以将具有Iterable接口的其他数据结构作为参数用于初始化，此处不止有数组，但仅以数组作为例子，单独讲述一下。
let arr = [1, 2, 3, 3] let set = new Set(arr) // 增删改查 set.add(4) console.log(set) // Set { 1, 2, 3, 4 } set.delete(3) console.log(set) // Set { 1, 2, 4 } console.log(set.has(4)) // true // 遍历方法 因为在Set结构中没有键名只有健值，所以keys方法和values方法完全一致 console.log(set.keys()) // [Set Iterator] { 1, 2, 4 } console.log(set.values()) // [Set Iterator] { 1, 2, 4 } for (const item of set.entries()) { console.log(item) //[ 1, 1 ] // [ 2, 2 ] // [ 4, 4 ] } const obj = { name: 'objName' } set.forEach(function (key, value) { console.log(key, value, this.name) // 1 1 'objName' // 2 2 'objName' // 4 4 'objName' }, obj) // 其他方法 console.log(set.size) // 3 set.clear() console.log(set) // Set {} 复制代码 -
Set应用场景
因为扩展运算符...对Set作用，再通过Array遍历方法，很容易求得并集、交集及差集，也可以通过间接使用Array方法，构造新的数据赋给Set结构变量。
let obj1 = {'name': 1} let obj2 = {'name': 2} let wSet = new WeakSet() wSet.add(obj1).add(obj2) console.log(wSet.has(obj2)) // true wSet.delete(obj2) console.log(wSet.has(obj2)) // false 复制代码 -
WeakSet应用场景
对于WeakSet的应用场景，其与WeakMap类似，因为弱引用的优良回收机制，WeakSet依旧可以存放DOM节点，避免删除这些节点后引发的内存泄漏的情况；也可以在构造函数和类中存放实例this，同样避免删除实例的时候产生的内存泄漏的情况。
// flat const testArr = [1, 2, [3, [4]]] const flatArr = testArr.flat() console.log(flatArr) // [1, 2, 3, Array(1)] -> 0: 1 // 1: 2 // 2: 3 // 3: [4] const arr = [1, 2, 3] // map const mapArr = arr.map(x => x * 2) console.log(mapArr) // [2, 4, 6] arr.map((item, index, arr) => { console.log(item, index, arr) // 1 0 [1, 2, 3] // 2 1 [1, 2, 3] // 3 2 [1, 2, 3] }) // flatMap // arr.flatMap(x => [x * 2]) === arr.map(x => x * 2) const flatMapArr = arr.flatMap(x => [x * 2]) console.log(flatMapArr) // [2, 4, 6] 复制代码 -
Array.reduce()
Array.reduce() —— reduce方法与map最大的不同是不返回新的数组，其返回的是一个计算值，参数为回调函数与回调函数参数pre初始值，回调函数中参数为pre与next，当在默认情况时，pre为数组中第一个值，next为数组中第二个值，回调函数返回值可以滚雪球般更改pre值；而当index设置数值后，pre初始值为参数值，next从数组中第一个值一直取到数组最后一位。
例子如下：
const arr = [1, 2, 3, 4, 5] const obj = {num: 3} // filter const filterArr = arr.filter(function (value, index, arr) { console.log(index, arr) // 0 [1, 2, 3, 4, 5] // 1 [1, 2, 3, 4, 5] // 2 [1, 2, 3, 4, 5] // 3 [1, 2, 3, 4, 5] // 4 [1, 2, 3, 4, 5] return value > this.num }, obj) console.log(filterArr) // [4, 5] // find const findResult = arr.find(function (value, index, arr) { console.log(index, arr) // 0 [1, 2, 3, 4, 5] // 1 [1, 2, 3, 4, 5] // 2 [1, 2, 3, 4, 5] // 3 [1, 2, 3, 4, 5] return value > this.num }, obj) console.log(findResult) // 4 // findIndex const findIndexResult = arr.findIndex(function (value) { return value > this.num }, obj) console.log(findIndexResult) // 3 复制代码 -
Array.includes()
Array.includes() —— 返回值为Boolean值，其可以简单快捷的判断数组中是否含有某个值。其第一个参数为需要查找的值，第二个参数为开始遍历的位置，遍历位置起始点默认为0。相比于indexOf、filter、find及findIndex方法，includes方法更简单快捷返回Boolean值进行判断，其二对于数组中NaN值，includes可以识别到NaN。
// every const arr = [1, 2, 3, 4, 5] const obj = { num: 3 } const everyResult = arr.every(function(value, index, arr) { console.log(index, arr) // 0 [1, 2, 3, 4, 5] // 1 [1, 2, 3, 4, 5] // 2 [1, 2, 3, 4, 5] return value < this.num }, obj) console.log(everyResult) // false // some const someResult = arr.some(function(value, index, arr) { console.log(index, arr) // 0 [1, 2, 3, 4, 5] // 1 [1, 2, 3, 4, 5] // 2 [1, 2, 3, 4, 5] // 3 [1, 2, 3, 4, 5] return value > this.num }, obj) console.log(someResult) // true
-
