注册登录

Javascript数组的一些骚操作

如何操作数组在编程语言和脚本语言中是最基础的技能，Javascript也提供了内置的的数组操作函数和方法，今天我们主要介绍前端开发中经常遇到的操作数组的常规方法以及ES6操作数组的神奇方法。

1.数组去重

1）常规方法去重

数组去重就是去掉数组中重复的项，我们使用常规的方法是定义一个新数组，遍历要去重的数组，然后一个个比对，如果数组中的值没有在新数组中出现，就将该值追加到新数组中，反之就不操作，最终得到一个去重后的新数组。

var a = [1,1,2,3,'abc',2,'ab','abc'];
function unique(x) {//去重
    let res = [];
    for (let i = 0; i < x.length; i++) {
        if (res.indexOf(x[i]) == -1) {
            res.push(x[i]);
        }
    }
    return res;
}
console.log(unique(a)); // [1, 2, 3, "abc", "ab"]
知识兔

常规数组去重方法还有很多，可以用到indexOf，sort()，includes，还有递归等等方法去重。

2）ES6去重

利用es6特性去重方法:

let a = [1,1,2,3,'abc',2,'ab','abc'];
let arr = Array.from(new Set(a)); // 利用es6特性去重方法
console.log(arr); // [1, 2, 3, "abc", "ab"]
知识兔

当然，我们还可以利用js扩展运算符的骚操作，代码就是这么少：

let a = [1,1,2,3,'abc',2,'ab','abc'];
let arr = [...new Set(a)];
console.log(arr); // [1, 2, 3, "abc", "ab"]
知识兔

2.数组合并

我们要将两个数组合并成一个数组，也可以看作是拼接成一个数组，有很多种方法可以实现。

1）concat
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
console.log(arr1.concat(arr2)); //[1,2,3,4,5,6]
console.log(arr1); //[1,2,3]
console.log(arr2); //[4,5,6]
知识兔

concat方法连接arr1、arr2两个数组后，arr1、arr2两个数组的数据不变，同时会返回一个新的数组。这样当我们需要进行多次的数组合并时，会造成很大的内存浪费，所以这个方法肯定不是最好的。

2）for循环
for (var i in arr2) {
    arr1.push(arr2[i]);
}
console.log(arr1);//[1,2,3,4,5,6]
知识兔

很好理解，for循环遍历数组arr2，然后把arr2的值一个个追加到arr1中，最终完成数组合并。

3）apply

apply方法有一个特性，那就是func.apply(obj,argv)，argv是一个数组。所以我们可以利用这一特性。

arr1.push.apply(arr1, arr2);
console.log(arr1);//[1,2,3,4,5,6]
知识兔
4）ES6扩展运算符

ES6神奇的3个点点，完美替代concat。

let arr = [...arr1, ...arr2];
console.log(arr); //[1,2,3,4,5,6]
知识兔

3.数组与字符串互转

1）常规方法

使用split()将字符串转换为数组。

var str = 'zhishitu';
var res = str.split(''); //split()中的参数是分隔符，如,|，也可以是为空
console.log(res); //["h", "e", "l", "l", "o", "w", "e", "b", "a"]
知识兔

使用join()将数组转换成字符串。

var arr = ['hello', 'web', 'a'];
var res = arr.join('');
console.log(res); //zhishitu
知识兔
2）ES6写法

ES6将字符串转换为数组：

let str = 'zhishitu';
let arr = [...str]; //等同于Array.from(str)
console.log(arr); //["h", "e", "l", "l", "o", "w", "e", "b", "a"]
知识兔

ES6将数组转换为字符串：

我们先定义一个字符串a，然后把它转化成数组b，这个时候得到的数组并不是我们想要的。

let a = "[1,3,2]"; //字符串
let b = [...a];
console.log(b); //["[", "1", ",", "3", ",", "2", "]"]
知识兔

我们再对数组b进行过滤，最终得到数组c。

let c = b.reduce((arr, v)=>{
          (typeof Number(v)) === 'number' && !isNaN(Number(v)) && arr.push(Number(v))
          return arr
        },[]);
console.log(c) // [1, 3, 2]
知识兔

4.求数组中的最大值和最小值

1）排序法

我们将数组排序，从小到大排序，排序后的数组中第一个和最后一个值就是我们要的最小值和最大值。

var arr = [1,2,36,42,15];
arr.sort(function (a, b) {
    return a-b;
}); //[1, 2, 15, 36, 42]
var min = arr[0];  //1
var max = arr[arr.length - 1];  //42
知识兔
2）ES6写法

使用Math对象方法。

let arr = [1,2,36,42,15];
let max = Math.max(...arr);
let min = Math.min(...arr);
console.log(max); //42
console.log(min); //1
知识兔

5.数组降维

有时我们需要将多维数组转换成一维数组，可以使用以下代码：

var b = [1, [2, 3], [4, 5, 6, [7, 8, 9]]];
function jiangwei(x) {//数组降维
let res = [];
for (let i = 0; i < x.length; i++) {
  if (Array.isArray(x[i])) {
    let _r = jiangwei(x[i]);
    for (let j = 0; j < _r.length; j++) {
      res.push(_r[j]);
    }
  } else {
    res.push(x[i]);
  }
}
return res;
}
console.log(jiangwei(b)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
知识兔

使用ES6的reduce()高级技巧将数组降维。

let arr = [1, [2, 3], [4, 5, 6, [7, 8, 9]]];
const newArr = function(arr){
   return arr.reduce((pre, cur)=>pre.concat(Array.isArray(cur) ? newArr(cur) : cur), []);
}
console.log(newArr(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
知识兔

6.其他

其他常用的数组操作方法：

sort() //升序
reverse() //倒序,反转
join() //将数组转为字符串
push() //添加到数组末尾
pop() //末尾移除最后一项
unshift() //添加到原数组开头
shift() //删除数组第一项
slice() //返回起始位置到结束位置之间的项[m,n) 不改变原数组
splice() //传两个参(m,n) 删除从m到n个之间的项 改变原数组； 传三个参（m,n,k）从当前m到n个前插入k
concat() //将参数添加到原数组中，不改变原数组
of() //将不是数组的转化为数组
fill() //用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
知识兔
计算机