[JavaScript]数据结构与算法——数组基础知识

一、数组简介

在之前所接触的编程语言中，如C、C++、Java等对于数组的定义是这样的：数组存储一系列同一种数据类型的值。但是在JavaScript中，我们也可以在数组中保存不同类型的值。虽然语法上能够支持我们这样做，但我们应该遵守最佳实践，避免这样做。

二、创建和初始化数组

let color = new Array(); // 创建一个数组，length = 0
let color = new Array(3); // 创建一个数组， length = 0
let color = new Array('red', 'green', 'black'); // 创建一个数组，并初始化三个元素，length = 3；
let color = []; // 创建一个数组，同第一种方式
let color = ['red', 'green', 'black']; // 创建一个数组，同第三种方式

如果我们在创建数组时，要求创建指定长度的数组，则只能使用new方式。

如何获取数组的长度？

let color = new Array('red', 'green', 'black');
console.log(color.length); // 3

如何判断一个变量是Array类型？

1. 方法一：从原型入手，使用Array.prototype.isPrototypeOf(obj)来判断Array是否在obj的原型链中；

const isArray = Array.prototype.isPrototypeOf(color);
console.log(isArray);  // true

2. 方法二：从构造函数入手，使用obj instanceof Array;

const isArray = color instanceof Array;
console.log(isArray); // true

3. 方法三：js提供了一个方法专门来判断是否是数组，Array.isArray(obj);

const isArray = Array.isArray(color);
console.log(isArray);

4. 方法四：根据对象的class属性(类属性)，跨原型链调用toString()方法， Object.prototype.toString.call(obj)，MDN推荐使用这种方式；

const isArray = Object.prototype.toString.call(color);
console.log(isArray); // "[object Array]"

// 封装成一个函数
function getClass(object) {
  return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
}

console.log(getClass(color)); // "Array"

或者这样写：

function getClass(object) {
  if (object === null) return "null";
  if (object === undefined) return "undefined";
  return Object.prototype.toString.call(object).slice(8, -1); 
}

三、数组的常见方法

3.1 添加元素

1. 使用length属性
   如果想要给数组末尾添加一个元素，可以利用length属性在数组的最后一个空位上增添元素；

let color = new Array('red', 'green', 'black');
color[color.length] = 'yellow'; // color.length = 3
console.log(color); // ["red", "green", "black", "yellow"]

2. push()方法
   该方法可以把元素添加到数组的末尾，可以添加任意数量的元素，返回值为更改后数组的长度；

color.push('yellow', 'blue');
console.log(color); // ["red", "green", "black", "yellow", "blue"]

3. unshift()方法
   该方法可以将元素添加到数组的头部，可以添加任意数量的元素，返回值为更改后数组的长度；

color.unshift('yellow', 'blue');
console.log(color); // ["yellow", "blue", "red", "green", "black"]

利用for循环实现unshift()方法的效果，但是只能在头部添加一个元素，基本思路是通过遍历，将数组的每一个元素后移一位；

for (let i = color.length; i >= 0; i--) {
  color[i] = color[i - 1];
}
color[0] = '1';
console.log(color); // ["1", "red", "green", "black"]

3.2 删除元素

1. pop()
   删除数组里面最后一项，返回值为被删除的元素；

let color = new Array('red', 'green', 'black');
const item = color.pop();
console.log(item); // "black"
console.log(color); // ["red", "green"]

2. shift()
   删除数组的第一项，返回值为被删除的元素；

let color = new Array('red', 'green', 'black');
const item = color.shift();
console.log(item); // "red"
console.log(color); // ["green", "black"]

3.3 在任意位置添加或删除元素

1. splice()
   使用splice()方法可以通过指定索引，就可以删除相应位置和数量的元素，返回值是被删除的元素列表；

let week = ['周一', '周二', '周三', '周四', '周五', '周六', '周天'];
const items = week.splice(2, 2);
console.log(items); // ["周三", "周四"]
console.log(week); // ["周一", "周二", "周五", "周六", "周天"]

同样，splice还可以插入元素:

let week = ['周一', '周二', '周三', '周四', '周五', '周六', '周天'];
const items = week.splice(2, 2, 1, 2, 3);
console.log(items); // ["周三", "周四"]
console.log(week); // ["周一", "周二", "周五", "周六", "周天"]

该例子是从index=2的位置上，删除了后面接连着的两个元素，并在此位置上增添了“1，2，3”这三个元素。

四、数组的遍历方法

1. forEach()

const arr = ['red', 'yellow', 'green'];
arr.forEach((element, index) => {
  console.log(index + ': ' + element);
}); 
// "0: red"
// "1: yellow"
// "2: green"

2. filter()
   array.filter(callback,[thisObject])，callback参数是要对每个数组元素执行的回调函数；thisObject是在执行回调函数时定义的this对象。
   该方法的作用是：对数组中的每个元素都执行一次指定的函数（callback），并且创建一个新的数组，该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略，同时，新创建的数组也不会包含这些元素，该方法不会改变原数组。

const numbers = [];
for(let i = 1; i <= 10; i++ ) {
  numbers.push(i);
}
// 过滤掉数组中的奇数
const isEven = num => {
  return num % 2 !== 0;
}
const result = numbers.filter(isEven);
console.log(result); // [1, 3, 5, 7, 9]

3. map()

const words = ['a', 'b', 'c'];
// 将数组中的元素改为大写
const toUpperCase = item => {
  return item.toUpperCase();
};
const result = words.map(toUpperCase);
console.log(result);  // ["A", "B", "C"]
console.log(words); // ["a", "b", "c"] 原数组不变

4. some()
   对数组中的每个元素都执行一次回调函数（callback），直到此函数返回 true，如果发现这个元素，some 将返回 true，如果回调函数对每个元素执行后都返回 false ，some 将返回 false。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略。

// 判断数组中是否存在大于10的数字
const isBiggerThan10 = item => {
  return item > 10;
};
const arr1 = [1, 2, 4];
const arr2 = [1, 23, 4];
console.log(arr1.some(isBiggerThan10)); // false
console.log(arr2.some(isBiggerThan10)); // true

5. every()
   方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。

// 判断数组中是否所有的元素都大于10
const isBiggerThan10 = item => {
  return item > 10;
};
const arr1 = [1, 2, 23];
const arr2 = [11, 23, 14];
console.log(arr1.every(isBiggerThan10)); // false
console.log(arr2.every(isBiggerThan10)); // true

6. indexOf()
   正向搜索，比较 searchElement 和数组的每个元素是否绝对一致（===），当有元素符合条件时，返回当前元素的索引；如果没有发现，就直接返回 -1 ；

const arr = [1, 2, 'cat'];
console.log(arr.indexOf(2));
console.log(arr.indexOf('2'));

7. lastIndexOf()
   同indexOf，只不过是逆向搜索；

五、数组的其他方法

1. 数组合并——concat()
   若我们有多个数组，我们需要将他们合并成一个数组，常规下我们可以迭代各个数组，然后把其中每个元素都添加到最终的数组中。但是js中已经提供了concat()方法。

let name = 'guojingan';
let arr1 = ['male', 'suining'];
let arr2 = ['dog', 'cat', 'pets'];

let total = arr1.concat(name, arr2);
console.log(total); // ["male", "suining", "guojingan", "dog", "cat", "pets"]

2. slice()
   该方法可从已有的数组中返回选定的元素，slice(start, end)，第二个参数可选，返回一个新数组。

const arr = ['a', 'b', 'c', 'd'];
const arr2 = arr.slice(1, 2);
console.log(arr2); // ["b"]