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

时间 2019-11-17

标签 javascript 处理数组一些经常使用方法栏目 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() 方法会删除首个数组元素，并把全部其余元素“位移”到更低的索引。ui

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

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

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

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

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

5.splice() spa

可用于向数组添加新项。

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

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

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

其他参数（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针对数组中的每一个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:

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

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

reducer 函数接收4个参数:

Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
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 对象，该对象包含数组每一个索引的值