数组api整理

穿山甲钻代码
251 阅读5分钟

本篇文章主要记录一下数组的api，对于一名合格的前端工作者，在mdn上面去查一些api的使用方法，想必是极好的，而像 axios echarts git weebpack vue react 这样一些工作中常用的框架，库，辅助的工具等。在官网上去学习，查找相对较好。

[ 参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array ](url)

Array

JavaScript 的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。

描述

数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。

1 连接 arr.join()

    join通常用于将数组的元素拼接成一个字符串，返回一个字符串
    

let arr = ['我','爱','中','国']
  // arr.join('连接符')
  let string =  arr.join('')
  console.log(string);  // 我爱中国

2 reverse() 将数组中各元素颠倒顺序

 let arr = ['我','爱','中','国']
  console.log(arr.reverse());   //['国', '中', '爱', '我']

3 pop() 删除数组中最后一个元素，返回删除的那个值，并将长度减 1。

  let arr = [1,354,56,7,88,42,7,8,5,43]
  console.log(arr.length)  // 10
   console.log(arr.pop())  //43
  console.log(arr.length) // 9

4 shift() 删除数组中第一个元素，返回删除的那个值，并将长度减 1。

let arr = [1,354,56,7,88,42,7,8,5,43]
  console.log(arr.length)  // 10
   console.log(arr.shift())  //1
  console.log(arr.length) // 9

5 unshift() 往数组前面添加一个或多个数组元素，长度要改变

let arr = [1,354,56,7,88,42,7,8,5,43]
  console.log(arr.length)  // 10
   console.log(arr.unshift(100))  //11 
  console.log(arr) // [100, 1, 354, 56, 7, 88, 42, 7, 8, 5, 43]

6 push() 往数组结尾添加一个或多个数组元素，长度要改变

 let arr = [1,354,56,7,88,42,7,8,5,43]
  console.log(arr.length)  // 10
   console.log(arr.push(100))  //11 
  console.log(arr) //[1, 354, 56, 7, 88, 42, 7, 8, 5, 43, 100]

7 splice( ) 插入、删除或替换数组的元素

 let arr = [1,354,56,7,88,42,7,8,5,43]
  console.log(arr.length)  // 10
  // 两个参数 第一个参数用于要删除的起始的位置，第二个表示要删除的个数
  let newArr = arr.splice(0,2)  
  console.log(arr) // [56, 7, 88, 42, 7, 8, 5, 43]

  let arr1 = [1,354,56,7,88,42,7,8,5,43]
    // 三个参数 第一个参数用于要删除的起始的位置，第二个表示要删除的个数，第三个参数用于替换的元素
  let newArr1 = arr1.splice(0,3,99)
   console.log(arr1)   // [99, 7, 88, 42, 7, 8, 5, 43]

8 concat( ) 连接数组

书写格式：arr.concat()，括号里面写内容 (“字符串要加引号”),
    

 let arr = [42,7,8,5,43]
  let arr1 = [1,354,56,]
  let arr2 = arr.concat(arr1)
  console.log(arr2);  //[42, 7, 8, 5, 43, 1, 354, 56]

9 sort( ) 对数组元素进行排序

    // 字符串
  let arr = ['a','c','b','z','g']
  // 默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的
  let newArr1 = arr.sort()
  console.log(newArr1)  //['a', 'b', 'c', 'g', 'z']
    // 数字类型
  let arr1 = [42,8,5,43]
  // 对数字类型，需要借助函数 传两个参数 return的值 a-b 则会从小到大对数组进行排序
  // return的值 b-a 则会从大到小对数组进行排序
 let newArr = arr1.sort( function(a,b){
        return a-b
 })
  console.log(newArr) //[5, 8, 42, 43]
  let newArr2 = arr1.sort( function(a,b){
        return b-a
 })
 console.log(newArr2) //[43, 42, 8, 5]

10 slice( ) 返回数组的一部分

slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。
在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。
如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
    

 let arr = [12,1,3,34,123,565,23]
  // 只设置了一个参数，也就是起始下标为1，所以返回的数组为下标1（包括下标1）开始到数组最后
  let newArr = arr.slice(1)
  console.log(newArr)  //  [1, 3, 34, 123, 565, 23]

  // 设置了两个参数，返回起始下标（包括2）开始到终止下标（不包括6）的子数组。
  let newArr1 = arr.slice(2,6)
  console.log(newArr1); //[3, 34, 123, 565]

11 forEach 遍历所有元素

 let arr = [1, 2, 3];
// 遍历数组的所有元素
arr.forEach((index,item)=>{
  console.log(index,item) 
})

12 every 判断所有元素是否都符合条件

let arr = [1, 2, 3,4,5];
 let arr1 = arr.every((index,item)=>{
    if(item  < 6 )
     return true
})
console.log(arr1) // true

13 map 指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

 let arr = [1, 2, 3, 4, 5]
let arr2 = arr.map(item =>{
return item*2
})
console.log(arr2) // [2, 4, 6, 8, 10]

14 filter 过滤符合条件的元素

let arr = [1, 2, 3, 4];
let arr2 = arr.filter((item, index)=> {
if (item>2) {
return true;
}
})
console.log(arr2); // [3, 4]

15 some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.some(item=> {
return item < 3;
});
console.log(arr2); // true
var arr3 = arr.some(obj=> {
return obj < 1;
});
console.log(arr3); // false

16 findIndex方法,返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

let arr = [1, 5, 10, 15]
let arr1 =  arr.findIndex(value=> {
  return value > 9;
}) // 2
console.log(arr1);

let arr2 =  arr.findIndex(value=> {
  return value <1 ;
}) 
console.log(arr2); // -1

17 Array.Includes 用于判断数组中是否有此元素

let arr = [1, 5, 10, 15]
//arr.includes(2)  参数为2 判断数组中是否有2这个元素 有返回true 没有返回false
let arr1 = arr.includes(2)
console.log(arr1) //false
//arr.includes(5)  参数为5 判断数组中是否有5这个元素 有返回true 没有返回false
let arr2 = arr.includes(5)
console.log(arr2) // true

18 Array.reduce()接受两个参数：一个是对数组每个元素执行的回调方法，一个是初始值。

let arr = [1, 5, 10, 15,6]
//初始值3
let arr1 = arr.reduce((item,sum)=>{
    return sum +=item
},3)
console.log(arr1); //40

19 Array.from方法用于将伪数组转为真正的数组

 // Array.from()把对象转化为数组必须符合2个条件
  // 1 键必须是数值
  //  2 必须带有length的键值对(没有length时显示空对象)
let obj = { 
            '0': 3, 
            '1': 8, 
            '2': 9, 
            '3': 6,
            'length':4 
          }
 let arr = Array.from(obj)
	    console.log(arr); // [3, 8, 9, 6]

20 数组去重indexOf、Set、include

let arr = [1,3,5,76,34,87,23,7,34,7]
 // indexOf去重
 let newList = [];
for (let i = 0; i < arr.length; i++) {
  if (newList.indexOf(arr[i]) === -1) {
    newList.push(arr[i])
  }
}
console.log(newList) // [1, 3, 5, 76, 34, 87, 23, 7]

//Set()去重
let setList = new Set(arr);
let newList1 = [...setList]
console.log(newList1) // [1, 3, 5, 76, 34, 87, 23, 7]

// include()去重
let newList2 = [];
for (let i = 0; i < arr.length; i++) {
  if (!newList2.includes(arr[i])) {
    newList2.push(arr[i])
  }
}
console.log(newList2)  // [1, 3, 5, 76, 34, 87, 23, 7]
avatar
文章
阅读
粉丝