这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战
前言
如上篇文章所言,数组对象是特别常见的,所以一些数组对象的方法也需要经常复习才能做到温故而知新。所以今天我们就来谈一谈JavaScript中数组对象常用的方法。
数组转换字符串
array.join() // 将数组的值拼接成字符串。
var arr = [1,2,3,4,5]
arr.join() // 不传参数,默认按【,】进行拼接
arr.join("-") // 参数是字符串类型 按【-】进行拼接
数组的增删操作
array.push(value,[value[,...]]) //将一个或多个元素添加到数组的结尾,并返回新的长度。
array.pop() //从数组中删除最后一个元素,并返回该元素的值,改变了数组的长度
array.unshift(value,[value[,...]]) //将一个或多个元素添加到数组的开头,并返回新的长度。
array.shift() //从数组中删除第一个元素,并返回该元素的值,改变了数组的长度
数组的翻转与排序
array.reverse() // 翻转数组,返回翻转过的数组
array.sort() // 默认排序顺序是根据字符串Unicode码点,比如如果是数字的话,排序结果是10小于2,因为比较的是第一位
var arr = [1,3,10,2,4,40,5]
arr.sort() // [1, 10, 2, 3, 4, 40, 5]
// sort方法可以传递一个函数作为参数,这个参数用来控制数组如何进行排序
var arr = [1,2,10,4,40,5]
arr.sort(function(a,b)
return a-b; //按照正序
return b-a //按照倒序
})
数组的拼接与截取
concat:数组合并,不会影响原来的数组,会返回一个新数组。
var arr = [1,2,3]
var arr1 = ["a","b","c"]
var newArray = arr.concat(arr1) //[1,2,3,"a","b","c"];
slice:复制数组的一部分到一个新数组,并返回这个新数组,原来的数组不受影响,包含头,不包含尾
var newArray = array.slice(begin, end)
var arr = [1,2,3,4,5]
arr.slice(0,3) //[1,2,3]
arr.slice(-3,-1) //[3,4]
splice: 以新元素来替换旧元素,以此来修改数组的内容,返回被替换的内容,原数组被改变
start:开始位置 deleteCount:删除的个数 items:替换的内容
array.splice(start, deleteCount, [items[,items...])
var arr = [1,2,3,4,5]
var newArray = arr.splice(0,3,"a","b","c","d")
console.log(newArray) //[1, 2, 3]
console.log(arr) // ["a", "b", "c", "d", 4, 5]
数组查找元素
indexOf方法用来查找数组中某个元素第一次出现的位置,如果找不到,返回-1
array.indexOf(search, [fromIndex])
lastIndexOf()从后面开始查找数组中元素第一次出现位置,如果找不到,返回-1
array.lastIndexOf(search, [fromIndex])
操作数组里的元素
1、filter方法
filter方法返回一个由符合函数要求的元素组成的新数组,调用数组的filter方法,添加过滤方法,符合规则的元素会被存放到新数组里。参数说明:
- element: 表示数组里的元素
- index: 表示索引值
- array: 表示传入的数组
var arr = [12,34,56,89,78,23,45,19]
var newArr = arr.filter(function(element,index,array){
return element > 30 // 返回true表示保留该元素(通过测试),false则不保留
})
console.log(arr) // filter方法不会改变原数组里的数据[12,34,56,89,78,23,45,19]
console.log(newArr) // 新数组里保存符合要求的元素[34, 56, 89, 78, 45]
2、forEach() 方法
forEach() 方法对数组的每个元素执行一次提供的函数,且这个函数没有返回值。
var result = arr.forEach(function (element, index, array) {
// 数组里的每一个元素都会被打印
console.log("第" + index + "个元素是" + element);
})
console.log(result) //函数没有返回值
3.some()方法
some()方法测试数组中的某些元素是否通过由提供的函数实现的测试.
result = arr.some(function (element,index,array) {
// 数组里否有一些元素大于50.只要有一个元素大于,就返回true
console.log(element) // 12,34,56
return element > 50
})
console.log(result) // true
4.every()
every()方法测试数组的所有元素是否都通过了指定函数的测试。
result = arr.every(function (element,index,array) {
//数组里是否每一个元素都大于50.只有在所有的数都大于50时,才返回true
console.log(element); //12. 第0个数字就已经小于50了,就没有再比较的意义了
return element > 50
})
console.log(result) //false
清空数组
方式1,重新赋值(推荐)
arr = []
方式2,长度重置
arr.length = 0
方式3,截取
arr.splice(0, arr.length)
后记
你好哇,我是南极大冰块,一个技术与颜值成正比的前端工程师,崇尚一针见血的搞定前端问题,希望我的博客有帮助到了你。
关注我,前端路途一起走。嘿哈~😛