首页 / JAVASCRIPT / JavaScript中的数组(Array)方法你真的了解吗?

JavaScript中的数组(Array)方法你真的了解吗?

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript中的数组(Array)方法你真的了解吗?，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5040字，纯文字阅读大概需要8分钟。

内容图文

在过去的几个月，我发现我的拉取请求中存在四个完全相同的 JavaScript 错误。于是我写了这篇文章，总结了如何在 JavaScript 中正确使用地使用 Array 的方法！

用 Array.includes 代替 Array.indexOf

“如果你要在数组中查找元素，请使用 Array.indexOf”。我记得在学习 JavaScript 的时候，在教材中读到这样的一句话。毫无疑问，这句话是真的！

MDN 文档写道，Array.indexOf 将“返回第一次出现给定元素的索引”。因此，如果我们稍后要在代码中使用这个返回的索引，那么使用 Array.indexOf 找到索引就对了。

但是，如果我们只想知道数组是否包含某个值，该怎么办？这似乎是一个是与否的问题，或者说是一个布尔值问题。对于这种情况，我建议使用返回布尔值的 Array.includes。

 'use strict';
 ?
 const characters = [
   'ironman',
   'black_widow',
   'hulk',
   'captain_america',
   'hulk',
   'thor',
 ];
 ?
 console.log(characters.indexOf('hulk'));
 // 2
 console.log(characters.indexOf('batman'));
 // -1
 ?
 console.log(characters.includes('hulk'));
 // true
 console.log(characters.includes('batman'));
 // false


 ?
 使用 Array.find 而不是 Array.filter

Array.filter 是一个非常有用的方法。它接受一个回调函数作为参数，基于一个包含所有元素的数组创建出一个新的数组。正如它的名字一样，我们使用这个方法来过滤元素，获得更短的数组。

但是，如果回调函数只能返回一个元素，那么我就不推荐使用这个方法，例如使用回调函数来过滤唯一 ID。在这种情况下，Array.filter 将返回一个只包含一个元素的新数组。我们的意图可能是通过查找特定的 ID 找到数组中包含的唯一值。

我们来看看这个方法的性能。要返回与回调函数匹配的所有元素，Array.filter 必须遍历整个数组。此外，我们假设有数百个元素可以满足回调参数，那么过滤后的数组会非常大。

为了避免这种情况，我建议使用 Array.find。它需要一个像 Array.filter 一样的回调函数作为参数，并返回满足回调函数的第一个元素的值。此外，只要找到第一个满足回调函数的元素，Array.find 就会停止，无需遍历整个数组。通过 Array.find 来查找元素，我们可以更好地理解我们的意图。

 'use strict';
 ?
 const characters = [
   { id: 1, name: 'ironman' },
   { id: 2, name: 'black_widow' },
   { id: 3, name: 'captain_america' },
   { id: 4, name: 'captain_america' },
 ];
 ?
 function getCharacter(name) {
   return character => character.name === name;
 }
 ?
 console.log(characters.filter(getCharacter('captain_america')));
 // [
 //   { id: 3, name: 'captain_america' },
 //   { id: 4, name: 'captain_america' },
 // ]
 ?
 console.log(characters.find(getCharacter('captain_america')));
 // { id: 3, name: 'captain_america' }

用 Array.some 代替 Array.find

我承认这个错误我犯了很多次。然后，一位善良的朋友告诉我，最好可以先参考 MDN 文档。这与上面的 Array.indexOf/Array.includes 非常相似。

在前面的例子中，我们看到 Array.find 需要一个回调函数作为参数，并返回一个元素。如果我们想要知道数组是否包含某个值，Array.find 是最好的解决方案吗？可能不是，因为它返回的是一个元素值，而不是一个布尔值。

对于这种情况，我建议使用 Array.some，它返回所需的布尔值。另外，从语义上看，Array.some 表示我们只想知道某个元素是否存在，而不需要得到这个元素。

 'use strict';
 ?
 const characters = [
   { id: 1, name: 'ironman', env: 'marvel' },
   { id: 2, name: 'black_widow', env: 'marvel' },
   { id: 3, name: 'wonder_woman', env: 'dc_comics' },
 ];
 ?
 function hasCharacterFrom(env) {
   return character => character.env === env;
 }
 ?
 console.log(characters.find(hasCharacterFrom('marvel')));
 // { id: 1, name: 'ironman', env: 'marvel' }
 ?
 console.log(characters.some(hasCharacterFrom('marvel')));
 // true

使用 Array.reduce 而不是链接 Array.filter 和 Array.map

让我们面对现实吧，Array.reduce 不容易理解。事实确实如此！但是，如果我们使用 Array.filter 和 Array.map 的组合，感觉缺少了什么，对吧？

我的意思是，我们遍历了两次数组。第一次过滤数组并创建一个较短的数组，第二次又基于 Array.filter 获得数组创建一个包含新值的数组。为了获得我们想要的新数组，我们使用了两个 Array 方法。每个方法都有自己的回调函数和一个用不到的数组——由 Array.filter 创建的那个数组。

