写给前端小白的入门技术白皮书01-数组常用方法

89 阅读4分钟

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

添加或删除数组中的元素,返回被删除的项目。该方法会改变原数组

  1. 只有一个参数时。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]
  1. 两个参数时。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]
  1. 大于两个参数时。splice(index , number , item1, …, itemX ):

    1. index >0 时
      1. number 为 0 时, 不删除只添加, 在index位置前添加item1, …, itemX的数
      2. number > 0 删除且添加, 在index位置前添加item1, …, itemX的数,并且删除从index位置开始的数,number为删除的个数
    2. index <0 时 最后一个数为 -1 依次倒数第二个数为-2
      1. number 为 0 时 不删除只添加, 在-index位置前添加item1, …, itemX的数
      2. number > 0 删除且添加, 在-index位置前添加item1, …, itemX的数,并且删除从-index位置开始的数,number为删除的个数
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中新增的一些方法:

数组的扩展 - ECMAScript 6入门

另推荐一个函数库,里面封装了很多好用的方法,可以尝试学习使用

Lodash 中文文档(v4.17.10)