JavaScript前端开发与实例教程（微课视频版）最新章节_崔仲远著

3.4　数组常用属性和方法

1. 数组常用属性

属性length返回数组的长度，即数组中元素的个数。它是一个可读可写的属性，语法格式如下：

数组名.length

修改length属性的值可以增加或减少数组元素。如果设置的length属性值大于数组的元素个数，则会在数组末尾插入undefined元素；如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除。

示例如下：

var arr = [1, 2, 3];// 创建数组
console.log(arr.length);// 获取数组的长度，输出：3
arr.length = 2;// 修改length属性的值为2，此时元素只剩2个
console.log(arr);//输出：1,2
arr.length = 0;// 修改length属性的值为0，此时数组元素被清空
console.log(arr); // 输出空数组：[]
arr.length = 1;// 修改length属性的值为1，此时数组增加1个元素，默认值是undefined
console.log(arr[0]);// 输出：undefined

2. 数组常用方法

JavaScript提供了丰富且功能强大的数组方法，主要包括遍历、元素操作、检索、排序、筛选、转换和类型判断等，如表3-1所示。

表3-1　数组常用方法

（续表）

（1）遍历

forEach()方法对数组的每个元素执行一次给定的函数。

语法：array.forEach(callback(currentValue))

参数描述：callback是数组中每个元素执行的函数，currentValue是数组中正在处理的当前元素。

返回值：undefined

示例如下：

var arr = [1, 2, 3];// 创建数组
arr.forEach(function(item){
   console.log(item);// 输出数组的每个元素1，2，3
});

提示： 除了抛出异常以外，没有办法中止或跳出forEach()循环。

（2）元素操作

① push()方法将一个或多个元素添加到数组的末尾，并返回新数组元素的个数。

语法：array.push(item1, item2,…, itemX)

参数描述：添加到数组中的项目。

返回值：添加元素后的数组长度。

示例如下：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var r =fruits.push("Kiwi");
console.log(r);// 输出：5
console.log(fruits);// 输出["Banana","Orange","Apple", "Mango","Kiwi"]

② pop()方法移除数组的最后一个元素，并返回该元素。

语法：array.pop()

返回值：数组的最后一个元素。

示例如下：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var r = fruits.pop();
console.log(r);// 输出：Mango
console.log(fruits);// 输出：["Banana", "Orange", "Apple"]

③ unshift()方法将新元素添加到数组的开头，并返回新的长度。

语法：array.unshift(item1, item2,…, itemX)

参数描述：添加到数组开头的元素。

返回值：添加元素后的数组长度。

示例如下：

var fruits = ["Banana", "Orange"];
var r =fruits.unshift("Lemon", "Apple");
console.log(r);// 输出：4
console.log(fruits);// 输出：["Lemon", "Apple","Banana", "Orange"]

④ shift()方法移除数组的第一个元素。

语法：array.shift()

返回值：数组的第一个元素。

示例如下：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var r = fruits.shift();
console.log(r);// 输出：Banana
console.log(fruits);// 输出：["Orange", "Apple", "Mango"]

【例3-2】将数组的第一个元素删除并放至数组末尾位置

var arr = ['跑', '马', '灯','特','效'];
arr.push(arr.shift());
console.log(arr);// 输出：['马', '灯','特','效', '跑'];
arr.push(arr.shift());
console.log(arr);// 输出：['灯','特','效', '跑', '马'];

提示： 元素操作方法均会改变原数组。

（3）检索

① slice()方法返回数组中被选中的元素。

语法：array.slice(start, end)

参数描述：start指定从哪里开始选择，如果省略，则从数组起始位置开始。end指定结束选择的位置，不包含end，如果省略，将选择从开始位置到数组末尾的所有元素。若参数使用负数，则表示从数组末尾进行选择。

返回值：新的数组，包含选定的元素。

示例如下：

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

② indexOf()方法在数组中搜索指定元素，并返回第一个匹配项的位置。

语法：array.indexOf(item, start)

参数描述：item代表要搜索的元素。start指定从哪里开始搜索。搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。

返回值：第一个匹配项的位置，若找不到则返回-1。

示例如下：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
console.log(fruits.indexOf("Apple"));// 输出：0
console.log(fruits.indexOf("Apple",1));// 输出：2
console.log(fruits.indexOf("abc"));// 输出：-1

【例3-3】找到数组中所有元素值为“Apple”的位置

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var index = -1;
do {
    index = fruits.indexOf('Apple', index + 1);
    if (index !== -1) {
        console.log(index);
    }
} while (index !== -1);

例3-3在Chrome浏览器控制台中的运行结果，如图3-1所示。indexOf()方法在搜索到第一个匹配值即返回，可以使用循环语句和indexOf()方法从返回位置的下一个位置开始继续检索，直到找不到匹配值返回-1。

图3-1　【例3-3】运行结果

③ lastIndexOf ()方法在数组中搜索指定元素，并返回第一个匹配项的位置。

语法：array.lastIndexOf (item, start)

参数描述：item代表要搜索的元素。start指定从哪里开始搜索。搜索将从指定位置开始，如果未指定开始位置，则从末尾开始，并在数组开头结束搜索。

返回值：第一个匹配项的位置，若找不到则返回-1。

示例如下：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
console.log(fruits.lastIndexOf("Apple"));// 输出：2
console.log(fruits.lastIndexOf("Apple",1));// 输出：0
console.log(fruits.lastIndexOf("abc"));// 输出：-1

提示： indexOf和lastIndexOf的区别。①indexOf搜索某个指定的字符串在字符串首次出现的位置，方向是从左向右搜索；②lastIndexOf搜索某个指定的字符串在字符串最后一次出现的位置，方向是从右向左搜索。

