Array.isArray()
判断是否是数组
let a = [1,2,3];
Array.isArray(a); // true
let b = 'aaa';
Array.isArray(b) // false
length
获取数组长度
let arr = [1,2,3,4,5];
arr.length; // 5
indexOf
判断数组中是否存在某元素,存在则返回元素的下标,不存在返回-1
let arr = [1,2,3,4,5];
arr.indexOf(2); // 1
arr.indexOf(20); // -1
includes
判断数组中是否存在某元素,存在返回true, 不存在返回false
let arr = [1,2,3,4,5];
arr.includes(2); // true
arr. includes(20); // false
map
对数组进行遍历,如果有return则返回新的数组, 如果没有则只进行遍历
使用时一般都是需要返回新数组时使用,如果只是进行单独的遍历 应使用forEach
let arr = [
{cname: '金山', ename: 'ks'},
{cname: '万国', ename: 'wg'},
]
let newArr = arr.map(item => {
console.log(item.cname); // 金山 万国
return {
lable: item.cname,
value: item.ename
}
})
// es6 写法简写为
let newArr = arr.map(item => ({
lable: item.cname,
value: item.ename
}))
console.log(newArr);
// [
// {lable: '金山', value: 'ks'},
// {lable: '万国', value: 'wg'},
// ]
forEach
对数组进行遍历,无返回值
let arr = [
{cname: '金山', ename: 'ks'},
{cname: '万国', ename: 'wg'},
]
arr.forEach(item => {
// 增加属性
if(item.ename=== 'ks') {
item.disabled = true;
} else {
item.disabled = false;
}
})
console.log(arr);
// [
// {cname: '金山', ename: 'ks', disabled: true},
// {cname: '万国', ename: 'wg', disabled: false},
// ]
filter
过滤符条件的数组,返回过滤后的数组,若无符合条件的,则返回空数组
let arr = [
{cname: '金山', ename: 'ks'},
{cname: '万国', ename: 'wg'},
]
const newArr = arr.filter(item => {
return item.ename === 'ks'
})
// 简写
const newArr = arr.filter(item => item.ename === 'ks')
console.log(newArr);
// [
// {cname: '金山', ename: 'ks'},
// ]
find
查找出符合条件的元素,map返回的是新数组,而find是返回的查找的第一个符合条件的元素
let arr = [
{cname: '金山', ename: 'ks'},
{cname: '万国', ename: 'wg'},
{cname: '万国', ename: 'ks'},
]
const idc = arr.find(item => item.ename === 'ks')
console.log(idc); // {cname: '金山', ename: 'ks'} // 返回第一个查找到的
findIndex
查找的第一个符合条件的元素的下标,如果未找到则返回-1
let arr = [
{cname: '金山', ename: 'ks'},
{cname: '万国', ename: 'wg'},
{cname: '万国', ename: 'ks'},
]
const index = arr.findIndex(item => item.ename === 'ks')
console.log(index); // 0
const index2 = arr.findIndex(item => item.ename === 'ksaaaa')
console.log(index); // -1
concat
数组拼接
const a = [1,2,3];
const b = [4,5,6];
let c = a.concat(b);
console.log(c); // [1,2,3,4,5,6];
// 使用es6拓展运算符 ...
let d = [...a, ...b]
console.log(d); // [1,2,3,4,5,6];
slice
slice(start,end):方法可从已有数组中返回选定的元素,返回一个新数组,包含从start到end(不包含该元素)的数组元素。(不会改变原数组)
- start参数:必须,规定从何处开始选取,如果为负数,规定从数组尾部算起的位置,-1是指最后一个元素。
- end参数:可选(如果该参数没有指定,那么切分的数组包含从start倒数组结束的所有元素,如果这个参数为负数,那么规定是从数组尾部开始算起的元素)。
let a = [3,4,5,6,22,66,55];
const b = a.slice(1,2);
// a: [3,4,5,6,22,66,55];
// b: [4]
a.slice(1,4) // [4, 5, 6]
a.slice(2) // [5,6,22,66,55]
a.slice(-1) // [55]
a.slice(-2) // [66, 55]
splice
添加或删除数组中的元素,返回被删除的项目。该方法会改变原数组
- 只有一个参数时。splice(index):从index的位置开始,删除之后的所有元素(包括第index个)
let a = [1,2,3,4,5,6];
const b = a.splice(1);
// a: [1];
// b: [2,3,4,5,6]
- 两个参数时。splice(index, number):删除从index位置开始的数,number为删除的个数, 若 number 小于等于 0,则不删除
let a = [1,2,3,4,5,6];
const b = a.splice(1, 2);
// a: [1,4,5,6];
// b: [2,3]
-
大于两个参数时。splice(index , number , item1, …, itemX ):
- index >0 时
- number 为 0 时, 不删除只添加, 在index位置前添加item1, …, itemX的数
- number > 0 删除且添加, 在index位置前添加item1, …, itemX的数,并且删除从index位置开始的数,number为删除的个数
- index <0 时 最后一个数为 -1 依次倒数第二个数为-2
- number 为 0 时 不删除只添加, 在-index位置前添加item1, …, itemX的数
- number > 0 删除且添加, 在-index位置前添加item1, …, itemX的数,并且删除从-index位置开始的数,number为删除的个数
- index >0 时
let a = [1,2,3,4,5,6];
a.splice(1, 2, 7);
// a: [1, 7, 4, 5, 6]
join
数组转字符串
let arr = ['hello', 'world'];
const str = arr.join(','); // 用,拼接: 'hello,world'
const str1 = arr.join(':'); // 用:拼接: 'hello:world'
// 另外对应的字符串转数组方法是split
let str = 'hello, world';
str.split(','); // ['hello', 'world']
str.split('o'); // ['hell', 'w', 'rld']
push
向数组的尾部添加新的元素
let a = [1,2,3,4];
a.push(5,6,7);
console.log(d); // [1,2,3,4,5,6];
pop
弹出数组最后一个元素, 返回弹出的元素
let a = [1,2,3,4];
let b = a.pop();
console.log(a); // [1,2,3];
console.log(b); // 4
其他方法
其他还有很多方法如shift,unshift, sort, reverse 等等 可自行查阅学习
还有es6中新增的一些方法:
另推荐一个函数库,里面封装了很多好用的方法,可以尝试学习使用