【ECMAScript5】ECMAScript5中有关数组的常用方法
1.indexOf()
此方法返回在改数组中第一个找到的元素位置,如果它不存在则返回-1
var arr = ['apple','orange','pear'];
console.log("found:", arr.indexOf("orange") != -1); //true
2.filter(fn)
此方法创建一个新的匹配过滤条件的数组
var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16},
]; var newArr = arr.filter(function(item){
return item.name === "orange";
}); console.log("Filter results:",newArr);// [{"name":"orange", "count": 5},{"name":"orange", "count": 16}]
3.forEach(fn)
此方法用来替换for循环
arr.forEach(function(item,index){
console.log(item);
});
4.map()
对数组的每个元素进行一定的操作(映射)后,会返回一个新的数var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"}];
function getNewArr(){
return oldArr.map(function(item,index){
item.full_name = [item.first_name,item.last_name].join(" ");
return item;
});
}
getNewArr();//[{first_name:"Colin",last_name:"Toh",full_name:"Colin Toh"},{first_name:"Addy",last_name:"Osmani" fll_name:'Addy Osmani'}]
项目中常用到的场景:
将数组中的某项以字符串的形式get给后台
var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
oldArr.map(function(item,index){return item.first_name;}).join();//"Colin,Addy,Yehuda"
或者
oldArr.map(item => item.first_name).join();//"Colin,Addy,Yehuda"
5.reduce(callbackfn [ , initialValue ] )
可以实现一个累加器的功能,将数组的每个值(从左到右)将其降低到一个值
应用场景“统计一个数组中不重复单词
之前解决方案:
var arr = ["apple","orange","apple","orange","pear","orange"]; function getWordCnt(){
var obj = {}; for(var i= 0, i < arr.length; i++){
var item = arr[i];
obj[item] = (obj[item] +1 ) || 1;
} return obj;
} console.log(getWordCnt());
//{apple: 2, orange: 3, pear: 1}
使用reduce()
var arr = ["apple","orange","apple","orange","pear","orange"]; function getWordCnt(){
return arr.reduce(function(prev,next){
prev[next] = (prev[next] + 1) || 1;
return prev;
},{});
} console.log(getWordCnt());//
参考资料:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
https://www.cnblogs.com/leejersey/p/5466091.html
作者:smile.轉角
QQ:493177502
【ECMAScript5】ECMAScript5中有关数组的常用方法的更多相关文章
- 前端开发:Javascript中的数组,常用方法解析
前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...
- JavaScript中数组操作常用方法
JavaScript中数组操作常用方法 1.检测数组 1)检测对象是否为数组,使用instanceof 操作符 if(value instanceof Array) { //对数组执行某些操作 } 2 ...
- javascript中的数组扩展(一)
javascript中的数组扩展(一) 随着学习的深入,发现需要学习的关于数组的内容也越来越多,后面将会慢慢归纳,有的是对前面的强化,有些则是关于前面的补充. 一.数组的本质 数组是按照次序排 ...
- JavaScript中的数组详解
JavaScript中的数组 一.数组的定义 数组是值的有序集合,或者说数组都是数据的有序列表. 二.创建数组 [字面量形式] 1.空数组 var arr=[]; 2.带有元素的数组 var arr= ...
- js 数组的常用方法归纳
数组的常用方法归纳 slice(start,end) 传参:start代表从哪里开始截取,end代表截取结束的地方 var a = [1,2,3]a.slice(1);//[2,3] pop() 可以 ...
- JavaScript中Array数组的方法
查找: indexOf.lastIndexOf 迭代:every.filter.forEach.map.somereduce.reduceRight 用法: /* 1 查找方法: * arr.inde ...
- (68)Wangdao.com第十一天_JavaScript 数组的常用方法
数组的常用方法: 向数组末尾添加一个或多个元素,返回新长度 var arr = new Array(); arr.push("唐僧"); // 返回 1 删除数组最后一个元素,返回 ...
- JavaScript数组对象常用方法
JavaScript数组对象常用方法 方法 形式 返回值 是否改变原数组 描述 concat -items: ConcatArray[] 追加之后的数组 否 连接两个或更多的数组,并返回结果.注意 c ...
- (js) 字符串和数组的常用方法
JS中字符串和数组的常用方法 JS中字符串和数组的常用方法 js中字符串常用方法 查找字符串 根据索引值查找字符串的值 根据字符值查找索引值 截取字符串的方法 字符串替换 字符串的遍历查找 字符串转化 ...
随机推荐
- 汇编语言--微机CPU的指令系统(五)(比较运算指令)
(7)比较运算指令 在程序中,我们要时常根据某个变量或表达式的取值去执行不同指令,从而使程序表现出有不同的功能.为了配合这样的操作,在CPU的指令系统中提供了各种不同的比较指令.通过这些比较指令的执行 ...
- Java并发编程-CountDownLatch
基于AQS的前世今生,来学习并发工具类CountDownLatch.本文将从CountDownLatch的应用场景.源码原理解析来学习这个并发工具类. 1. 应用场景 CountDownLatch是并 ...
- 你所不知道的JSON.stringify
译者按: 老司机们,你知道JSON.stringify还有第二个和第三个可选参数吗?它们是什么呢? 原文: What you didn’t know about JSON.Stringify 译者: ...
- 预览github代码
方法一:最简单的方法,在代码的url前面加上: http://htmlpreview.github.com/? 方法二: 使用Githubpages, 方法一有可能会修改css样式,不过方法二略复杂, ...
- JS之document.cookie详解以及$.cookie的使用
什么是cookie? cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie ...
- python检查URL是否能正常访问
https://blog.csdn.net/u010798367/article/details/53008439 今天,项目经理问我一个问题,问我这里有2000个URL要检查是否能正常打开,其实我是 ...
- Android为TV端助力 MediaPlayer API大全已经方法详解(转载)
通过这张图,我们可以知道一个MediaPlayer对象有以下的状态: 1)当一个MediaPlayer对象被刚刚用new操作符创建或是调用了reset()方法后,它就处于Idle状态.当调用了rele ...
- SQL学习总结-思维导图
- tab 切换实现方法
ul li 实现方法(只适用于,一个页面只有一组ul>li) <!--menu--> <div class="nav"> <ul class=& ...
- JSON语法与JavaScript语法的区别
JSON是独立于语言存在的,在不同的编程语言中对这种数据类型的实现不同,例如在JavaScript中使用JavaScript对象对这种数据格式进行实现,那么在java中当然是用java对象实现. 描述 ...