js 数组常用方法(归类总结)

一、 js 数组字符串常用方法

1、数组转换为字符串

使用 arr.join()
let arr=[1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.join()   // "1,2,3,4,5,6,7,8,9"

2、字符串转为数组

使用 str.split(’’)
let   str='123456789'
str.split()  // ["1", "2", "3", "4", "5", "6", "6", "7"]

3、数组截取元素

使用 arr.splice(0,1) / 第一个参数起始位置 第二个参数 需要截取的位数 原数组会改变
let arr=[1, 2, 3, 4, 5, 6, 7, 8, 9]   // 需要截取7,8 
arr.splice(6,2)  // [1, 2, 3, 4, 5, 6, 9]

4、字符串截取

使用 str.substring(0,1) 第一个参数起始位置索引 第二个参数 需要截取的参数索引 原字符串不会改变
let  str='123456789'  //需要截取2,3   
str.substring(1,3) 

二、 js 数组常用操作方法

1、es6 filter()

(1)判断数组中是否存在某个元素
var newarr = [
  { num: 1, val: 'ceshi', flag: 'aa' },
  { num: 2, val: 'ceshi2', flag: 'aa2'  }
]
console.log(newarr.filter(item => item.num===2 ))
(2)掉空数组空字符串、undefined、null
var arr = ['1','2',undefined, '3.jpg',undefined]
var newArr = arr.filter(item => item)
console.log(newArr)  
var arr = ['1','2',null, '3.jpg',null]
var newArr = arr.filter(item => item)
console.log(newArr)

>//空字符串里面不能包含空格
var arr = ['1','2','', '3.jpg','']
var newArr = arr.filter(item => item)
console.log(newArr)
  // 最后 ["1", "2", "3.jpg"]

(3)去掉数组中不符合项 (filter、find、findIndex、some、every)
var arr = [20,30,50, 96,50]
var newArr = arr.filter(item => item>40)  
console.log(newArr) 
//2、或者是find方法:参数n代表数组里的每一项,然后find方法内部通过遍历数组里的每一项,找到<0的这一项( - 5 )。
  //返回找到的那一项,find只查出第一个符合条件的结果,如果没有找到返回undefined(这是与filter的区别)
 [1, 4, -5, 10].find((n) => n < 0)    // -5
 //3、findIndex方法:find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
[1, 4, -5, 10].findIndex((value,index,arr) => value < 0)  // 2
// 3、返回Boolean 判断数组中是否有满足callback函数的元素(一旦有符合的元素立即返回true,所以可能不会遍历每一个元素),如果没有找到返回false
let newArr = arr.some((item, index)=>{
    console.log(item) // 1,3,5
    return item>3
})
console.log(newArr) // true
// 4、返回Boolean 判断数组中每一个元素是否满足callback函数(只有所有的元素都满足时才返回true,只要有不满足的元素就立即终止遍历并返回false)
let newArr = arr.every((item, index)=>{
    console.log(item) // 1
    return item>3
})
console.log(newArr) // false
(4)过滤不符合项(filter)
 var arr = ['10','12','23','44','42']
 var newArr = arr.filter(item => item.indexOf('2')<0)
  console.log(newArr)
  //  ["10", "44"]
  //数组filter后,返回过滤后的新数组
  //1、有一个对象数组A,获取数组中指定类型的对象放到B数组中
  var products = [
    {name:"cucumber",type:"vegetable"},
    {name:"banana",type:"fruit"},
    {name:"celery",type:"vegetable"},
    {name:"orange",type:"fruit"}
  ]; 
  var filtered = products.filter((product)=>{
    return product.type === "vegetable";
  })
  console.log(filtered)  //[{name:"cucumber",type:"vegetable"},{name:"celery",type:"vegetable"}]
 // 2、有两个数组(A,B),根据A中id值,过滤掉B数组不等于A中id的数据
 
var post = {id:4,title:"Javascript"};
var comments = [
    {postId:4,content:"Angular4"},
    {postId:2,content:"Vue.js"},
    {postId:3,content:"Node.js"},
    {postId:4,content:"React.js"}   
 ];
 function commentsForPost(post,comments){
    return comments.filter(function(comment){
      return comment.postId === post.id;
    })
 }

 console.log(commentsForPost(post,comments));  //[ {postId:4,content:"Angular4"},{postId:4,content:"React.js"}]

(5)filter数组去重
 var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)  
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]
(6)获取数组中指定字段(元素)(map、filter)
1 var users = [
 2   {name: "张含韵", "email": "zhang@email.com"},
 3   {name: "江一燕",   "email": "jiang@email.com"},
 4   {name: "李小璐",  "email": "li@email.com"}
 5 ];
 6 //获取所有人的email
 7 var emails=users.map(user=>user.email) 
 8 console.log(emails.join(',')) //"zhang@email.com",  "jiang@email.com", "li@email.com"
 9 //获取指定人的email
