让开发事半功倍-js数组处理方法

happen 发布于2019-08-26 13:44 / 2169人阅读

摘要：日常开发中，如果熟悉一般的数组处理方法，常能事半功倍，有更多时间学习其他技术，形成正向循环。这里总结常用的数组处理方法。

日常开发中，如果熟悉一般的数组处理方法，常能事半功倍，有更多时间学习其他技术，形成正向循环。

这里总结常用的js数组处理方法。

遍历查找 Array.filter() 过滤

返回新数组，不改变原数组

不检查空数组

let holidays = [1, 3, 5, 7];
getSmaller = (item) => item > 3;
holidays.filter(getSmaller);
// [5, 7]

Array.every()

返回 boolean

every() 方法用于检测数组所有元素是否都符合指定条件

every() 方法使用指定函数检测数组中的所有元素

every() 不会改变原始数组。

let holidays = [1, 3, 5, 7];
biggerThan3 = (item) => item > 3;
holidays.every(biggerThan3);
// false

Array.find()

const peoples = [
    {
        name: "jane",
        age: 23
    },
    {
        name: "dannel",
        age: 43
    },
    {
        name: "bruce",
        age: 56
    }
];

findJane = (item) => item.name === "jane";

const Jane = peoples.find(findJane)
// {name: "jane", age: 23}

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined

注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

求和排序 Array.reduce() 求和

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

const numbers = [1, 2, 3, 4, 5, 6];
getSum = (total, curValue) => total + curValue
const sum = numbers.reduce(getSum)
// 21

Array.reduceRight()

与reduce() 类似

const sum = [0, 1, 2, 3].reduceRight((a, b) => a + b);
// sum is 6

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

reduce与reduceRight区别

var a = ["1", "2", "3", "4", "5"]; 
var left  = a.reduce((sum, cur) => sum + cur); 
var right = a.reduceRight((sum, cur) => sum + cur); 

console.log(left);  // "12345"
console.log(right); // "54321"

Array.sort()

Array.sort()会将数组的数值转化成字符串，然后根据UTF-16 code 比较大小

var months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// [1, 100000, 21, 30, 4]

如果想要对数组降序、升序排序，就需要变通一点。原理：

function compare(a, b) {
  if (a 大于 b) { // a、b的类型可以是任意的，比较规则自己定义
    return -1;
  }
  if (a 小于 b) {
    return 1;
  }
  // a 等于 b
  return 0;
}

例如，1、如果是数字数组：

let numbers = [2, 31, 34, 1, 9];
numbers.sort(function(a, b) {
    return a - b;
})

使用箭头函数,可以使代码更加简洁：

let numbers = [2, 31, 34, 1, 9];
numbers.sort((a, b) => a - b)

2、数组对象

var items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37 }
];

// 根据value排序
items.sort(function (a, b) {
  return a.value - b.value;
});

// 根据name排序
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // 去除大小写的影响
  var nameB = b.name.toUpperCase(); // 去除大小写的影响
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
});

判断 includes() 判断存在

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

参考：
1、mdn
2、菜鸟教程

GPU云服务器云服务器怎么让js方法停止 js怎么让方法阻塞 js数组方法 js数组操作方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109402.html

26天学通前端开发（配资料）

摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。前言好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。网上有很多前端的学习路径文章，大多是知...

blair 2019-08-21 16:59 评论0 收藏0
Vue插件开发初体验——（懒加载）

摘要：插件开发初体验懒加载前言闲来无事，想自己开发一个简单的懒加载插件，能力的提升我觉得是可以通过编写插件实现，研究了一下官网的插件编写。 Vue插件开发初体验——（懒加载）前言闲来无事，想自己开发一个简单的Vue懒加载插件，能力的提升我觉得是可以通过编写插件实现，研究了一下官网的Vue插件编写。马上自己独立开始编写懒加载插件。一、写在前面由于我在网上看了很多关于vue插件的实例，发...

monw3c 2019-08-22 18:44 评论0 收藏0
滴滴一下，小程序专车来了

摘要：功能三滴滴费用计算古人云细节决定成败，一个良好的微信小程序往往就是一些细节打动人心，居然是模仿，虽做不到百分百，至少还是很希望一模一样。最近时常感叹道：时间总是那么的快，转瞬即逝。对于像我这种刚入门的小生来讲，技术每天都在更新，框架也层出不穷，有时候还没弄懂这个知识大牛们又推出了更好的技术。当然学习好的技术也是十分重要的。但是在学习之后怎样才能够得到自己想要的呢，一个好的建议便是静...

SwordFly 2019-08-26 12:00 评论0 收藏0
一种SPA（单页面应用）架构

摘要：个人认为单页面应用的优势相当明显前后端职责分离，架构清晰前端进行交互逻辑，后端负责数据处理。上面的这种单页面应用也有其相应的一种开发工作流，当然这种工作流也适合非单页面应用进行产品功能原型设计。未经允许，请勿转载。本文同时也发布在我的博客。（如果对SPA概念不清楚的同学可以先自行了解相关概念）平时喜欢做点小页面来玩玩，并且一直采用单页面应用（Single Page Appl...

Codeing_ls 2019-08-21 12:23 评论0 收藏0