JavaScript数组全面解析

一、定义

let arr = [];

二、数组的内置方法

1. concat / slice / splice
2. sort / reverse
3. push / unshift
4. pop / shift
5. toString
6. join

三、数组的基本操作

1.合并两个数组concat：

[1, 2].concat(3, 4); // [1, 2, 3, 4]
[1].concat([2, 3]); // [1, 2, 3]
[1, 2].concat(3); // [1, 2, 3]

2.数组截取slice(start, end)：

[1, 2, 3, 4].slice(0,1); // [1]
[1, 2, 3, 4].slice(0,3); // [1, 2, 3]
[1, 2, 3, 4].slice(-1); // [4]
[1, 2, 3, 4].slice(-2); // [3, 4]

始终为左闭右开，也就是左边包括右边不包括。

3.向数组中添加/删除项目splice(index, howmany, items):

let arr1 = [1, 2, 3, 4];

// 复制两个arr1数组，并且不会改变原arr1数组
let arr2 = arr1.slice();
let arr3 = arr1.slice();

// 删除数组
let removed = arr1.splice(1,1); // 删除arr1第1位开始的长度为1的数组
console.log(arr1); // [1, 3, 4]

// 替换元素
let replace = arr2.splice(2,1,5); // 把第2位开始的第1位删除，并在这个位置插入5
console.log(arr2); // [1, 2, 5, 4]

// 删除并插入元素
let insert = arr3.splice(3,0,5); // 在第3位，删除0个元素，并插入5
console.log(arr3); // [1, 2, 3, 5, 4]

index:起始位置，可能是负数；

howmany：要删除的个数，0为不删除；

items：要添加的元素；

4.数组排序sort(fn):

let arr1 = [1, 2, 58, 89, 73, 4, 17];
let arr2 = arr1.slice();

// 数组升序
arr1 = arr1.sort((a, b) => {
  return a-b;
});
console.log(arr1); // [1, 2, 4, 17, 58, 73, 89]

// 数组降序
arr2 = arr.sort((a, b) => {
  return b-a;
});
console.log(arr2); // [89, 73, 58, 17, 4, 2, 1]

5.数组反序reverse:

[1, 2, 3, 4].reverse(); // [4, 3, 2, 1]

// 反转字符串
'54321'.split('').reverse().join(''); // '12345'

// 反转数字
Number(Number(12345).toString().split('').reverse().join('')); // 54321

6.数组尾部添加元素push：

let arr1 = [1, 2, 3];
arr1.push(4);
console.log(arr1); // [1, 2, 3, 4]

7.添加元素至数组头部unshift：

let arr1 = [1, 2, 3];
arr1.unshift(0);
console.log(arr1); // [0, 1, 2, 3]

8.删除尾部元素pop：

let arr1 = [1, 2, 3];
arr1.pop();
console.log(arr1); // [1, 2]

9.删除头部元素shift：

let arr1 = [1, 2, 3];
arr1.shift();
console.log(arr1); // [2, 3]

10.数组转字符串toString/join:

[1,2,3,4].toString() //"1,2,3,4"
[1,2,3,4]+'' //"1,2,3,4"
[1,2,3,4].join('');//"1234"

11.数组类型判断isArray：

Array.isArray([]); // true
Array.isArray({}); // false

四、数组的常见操作

数组去重：

1.for+for

let arr1 = [1, '2', 9, 1, '1', 2, 4, 9];

let distinct = (arr) => {
  let res = [], j=0;

  for(i=0; i < arr.length; i++){
    let item = arr[i];

    // 如果元素在结果数组中存在，则进行下一次循环
    for(j=0; j < res.length; j++){
      if(res[j] === item) break;
    }

    // 两个数组比较完成后，没有重复，则将元素添加到结果数组中
    j === res.length && res.push(item);
  }

  // 返回去重后的新数组
  return res;
};

console.log(distinct(arr1)); // [1, "2", 9, "1", 2, 4]

2.for+indexOf

let arr1 = [1, '2', 9, 1, '1', 2, 4, 9];

let distinct = (arr) => {
  let res = [];

  for(i=0; i < arr.length; i++){
    let item = arr[i];
    (res.indexOf(item) === -1)  && res.push(item);
  }
  // 返回去重后的新数组
  return res;
};

console.log(distinct(arr1)); // [1, "2", 9, "1", 2, 4]

 3.filter+indexOf

let arr1 = [1, '2', 9, 1, '1', 2, 4, 9];

let distinct = (arr) => {
  arr.filter((v, i, arr) => {
    return arr.indexOf(v) === i;
  });
};

console.log(distinct(arr1)); // [1, "2", 9, "1", 2, 4]

 4.ES6的array.from()方法：

let arr1 = [1, '2', 9, 1, '1', 2, 4, 9];

let distinct = (arr) => {
  return Array.from(new Set(arr));
};

console.log(distinct(arr1)); // [1, "2", 9, "1", 2, 4]

5.reduce：

let arr1 = [1, '2', 9, 1, '1', 2, 4, 9];

let distinct = (arr) => {
  let obj = {};

  return arr.reduce((cur,next) => {
    obj[next] ? '' : obj[next] = true && cur.push(next);
    return cur;
  },[]); //设置cur默认类型为数组，并且初始值为空的数组

};

console.log(distinct(arr1)); // [1, "2", 9, 4]