数组的属性与方法汇总

什么是数组？

数组是一种特殊的变量，它能够一次存放一个以上的值。

数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 "object"。

创建数组的方法

1、使用数组文本创建:

var arr = ['1','2','3','4'];

2、使用 new 关键词创建:

var arr =new Array ('1','2','3','4');

以上两个例子效果完全一样。无需使用 new Array()。

出于简洁、可读性和执行速度的考虑，请使用第一种方法（数组文本方法）

数组属性

length 属性始终大于最高数组索引（下标）。

var num = arr.length;   // length 返回元素的长度

遍历数组元素

1、遍历数组的最安全方法是使用 "for" 循环：

var arr = ['1','2','3','4'];
for(var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

2、使用 Array.foreach() 函数:

forEach() 被调用时，不会改变原数组，也就是调用它的数组。

var arr = ['1','2','3','4'];
arr.forEach((item, index, arr) => {
    console.log(item) // callback 被调用时传入三个参数：元素的值，元素的索引，被遍历的数组。
})

备注：除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。

若你需要提前终止循环，你可以使用：

• 一个简单的 for 循环
• for...of / for...in 循环
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.find()
• Array.prototype.findIndex()

3、使用 Array.some() 函数： 

some() 被调用时不会改变数组。

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

var arr = ['1','2','3','4'];
function checkAvailability(arr, val) {
  return arr.some(function(arrVal) {
    return val === arrVal;
  });
}
checkAvailability(arr, '18');   // false
checkAvailability(arr, '2'); // true

备注： 如果用一个空数组进行测试，在任何情况下它返回的都是false。

4、使用 Array.map() 函数：

map (）不修改调用它的原数组本身（当然可以在 callbackFn 执行时改变原数组）

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const arr = [1, 2, 3, 4];
const map = arr.map(x => x * 2);
console.log(map); // Array [2, 4, 6, 8]

备注：如果有以下情形，则不该使用 map：

• 你不打算使用返回的新数组；
• 你没有从回调函数中返回值。

5、使用 Array.every() 函数：

every ()不会改变原数组。

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

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

6、 使用 Array.find() 函数：

find() 方法不会改变数组。

find() 方法返回数组中满足提供的测试函数的第一个元素的值。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回 undefined。

const arr = [5, 14, 8, 13, 24];
const found = arr.find(element => element > 10);
console.log(found); // 14

7、使用 Array.findIndex() 函数： 

findIndex()不会修改所调用的数组。

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

const arr = [5, 12, 8, 130, 44];
const num = arr.findIndex((element) => element > 13)
console.log(num); // 3

数组方法 

1、toString()

把数组转换为数组值（逗号分隔）的字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.toString();
console.log(str); // Banana,Orange,Apple,Mango

2、join() 

join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString()，但是您还可以规定分隔符：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.join('-');
console.log(str); // Banana-Orange-Apple-Mango

3、pop() 

从数组中删除最后一个元素，pop() 方法返回“被弹出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.pop();
console.log(a) // "Mango"
console.log(fruits); // ['Banana', 'Orange', 'Apple']

4、push() 

在数组结尾处）向数组添加一个新的元素，push() 方法返回新数组的长度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");
console.log(x); // 5
console.log(fruits); // ['Banana', 'Orange', 'Apple', 'Mango', 'Kiwi']

5、shift() 

删除首个数组元素，并把所有其他元素“位移”到更低的索引，shift() 方法返回被“位移出”的字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.shift();
console.log(a) // "Banana"
console.log(fruits); // ['Orange', 'Apple', 'Mango']

6、unshift() 

方法（在开头）向数组添加新元素，并“反向位移”旧元素，unshift() 方法返回新数组的长度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.unshift("Lemon");
console.log(a); // 5
console.log(fruits); // ['Lemon', 'Banana', 'Orange', 'Apple', 'Mango']

7、splice() 

向数组添加新项，splice() 方法返回一个包含已删除项的数组：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(a); // ['Apple']
console.log(fruits); // ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Mango']
// 第一个参数（2）定义了应添加新元素的位置（拼接）。
// 第二个参数（1）定义应删除多少元素。
// 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
fruits.splice(0, 1);  // 删除 fruits 中的第一个元素

8、concat() 

合并（连接）现有数组来创建一个新数组，concat() 方法不会更改现有数组。它总是返回一个新数组，concat() 方法可以使用任意数量的数组参数：

var arr = ["Cecilie", "Lone"];
var myChildren = arr.concat(["Emil", "Tobias", "Linus"]); 
console.log(myChildren); // ['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus']

9、slice() 

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

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
console.log(citrus); // ['Apple', 'Mango']
// slice() 可接受两个参数，比如 (1, 3)。该方法会从开始参数选取元素，直到结束参数（不包括）为止。

10、sort()、reverse() 

sort() 方法以字母顺序对数组进行排序；reverse() 方法反转数组中的元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();  // 对 fruits 中的元素进行排序
console.log(fruits); // ['Apple', 'Banana', 'Mango', 'Orange']       
fruits.reverse();  // 反转元素顺序
console.log(fruits); // ['Orange', 'Mango', 'Banana', 'Apple']

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

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

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

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

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