js数组常用方法

介绍数组

数组是相同数据的有序集合，即存储一系列同一种数据类型的值。在js中，数组也可以保存不同类型的值，也是可以修改的。

定义

• 数组是相同数据的有序集合
• 数组描述的相同类型的若干个数据，按照一定的先后顺序排列组合而成
• 每个数据称作数组元素，可通过数组下标访问数组元素

特点

1. 长度是确定的。被创建后，大小不可以改变(js中是一个可修改的对象，会动态变化)。
2. 元素必须是同类型，不可以出现混合类型
3. 元素可以是任意数据类型，包括基本类型和混合类型。
4. 数组变量为引用类型，也可以将其看为对象，每个元素相当于对象的成员变量。数组本身就是对象。数组对象本身是在堆中的。

JavaScript中数组方法

方法	描述
concat	连接2个或者更多的数组
every	对数组中的每个元素运行指定函数，如果该函数对每个元素都返回true，则返回true
filter	对数组的每个元素运行指定函数，返回函数运行结果为true的元素组成的数组。
forEach	对数组的每个元素运行指定函数，没有返回值
join	讲所有的数组元素连接成一个字符串
indexOf	返回第一个与给定参数相等的数组元素的索引，没有则返回-1
lastIndexOf	返回一个与给定参数相等的数据索引中的最大的一个索引，没有则返回-1
map	对数组中的每个元素运行指定函数，返回每次函数调用的结果组成的数组
reverse	颠倒数组中的元素的顺序
slice	传入索引值，将数组中对应索引范围内的元素作为新数组返回
some	对数组中每个元素运行指定函数，如果任意元素返回true，则返回true
sort	按照字母顺序对数组排序，支持传入指定排序方法对函数作为参数
toString	将数组作为字符串返回
valueOf	和toString相似，将数组作为字符串返回
push	最数组末尾添加元素
unshift	在数组开头插入元素
pop	删除数组的最后一个元素
shift	删除数组的第一个元素
splice	在任意位置添加或删除元素

添加元素

在数组末尾添加元素

使用数组长度做下标，可以直接在末尾添加一个元素，也可以使用push方法添加。

let arr = [0, 1, 2, 3, 4, 5];
// 给数组末尾添加一个元素
arr[arr.length] = 6;
// 输出[0，1，2，3，4，5，6]
console.log(arr)
// 使用push方法
arr.push(12)
arr.push(12, 'aa')
// 输出[0，1，2，3，4，5，6，12，12，"aa"]
console.log(arr)

在数组开头插入元素

创建一个将所有元素都往后移一个位置的方法，数组会空出一个下标为0的位置，并在方法内把需要插入的元素赋值给下标为0的空位。也可以用js的方法unshift方法在开头插入元素

// 给数组原型添加方法
Array.prototype.insertFirstPosition = function(value) {
  for (let i = this.length; i >= 0; i--) {
    this[i] = this[i - 1];
  }
  this[0] = value;
};
// 在开头插入一个元素
arr.insertFirstPosition(-1);
// 使用js方法unshift插入元素
arr.unshift(-2);
arr.unshift(-2, -3)
// 输出[-3，-2，-2，-1，0，1，2，3，4，5，6，12，12，"aa"]
console.log(arr)

删除元素

删除数组末尾元素和开头元素

删除末尾元素使用pop方法，开头元素使用shift方法。

// 删除末尾元素
arr.pop();
// 删除开头元素
arr.shift();
// 输出[-2，-2，-1，0，1，2，3，4，5，6，12，12]
console.log(arr);

任意位置添加或删除元素

使用splice方法，通过指定位置/索引，就可以删除相应位置上指定数量的元素

// 表示删除从下标5开始的3个元素
arr.splice(5,3)
// 输出[-2，-2，-1，0，1，5，6，12，12]
console.log(arr)

splice方法接收的第一个参数，表示想要删除或者插入元素的索引值；第二个参数是删除元素的个数；从第三个参数往后，就是要添加到数组里面的数据。

// 插入数据
arr.splice(5, 0,2,3,4);
// 输出[-2，-2，-1，0，1，2，3，4，5，6，12，12]
console.log(arr)
arr.splice(5, 3,2,3,4);
// 输出[-2，-2，-1，0，1，2，3，4，5，6，12，12]
console.log(arr)

数组合并