为了避免这种性能损耗，我的建议是使用 Array.reduce。结果是一样的，代码却更简单！我们可以使用 Array.reduce 进行过滤，并将目标元素添加到累加器中。累加器可以是递增的数字、要填充的对象、要连接的字符串或数组。

在我们的例子中，因为之前使用了 Array.map，所以我建议使用 Array.reduce 将满足条件的数组元素加入到累加器中。在下面的示例中，根据 env 值的具体情况，我们将它添加到累加器中或保持累加器不变。

 'use strict';
 ?
 const characters = [
   { name: 'ironman', env: 'marvel' },
   { name: 'black_widow', env: 'marvel' },
   { name: 'wonder_woman', env: 'dc_comics' },
 ];
 ?
 console.log(
   characters
     .filter(character => character.env === 'marvel')
     .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
 );
 // [
 //   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
 //   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
 // ]
 ?
 console.log(
   characters
     .reduce((acc, character) => {
       return character.env === 'marvel'
         ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
         : acc;
     }, [])
 )
 // [
 //   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
 //   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
 // ]

OK,这篇文章就写到这里咯.这篇文章比较短,但是看似这些方法都比较简单,但是要能够灵活运用,提高效率还是要多练习的.

更多前端学习内容文章干货请关注我的知乎专栏(不断更新),以后有新文章会提醒您,下面的链接是我知乎文章的集合,我把所有重要的文章放在这个目录里面,供大家阅读,希望能对大家有用

阿里名厂标准web前端高级工程师教程目录大全,从基础到进阶,看完保证您的薪资上升一个台阶

内容总结

以上是互联网集市为您收集整理的JavaScript中的数组(Array)方法你真的了解吗?全部内容，希望文章能够帮你解决JavaScript中的数组(Array)方法你真的了解吗?所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/632567.html

来源：【匿名】

【上一篇】你认为你的javascript库依赖安全嘛?我告诉你,不安全!往下看你就知道了【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript中的数组(Array)方法你真的了解吗?】教程文章相关的互联网学习教程文章

javascript基础（Array）【代码】

1，join()Array.join()，不改变原数组，将数组中所有元素转换为字符串并连接在一起，返回最后生成的字符串let a=[1,2,3]; a.join(); // =>"1,2,3" a.join(" "); // =>"1 2 3" a.join("-"); // =>"1-2-3" let b=new Array(5); b.join("-"); // => "----" 4个连字号 2，reverse()Array.reverse()，改变原数组，将数组中的元素颠倒顺序，返回逆序后的数组let a=[1,2,3]; a.reverse(); // =>[3,2,1]3，sort()Array.sort()，改变原...

JavaScript Array 对象方法every,some,filter,map归档【代码】

erery,都为真,返回真some,有一真,返回真filter,返回满足的真map,处理每一返回注意： every,some,filter,map不会对空数组进行检测。注意：every,some,filter,map不会改变原始数组。 array.every(function(currentValue,index,arr), thisValue) every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。every() 方法使用指定函数检测数组中的所有元素：如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且...

<JavaScript> 二. array对象的属性和方法【代码】

1<!DOCTYPE html> 2<html> 3<head> 4<title></title> 5<script type="text/javascript"> 6/* 7 数组对象8*/ 910// -------------- 属性 ---------------11// 1. length属性动态获取数组长度12var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; 13document.write(arr.length); 14document.write("<hr>"); 1516document.write("类型: "+typeof(arr) +", 值: "+ arr); 17document.write("<hr>"...

JavaScript-数组Array（内置方法）【代码】

