本文主要包含两部分,其中前半部分用于整理 JavaScript 中的数组方法。后半部分整理常使用的数组操作。

JavaScript 中的数组方法

ES5中处理数组常用方法

处理数组时常使用的方法如下:

let colors = ["red", "blue", "green"];

转换方法

栈方法

栈方法把数组当作一个栈

队列方法

重排序方法

操作方法

位置方法

迭代方法

归并方法

jQuery中处理数组时常用的方法

迭代方法

合并方法

ES6 中的数组操作方法

数组的扩展运算符

ES6 中的扩展运算符为三个点(…),作用是将一个数组转为用逗号分隔的参数序列

… 扩展运算符内部使用的是数据结构的 Iterator 接口,只要有 Iterator 接口的对象都可以使用扩展运算符

Array 增加的方法

数组实例的方法

数组实例的遍历方法

以上三种遍历方法需要与 for循环合用

ES6中的数组空位

数组空位表示数组某个位置没有任何值

Vue 中的数组处理方法

Vue 中的数组处理方法如下:

JavaScript 中常用数组操作

去除数组中的第 i 个值

var table = [1,2,3,4,5,6,7,8];
var i = 5;
var tempTable = [];
for (let k = 0; k < table.length; k++) {
    if (k !== i) {
        tempTable.push(table[k]);
    }
}

// 精简方法
var tableX = Array.prototype.concat.apply(table.slice(0,i),table.slice(i+1,table.length-1));

数组的截取操作

JavaScript 中 使用 slice 方法完成数组的截取
一般 slice 参数有两个

arrayObject.slice(start,end)

上述代码表示截取 arrayObject 对象 的 start 到 end-1 个元素 作为一个数组返回

var treearr = [1,2,3,4,5,6,7];
treearr.slice(1,3);
// [2,3]

如果只传入一个参数

let treearr = [1,2,3,4,5,6,7];
let tempNode = treearr[0];
treearr = treearr.slice(1); // 以上两步实现的是队列的 pop 操作
// [2,3,4,5,6,7]

数组模拟队列抛出第一个值

let treearr = [1,2,3,4,5,6,7];
treearr.shift();
// 1
// treearr = [2,3,4,5,6,7];

数组插入第一个值

let treearr = [1,2,3,4,5,6,7];
treearr.unshift(0);
//
console.log(treearr);
// treearr = [0,1,2,3,4,5,6,7];

数组的深拷贝与浅拷贝

因为 JavaScript 中,数组是引用类型 如果 直接将数组赋值给另一个变量,实际实现的是浅拷贝,该变量改变,原数组也会跟着改变 例如,如下所示:

var cardArr = [1, 1, 1, 1, 2, 2, 3, 3, 5, 6, 7, 8, 9];
var tempArr = cardArr;
tempArr.push(1);
console.log(tempArr); // [1, 1, 1, 1, 2, 2, 3, 3, 5, 6, 7, 8, 9, 1]
console.log(cardArr); // [1, 1, 1, 1, 2, 2, 3, 3, 5, 6, 7, 8, 9, 1]

因为直接赋值给变量是浅拷贝,tempArr 改变,cardArr 也会改变。

如果想要实现深拷贝,有两种选择。

选择一:自定义函数遍历原数组,实现 Copy 数组

function copyArr (arr) {
    var result = [];
    for (let i = 0; i < arr.length; i++) {
        result.push(arr[i]);
    }
    return result;
}

var cardArr = [1, 1, 1, 1, 2, 2, 3, 3, 5, 6, 7, 8, 9];
var tempArr = copyArr(cardArr);

选择二:使用 slice 方法,实现数组的深拷贝

var cardArr = [1, 1, 1, 1, 2, 2, 3, 3, 5, 6, 7, 8, 9];
var tempArr = cardArr.slice(0);

JavaScript 实现数组乱序

时间复杂度为 O(n^2) 版本 和 时间复杂度 O(n)的代码 如下:

// 时间复杂度 O(n^2)
function randomSortArray (arr){
  let backArr = [];
  while(arr.length){
    let index = parseInt(Math.random()*(arr.length - 1));
    backArr.push(arr[index]);
    arr.splice(index, 1);
  }
  return backArr;
}

// 时间复杂度 O(n)
function randomSortArray2(arr){
  let lenNum = arr.length - 1;
  let tempData;
  for (let i = 0; i < lenNum; i++) {
    let index = parseInt(Math.random() * (lenNum + 1 - i));
    tempData = a[index];
    a[index] = a[lenNum - i]
    a[lenNum - i] = tempData;
  }
  return arr;
}

JavaScript 数组求和

最近遇到了一个之前被忽视面试题目,题目是写一个求和函数,调用方式是可以 sum(x,y) 和 sum(x)(y)混合使用,要考虑其扩展性。
因为 要区分 sum() 和 sum()(),所以调用 sum 返回的应该是个函数,这就考虑到函数柯里化,因此可给出的解决方案为:

function sum(){
    let _arr = [];
    _arr = Array.prototype.slice.call(arguments);
    let add = function(){
        _arr.push(...arguments);
        return add;
    }
    add.toString = function(){
        return _arr.reduce(function(a,b){
            return a+b;
        })
    }
    return add;
}

普通的数组求和,可以使用 reduce 实现

let cardArr = [1, 1, 1, 1, 2, 2, 3, 3, 5, 6, 7, 8, 9];
cardArr.reduce((a,b)=>a+b);

参考资料