concat可以传递数组、对象或元素，按照传入上顺序连接数组。

const zero = 0;
const positiveNumbers = [1, 2, 3];
const negativeNumbers = [-3, -2, -1];
let numbers = negativeNumbers.concat(zero, positiveNumbers);

console.log('zero', zero); // 0
console.log('positiveNumbers', positiveNumbers); // [1, 2, 3]
console.log('negativeNumbers', negativeNumbers); // [-3, -2, -1]
// [-3, -2, -1, 0, 1, 2, 3]
console.log('negativeNumbers.concat(zero, positiveNumbers)', numbers);

every方法迭代数组

every会运行给定函数迭代数组的每个元素，直到迭代遇到第一个false，执行结束，返回false

// 判断是否是2的倍数
const isEven = x => x % 2 === 0;
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
// arr里面的第一个元素是1，不是2的倍数，因此返回false，every执行结束
console.log('arr.every(isEven)', arr.every(isEven));

some方法迭代数组

some与every相反，是迭代遇到第一个true，执行结束，返回true

// arr里面的第二个元素是2，是2的倍数，因此返回true，some执行结束
console.log('arr.some(isEven)', arr.some(isEven));

forEach方法迭代数组

forEach迭代与for循环结果一样

arr.forEach((x) =>consle.log(x % 2 === 0))

map和filter方法迭代数组

map方法是运行指定函数，返回指定函数的运行结果组成的数组。filter方法是运行指定函数返回指定函数结果为true的元素的数组，可以理解为过滤器，是给定数组的一部分的浅拷贝。

// [false, true, false, true, false, true, false, true, false, true, false, true, false, true, false]
arr.map(isEven)
// [2, 4, 6, 8, 10, 12, 14]
arr.filter(isEven)

reduce方法迭代数组

reduce方法是运行有如下4个参数的函数: previousValue、currentValue、index和array。index和array是可选的参数，用不到的话可以不传这两个参数。函数返回的是一个被叠加的累加器的值，方法停止后会返回这个累加器。如求数组中的和：

// 120
arr.reduce((pre, cur) => pre + cur)

ES6及之后新增的方法

方法	描述
@@iterator	返回一个包含数组健值对的迭代器对象，可以通过同步调用得到数组的健值对
copyWithin	赋值数组中一系列元素到同一数组指定的起始位置
entries	返回包含数组所有健值对的@@iterator
includes	如果数组中存在某个元素就返回true，否则就返回false
find	根据回调函数给定的条件从数组中查找元素，如果找到则返回该元素
findeIndex	根据回调函数给定的条件从数组中查找元素，如果找到则返回该元素的索引值
fill	用静态值填充数据
from	根据已有数组创建一个新数组
keys	返回包含数组所有索引的@@iterator
of	根据传入的参数创建一个新数组
values	返回包含数组所有值的@@iteratior

使用for…of循环迭代

for…of与forEach、for循环两个方法类似

for (const n of arr) {
  console.log(`for..of loop: ${n} % 2 === 0`, n % 2 === 0 ? 'even' : 'odd');
}
// for..of loop: 1 % 2 === 0 odd
// for..of loop: 2 % 2 === 0 even

find和findIndex方法

find和findIndex方法都是接收一个回调函数，搜索满足回调函数条件的值。不同之处是find方法会返回第一个满足条件的值，而findIndx是返回这个值的索引。没有满足条件就是find返回undefined，findIndex返回-1。

function multipleOf(element, index, array) {
  return element % 4 === 0;
}
console.log(arr.find(multipleOf)', arr.find(multipleOf)); // 4
console.log('arr.findIndex(multipleOf)', arr.findIndex(multipleOf)); // 3

includes方法

判断数组里是否存在某个元素，存在返回true，否则返回false。如果传个起始索引，则会从指定索引位置开始查询。

console.log('arr.includes(15)', arr.includes(15)); //  true
console.log('arr.includes(20)', arr.includes(20)); // false
// 从索引位置为5开始查询3是否存在
console.log('arr.includes(3,5)', arr.includes(3, 5)); // false

将数组输出为字符串

数组转为字符串可以用toString和join方法。
如果想把数组里所有元素输出为一个字符串，可以用toString方法；想用一个分隔符把元素隔开，可以用join方法

// 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15
console.log('arr.toString()', arr.toString());
// 1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-10
console.log(numbers.join('-'));