How to use arrays you may not know in JavaScript

Time:2020-4-6

After the expansion of Es5 and ES6 arrays, there are dozens of array methods. The combination of each group makes the arrays extremely powerful and can realize more complex functions with a small amount of code. Now we summarize some commonly used skills.

The skill of copying array

Tip 1 use array. Concat()
var arr=[1,2,3];
var arr2=arr.concat();
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]
Tip 2 use array. Slice()
var arr=[1,2,3];
var arr2=arr.slice();
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]
Tip 3 use object. Assign()
var arr=[1,2,3];
var arr2=Object.assign([],arr);
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]
Tip 4 use the expand operator
var arr=[1,2,3];
var arr2=[...arr];
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]
Tip 5 using array structure
var arr=[1,2,3];
var [...arr2]=arr;
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]
Tip 6 use array. Filter()
var arr=[1,2,3];
var arr2=arr.filter((item)=>{
  return true;
});
arr2[0]=0;
console.log(arr2);
console.log(arr)
Tip 7 use array. Of () and the expand operator
var arr=[1,2,3];
var arr2=Array.of(...arr)
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]
Tip 8 use array. Map()
var arr=[1,2,3];
var arr2=arr.map(item=>item);
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]
Tip 9 use new array() and the expand operator
var arr=[1,2,3];
var arr2=new Array(...arr);
arr2[0]=0;
console.log(arr2);//[0,2,3]
console.log(arr);//[1,2,3]

Note: the above methods copy arrays as shallow copies. If there are objects in the array elements, modifying the object attributes will still affect the copied arrays, because the copied objects here copy pointers, addresses or the same. For example:

How to use arrays you may not know in JavaScript

Intersection of multiple arrays

var arr1=[1,2,2,3,4];
var arr2=[2,5,6];
var result=arr1.filter((item)=>{ return arr2.includes(item); })
console.log(result);//[2,2]

Array weight removal

var arr=[1,1,2,3,4,4];
console.log([...new Set(arr)]);//[1,2,3,4]

Array to object

var color = ['red','blue'];
var colorObj = {...color};//{0:'red',1:"blue"}

Array summation

var arr=[1,2,3,4,5];
var sum=arr.reduce((accumulator,current)=>{
  return accumulator+current;
})
console.log(sum);//15

Remove virtual value from array

var mixedArr = [0,'blue','',NaN,9,true,undefined,'white',false];
var result=mixedArr.filter(Boolean)
console.log(result);//["blue", 9, true, "white"]

Array merging

var arr1=[1,2];
var arr2=[3,4];
var new_arr=arr1.concat(arr2);
console.log(new_arr);//[1, 2, 3, 4]
var arr1=[1,2];
var arr2=[3,4];
var new_arr=[...arr1,...arr2];
console.log(new_arr);//[1, 2, 3, 4]

Find the maximum value of array

var arr=[1,2,4,5];
var max=Math.max.apply(null,arr);
var min=Math.min.apply(null,arr);
console.log(max,min);//5,1

Find the first unique value in the array

var arr=[2,2,2,3,3,4,5];
function findFirst(arr){
  for(var i=0;i<arr.length;i++){
    if(arr.indexOf(arr[i])===arr.lastIndexOf(arr[i])){
      return arr[i]
    }
 }
}
console.log(findFirst(arr));//4