Js常用

数组转化为对象，一般首先想到的就是这种方法：

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"}

比较简单快速的方法：

const arr = [1,2,3];
const obj = {...arr};
console.log(obj);  // {0: 1, 1: 2, 2: 3}

[1, [2, 3]].flat(2) // [1,2,3]

[1, [2, 3, [4, 5]].flat(3) // [1,2,3,4,5]

[1, [2, 3, [4, [5]]]].toString().split(',') 

[1, [2, 3, [4, 5 [...]].flat(Infinity) // [1,2,3,4...n]

es6提供了一个新方法 flat(depth)，参数depth，代表展开嵌套数组的深度，默认是1

Math.max(...[1,2,3,4]) //4
Math.max.apply(this,[1,2,3,4]) //4

Math.max()是 Math对象内置的方法，参数是字符串

[1, 2, 3].includes(4) //false

[1, 2, 3].indexOf(4) //-1 如果存在换回索引

[1, 2, 3].find((item)=>item===3)) //3 如果数组中无值返回undefined

[1, 2, 3].findIndex((item)=>item===3)) //2 如果数组中无值返回-1

includes()、 find()、 findIndex()是ES6的api。

实现数组的拷贝有很多骚技巧
Array.slice

const arr = [1, 2, 3, 4, 5];
const copyArr = arr.slice();

展开操作符

const arr = [1, 2, 3, 4, 5];
const copyArr = [...arr];

Array.concat

const arr = [1, 2, 3, 4, 5];
const copyArr = arr.concat();

使用 Array 构造函数和展开操作符

const arr = [1, 2, 3, 4, 5];
const copyArr = new Array(...arr);

如果有修改数组长度为某固定值的需求

let array = [0, 1, 2, 3, 4, 5];
array.length = 3;
console.log(array); // [0, 1, 2]

[1, 2, 3].fill(false) // [false,false,false]

fill是ES6的方法

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

some是ES5的api，有一项满足返回 true

方法一：
var arr = [5, 16, 7, 4, 15, 16, 44, 12, 5, 7]
var _arr = Array.from(new Set(arr))
console.log(_arr) // [5, 16, 7, 4, 15, 44, 12]

方法二：
var arr = [5, 16, 7, 4, 15, 16, 44, 12, 5, 7]
var temp = []
for (var i = 0; i < arr.length; i++) {
   if (temp.indexOf(arr[i]) == -1) {
       temp.push(arr[i])
   }
}
console.log(temp) //  [5, 16, 7, 4, 15, 44, 12]

方法三：
var arr = [1, 1, 3, 3, 5, 5, 4, 4, 6, 6];
arr = arr.filter((item, index) => {
     return arr.indexOf(item) == index;
});
console.log(arr); // [1, 3, 5, 4, 6]

我们可以通过&&或||来简化我们的代码，比如：

if (isOnline) {
  postMessage();
}
// 使用&&
isOnline && postMessage();

// 使用||
let name = null || "森林";

const compact = arr => arr.filter(Boolean);
compact([0,  1,  false,  2,  '',  3,  'a',  'e'  *  23,  NaN,  's',  34]) ;
// [ 1, 2, 3, 'a', 's', 34 ]

padStart 为ES6 新增api

const addZero1 =  (num, len =  2)  =>  (`0${num}`).slice(-len);

const addZero2 =  (num, len =  2)  =>  (`${num}`).padStart( len ,  '0');

addZero1(3);  // 03

addZero2(32,4);  // 0032

var cars =  ['BMW','Benz',  'Benz',  'Tesla',  'BMW',  'Toyota'];
var carsObj = cars.reduce(function  (obj, name)  {
    obj[name]  = obj[name]  ?  ++obj[name]  :  1;
    return obj;
},  {});
carsObj;  // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

原作地址【掘金】前端森林
开发中常用的一些js技巧，灵活的运用，会增强你解决问题的能力，也会对你的代码简洁性有很大的改观。