数组的定义

数组的使用和其他编程语言差不多，但有以下区别：

  • 数组是一类特殊的对象（使用typeof运算符，返回值是object）
  • 数组的索引值不可以是负数。

数组的操作：

遍历:

for循环遍历（类似其他高级语言）

forEach()

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

forEach的参数为一个函数，该函数有一个参数

添加元素

1）push

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)

push的返回值是新数组的长度。

pop()是弹出元素，返回值是被弹出的元素

2)直接通过下标添加

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon");                // 向 fruits 添加一个新元素 (Lemon)

这样的是可以的，fruits最后的结果是：
[“Banana”,”Orange”,”Apple”,”Mango”,,,,,,,”Lemon”]
(中间会留下没有值的“洞”)

3) unshift()

从头部插入元素

删除元素

1）pop()

pop()是弹出元素，返回值是被弹出的元素

2）shift()

删除第一个元素，并且将之后的元素平移好。

查找元素

1)Array.indexOf()

indexOf() 方法在数组中搜索元素值并返回其位置。

2)Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

3)Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。

这个例子查找（返回）大于 18 的第一个元素的值：

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

4)Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。
与前面的find很像，只不过返回值不同。

转换成字符串

1）toString()方法

可以将数组转换成字符串

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 

<h2>toString()</h2>

<p>toString() 方法以逗号分隔的字符串返回数组：</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

某些情况下可认为这是一个强制转换，有时会自动调用

2）join()方法

与toString的区别是，join可以有参数，参数是字符串中用作间隔的字符

splice 剪裁拼接

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 

<h2>splice()</h2>

<p>splice() 方法将新元素添加到数组中。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组：<br>" + fruits;
function myFunction() {
  fruits.splice(2, 1, "Lemon", "Kiwi");
  document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
}
</script>

</body>
</html>

splice(2,1,”lemon”,”Kiwi”)中参数的意义是：
2代表拼接点（即”Apple”），
1代表从拼接点删除1个元素（即把”Apple”删掉）
最后再插入”Lemon”,”Kiwi”
一次运行的结果是：
Banana,Orange,Lemon,Kiwi,Mango

concat()连接

concat将若干数组连接起来，返回一个新数组

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

slice()切片

类似字符串。返回值是一个新数组，不会改变原数组

排序

sort

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

自定义使用sort

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

参数是一个函数。

反转数组 reverse()

数据批量处理

Array.map()迭代执行函数

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

map会对数组中的每个元素执行myFunction,并把返回值存到一个数组中。

  • map() 方法不会对没有值的数组元素执行函数。
  • map() 方法不会更改原始数组。

Array.filter() 过滤器

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

生成新数组，其中包含所有myFunction值为true的数据

Array.reduce()

语法:


arr.reduce(function(prev,cur,index,arr){
...
}, init);

arr 表示原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init;
cur 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。
与map、filter相比，reduce最大的优点是可以利用函数调用的返回值。

Array.reduceRight()

与reduce相比，该函数从右向左处理。

Array.every()

every() 方法检查所有数组值是否通过测试。

Array.some()

some() 方法检查是否存在数组值通过了测试。