22个常用的的JavaScript开发技巧分享

骑猪看日落 2024-04-03 11:39 102阅读 0赞

JS是前端的核心，但有些使用技巧你还不一定知道。本文梳理了JS的41个技巧，帮助大家提高JS的使用技巧。

**Array**

**数组交集**

普通数组

*  
 *  
 *  
 *

const arr1 = [1, 2, 3, 4, 5 , 8 ,9],arr2 = [5, 6, 7, 8, 9];const intersection = arr1.filter(function (val) { return arr2.indexOf(val) > -1 })console.log(intersection) //[5, 8, 9]

数组对象

数组对象目前仅针对value值为简单的Number，String，Boolan数据类型

*  
 *  
 *  
 *  
 *  
 *

const arr1 = [{ name: "name1", id: 1 }, { name: "name2", id: 2 }, { name: "name3", id: 3 }, { name: "name5", id: 5 }];const arr2 = [{ name: "name1", id: 1 }, { name: "name2", id: 2 }, { name: "name3", id: 3 }, { name: "name4", id: 4 }, { name: "name5", id: 5 }];const result = arr2.filter(function (v) {
       return arr1.some(n => JSON.stringify(n) === JSON.stringify(v))})console.log(result); // [{ name: "name1", id: 1 },{ name: "name2", id: 2 },{ name: "name3", id: 3 },{ name: "name5", id: 5 }]

**数组并集**

普通数组

*  
 *  
 *  
 *

const arr1 = [1, 2, 3, 4, 5, 8, 9]const arr2 = [5, 6, 7, 8, 9];const result = arr1.concat(arr2.filter(v => !arr1.includes(v)))console.log(result) //[1, 2, 3, 4,5, 8, 9]

数组对象

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *

**数组差集**

数组arr1相对于arr2所没有的

普通数组

*  
 *  
 *  
 *

const arr1 = [1, 2, 3, 4, 5, 8, 9]const arr2 = [5, 6, 7, 8, 9];const diff = arr1.filter(item => !new Set(arr2).has(item))console.log(diff) //[ 1, 2, 3, 4 ]

数组对象

*  
 *  
 *  
 *  
 *  
 *  
 *

// 对象数组let arr1 = [{ name: "name1", id: 1 }, { name: "name2", id: 2 }, { name: "name3", id: 3 }];let arr2 = [{ name: "name1", id: 1 }, { name: "name4", id: 4 }, { name: "name5", id: 5 }];let result = arr1.filter(function (v) {
         return arr2.every(n => JSON.stringify(n) !== JSON.stringify(v))})console.log(result); // [ { name: "name2", id: 2 }, { name: "name3", id: 3 } ]

**数组补集**

两个数组各自没有的集合

普通数组

*  
 *  
 *  
 *

const arr1 = [1, 2, 3, 4, 5, 8, 9]const arr2 = [5, 6, 7, 8, 9];const difference = Array.from(new Set(arr1.concat(arr2).filter(v => !new Set(arr1).has(v) || !new Set(arr2).has(v)))) console.log(difference) //[ 1, 2, 3, 4, 6, 7 ]

数组对象

*  
 *  
 *  
 *  
 *  
 *  
 *

总结一下，差集就是数组arr1相对于arr2所没有的集合，补集是两个数组各自没有的集合

**数组去重**

普通数组

*  
 *

console.log(Array.from(new Set([1, 2, 3, 3, 4, 4]))) //[1,2,3,4]console.log([...new Set([1, 2, 3, 3, 4, 4])]) //[1,2,3,4]

数组对象

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *

const arr = [{ name: "name1", id: 1 }, { name: "name2", id: 2 }, { name: "name3", id: 3 }, { name: "name1", id: 1 }, { name: "name4", id: 4 }, { name: "name5", id: 5 }];const obj = [];const result = arr.reduce(function (prev, cur, index, arr) {
         obj[cur.id] ? "" : obj[cur.id] = true && prev.push(cur);  return prev;}, []);console.log(result) //[{ name: "name1", id: 1 },{ name: "name2", id: 2 },{ name: "name3", id: 3 },{ name: "name4", id: 4 },{ name: "name5", id: 5 }]

**数组排序**

普通数组

*  
 *

console.log([1, 2, 3, 4].sort((a, b) => a - b)); // [1, 2,3,4] 升序console.log([1, 2, 3, 4].sort((a, b) => b - a)); // [4,3,2,1] 降序

