【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中字符串常用方法 查找字符串 根据索引值查找字符串的值 根据字符值查找索引值 截取字符串的方法 字符串替换 字符串的遍历查找 字符串转化 ...
随机推荐
- 通过css3实现的动画导航菜单代码
用css3样式实现的滑动导航菜单,html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &quo ...
- vue2+webpack 移动生态 常用依赖
1.脚手架:官方的vue-cli已经很方便了 2.路由:vue-router : https://router.vuejs.org/zh-cn/essentials/named-routes.html ...
- canvas-7globleCompositeOperation.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- layui table动态表头 改变表格头部 重新加载表格
改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持con ...
- wamp安装运行时出现服务未启动
安装wamp时,弹出对话框:Aestan Tray Menu Could not execute menu item (internal error )[Exception]could not ser ...
- 自定义控件详解(六):Paint 画笔MaskFilter过滤
首先看一个API:setMaskFilter(MaskFilter maskfilter): 设置MaskFilter,可以用不同的MaskFilter实现滤镜的效果,如滤化,立体等. 以下有两个Ma ...
- XRecyclerView上拉刷新下拉加载
效果图: 首先要添加依赖: //xrecyclerviewimplementation 'com.jcodecraeer:xrecyclerview:1.3.2'//Gsonimplementatio ...
- Statement和PreparedStatement的异同
1.首先两个都是java向数据库执行sql语句的对象! java代码连接数据库,并且执行sql语句的步骤如下: //1.注册数据库的驱动程序 Class.forName(driverClass); / ...
- <解决方法>Centos安装使用Chromedriver
一.安装Chrome 我安装好Centos系统后,就在网上去找Chrome浏览器的安装方法,使用过yum,rpm都安装不上,会报错,然后询问公司的运维,他给我了个包,然后使用:yum localins ...
- 关于谷歌JSV8与微软JSRT的性能比较
首先,我并没有得到实际的比较结果,望有兴趣的朋友可以帮助完成这个比较. benchmarksgame,提供了各种语言的性能比较,但都为linux下的测试,很难比较谷歌与微软的东西. 众所周知,JSV8 ...