【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中字符串常用方法 查找字符串 根据索引值查找字符串的值 根据字符值查找索引值 截取字符串的方法 字符串替换 字符串的遍历查找 字符串转化 ...
随机推荐
- oracle中row_number() over()
ROW_NUMBER() OVER函数的基本用法语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN)简单的说row_number()从1开 ...
- html/css的学习之路(2)
今天我跟大家说一下html,html里面其实什么东西都可以放进去的.首先创建一个文本,改变他的后缀名为html.这时有个最重要的一点不管是html还是css都不可以用中文和符号命名. 这是html中的 ...
- K8S flannel
kubernetes网络通信方式有: 容器间的通信 : pod内的容器通信 通过(lo)设备 Pod之间的通信 :pod IP <-----> pod IP ,K8S 要求所有的 pod ...
- CSS3动画属性:动画(animation)
一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
- SAP WM 有无保存WM Level历史库存的Table?
SAP WM 有无保存WM Level历史库存的Table? 前日下班回家的路上,收到一个前客户内部顾问同行发过来的微信,问我在SAP系统里哪个表是用来存储WM Level历史库存的. 这个问题问住了 ...
- 使用SQL查看表字段和字段说明
MySql: show full columns from tableName; Sql server: SELECT A.name AS table_name, B.name AS column_n ...
- Charles 抓包手机app
最近在测为移动端提供的API, 使用mac系统, 发现fiddler在mac下无法使用, 不知道其他朋友是否遇见过, 只能找替代工具. 先去百度上搜索下载Charles 破解版, 选择Charles是 ...
- LeetCode题解之 Assign Cookies
1.题目描述 2.问题分析 使用贪心算法. 3 代码 class Solution { public: int findContentChildren(vector<int>& g ...
- ros中自定义消息 报错 ImportError: No module named em
大家好,欢迎来到我的博客,之前写的都是比较松散的,鉴于工作的原因,之后的随笔将持续更新ROS以及linux使用方面的随笔,欢迎大家留言,相互学习 ——————————————————————————— ...
- c/c++ 用克鲁斯卡尔(kruskal)算法构造最小生成树
c/c++ 用克鲁斯卡尔(kruskal)算法构造最小生成树 最小生成树(Minimum Cost Spanning Tree)的概念: 假设要在n个城市之间建立公路,则连通n个城市只需要n-1条线路 ...