数组对象

*  
 *  
 *  
 *

const arr1 = [{ name: "Rom", age: 12 }, { name: "Bob", age: 22 }].sort((a, b) => { return a.age - b.age })//升序const arr2 = [{ name: "Rom", age: 12 }, { name: "Bob", age: 22 }].sort((a, b) => { return -a.age + b.age })//降序console.log(arr2) // [{ name: "Bob", age:22 }, { name: "Rom", age: 12 }]console.log(arr1) // [ { name: "Rom", age: 12 }, { name: "Bob", age: 22 } ]

两个种类型数组都可以使用sort排序，sort是浏览器内置方法；

默认是升序排序，默认返回一个函数，有两个参数：

(a, b) => a - b 是升序；(a, b) => b - a 是降序。

**最大值**

普通数组

*  
 *  
 *  
 *  
 *

Math.max(...[1, 2, 3, 4]) //4Math.max.apply(this, [1, 2, 3, 4]) //4[1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => {
          return Math.max(prev, cur);}, 0) //4

取数组对象中id的最大值

*  
 *  
 *  
 *  
 *

const arr = [{ id: 1, name: "jack" },{ id: 2, name: "may" },{ id: 3, name: "shawn" },{ id: 4, name: "tony" }]const arr1 = Math.max.apply(Math, arr.map(item => { return item.id }))const arr2 = arr.sort((a, b) => { return b.id - a.id })[0].idconsole.log(arr1) // 4console.log(arr2) // 4

**数组求和**

普通数组

*  
 *  
 *

[1, 2, 3, 4].reduce(function (prev, cur) {
         return prev + cur;}, 0) //10

数组对象

*  
 *  
 *  
 *

const sum = [{age:1},{age:2}].reduce(function (prev, cur) {
         return prev + cur.age;}, 0) //3console.log(sum)

**数组合并**

普通数组

*  
 *  
 *  
 *

const arr1 =[1, 2, 3, 4].concat([5, 6]) //[1,2,3,4,5,6]const arr2 =[...[1, 2, 3, 4],...[4, 5]] //[1,2,3,4,5,6]const arrA = [1, 2], arrB = [3, 4]const arr3 =Array.prototype.push.apply(arrA, arrB)//arrA值为[1,2,3,4]

数组对象

*  
 *  
 *  
 *

const arr4 = [{ age: 1 }].concat([{ age: 2 }])const arr5 = [...[{ age: 1 }],...[{ age: 2 }]]console.log(arr4) //[ { age: 1 }, { age: 2 } ]console.log(arr5) // [ { age: 1 }, { age: 2 } ]

**数组是否包含值**

普通数组

*  
 *  
 *  
 *

console.log([1, 2, 3].includes(4)) //falseconsole.log([1, 2, 3].indexOf(4)) //-1 如果存在换回索引console.log([1, 2, 3].find((item) => item === 3)) //3 如果数组中无值返回undefinedconsole.log([1, 2, 3].findIndex((item) => item === 3)) //2 如果数组中无值返回-1

数组对象

*  
 *

const flag = [{age:1},{age:2}].some(v=>JSON.stringify(v)===JSON.stringify({age:2}))console.log(flag)

**数组每一项都满足**

普通数组

[1, 2, 3].every(item => { return item > 2 })

数组对象

*  
 *

const arr = [{ age: 3 }, { age: 4 }, { age: 5 }]arr.every(item => { return item.age > 2 }) // true

**数组有一项满足**

普通数组

[1, 2, 3].some(item => { return item > 2 })

数组对象

*  
 *

const arr = [{ age: 3 }, { age: 4 }, { age: 5 }]arr.some(item => { return item.age < 4 }) // true

**版本号排序**

方法一

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *

function sortNumber(a, b) {
       return a - b}const b = [1,2,3,7,5,6]const a = ["1.5", "1.5", "1.40", "1.25", "1.1000", "1.1"];console.log(a.sort(sortNumber)); // [ 1, 2, 3, 5, 6, 7 ]console.log(b.sort(sortNumber)); //[ "1.1000", "1.1", "1.25", "1.40","1.5", "1.5" ]

可见sort排序对整数可以，类似版本号这个格式就不适用了，因为sort函数在比较字符串的时候，是比较字符串的Unicode进行排序的。

方法二

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *

