JavaScript中的常用操作

在项目开发中整理了常用的一些js技巧，灵活的运用，会增强你解决问题的能力，也会对你的代码简洁性有很大的改观，有利于指导工作的开展
一、数组去重
1、利用set数据结构，set类似数组，成员都是唯一的，没有重复的，本身是构造函数，所以可以new。
const arr=[1,1,1,4,5,5,4,3,9,3];
function unique(arr){
Array.from(new Set(arr)) // 或者 […new Set(arr)]
}
unique(arr)
2、利用indexOf 或者 includes,结合for循环
function unique(arr) {
if (!Array.isArray(arr)) {
console.log(“type error!”);
return;
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array.indexOf(arr[i]) === -1) { // array.includes(arr[i])
array.push(arr[i]);
}
}
return array;
}
3、reduce
const arr=[1,1,1,4,5,5,4,3,9,3];
function unique () {
return arr.reduce((init, current) => {
if(init.length === 0 || init[init.length - 1] !== current){
init.push(current);
}
return init;
}, []);
}
二、数组转为对象
1、var obj = {};
var arr = [“1”,“2”,“3”];
for (var key in arr) {
obj[key] = arr[key];
}
console.log(obj) // {0: 1, 1: 2, 2: 3}
2、利用展开扩展运算符
const arr = [1,2,3]
const obj = {…arr}
console.log(obj) // {0: 1, 1: 2, 2: 3}
三、根据数组中对象的键值去重
1、reduce累加器
let formdata=[{name:‘1’},{name:‘1’},{name:’’},{name:‘3’},]
let hash = {};
formdata= formdata.reduce((preVal, curVal) => {
hash[curVal.name] ? ‘’ : hash[curVal.name] = true && preVal.push(curVal);
return preVal
}, [])
2、for循环
let formdata=[{name:‘1’},{name:‘1’},{name:’’},{name:‘3’},]
let hash = [];
let unique = [];
for (let item of formdata) {
if(!hash.includes(item .name)){
unique .push(item)
}else{
hash .push(item.name)
}
}
四、合并对象
1、扩展运算符
const obj1 = { a: 1 }
const obj2 = { b: 2 }
const combinObj = { …obj1, …obj2 }
console.log(combinObj) // { a: 1, b: 2 }
2、Object.assign
const obj1 = { a: 1 }
const obj2 = { b: 2 }
console.log(Object.assign(obj1, obj2)) // { a: 1, b: 2 }
五、短路运算
我们可以通过&&或||来简化我们的代码，比如：
if (isOnline) {
postMessage();
}
// 使用&&
isOnline && postMessage();
六、数组扁平化
1、es6的flat(n)方法，参数n，代表展开嵌套数组的深度，默认是1
let arr = [1, [2, 3, [4, [5]]]];
arr.flat(3); // [1,2,3,4,5]
2、递归的思想
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (Array.isArray(arr[i])) {
result = result.concat(flatten(arr[i]));
} else {
result.push(arr[i]);
}
}
return result;
}
console.log(flatten(arr)); // [1,2,3,4]
3、es5reduce
var arr = [1, [2, [3, 4]]];

function flatten(arr) {
return arr.reduce(function (prev, next) {
return prev.concat(Array.isArray(next) ? flatten(next) : next);
}, []);
}
console.log(flatten(arr)); // [1,2,3,4]
七、求幂
1、平时我们实现指数运算，用的比较多的应该是Math.pow()，比如求2^10：
console.log(Math.pow(2, 10));
2、在ES7中引入了指数运算符**，**具有与Math.pow()一样的计算结果。
console.log(2 ** 10); // 输出1024
八、获取数组中的最后一项
1、通常，获取数组最后一项，我们用的比较多的是：
let arr = [0, 1, 2, 3, 4, 5];
const last = arr[arr.length - 1];
console.log(last); // 5
2、通过slice操作来实现：
let arr = [0, 1, 2, 3, 4, 5];
const last = arr.slice(-1)[0];
console.log(last); // 5
九、避免多条件并列
在代码中经常会出现判断多个条件满足的时候，执行同一逻辑
if (status === ‘process’ || status === ‘wait’ || status === ‘fail’) {
doSomething()
}
这种写法语义性、可读性都不太好
1、includes
const enum = [‘process’, ‘wait’, ‘fail’]
if (enum.includes(status)) {
doSomething()
}
2、switch case
switch(status) {
case ‘process’:
case ‘wait’:
case ‘fail’:
doSomething()
}