js中对数组操作整理了以下方法
- join() 数组转换成字符串
- push() 和 unshift() 数组添加元素
- pop() 和 shift() 删除数组元素
- sort() 数组排序
- reverse() 反转数组
- concat() 拼接数组
- slice() 截取数组
- splice() 数组替换，插入，删除
es5新增方法
- indexOf() 和 lastIndexOf() 数组查找元素的位置
- forEach() 遍历数组
- map() 为数组元素绑定某种映射关系
- filter() 过滤数组
- every() 判断元素是否满足条件
- some() 判断元素是否满足条件
接下来我们来详细介绍一下各个方法的使用还有有些方法之间的区别。
join()
join()，是把数组转换成字符串，里边可以传递一个参数，表示我们可以用这个字符把数组中的每一个元素进行拼接。默认使用的是逗号（ , ）。
split()，注意这是一个字符串的方法。 这个方法是把字符串转化成数组。这个方法也是传递一个字符,把字符串按照这个字符分割成数组。
var arr = ['red', 'green', 'blue'];
var tempStr = arr.join();
console.log(tempStr); //结果：red,green,blue
console.log('tempStr的类型是' + ' ' + typeof tempStr); //结果：tempStr的类型是 string
//我们也可以按照指定的字符进行拼接。例：' % '
console.log(arr.join('%')); //结果：red%green%blue
///这里我们在说明一下把字符串转化为数组
let str = "jone,Danny,Janny,Peter";
// 我们使用split进行转换
console.log(str.split(',')); //结果：["jone", "Danny", "Janny", "Peter"]
push() 和 unshift()
相同点：都是向数组添加元素，并返回数组的长度
不同点：push() 将元素添加到数组末尾。
unshift() 将元素添加到数组开头
var arr = ['red', 'green', 'blue'];
///向数组末尾添加元素
let arrLength = arr.push('yellow');
console.log(arr); //结果：["red", "green", "blue", "yellow"]
console.log(arrLength); //结果： 4
///向数组开头添加元素
arrLength = arr.unshift('purple');
console.log(arr); //结果：["purple", "red", "green", "blue", "yellow"]
console.log(arrLength); //结果：5
pop() 和 shift()
相同点：删除数组中的一个元素，并返回删除的元素。
不同点：pop 删除数组最后一个元素
shift 删除数组第一个元素
var arr = ['red', 'green', 'blue'];
//删除数组的最后一个元素
var elment = arr.pop();
console.log("删除的元素是 " + elment); //结果：删除的元素是 blue
console.log(arr); //结果：["red", "green"]
//删除数组的第一个元素
elment = arr.shift();
console.log("删除的元素是 " + elment); //结果：删除的元素是 red
console.log(arr); //结果：["green"]
sort()
数组排序，可以按照升序或者降序排序，默认是升序的方式。
var strNum = ['b', 'aa', 'd', 'd', 'c', 'a', 'bc', 'ba'];
console.log(strNum.sort()); //结果：["a", "aa", "b", "ba", "bc", "c", "d", "d"]
var numArray = [5, 7, 9, 6, 8, 4, 2, 569, 28];
console.log(numArray.sort()); //结果：[2, 28, 4, 5, 569, 6, 7, 8, 9]
注意：这里我们通过结果可以看到，sort排序是按照字符串进行的逐个比较排序，尽管是数字也会按照字符串逐个比较来排序。因此我们才能看到569排在了6前面。这是显然不正确的，那么我们如何比较数值呢？sort函数支持我们传递一个函数作为参数来进行排序。
numArray.sort(function(a, b) {
//这是一个比较函数
// 返回负值：表示 a 比 b 小 升序 a在前
// 返回正值：表示 a 比 b 大 降序 b在前
return a - b;
})
console.log(numArray); //结果[2, 4, 5, 6, 7, 8, 9, 28, 569]
此时我们就可以看到数值能正常排序了，当然我们也可以按照降序排序，只需把a-b换成b-a即可
reverse()
反转数组，就是把数组倒过来，这个方法可以修改原数组
///反转数组
var arr = ['red', 'green', 'blue'];
console.log(arr); //结果：["red", "green", "blue"]
console.log(arr.reverse()); //结果：["blue", "green", "red"]
concat()
向数组中添加新数组或者新元素，这个方法调用的时候回先拷贝一个当前数组的副本，然后把新添加的元素或者数组添加到副本的末尾，并返回一个新数组。注意：这个方法并没有改变原数组
// 追加数组
var arr = ['red', 'green', 'blue'];
console.log(arr.concat('purple', ['color', 'yellow'])); //结果：['red', 'green', 'blue', 'purple', 'color', 'yellow']
slice()
截取数组，该方法可以传递两个或者一个参数，注意：返回一个新数组，原数组不变
第一个参数：表示截取的起始位置
第二个参数：表示截取的结束位置，不包含该位置。如果这个参数不传，代表从起始位置开始到数组末尾
注意：当参数为负数时，我们需要用这个数加上数组的长度得到的值替换这个负数
//截取数组
var arr = ['red', 'green', 'blue', 'purple', 'color', 'yellow'];
//从下标为1的元素截取到末尾
console.log(arr.slice(1)); //结果：["green", "blue", "purple", "color", "yellow"]
//从下标为1的元素截取到下标为4的元素(不包含4)
console.log(arr.slice(1, 4)); //结果：["green", "blue", "purple"]
//从下标为1的元素截取到下标为3的元素(不包含3) 和 slice(1, 3)一样
console.log(arr.slice(1, -3)); //结果：["green", "blue"]
//从下标为2的元素截取到下标为4的元素(不包含4) 和 slice(2, 4)一样
console.log(arr.slice(-4, -2)); //结果：["blue", "purple"]
splice()
根据传入的参数不同，删除、插入、替换都可以实现。
注意：该方法返回的是一个被操作的元素数组，并且原数组也发生改变
删除： 传递两个参数
第一个参数：起始位置
第二个参数：要删除的元素个数
插入：传递三个参数
第一个参数：起始位置
第二个参数：传0，表示删除0个元素
第三个参数：要插入的元素
替换：传递三个参数
第一个参数：起始位置
第二个参数：删除元素个数
第三个参数：要替换的元素（删除个数不必与添加个数一致）
var arr = ['red', 'green', 'blue', 'purple', 'color', 'yellow'];
///删除元素 返回删除的元素数组
console.log(arr.splice(1, 4)); //结果：["green", "blue", "purple", "color"]
console.log(arr); //结果：["red", "yellow"]
///插入元素 操作元素个数为0 所以返回一个空数组
console.log(arr.splice(1, 0, "orange")); //结果：[]
console.log(arr); //结果：["red", "orange", "yellow"]
///替换元素
console.log(arr.splice(1, 2, "orange", "gray")); //结果：["orange", "yellow"]
console.log(arr); //结果：["red", "orange", "gray"]
indexOf() 和 lastIndexOf()
相同点：
1.查找元素在数组的的位置，如果查找到则返回该元素第一次出现的位置，如果找不到则返回-1。
2.传递两个参数(可不传，默认从第一个或最后一个)。第一个参数要查找的元素； 第二个参数：查找的其实位置
不同点： indexOf()从前向后查找，lastIndexOf()从后向前查找
var arr = [3, 2, 6, 6, 6, 1, 4, 3, 2, 1];
///查找6第一次出现的位置 从前往后查询
console.log(arr.indexOf(6)); //结果：2
///查找6第一次出现的位置,从索引为4开始 从前往后查询
console.log(arr.indexOf(6, 4)); //结果：4
///查找1第一次出现的位置,从后往前查询
console.log(arr.lastIndexOf(1)); //结果：9
///查找1第一次出现的位置,从索引为7开始 从后往前查询
console.log(arr.lastIndexOf(1, 7)); //结果：5
///查找字符1出现的位置，没有找到 返回 -1
console.log(arr.indexOf("1")); //结果：-1
forEach()
数组遍历，默认传递一个函数，参数分别对应：元素内容；元素索引；数组本身。
//数组遍历
var arr = ['red', 'green', 'blue'];
arr.forEach(function(value, index, a) {
console.log('第' + index + '个元素的值是：' + value + ' a是arr本身吗： ' + (a === arr));
});
//结果：
//第0个元素的值是：red a是arr本身吗： true
//第1个元素的值是：green a是arr本身吗： true
//第2个元素的值是：blue a是arr本身吗： true
map()
对数组中的元素按照某种关系转换，并返回这个转化后的数组,原数组不变
var arr = ['red', 'green', 'blue'];
//为数组中的每个元素拼接一个Color字符串
var resultArray = arr.map(function(value) {
return value + "Color";
})
//原数组
console.log(arr); //结果：['red', 'green', 'blue']
//修改过后的数组
console.log(resultArray); //结果：["redColor", "greenColor", "blueColor"]
filter()
过滤数组，可以按照某种条件筛选出符合条件的元素，并返回满足条件的元素数组
//filter过滤数组
var arr = ['red', 'green', 'blue', "orange"];
// 筛选出元素中带有n字符的元素 这里就用到了查询元素这个方法，该方法也可以用于字符串
var resultArr = arr.filter(function(value) {
return value.indexOf('n') !== -1;
})
//原数组不变
console.log(arr); //结果：['red', 'green', 'blue', "orange"]
//筛选后
console.log(resultArr); //结果：['green', "orange"]
every() 和 some()
相同点：判断元素是否存在满足条件的项
不同点： every()会逐个判断，把数组中所有的元素判断完毕后，才返回。如果都满足条件返回true，如果有一个不满足返回false。some()如果有一项满足条件就返回true，否则false。
every()方法
var arr = [1, 2, 3, 4, 5];
///every方法循环的次数
var everyCount = 0;
///比较结果
var result1 = arr.every(function(value) {
everyCount++;
return value < 4;
})
///数组中所有的元素都做判断，所以次数是5
console.log(everyCount); ///结果： 5
///数组中所有的元素都必须满足条件，所以结果为false
console.log(result1); ///结果： false
some()方法
var arr = [1, 2, 3, 4, 5];
///some方法循环的次数
var someCount = 0;
///比较结果
var result2 = arr.some(function(value) {
someCount++;
return value < 4;
})
///数组中只要有一个满足条件就返回true，所以次数是1
console.log(someCount); ///结果： 1
console.log(result2); ///结果： true
网友评论