JavaScript里处理数组的一些常用方法

修改器方法:

1.pop() 方法从数组中删除最后一个元素

pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。

let arr2 = ['zhao','qian','sun','li'];
console.log(arr2.pop()); //li
console.log(arr2) // ["zhao", "qian", "sun"]

如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

let arr3 = [];
console.log(arr3.pop()); //undefined
console.log(arr3) // []

2.push() 方法（在数组结尾处）向数组添加一个新的元素

• push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
• push() 方法返回新数组的长度

var arr3 = ['zhao','qian','sun','li'];
arr3.push("zhou");
// 5
console.log(arr3); // ["zhao", "qian", "sun", "li", "zhou"]；

3.shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

• shift() 方法返回被“位移出”的字符串

var arr4 = ['zhao','qian','sun','li'];
arr4.shift();
// "zhao"

4.unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素。

• unshift() 方法返回新数组的长度

var arr5 = ['zhao','qian','sun','li'];
arr5.unshift('zhou') ;
// 5
console.log(arr5); // ["zhou", "zhao", "qian", "sun", "li"]

5.splice() 

• 可用于向数组添加新项。

splice(index,count,para1,para2..)；

第一个参数（index）定义了应添加新元素的位置（拼接）。

第二个参数（count）定义应删除多少元素。

其余参数（para1，para2）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组

var arr8 = ['zhao','qian','sun','li'];
arr8.splice(2,0, 'Love','you'); // 在索引为2处删除了0个元素  返回的是被删除的数组 []
console.log(arr8);// ["zhao", "qian", "Love", "you", "sun", "li"];

var arr9 = ['zhao','qian','sun','li'];
arr9.splice(2,2, 'Love','you') //在索引为2处删除了2个元素  返回的是被删除的数组 ["sun", "li"]
console.log(arr9); //  ["zhao", "qian", "Love", "you"]

6.使用splice()来删除元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);  //["Banana"];
console.log(fruits) ; // ["Orange", "Apple", "Mango"] ; // 删除 fruits 中的第一个元素,删除数量为1

7.sort() 数组排序

字母顺序对数组进行排序。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
fruits.sort(); // ["Apple", "Banana", "Lemon", "Mango", "Orange"]

sort() 方法在对数值排序时会产生不正确的结果；

如果数字按照字符串来排序，则 "3" 大于 "11"，因为 "3" 大于 "1"。

var arr = [3,5,1,6];
arr.sort(); // [1, 3, 5, 6]；

var arr = [3,5,11,6];
arr.sort(); //  [11, 3, 5, 6]；

我们通过一个比值函数来修正此问题

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
(6) [1, 5, 10, 25, 40, 100]

使用相同的技巧对数组进行降序排序

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});//[100, 40, 25, 10, 5, 1]

补充：arr.sort([compareFunction]) 用来指定按某种顺序进行排列的函数

如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

• 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；

• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；

• 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
• compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

8.reverse() 方法反转数组中的元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();  //["Mango", "Apple", "Orange", "Banana"]

9.fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法:arr.fill(value[, start[,end]]); 不改变数组的长度

var array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

10.copyWinthin()方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

arr.copyWithin(target[, start[, end]])

var array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.copyWithin(0, 3, 4));
//["d", "b", "c", "d", "e"]

截取下标3-4之间的元素为，d，替换掉数组下标为0的位置的元素即替换 a；所以输出为 ["d", "b", "c", "d", "e"]

11.flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

• 一个包含将数组与子数组中所有元素的新数组。

var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

• flat()方法会移除数组中的空项

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

使用reduce() contact() 可以实替代flat

var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1,2,3,4]

// 反嵌套一层数组
arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4]

// 或使用 ...
const flatSingle = arr => [].concat(...arr);

12. flatmp()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与map和 深度值1的 flat几乎相同，但 flatmpa通常在合并成一种方法的效率稍微高一些。

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

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

let arr = ["今天天气不错", "", "早上好"]

arr.map(s => s.split(""))
// [["今", "天", "天", "气", "不", "错"],[],["早", "上", "好"]]

arr.flatMap(s => s.split(''));
// ["今", "天", "天", "气", "不", "错", "早", "上", "好"]

13.更改元素还可以下操作

• 通过使用它们的索引号来访问数组元素;

var arr6 = ['zhao','qian','sun','li'];
arr6[0] = 'shi' ; //"shi"
console.log(arr6); //  ["shi", "qian", "sun", "li"];  // 把 arr6的第一个元素改为 "shi"

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[4] = "Kiwi";  //Liwi
console.log(fruits) ; // ["Banana", "Orange", "Apple", "Mango", "Kiwi"]   // 在 fruits 的数组内增加 "Kiwi"

• length 属性提供了向数组追加新元素的简易方法。

var arr7 = ['zhao','qian','sun','li'];
arr7[arr7.length] = 'shi'; //shi
console.log(arr7); // ["zhao", "qian", "sun", "li", "shi"]

访问方法

下面的这些方法不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。

3个转成字符串的(join   toString  toLocaleString)

1.toString() 把数组转换为数组值（逗号分隔）的字符串。

