javascript数组方法
1.push()数组尾部添加
在数组尾部添加一个或者多个元素
返回值:返回新数组的长度
改变原数组
var arr = [1,2,3]
arr.push(4)
console.log(arr) //输出 [1,2,3,4]
2.unshift()数组头部添加
在数组头部添加一个或者多个元素
返回值:返回新数组的长度
改变原数组
var arr = [1,2,3]
arr.unshift(4)
console.log(arr) //输出 [4,1,2,3]
3.pop()数组尾部删除
删除数组的最后一位元素
返回值:返回被删除的数据
改变原数组
var arr = [1,2,3]
arr.pop()
console.log(arr) //输出 [1,2]
4.shift()数组头部删除
删除数组的第一项元素
返回值:返回被删除的数据
改变原数组
var arr = [1,2,3]
arr.shift()
console.log(arr) //输出 [2,3]
5.reverse()数组反转
反转数组中的元素
返回值:返回反转后数组
改变原数组
var arr = [1,2,3]
arr.reverse()
console.log(arr) //数组 [3,2,1]
6.sort()数组排序
对数组的元素进行排序(默认根据首字符的先后排序。)
返回值:返回新数组
改变原数组
let arr = [1,3,5,2,4,23,122,34];
//没有参数:时按照首字符的先后排序
arr.sort()//arr=[1,122,2,23,3,34,4,5];
//有参数
arr.sort(function(a,b){
return a-b;//从小到大排序
return b-a;//从大到小排序
})
7.splice() 添加、删除、替换
向数组中添加,或从数组删除,或替换数组中的元素
返回值:返回删除的数据所组成的数组
改变原数组
结构1:arr.splice(index,del) 纯删除
从index下标开始,删除del几个元素
结构2:arr.splice(index,del,item) 替换
从index下标开始,删除几个,并在该位置添加item
结构3:arr.splice(index,0,item) 纯添加
从index下标开始,删除0个,并且在该位置添加item,index开始全部往后移动
8.slice()截取
从数组中截取指定的字段,返回出来
返回值L返回截取出来的字段,放入新数组中
不改变原数组
结构1:arr.slice(index,end)
从index下标位置开始截取,一直到end结束,不包括end
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(0,3)//newArr = [0,1,2];
结构2:arr.slice(inedx)
从index下标位置开始截取,一直到最后
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [2,3,4,5,6,7];
结构3:arr.slice(-num)
截取倒数num个元素
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(-5)//newArr = [3,4,5,6,7]
9.split()转数组
通过指定的分隔符,将字符串分割成数组。
返回值:返回一个新的数组
不改变原数组
let str = wqz-ttj;
let arr = str.split('-');
console.log(arr);// arr=['wqz','ttj'];
10.join()转为字符串
数组里的元素,通过指定的分隔符,以字符串的形式连接起来
返回值:返回一个新的字符串
//将数组用 - 符号连接起来
let arr = [1,2,3,4,5];
let str = arr.join('-');
console.log(str)//str = 1-2-3-4-5;
11.indexOf()查找
查找元素在数组中第一次出现的位置
返回值:存在该元素,返回下标,不存在 返回 -1
不改变原数组
if (arr.indexOf(ele) === -1){//说明元素不存在!!
console.log('元素不存在!)
} else {
console.log(' 元素存在! ')
}
12.lastIndexOf()查找
查找元素最后一次在数组中出现的位置
返回值: 存在该元素,返回下标,不存在 返回 -1
不改变原数组
var list = [1, 2, 3, 4];
var index = list.lastIndexOf(4); //3
var index = list.lastIndexOf("4"); //-1
13.concat()拼接
两个数组里的元素拼接成一个新的数组
返回值: 返回拼接后的新数组
不改变原数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = arr1.concat(arr2);//arr = [1,2,3,4,5,6];
arr1.push(arr2);//arr1 = [1,2,3,[4,5,6]];
该方法和push的区别:push是直接把后一个数组原封不动的添加到第一个数组后面
ES5新增的数组方法
1.forEach()遍历数组
该方法等同于for循环
没有返回值
arr.forEach(function(item,index,arr){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身
})
2.map()映射
map的使用和forEach大致相同
有返回值,返回一个新数组,新数组的长度和原数组的长度相等
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身
let arr = [1,32,54,6,543];
let res = arr.map(function(item,index,arr){
return item*2;
})
console.log('原数组',arr) //输出 '原数组' [1, 32, 54, 6, 543]
console.log('新数组',res) //输出 '新数组' [2, 64, 108, 12, 1086]
3.filter()过滤
遍历数组,把满足条件的数组过滤出来放入新数组
返回值:过滤出符合条件的元素
不改变原数组
let arr = [1, 3, 5, 2, 4, 6];
let res3 = arr.filter(function(item, index) {
return item > 4;
});
console.log(res3); //输出 [5,6]
过滤出布尔类型为true的项
let arr2 = [0, "", undefined,null,false, 1, 3, 4];
let res4 = arr2.filter(function(item, index) {
return item;
});
console.log(res4); //输出 [1,3,4]
4.some()
判断数组中元素是否满足条件,
返回值:只要有一个满足返回true,全部不满足才返回false,
不改变原数组
var list = [1,2,3,4,5];
var result = list.some(function (item, index, array) {
return item >= 3;
});
console.log(result);//输出 true
5.every()
判断数组中元素是否满足条件,
返回值:只要有一个不满足就返回false,全部满足才返回true,
不改变原数组
var list = [1,2,3,4,5];
var result = list.every(function (item, index, array) {
console.log(item, index, array);
return item >= 3;
});
console.log(result);//输出 false
6.find()查找
查找满足条件的元素
返回值:存在返回满足条件的第一个元素,不存在返回undefined
不改变原数组
var arr = [1,2,3,4,5]
var res = arr.index(function(item,index,array) {
return item>=3
})
console.log(res) //输出 3
7.findIndex()查找
find()和findIndex()都是从数组的0号位,依次向后检查
查找满足条件的第一个元素下标
返回值:存在该元素,返回下标,不存在 返回 -1
不改变原数组
注意
findIndex()和indexOf()不同,(刚接触的时候乍一看和indeOf()一模一样,仔细看才发现大有不同)
indexOf()是传入一个值,找到了返回索引,没有找到返回-1属于ES5
findIndex()是传入一个测试条件,也就是函数,找到了返回当前项索引,没有找到返回-1. 属于ES6
var arr = [1,2,3,4,5]
var res = arr.findIndex(function(item,index,array) {
return item>=3
})
console.log(res) //输出 2
该方法可快速查找对象数组满足条件的索引,indexOf不支持
let arr = [{ id: 1, name: 'coco' }, { id: 2, name: 'dudu' }]
let res = arr.findIndex(item => item.id == 1)
console.log(res) //输出 0
8.reduce()求和
将元素进行累计求和
返回最终操作的结果
不改变原数组
var arr = [1,2,3,4]
var he = arr.reduce(function(sum,item,index,array)sum+=item,0)
console(he) //输出 10
sum初始值为0
item 每一个元素
index 下标
array 原数组
ES6新增的数组方法
1.Array.from()
将一个类似数组对象或者可遍历的对象转换成一个真正的数组
包括 ES6 新增的数据结构 Set
注意
讲一个类似数组对象转换为一个真正的数组,必须具备以下条件
-
该 伪数组/类数组 对象必须具有length属性,用于指定数组的长度,如果没有length,那么转换后的数组是一个空数组
-
该 伪数组/类数组 对象的属性名必须为数值类型或者字符串型的数字
var obj = {0:"张三",1:"18",2:"男",length:3}
ES5的写法
var arr1 = [].slice.call(obj); // ['张三', '18', '男']
ES6的写法
var obj1 = Array.from(obj) // ['张三', '18', '男']
如果不加length属性
var all = {0:"张三",1:"18",2:"男"}
var all1 = Array.from(all)
console.log(all1) // 输出 [] 空数组
2.findeLast()和findLastIndex()
findeLast()和findLastIndex(),从数组的最后一个成员开始,依次向前检查
判断元素满足条件
findLast()返回满足条件的元素,不满足返回undefined
findLastIndex()返回满足元素的下标,不满足返回-1
var arr = [1,2,4,5]
arr.findLast(item=>item>4) // 5
arr.findLastIndex(item=>item>4) //下标3
3.includes()包含
判断一个数组是否包含指定的一个值
返回值:包含返回true,不包含返回false
不改变原数组
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob');
// true
site.includes('baidu');
// false
4.set 数据结构
Set数据结构 类似于数组 与数组的区别是里面没有重复的值 Set本身是一个构造函数,用来生成Set数据结构
Set函数可以接受一个数组作为参数,用来初始化。
实例方法
-
add(value):添加某个值 ,返回Set结构本身
-
delete(value):删除某个值,返回一个布尔值,表示是否删除成功
-
has(value):返回一个布尔值,表示该值是否是Set的成员
-
clear():清除所有的成员,没有返回值
const s = new Set();
s.add(1).add(2).add(3); // 向 set 结构中添加值
s.delete(2) // 删除 set 结构中的2值
s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值
s.clear() // 清除 set 结构中的所有值
//注意:删除的是元素的值,不是代表的索引
遍历
Set结构的结构与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值
s.forEach(function(item) {
console.log(item) // 1 2 3
})