JS数组的几个经典api

更新日期: 2019-05-10阅读: 2.4k标签: 数组

本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。


一、 扁平化嵌套数组/展平和阵列孔——flat()

  1. 实现效果
   var arr1 = [1, 2, [3, 4]];  
   arr1.flat(); // [1, 2, 3, 4] 
   var arr2 = [1, 2, [3, 4, [5, 6]]]; 
   arr2.flat(2); // [1, 2, 3, 4, 5, 6]
   //flat方法删除数组中的空槽: 
   var arr3 = [1, 2, , 4, 5]; 
   arr3.flat(); // [1, 2, 4, 5]

该flat([depth])方法创建一个新数组,所有子数组元素以递归方式连接到指定的深度。depth深度级别指定嵌套数组结构应该展平的深度。默认为1。

2.方法解读:
该方法的实质是利用递归和数组合并方法 concat实现扁平。可以使用

Array.reduce()/Array.some()/Array.concat()
  • 利用Array.reduce()和Array.concat()实现
  const flat1 = function (arr) {
        return arr = arr.reduce((pre, cur) => Array.isArray(cur) ? pre.concat(flat1(cur)) : pre.concat(cur),
        [])
    }
    var arr3 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];
    flat1(arr3); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
  • 利用Array.some()和Array.concat()实现
   const flat2 = function(arr){
      while(arr.some(item=>Array.isArray(item))){
          arr=[].concat(...arr);
      }
      return arr;
    }
    var arr3 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];
    flat2(arr3); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]


二、数组去重——set()

1.实现效果

Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4] 
[...new Set([1,2,3,3,4,4,5,6])] //[1,2,3,4,5]

set是ES6新出来的一种一种定义不重复数组的数据类型。
Array.from是将类数组转化为数组。
...是扩展运算符,将set里面的值转化为字符串。

2.方法解读

function unique(arr) {
        var result =[];
        for (var i = 0; i < arr.length; i++) {
            for (var j = i+1; j < arr.length; j++) {
                if (arr[i] === arr[j]) {
                   j=++i;
                }
               
            }
            result.push(arr[i]);
        }
       return result;
    }
    var arr3 = [1, 2, 3, 3, 4, 5, 4];
    unique(arr3);//(5) [1, 2, 3, 5, 4]


三、数组排序——sort()

1.实现效果

[1,3,2,5,4].sort(); 
[1,3,2,5,4].sort((a,b)=>b-a);

2.方法解读

冒泡排序  

Array.prototype.bulesort = function () {
 let arr = this,
     len = arr.length;
 for (let outer = len; outer >= 2; outer--) {
    for (let inner = 0; inner <= outer - 1; inner++) {
        if (arr[inner] > arr[inner + 1]) {
            [arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]];
        }
    }
}
  return arr; 
}
[3, 4, 2,1].bulesort()//[1,2,3,4]



四、最大值

1.实现效果

Math.max(...[1,2,3,4]); //4
Math.max.apply(this, [1, 2, 3, 4]); //4
[1, 2,3, 4].reduce((prev,cur)=>{
return Math.max(prev, cur); 
},0);//4

2.方法解读
先排序,再取值。


五、求和

1.实现效果

[1, 2, 3, 4].reduce((prev,cur)=>{
return prev+cur; 
},0); //10

2.方法解读

function sum(arr){
 if (arr.length==0){
  return 0;
} else if (arr.length == 1){
    return arr[0];    
}else{
 return arr[0]+sum(arr.slice(1));   
 } 
} 
sum([1, 2, 3, 4]);//10


六、合并

[1,2,3].concat([5,6]); 
[...[1,2,4],...[2,3,5,7]]


七、判断是否有值

[2, 3, 5].indexOf(3);//1 
[2,3,5].includes(4)//false 
[2, 3, 5].find((item) => { item === 3})//1 
[2, 3, 5].findIndex((item) => item === 3)//1 
[2, 3, 5].some(item=>{return item===3 })//true


八、类数组转化

Array.prototype.slice.call(arguments);
Array.prototype.slice.apply(arguments);
Array.from(arguments);
[...arguments]


九、每一项设置值

//array.fill(value, start, end) 
[2, 3, 5].fill(true,false,true);//(3)
[false, false, false] [2, 3, 5].map(() => 0)//(3) [0, 0, 0]


十、每一项是否满足/某一项是否满足

[2, 3, 5].every(item=>{return item>2}) //false 
[2, 3, 5].some(item =>{ return item > 2 })//true


十一、过滤数组

[2, 3, 5].filter(item => { return item > 2 })//(2) [3, 5]


十二、对象和数组转化

Object.keys({ name: '张三', age: 14 })//["name", "age"] 
Object.values({name: '张三', age: 14 })// ["张三", 14] 
Object.entries({ name: '张三', age:14 }) // (2) [Array(2), Array(2)]0: (2)["name", "张三"]1: (2)["age", 14]


链接: https://fly63.com/article/detial/3259

探索JavaScript数组奥秘

avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

JavaScript 数组方法

数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

如何删除JavaScript 数组中的虚值

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

JavaScript常用数组操作方法,包含ES6方法

concat() 方法用于连接两个或多个数组。join() 方法用于把数组中的所有元素放入一个字符串。push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!