10 var liEmail=emails.filter(email=>/^li/.test(email))
11 console.log(liEmail.join('')) //li@email.com
(7)从数组获取某个字段重新生成数组(map)
var building=[
    {name:'the Great Wall',location:'BeiJing'},
    {name:'Eiffel Tower',location:'Paris '}
]
var citys=building.map(item=>{
    return item.location
})
console.log(citys)  //["BeiJing", "Paris "]
(8)判断数组是否包含某个元素(includes)
let arr = [1,3,5,6,3]
1、console.log(arr.includes(3)); // true
2(arr, target) => {
  return arr.includes(target);
}
//findIndex
3(arr, target) => {
  return arr.findIndex(el => el === target) >= 0;
}

2、数组去重

(1)、Array.filter() + indexOf

方法思路:将两个数组拼接为一个数组,然后使用 ES6 中的 Array.filter() 遍历数组,并结合 indexOf 来排除重复项

function distinct(a, b) {
    let arr = a.concat(b);
    return arr.filter((item, index)=> {
        return arr.indexOf(item) === index
    })
}
(2)、双重 for 循环

方法思路:外层循环遍历元素,内层循环检查是否重复,当有重复值的时候,可以使用 push(),也可以使用 splice()

function distinct(a, b) {
    let arr = a.concat(b);
    for (let i=0, len=arr.length; i<len; i++) {
        for (let j=i+1; j<len; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1);
                // splice 会改变数组长度,所以要将数组长度 len 和下标 j 减一
                len--;
                j--;
            }
        }
    }
    return arr
}
(3)、for…of + includes()

方法思路:双重for循环的升级版,外层用 for…of 语句替换 for 循环,把内层循环改为 includes()。先创建一个空数组,当 includes() 返回 false 的时候,就将该元素 push 到空数组中 。类似的,还可以用 indexOf() 来替代 includes()

function distinct(a, b) {
    let arr = a.concat(b)
    let result = []
    for (let i of arr) {
        !result.includes(i) && result.push(i)
    }
    return result
}
(4)、Array.sort()

方法思路:首先使用 sort() 将数组进行排序,然后比较相邻元素是否相等,从而排除重复项

function distinct(a, b) {
    let arr = a.concat(b)
    arr = arr.sort()
    let result = [arr[0]]

    for (let i=1, len=arr.length; i<len; i++) {
        arr[i] !== arr[i-1] && result.push(arr[i])
    }
    return result
}
(5)、new Set()

ES6 新增了 Set 这一数据结构,类似于数组,但Set 的成员具有唯一性

function distinct(a, b) {
    return Array.from(new Set([...a, ...b]))
}
(6)、new Set()

方法思路:首先创建一个空对象,然后用 for 循环遍历,利用对象的属性不会重复这一特性,校验数组元素是否重复

function distinct(a, b) {
    let arr = a.concat(b)
    let result = []
    let obj = {}

    for (let i of arr) {
        if (!obj[i]) {
            result.push(i)
            obj[i] = 1
        }
    }
    return result
}

测试结果一目了然,几种方法的性能 6>5>4>3>1>2

2、数组对象去重

(1)、Array.filter() + indexOf

reduce()方法接收一个回调函数作为第一个参数,回调函数又接受四个参数,分别是:
1.previousValue => 初始值或上一次回调函数叠加的值;
2. currentValue => 本次回调(循环)将要执行的值;
3. index =>“currentValue”的索引值;
4. arr => 数组本身;

reduce()方法返回的是最后一次调用回调函数的返回值;

 let log = console.log.bind(console);
let arr = [1,2,3,4,5,6];
arr = arr.reduce((previousValue, currentValue) => {
     return previousValue + currentValue; //返回的是最后一次调用回调函数的值,15+6;
})
log(arr); // 21
//上面代码的最终结果就是1+2+3+4+5+6 = 21;

需要注意的是,如果设置了initialValue的值,第一次执行回调函数的previousValue的值等于initialValue,此时查看当前索引(index)为0;但如果不设置initialValue的值,previousValue的值为数组的第一项,并且索引值(index)为1;也就是说,不设置初始值的话reduce()方法实际是从第二次循环开始的!

let log = console.log.bind(console);
let person = [
     {id: 0, name: "小明"},
     {id: 1, name: "小张"},
     {id: 2, name: "小李"},
     {id: 3, name: "小孙"},
     {id: 1, name: "小周"},
     {id: 2, name: "小陈"},   
];
let obj = {};
person = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
},[]) //设置cur默认类型为数组,并且初始值为空的数组
log(person);

redecu()除了累加和去重外,功能还有很多,比如可以扁平化多维数组——

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);
}, []); // [0,1,2,3,4,5]

3、数组排序 sort a-b正向 b-a 反向

正向

var arr=[3,5,5,80,4]
var arr=arr.sort(function  (a,b) {
return a-b;
})
console.log(arr) //[3, 4, 5, 5, 80];

反向

var arr=[3,5,5,80,4]
var arr=arr.sort(function  (a,b) {
return b-a;
})
console.log(arr) //[80, 5, 5, 4, 3]
  • 0
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值