（4）排序

① reverse()方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。

语法：array.reverse()

返回值：颠倒顺序后的原数组。

示例如下：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits); // 输出：["Mango", "Apple", "Orange","Banana"];

② sort()方法对数组的元素进行排序。排序顺序可以是按字母或数字，也可以是升序或降序。默认情况下，sort()方法将按字母和升序将值作为字符串进行排序。

语法：array.sort(compareFunction)

参数描述：compareFunction用来指定按某种顺序进行排列的函数。如果省略，元素按照默认规则进行排序。

返回值：排序后的原数组。

示例如下：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits);// 输出：["Apple","Banana","Mango","Orange"]
var num = [40, 100, 1, 5, 25, 10];
num.sort();
console.log(num);// 输出：[1,10,100,25,40,5]
num.sort(function (a, b) { //按升序对数组中的数字进行排序
    return a – b;
});
console.log(num);// 输出：[1,5,10,25,40,100]
var arr1 = ['abc', 'ab', 'a', 'abcdef', 'xy'];
arr1.sort(function (a, b) {
    return a.length - b.length;// 按照字符串长度升序排序
});
console.log(arr1);// 输出：['a','ab', 'xy','abc','abcdef'];
var arr2 = [1, 2, 3, 4, 5, 6, 7, 8];
arr2.sort(function (a, b) {
    return Math.random() - 0.5;// 随机排序
});
console.log(arr2);// 可能的输出：[1, 2, 6, 8, 4, 3, 7, 5]

提示： 排序方法均会改变原数组。

（5）筛选

① every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。

语法：array.every(callback(currentValue))

参数描述：callback是用来测试每个元素的函数，currentValue是数组中正在处理的当前元素。

返回值：every()方法为数组中的每个元素执行一次callback函数，直到它找到一个会使callback返回false的元素。如果发现了一个这样的元素，every方法将会立即返回false，否则，callback为每一个元素返回true，every()方法返回true。

示例如下：

var ages = [32, 33, 16, 40];
var result = ages.every(function (item) {
    return item > 18;// 检测数组中的每一个元素是否都大于18
});
console.log(result);// 输出：false

② some()方法测试数组中是不是至少有1个元素通过了指定函数的测试。

语法：array.some(callback(currentValue))

参数描述：callback是用来测试每个元素的函数，currentValue是数组中正在处理的当前元素。

返回值：some()方法为数组中的每个元素执行一次callback函数，直到它找到一个会使callback返回true的元素。如果发现了一个这样的元素，some()方法将会立即返回true，否则，callback为每一个元素返回false，some()方法返回false。

示例如下：

var ages = [32, 33, 16, 40];
var result = ages.some(function (item) {
    return item > 18;// 检测是不是至少有1个元素大于18
});
console.log(result);// 输出：true

③ filter()方法创建一个新数组，新数组包含通过指定函数测试的所有元素。

语法：arr.filter(callback(currentValue))

参数描述：callback是用来测试每个元素的函数，返回true表示该元素通过测试，保留该元素，返回false则不保留。currentValue是数组中正在处理的当前元素。

返回值：一个新的、由通过测试的元素组成的数组。如果没有任何数组元素通过测试，则返回空数组。

示例如下：

var ages = [32, 33, 16, 40];
var result = ages.filter(function (item) {
    return item > 18;// 检测每个元素是否大于18
});
console.log(result);// 输出：[32, 33, 40]

提示： 筛选方法均不会改变原数组。

（6）转换

① join()方法将数组作为字符串返回。元素将由指定的分隔符分隔，默认分隔符是逗号。

语法：array.join(separator)

参数描述：separator代表要使用的分隔符。如果省略，则元素用逗号分隔。

返回值：表示数组值的字符串值，由指定的分隔符分隔。

示例如下：

var arr = ['green', 'blue', red];
console.log(arr.join()); // 输出字符串："green,blue,red "
console.log(arr.join('-')); // 输出字符串："green-blue-red"
console.log(arr.join('&')); // 输出字符串："green&blue&red"

② concat()方法用于连接两个或多个数组。

语法：array1.concat(array2, array3,…, arrayX)

参数描述：要连接的数组。

返回值：1个新数组。其中包含已连接数组的值。

示例如下：

var num1 = [1, 2, 3],num2 = [4, 5, 6],num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);
console.log(nums);// 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9]

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

语法：arr.map (callback(currentValue))

参数描述：callback是为数组中的每个元素执行的函数。currentValue是数组中正在处理的当前元素。

返回值：1个新数组。新数组中的每个元素是调用一次提供的函数后的返回值。

示例如下：

var num = [1, 2, 3];
var result = num.map(function(item){
    return item * 10;// 每个元素乘以10
})
console.log(result);// 输出：[10, 20, 30]

④ tostring()方法返回包含所有数组值的字符串，以逗号分隔。

语法：array.toString()

返回值：字符串。代表数组的值，用逗号隔开。

示例如下：

var arr = ['green', 'blue', 'red'];
console.log(arr.toString()); // 输出字符串："green,blue,red "

提示： 转换方法均不改变原数组。

（7）类型判断

isArray()方法检测对象是否为数组。

语法：Array.isArray(obj)

参数描述：obj是检测的对象。

返回值：如果对象是Array，则返回true，否则返回false。

示例如下：

// 下面的isArray()方法调用都返回true
Array.isArray([]);
Array.isArray([7, 8, 9]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 下面的isArray()方法调用都返回false
Array.isArray();
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);

提示： typeof [7,8,9]的结果是object，因此用typeof运算符并不能检测对象是否是一个Array对象。

3.4 数组常用属性和方法

3.4　数组常用属性和方法