购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

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对象。 PabB8I9nKOmZ83wiQaFAlBbEHikR2hGFotXrFE+llpnU/xwMmUgqmJN13S03NdGs

点击中间区域
呼出菜单
上一章
目录
下一章
×