es6 遍历总结
1、for in / for of
for in --> index是key值
var array = [1,2,3,4,5];
for(let index in array)
{
console.log(index, array[index]);
};
var obj = {a:1, b:2, c:"qqq"};
for(let index in obj)
{
console.log(index, obj[index]);
};
for of --> index是value值
for(let index of array){
console.log(index)
}
比较
注:for of 不支持对象,是直接得到值
obj = {a:1, b:"hello", c: 1.2}
for(let index in obj){console.log(index, obj[index]);};
a 1
b hello
c 1.2
for(let index of obj){console.log(index, obj[index]);};
error
for(let index in array){console.log(index, array[index]);};
0 1
1 2
2 3
3 4
4 5
for(let index of array){console.log(index, array[index]);};
1 2
2 3
3 4
4 5
5 undefined
2、forEach
不支持break、return
var array = [1,2,3,4,5];
array.forEach( v => { console.log(v); } );
var array = [1,2,3,4,5];
var num = null;
var result = array.forEach( a =>
{
num += a; return a+1;
});
> console.log(result);
undefined
> console.log(num)
1 15
> console.log(array)
(5) [1, 2, 3, 4, 5]
3、map
映射 return,常用于对象数组获取一个属性等
let a = [1,2,3];
let b = a.map(index => { return index >= 2; });
> console.log(b)
(3) [false, true, true]
> console.log(a)
(3) [1, 2, 3]
4、reduce
arr.reduce(callback, [initValue])
累加
let nums = [1,2,3,4,5];
let res3 = nums.reduce(function(total,nums){
return total+nums;
},4); > console.log(res3);
19 //4+15
let res = [[0,1],[2,3],[4,5]].reduce((a,b)=>{
return a.concat(b);
},[]);
> console.log(res);
(6) [0, 1, 2, 3, 4, 5]
目标多个属性同时叠加
// 主要对象
var res = [{a:"a", b:1},{a:"b", b:2},{a:"c", b:3}];
// 辅助
var other = {a:0.1, b:0.2, c:0.3}
// 累加计算 --> 累加(b的值*辅助的值) - 10
var out = res.reduce((m,n)=>{return n.b*other[n.a]+m;}, -10); > console.log(out);
-8.6
求一样的字符数量
var arrString = 'abcdaabc';
arrString.split('').reduce(function(res, cur) {
res[cur] ? res[cur] ++ : res[cur] = 1;
console.log(res[cur]+"||"+cur);
return res;
}, {});
1||a
1||b
1||c
1||d
2||a
3||a
2||b
2||c
{a: 3, b: 2, c: 2, d: 1}
遍历进行操作
[1, 2].reduce(function(res, cur) {
res.push(cur + 1);
return res;
}, [])
(2) [2, 3]
5、filter
过滤,不会改变原数组
arr.filter(callback, [thisArg]) ([thisArg]可选)
const array = [{id:1, name:'a'},{id:2, name:'b'},{id:3, name:'c'}];
let obj2 = array.filter(obj => obj.id > 1);
> console.log(obj2);
(2) [{…}, {…}]
0: {id: 2, name: "b"}
1: {id: 3, name: "c"}
length: 2
__proto__: Array(0)
6、find
找到符合条件的第一个
let a = [1,2,3,4,5];
a.find(n => n < 3);
1
a.find(n => n < 4);
1
a.find(n => n >= 4);
4
7、some
有一个满足则为true
var passed = [2, 5, 8, 1, 4].some(v => v>10);
false
passed = [2, 5, 8, 11, 4].some(v => v>10);
true
8、every
都满足则为true
passed = [2, 5, 8, 11, 4].every(v => v>10);
false
passed = [2, 5, 8, 11, 4].every(v => v>1);
true
9、indexOf / lastindexOf
寻找第一个完全一样的字符出现的位置(正向/反向)
arr.lastIndexOf(searchElement, [fromIndex]);
返回索引或-1
es6 遍历总结的更多相关文章
- ES6遍历器 生成器 学习整理
遍历器[迭代器](Iterator) 就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所 ...
- ES6遍历对象方法
ES6 一共有 5 种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性). let obj = {a:1,b:2,c:3 ...
- js es6遍历对象的6种方法(应用中推荐前三种)
javaScript遍历对象总结 1.for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).). 2.使用Object.keys ...
- es6遍历数组forof
- 关于js中的for(var in)遍历属性报错问题
之前遇到过这个问题,但是没找到问题的所在,将for(var i in array){} 改成了for(var i ;i<array.length;i++)循环,但是今天又遇到了,mark一下错 ...
- es6 和 python 语法比较
http://www.linchaoqun.com/html/cms/content.jsp?id=1509528630774 Python3笔记:Python与ECMAScript部分语法对比 ht ...
- 关于js中遍历总结
1.for循环 var arr = []; for (var i = 0; i < arr.length; i++) { if (条件1) return; if (条件2) break; if ...
- ES6对数组的扩展(简要总结)
文章目录 数组的扩展(ES6) 1. 扩展运算符 2. Array.from 3. Array.of() 4. copyWithin() 5. find() 和 findIndex() 6. fill ...
- 深入理解es6(上)
一.let和const 1.let与var的区别 不存在变量提升 块级作用域 不允许重复声明 2.const常量 const与let一样,唯一区别在于声明的常量不能被修改 二.解构赋值 es6按照一定 ...
随机推荐
- Java 实现视频下载功能
public static boolean httpDownload(String httpUrl, String saveFile) { // 1.下载网络文件 int byteRead; URL ...
- 项目之初的模型设计与status状态字段
0X01 开始做一个app的时候,要先做的是流程设计与数据库模型设计. 但做的模型设计往往是设置字段满足当前的需求,缺乏足够的经验,即使为以后的功能预留出位置,也无法考虑周全. 比如,刚开始做用户表, ...
- CSS属性兼容写法
一种是用js判断兼容性 // JS if ("CSS" in window && "supports" in window.CSS) { var ...
- jvm领域优秀博主
dh5724 不过csdn iteye 博客园信息均被自己删除,只在一些问答中和引用中有部分信息. redcreen 对jvm有深入认知. RednaxelaFX oracle java 编译器开发者 ...
- HDU3072 Intelligence System
题目传送门 有个中文版的题面...和原题稍有不同 /* Description “这一切都是命运石之门的选择.” 试图研制时间机器的机关SERN截获了中二科学家伦太郎发往过去的一条短信,并由此得知了伦 ...
- Petrozavodsk Summer-2016. Ural FU Dandelion Contest
A. Square Function 留坑. B. Guess by Remainder 询问$lcm(1,2,3,...,n)-1$即可一步猜出数. 计算$lcm$采用分治FFT即可,时间复杂度$O ...
- HBuilder 的使用
创建一个nui项目 打开index.html才能运行 查看夜神模拟器 创建App标题:mhe :在body中输入mhe让后回车,如果右侧不显示,Ctrl+s保存一下 创建标题:mhe 创建九宫格:mb ...
- jquery第一篇
1 jquery是什么 <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2>jQuery是继 ...
- CSS 使用absolute 是<div>居中
<style> .col-center-block { position: absolute; top: 50%; ...
- CentOS裸机环境下安装php-7.3.1
安装步骤如下 安装必要的软件 获取源码 编译安装 安装过程可能遇到的一些问题 编译参数详解 安装步骤如下 安装必要的软件 yum install -y autoconf automake libtoo ...