//假定字符串的每节数都在5位以下//去除数组空值||空格if (!Array.prototype.trim) {
         Array.prototype.trim = function () {
           let arr = []; this.forEach(function (e) {
             if (e.match(/\S+/)) arr.push(e);    })    return arr;  }}//提取数字部分function toNum(a) {
         let d = a.toString();  let c = d.split(/\D/).trim();  let num_place = ["", "0", "00", "000", "0000"], r = num_place.reverse();  for (let i = 0; i < c.length; i++) {
           let len = c[i].length;    c[i] = r[len] + c[i];  }  let res = c.join("");  return res;}//提取字符function toChar(a) {
         let d = a.toString();  let c = d.split(/\.|\d/).join("");  return c;}function sortVersions(a, b) {
         let _a1 = toNum(a), _b1 = toNum(b);  if (_a1 !== _b1) return _a1 - _b1;  else {
           _a2 = toChar(a).charCodeAt(0).toString(16);    _b2 = toChar(b).charCodeAt(0).toString(16);    return _a2 - _b2;  }}let arr1 = ["10", "5", "40", "25", "1000", "1"];let arr2 = ["1.10", "1.5", "1.40", "1.25", "1.1000", "1.1"];let arr3 = ["1.10c", "1.10b", "1.10C", "1.25", "1.1000", "1.10A"];console.log(arr1.sort(sortVersions)) //[ "1", "5", "10", "25", "40", "1000" ]console.log(arr2.sort(sortVersions)) //[ "1.1", "1.5", "1.10", "1.25", "1.40", "1.1000" ]console.log(arr3.sort(sortVersions)) // [ "1.10A", "1.10C", "1.10b", "1.10c", "1.25", "1.1000"

可以看出这个函数均兼容整数，非整数，字母；

字母排序是根据Unicode排序的，所以1.10b在1.10C的后面

**对象转数组**

将数组的key和value转化成数组

*  
 *  
 *  
 *

Object.keys({ name: "张三", age: 14 }) //["name","age"]Object.values({ name: "张三", age: 14 }) //["张三",14]Object.entries({ name: "张三", age: 14 }) //[[name,"张三"],[age,14]]Object.fromEntries([name, "张三"], [age, 14]) //ES10的api,Chrome不支持 , firebox输出{name:"张三",age:14}

**数组转对象**

将数组的值转化为对象的value

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *

const arrName = ["张三", "李四", "王五"]const arrAge=["20","30","40"]const arrDec = ["描述1", "描述2", "描述3"]const obj = arrName.map((item,index)=>{
       return { name: item, age: arrAge[index],dec:arrDec[index]}})console.log(obj) // [{ name: "张三", age: "20", dec: "描述1" },{ name: "李四", age: "30", dec: "描述2" },{ name: "王五", age: "40", dec: "描述3" }]

**数组解构**

*  
 *

const arr=[1,2]; //后面一定要加分号，因为不加解释器会认为在读数组[arr[1], arr[0]] = [arr[0], arr[1]]; // [2,1]

**Object**

**对象变量属性**

*  
 *  
 *  
 *  
 *  
 *

const flag = true;const obj = {
           a: 0,    [flag ? "c" : "d"]: 2};// obj => { a: 0, c: 2 }

**对象多余属性删除**

*  
 *  
 *  
 *

const { name, age, ...obj } = { name: "张三", age: 13, dec: "描述1", info: "信息" }console.log(name)  // 张三console.log(age)  // 13console.log(obj)  // {dec: "描述1", info: "信息" }

**对象嵌套属性解构**

*  
 *

const { info:{ dec} } = { name: "张三", age: 13, info:{dec: "描述1", info: "信息" }}console.log(dec) // 描述1

**解构对象属性别名**

*  
 *

const { name:newName } = { name: "张三", age: 13 }console.log(newName)  // 张三

**解构对象属性默认值**

*  
 *

const { dec="这是默认dec值" } = { name: "张三", age: 13 }console.log(dec) //这是默认dec值

**拦截对象**

利用Object.defineProperty拦截对象

无法拦截数组的值

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *

利用proxy拦截对象

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *

defineProterty和proxy的对比：

defineProterty是es5的标准,proxy是es6的标准;

proxy可以监听到数组索引赋值,改变数组长度的变化;

proxy是监听对象,不用深层遍历,defineProterty是监听属性;

利用defineProterty实现双向数据绑定(vue2.x采用的核心)

转自： [https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[https_www.weidianyuedu.com]: https://www.weidianyuedu.com