arraysplice：对数组中的元素进行删除或添加需要三个参数/空值则删除所有,但原数组不变。第二参数使用其他类型使用方法的数组为空，第一参数则是原数组为空，使用方法拷贝过去1. 添加或删除的下标位置/必需/限定Number型,单独一个数值0则返回所有不操作数组2. 设置删除元素的数量，从设定起始位置到结束位置，可以是0，不填则删除到数组末尾/可选/Number3. 要添加到数组的数据/可选/任意值，可多个值，但要用逗号隔开使用：[‘...

javascript日志-array数组去重【代码】

① array数组去重 var arr1 = [1,5,5,6,8,8,9];function unique (array) {var arr2 = [];for(var i = 0;i < arr1.length;i++){if(arr2.indexOf(arr1[i]) == -1){arr2.push(arr1[i]);}}return arr2;}console.log(unique(arr1)); //[1, 5, 6, 8, 9] ② array以原生链的方式数组去重，按从小到大排序 var arr1 = [5,5,1,8,8,6,9];Array.prototype.unique = function () {this.sort();var arr2 = [this[0]];for(var i=1;i<this.l...

[Javascript] JavaScript Array Methods in Depth - push【代码】

Array push is used to add elements to the end of an Array. In this lesson we‘ll see how the push method accepts multiple arguments, can be used to merge two arrays,. Push can accept multi args:const pets = ["dog", "hamster"]; pets.push("cat"); console.log(pets); //["dog", "hamster", "cat"] pets.push("brid", "horse"); console.log(pets); //["dog", "hamster", "cat", "brid", "horse"] Push can merge t...

javascript-Array(数组)【代码】

迁移时间：2017年5月25日08:05:33 UpdateTime--2017年3月31日16:29:08（二）数组（Array）1.用法//js声明数组的两大类方式 // 第一类（通常使用）var array1 = [];//初始化var array2 = [1,2,3];//声明并赋值 array2[2] = 4;//指定固定位置数组元素的值 array2.push(6);//1,2,4,6 // 第二类var array3 = new Array(); array3.push("张三"); var array4 = new Array(3);//声明数组并指定长度 array4[0] = "张三"; array4.push("name...

JavaScript之Array常用函数汇总【代码】

[20141121]JavaScript之Array常用功能汇总*:first-child {margin-top: 0 !important; }body>*:last-child {margin-bottom: 0 !important; }/* BLOCKS =============================================================================*/p, blockquote, ul, ol, dl, table, pre {margin: 15px 0; }/* HEADERS =============================================================================*/h1, h2, h3, h4, h5, h6 {margin: 20p...

怎么去掉javascript 的Array的重复项【代码】

//完美去除法：var arr=[1,3,2,2,11,4]; var arr1=[]; var arr2=arr.sort(function(a,b){return a-b; }); //把数组进行排序var num=1; for (var i=0;i<arr2.length;i++){if(arr2[i]!==arr2[(num++)]){arr1.push(arr[i]);} } console.log(arr1); 原文：http://www.cnblogs.com/weven/p/7183191.html

JavaScript的进阶之路（三）引用类型之Object类型和Array类型【代码】

引用类型Object类型function a(num){if(num>3){a(--num); }console.log(num); }a(5);//如何创建对象的实例var obj1= new Object();console.log(obj1);obj1.name="吴琼";obj1.age=28;console.log(obj1.name+" "+obj1.age);//对象字面量语法，有点封装的感觉var obj2 = {name:"吴琼",age:28};var obj3 = {age:28,age_wo:30};console.log(obj3["age_wo"]);console.log(obj2.name+" "+obj2.age);function show(arg){var s="";if(ar...

Javascript TypedArray 解惑：Uint8Array 与 Uint8ClampedArray 的区别

JS的类型数组大体可分为3类：无符号整数、有符号整数、浮点数。Int8Array; Uint8Array; Uint8ClampedArray; Int16Array; Uint16Array; Int32Array; Uint32Array; Float32Array; Float64Array;基本上都可以望文生义，看名字就知道怎么回事。但是有一个例外 Uint8ClampedArray ，它与 Uint8Array 颇为相似，但又有所区别。因为颜色数据刚好都是符合8位二进制的无符号整数，所以这两个类型在处理Canvas绘图数据时常常用到。Uint8Clamp...

JavaScript------去掉Array中重复值【代码】

转载：http://blog.csdn.net/teresa502/article/details/7926796代码：// 删除数组中重复数据function removeDuplElem(array){ for(var i=0; i<array.length; i++){for(var j=i+1; j<array.length;j++){if(array[i]==array[j]){array = removeElement(j,array);//删除指定下标的元素i=-1;break;}}　　}return array; } //删除数组用到的函数function removeElement(index,array){if(index>=0 && index<array.length){for(var i...

[LeetCode][JavaScript]Patching Array【代码】

Patching ArrayGiven a sorted positive integer array nums and an integer n, add/patch elements to the array such that any number in range [1, n] inclusive can be formed by the sum of some elements in the array. Return the minimum number of patches required.Example 1:nums = [1, 3], n = 6Return 1.Combinations of nums are [1], [3], [1,3], which form possible sums of: 1, 3, 4.Now if we add/patch 2 to n...

JavaScript Array 对象参考手册

JavaScript Array 对象Array 对象Array 对象用于在变量中存储多个值:var cars = ["Saab", "Volvo", "BMW"];第一个数组元素的索引值为 0，第二个索引值为 1，以此类推。更多有关JavaScript Array参考手册请参考 JavaScript Array 对象手册。Array 对象属性方法描述concat()连接两个或更多的数组，并返回结果。every()检测数值元素的每个元素是否都符合条件。filter()检测数值元素，并返回符合条件所有元素的数组。indexOf()搜索数组...

JS中集合对象(Array、Map、Set)及类数组对象的使用与对比【代码】

原文地址在使用js编程的时候，常常会用到集合对象，集合对象其实是一种泛型，在js中没有明确的规定其内元素的类型，但在强类型语言譬如Java中泛型强制要求指定类型。ES6引入了iterable类型，Array，Map，Set都属于iterable类型，它们可以使用for...of循环来遍历，都内置forEach方法。数组遍历普通遍历最简单的一种，也是使用频率最高的一种。let arr = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘] for (let i =0; i <arr.length; i++) {conso...

首页 / JAVASCRIPT / JavaScript中的数组(Array)方法你真的了解吗?

JavaScript中的数组(Array)方法你真的了解吗?

内容导读

内容图文

用 Array.includes 代替 Array.indexOf

用 Array.some 代替 Array.find

使用 Array.reduce 而不是链接 Array.filter 和 Array.map

内容总结

内容备注

内容手机端

【JavaScript中的数组(Array)方法你真的了解吗?】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

数组 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程