let arr2 = ['zhao','qian','sun','li'];
console.log(arr2.toString()); //zhao,qian,sun,li

2.join() 方法也可将所有数组元素结合为一个字符串。

• 元素是通过指定的分隔符进行分隔的。
• 默认为‘，‘

let arr2 = ['zhao','qian','sun','li'];
console.log(arr2.join()); //zhao,qian,sun,li

console.log(arr2.join(' ')); //zhao qian sun li

3.toLocaleString();

两个获取下标 (indexOf,lastIndexOf)

4.indexof()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

查找数组中 "Apple" 的元素, 在数组的第四个位置开始检索：

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);
console.log(a); //6

5.lastIndexOf()方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1

var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// 3

console.log(animals.lastIndexOf('Tiger'));
//  1

var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

console.log(animals.lastIndexOf('Tiger'));
// expected o

两个返回数组(concat   ,slice)

6.concat() 方法通过合并（连接）现有数组来创建一个新数组。

let arr = [1,2,3];
console.log(arr.concat(4,5)); //[1, 2, 3, 4, 5]

let arr2 = ['zhao','qian','sun','li'];
console.log(arr2.concat('zhou')); //["zhao", "qian", "sun", "li", "zhou"]
//concat() 连接两个数组
console.log(arr.concat(arr2)); //[1, 2, 3, "zhao", "qian", "sun", "li"]

7.slice() 方法用数组的某个片段切出新数组。

• slice() 方法用数组的某个片段切出新数组。
• slice() 方法创建新数组。它不会从源数组中删除任何元素。
• slice（start，end）直接切出新数组

本例从数组元素 1 （"Orange"）开始切出一段数组。　

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
console.log(citrus)  //["Orange", "Lemon", "Apple","Mango"];返回新数组
console.log(fruits ); //  ["Banana", "Orange", "Lemon", "Apple", "Mango"] 原数组不发生变化

slice() 可接受两个参数，比如 (1, 3)介于两个指定下标之间的元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
console.log(citrus); // ["Orange", "Lemon"]
console.log(fruits); // ["Banana", "Orange", "Lemon", "Apple", "Mango"]

一个做判断 includes

8.includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

• arr.includes(searchElement, fromIndex)

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false

如果 fromIndex为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

如果 fromIndex 大于等于数组的长度，则会返回 false，且该数组不会被搜索。

[1, 2, 3].includes(2,-1);     // true
[1, 2, 3].includes(3,1);     //true
[1, 2, 3].includes(3,4);     //false

迭代器：

1.forEach()  方法用于调用数组的每个元素，并将元素传递给回调函数。

• forEach() 对于空数组是不会执行回调函数的。

• array.forEach(function(currentValue, index, arr), thisValue)

• callback 函数会被依次传入三个参数：

  • 数组当前项的值
  • 数组当前项的索引
  • 数组对象本身

var array1 = ['a', 'b', 'c'];

array1.forEach((element) => {
  console.log(element);
}); // a b c

const items = ['item1', 'item2', 'item3'];
const copy = [];

// before
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// after
items.forEach(function(item){
  copy.push(item);
});

2.map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

3.filter()法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法： var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])；

callback用来测试数组的每个元素的函数。返回true表示该元素通过测试，保留该元素，false则不保留

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// ["exuberant", "destruction", "present"]

下例使用filter创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
 

两个判断（every   some）

4.every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

• 语法：arr.every(callback[, thisArg])

举例：判断一个数组里面的值是否都小于40

function isBelowThreshold(currentValue) {
  return currentValue < 40;
}
var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
//true

5.some()方法测试数组中是不是有元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

var array = [1, 2, 3, 4, 5];

var even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));
// true

utput: 1

两个查找（find findIndex）

6.find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined

var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
  return element > 10;
});
console.log(found);
// 12

function isBigEnough(element) {
  return element >= 999;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
//undefined

7.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

var array1 = [5, 12, 8, 130, 44];
function isLargeNumber(element) {
  return element > 10;
}
console.log(array1.findIndex(isLargeNumber));
//1

arr.findIndex(callback [ ])

callback针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:

1. element当前元素；
2. index 当前元素索引；
3. array 调用findIndex的数组

8.reduce()对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

• reducer 函数接收4个参数:

1. Accumulator (acc) (累计器)
2. Current Value (cur) (当前值)
3. Current Index (idx) (当前索引)
4. Source Array (src) (源数组)

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});
//10

如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

callback 被调用四次，每次调用的参数和返回值如下表：

callback	accumulator	currentValue	currentIndex	array	return value
first call	0	1	1	[0, 1, 2, 3, 4]	1
second call	1	2	2	[0, 1, 2, 3, 4]	3
third call	3	3	3	[0, 1, 2, 3, 4]	6
fourth call	6	4	4	[0, 1, 2, 3, 4]	10

 

三个返回Iterator 的方法（keys values entries）

9. entries()方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对

var array1 = ['a', 'b', 'c'];

var iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "a"]

console.log(iterator1.next().value);
// expected output: Array [1, "b"]

10.keys()方法返回一个包含数组中每个索引键的Array Iterator对象。

11.valuse()方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值