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

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.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) // []

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

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

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

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

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

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

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

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

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

7.更改元素

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

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"]

8.delete删除元素

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
//true
console.log(fruits); // [empty, "Orange", "Apple", "Mango"]

9.splice()

1.可用于向数组添加新项。

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"]

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

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

10.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"]

11.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"]

12.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) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

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

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

14.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

17.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]

18.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

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

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

14. 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"]

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

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

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

16.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]

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

猜你喜欢