本文详细介绍了JavaScript中数组的创建、检测、清空、常用方法（如push、unshift、pop、shift、reverse、sort、slice、splice等）、转换为字符串、元素位置查找以及迭代方法（every、some、filter、forEach、map）。
Array(数组)对象
一、数组的两种创建方式
数组的创建有两种方式，分别是 利用 new Array()创建 和 利用数组字面量创建。
1.1、利用 new Array()
// new关键字创建空数组
var arr = new Array();
console.log(arr);
// new关键字创建包含元素的数组
// var arr = new Array(值1, 值2.....值N);
var arr = new Array('唐僧','孙悟空','猪八戒','沙和尚')
console.log(arr);
// new关键字创建指定元素个数的数组
// var arr = new Array(数值);
var arr = new Array(4);
console.log(arr);
1.2、利用数组字面量
// 我们也可以使用[]直接创建数组
var arr = [];
console.log(arr);
// var arr = [值1, 值2.....值N];
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚']
console.log(arr);
// 我们可以使用length属性获取数组的长度;并且可以给一个数组长度赋值。
console.log(arr.length);
二、检测一个对象是否是数组
检测一个对象是否是数组的方式有两种：instanceof和 Array.isArray( 参数 )，两者判断方法均为如果是数组则返回 true，不是数组则返回 false
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚']
var str='唐僧,孙悟空,猪八戒,沙和尚'
// 变量名 instanceof Array
console.log(arr instanceof Array); //true
console.log(str instanceof Array); //false
//Array.isArray(变量名)
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(str)); //false
三、清空数组
var arr = [4, 9, 16, 25];
// 第一种 直接赋予空数组[]
arr=[]
console.log(arr);
// 第二种 利用length属性将数组长度设置为0
arr.length=0
console.log(arr);
// 第三种 使用splice()删除全部数组元素
arr.splice(0, arr.length)
console.log(arr);
四、Array对象的常用方法
4.1、数组元素的增加和删除
数组元素的增加和删除分别有两个方法，增加有 push()，unshift()，删除有pop() ，shift()，下面对这四个方法一一讲解
4.1.1、push()
push()方法将指定的元素(可以为多个元素）添加到数组的末尾，并返回新的数组长度。
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚']
var add= arr.push('白龙马','牛魔王') //将'白龙马''牛魔王'添加到数组末尾
console.log(add); //6 //返回新数组的长度
console.log(arr); //['唐僧', '孙悟空', '猪八戒', '沙和尚', '白龙马', '牛魔王']
4.1.2、unshift()
unshift()方法将指定的元素(可以为多个元素）添加到数组的开头，并返回新的数组长度。
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚']
var add= arr.unshift('白龙马','牛魔王') //将'白龙马''牛魔王'添加到数组开头
console.log(add); //6 //返回新数组的长度
console.log(arr); //['白龙马', '牛魔王', '唐僧', '孙悟空', '猪八戒', '沙和尚']
4.1.3、pop()
pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚']
var del=arr.pop() //删除数组的最后一个元素
console.log(del); //返回被删除的元素'沙和尚'
console.log(arr); //['唐僧', '孙悟空', '猪八戒']
console.log(arr.length); //3
4.1.4、shift()
shift()方法从数组中删除第一个元素，并返回该元素的值。此方法会更改数组的长度。
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚']
var del=arr.shift() //删除数组的第一个元素
console.log(del); //返回被删除的元素'唐僧'
console.log(arr); //['孙悟空', '猪八戒', '沙和尚']
console.log(arr.length); //3
补充：
delete运算符可以删除指定的元素；被删除的元素会变成空，并不会影响数组长度
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚']
delete arr[1] //1代表索引 因此是删除数组第二个元素'孙悟空'
console.log(arr); //['唐僧', empty, '猪八戒', '沙和尚']
console.log(arr.length); //4 被删除的元素会变成空，并不会影响数组长度
4.2、数组的翻转与排序
对于数组的翻转与排序，我们都知道可以通过 for循环，冒泡排序，选择排序 来实现，但是在Array对象中，给好了方法可以直接使用，分别是反转数组的方法 reverse() 和排序的方法 sort()
4.2.1、reverse()
reverse() 方法 反转数组中的元素。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。换句话说，数组中的元素顺序将被翻转，变为与之前相反的方向。
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚']
arr.reverse()
console.log(arr); //['沙和尚', '猪八戒', '孙悟空', '唐僧']
4.2.2、 sort()
sort()方法对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。因此如果直接使用只能实现10以内的排序。要想自定义升序排序并且不受数字大小限制，需要在该方法中写入一个函数作为参数（固定使用牢记即可）
// 升序
function (a,b){
return a-b
}
// 降序
function (a,b){
return b-a
}
var num=[1,2,34,54,3,232,43,54,14,23,64]
num.sort(function(a,b){
return a-b //升序
})
console.log(num);
num.sort(function(a,b){
return b-a //降序
})
console.log(num);
4.3、数组的截取与替换
如果想要在一个数组中截取一些元素，可以使用slice()方法,如果想要在一个数组中替换一些元素，可以使用splice()方法
4.3.1、slice()
slice()方法返回一个新的数组对象，这一对象是一个由start和end决定的原数组的浅拷贝（包括start，不包括end），其中start和end代表了数组元素的索引。原始数组不会被改变。
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚','白龙马','牛魔王']
// slice的参数都是代表索引，第一个数值代表开始位置(包括)，第二个数值代表结束位置(不包括)
// 或者也可以理解为 第二的数值-第一个数值=截取元素的个数
// 在这里 2代表从'猪八戒'开始截取，包括'猪八戒',4代表到'白龙马'结束，不包括'白龙马'
var newArr=arr.slice(2,4)
console.log(newArr); //['猪八戒', '沙和尚']
console.log(arr); //原始数组不会被改变 //['唐僧', '孙悟空', '猪八戒', '沙和尚','白龙马','牛魔王']
4.3.2、splice()
splice()方法通过移除或者替换已存在的元素和/或添加新元素改变一个数组的内容。它具有三个参数，第一个代表起始位置索引(包括)，第二个代表长度，第三个代表要替换或者添加的元素。
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚','白龙马','牛魔王']
//删除数组元素 1代表从索引为1的元素'孙悟空'开始删除, 3代表删除的数组长度为3,也就是删除3个元素
arr.splice(1,3)
console.log(arr); //['唐僧', '白龙马', '牛魔王']
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚','白龙马','牛魔王']
//添加数组元素 1代表从索引为1的元素'孙悟空'开始,0代表删除的数组长度为0,也就是不删除
// '红孩儿'代表在1'孙悟空'的 前面 插入元素红孩儿
arr.splice(1,0,'红孩儿')
console.log(arr); //['唐僧', '红孩儿', '孙悟空', '猪八戒', '沙和尚', '白龙马', '牛魔王']
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚','白龙马','牛魔王']
//替换数组元素 1代表从索引为1的元素'孙悟空'开始,1代表删除的数组长度为1,也就是把孙悟空删除
// '白骨精'代表在1'孙悟空'的 前面 插入元素白骨精,因为'孙悟空'被删除了,也就相当于'白骨精'替换了'孙悟空'
arr.splice(1,1,'白骨精')
console.log(arr); //['唐僧', '白骨精', '猪八戒', '沙和尚', '白龙马', '牛魔王']
4.4、数组转换为字符串
toString()方法和join()方法都能将数组转化为字符串
4.4.1、toString()
toString()方法返回一个字符串，表示指定的数组及其元素。
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚']
var str= arr.toString()
console.log(str); //唐僧,孙悟空,猪八戒,沙和尚
4.4.2、join()
join()方法将一个数组的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。
var arr = ['唐僧', '孙悟空', '猪八戒', '沙和尚']
var str=arr.join('-')
console.log(str); //唐僧-孙悟空-猪八戒-沙和尚
4.5、数组元素的位置
indexof()
indexOf()方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。
lastIndexOf()方法返回数组中给定元素最后一次出现的索引，如果不存在则返回 -1。该方法从数组后面向前寻找元素
var arr=[3,4,5,3,6,7,5,8,4,3,4,2,1,5]
// indexOf的参数有两个,第一个表示你要寻找的元素,第二个表示寻找元素的位置
var index=arr.indexOf(5)
console.log(index); //2
var index=arr.indexOf(5,3)
console.log(index); //6
// 第一个参数是‘被查找的元素’。第二个参数是‘从此位置开始逆向查找’，
var lastIndex=arr.lastIndexOf(5)
console.log(lastIndex); //13
var lastIndex=arr.lastIndexOf(5,6)
console.log(lastIndex); //6
4.6、扩充数组
concat()
concat()方法 将多个数组的元素合并为一个新的数组；
var arr1=['唐僧', '孙悟空']
var arr2=['猪八戒', '沙和尚']
var newArr=arr1.concat(arr2)
console.log(newArr); //['唐僧', '孙悟空', '猪八戒', '沙和尚']
4.7、迭代方法
4.7.1、every()
every() 检测数值元素的每个元素是否都符合条件。返回值为true false
var ages = [32, 33, 16, 40];
function checkAge(age){
return age>=18
}
var result=ages.every(checkAge)
console.log(result); //false
4.7.2、some()
some() 检测数组元素中是否有元素符合指定条件。
var ages = [32, 33, 16, 40];
function checkAge(age){
return age>=18
}
var result=ages.some(checkAge)
console.log(result); //true
4.7.3、filter()
filter() 检测数值元素，并返回符合条件所有元素的数组。
var ages = [32, 33, 16, 40];
function checkAge(age){
return age>=18
}
var result=ages.filter(checkAge)
console.log(result); //[32,33,40]
4.7.4、forEach()
forEach() 数组每个元素都执行一次回调函数
var arr = [4, 9, 16, 25];
function myFun1(item, index) {
console.log(item, index);
}
var newArr = arr.forEach(myFun1)
4.7.5、map()
map()通过指定函数处理数组的每个元素，并返回处理后的数组。
var arr = [4, 9, 16, 25];
function myFun(item){
return item+1
}
console.log(arr.map(myFun)); //[5, 10, 17, 26]
五、随堂练习
5.1、找到数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’]中每一个a出现的位置
var arr = ['c', 'a', 'z', 'a', 'x', 'a']
// index=-1是为了让它从0开始找
var index = -1
//记录a出现的次数
var count = 1
do {
var index = arr.indexOf('a', index + 1)
if (index != -1) {
console.log('第' + count + '个a的下标是：' + index);
count++
}
} while (index != -1)
5.2、 编写一个方法去掉一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’]的重复元素
function newArr(arr) {
arr2 = [];
for (var i = 0; i < arr.length; i++) {
// 如果这个数是第一次出现，则传入新的数组
if (arr2.indexOf(arr[i]) == -1) {
arr2.push(arr[i]);
}
}
return arr2
}
var arr = newArr(['c', 'a', 'z', 'a', 'x', 'a'])
console.log(arr);
5.3、已知工资额的数组 [1500, 1200, 2000, 2100, 1800] ，把工资额超过 2000 的项删除。
function newSalary(item, index) {
return item <= 2000
}
var arr = [1500, 1200, 2000, 2100, 1800]
console.log(arr.filter(newSalary));
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
