JavaScript中常用的简洁高级技巧总结(2)

function deepClone(obj) { var newObj = obj instanceof Array ? [] : {}; for (let i in obj) { newObj[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i] } return newObj; } var obj = { number: 1, string: 'abc', bool: true, undefined: undefined, null: null, symbol: Symbol('s'), arr: [1, 2, 3], date: new Date(), userInfo: { name: 'Better', position: 'front-end engineer', skill: ['React', 'Vue', 'Angular', 'Nodejs', 'mini programs'] }, func: function () { console.log('hello better'); } } console.log(deepClone(obj))

从打印的结果来看,这种实现方式还存在很多问题:这种方式只能实现特定的object的深度复制(比如对象、数组和函数),不能实现null以及包装对象Number,String ,Boolean,以及Date对象,RegExp对象的复制。

3.2 对象遍历方式

3.2.1 for-in

function A() { this.a = 1 this.b = 1 } A.prototype = { c: 1, d: 2 } var a = new A() for(var i in a) { console.log(i) }

由上打印结果可知,for-in 会遍历对象属性,包括原型链中的属性

3.2.2 Object.entries()

function A() { this.a = 1 this.b = 1 } A.prototype = { c: 1, d: 2 } var a = new A() var et = Object.entries(a) console.log(et)

由上结果可知,entries 返回一个给定对象自身可枚举属性的键值对数组

3.2.3 Object.keys()、 Object.values()

function A() { this.a = 1 this.b = 1 } A.prototype = { c: 1, d: 2 } var a = new A() var keys = Object.keys(a) var values = Object.values(a) console.log(keys, values)

由上结果可知,keys, values 返回一个给定对象自身可枚举属性数组,自身可枚举属性值的数组

四、数组常用操作

4.1 数组去重

4.1.1 Set 去重

var arr = [1,2,1,1,22,4,5,6]; arr1 = [...new Set(arr)];

4.1.2 结合使用数组filter方法和indexOf()方法

var arr = [1, 2, 3, 2, 6, '2', 3, 1]; function uniqueArr (arr) { return arr.filter(function (ele, index, array) { // 利用数组indexOf()方法,返回找到的第一个值的索引 // 如果数组元素的索引值与indexOf方法查找返回的值不相等,则说明该值重复了,直接过滤掉 return array.indexOf(ele) === index; }) }

4.2 多维数组一行代码实现一维转换

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; var resultArr = arr.toString().split(',').map(Number); console.log(resultArr); // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]

4.3 一行代码实现获取一个网页使用了多少种标签

[...new Set([...document.querySelectorAll('*')].map(node => node.tagName))].length;

4.4 如何实现a == 1 && a == 2 && a == 3

4.4.1  改写数组的toString方法

var a = [1, 2, 3]; // a.join = a.shift; // a.valueOf = a.shift; a.toString = a.shift; console.log(a == 1 && a == 2 && a == 3); // true

原理:当复杂类型数据与基本类型数据作比较时会发生隐性转换,会调用toString()或者valueOf()方法

4.4.2  改写对象的toString方法

var a = { value: 1, toString: function () { return a.value++; } } console.log(a == 1 && a == 2 && a == 3); // true

4.5 统计字符串中相同字符出现的次数

var str = 'aaabbbccc66aabbc6'; var strInfo = str.split('').reduce((p, c) => (p[c]++ || (p[c] = 1), p), {}); console.log(strInfo); // {6: 3, a: 5, b: 5, c: 4}

4.6 将类数组对象转成数组

4.6.1 使用Array.prototype.slice

var likeArrObj = { 0: 1, 1: 2, 2: 3, length: 3 } var arr1 = Array.prototype.slice.call(likeArrObj); // 或者使用[].slice.call(likeArrObj); console.log(arr1); // [1, 2, 3]

4.6.2 使用Array.from

var likeArrObj = { 0: 1, 1: 2, 2: 3, length: 3 } var arr = Array.from(likeArrObj); console.log(arr); // [1, 2, 3]

4.6.3 使用Object.values (此处省略)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/4aad2780ac832be503116ded55d53bac.html