js中的for循环、map、forEach、for in、for of、Object.keys()_js 循环map_alokka的博客

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
相关文章推荐
曾深爱过的沙滩裤 · openlayers基础总结 | 我的技术博客· 2 月前 ·
气势凌人的牛腩 · 追番列表 | Mitsumune· 3 月前 ·
稳重的打火机 · 使用SecureCRT的Python脚本问题 ...· 3 月前 ·
个性的茄子 · 【定制款】联想拯救者Y9000P ...· 1 年前 ·
害羞的鸵鸟 · How to change python ...· 1 年前 ·
for 循环，大家在熟悉不过用来遍历数组或者json等对象数组
var arr = [1,2,3];
for(var i = 0; i < arr.length; i++) {
    console.log(i +'-'+ arr[i]);
// 0-1
// 1-2
// 2-3
2. map 遍历
 
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
 map() 不会改变原始数组 
var arr = [1,2,3];
var brr = arr.map(function(item,index) {
    return item * 2;
console.log(arr);
console.log(brr);
// [1, 2, 3]
// [2, 4, 6]
因为返回的是一个新数组，这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。 
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]
3. forEach 遍历
 
遍历数组 列出数组的每个元素 
forEach没有返回值，forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。 
var arr = [1,2,3];
var brr = arr.forEach(function(item,index) {
    return item * 2;
console.log(arr);
console.log(brr);
// [1, 2, 3]
// undefined
 forEach 不能使用break语句中断循环，也不能使用return语句返回到外层函数。 
map 和 forEach总结： 
能用forEach()做到的，map()同样可以。反过来也是如此。
map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
forEach()允许callback更改原始数组的元素。map()返回新的数组。 
4. for of 循环
 
for…of为ES6新增的方法，主要来遍历可迭代的对象（包括Array, Map, Set, arguments等)，它可以遍历数组，也可以遍历对象 
var arr = ['red', 'green', 'blue']
for(let item of arr) {
  console.log(item)
  green
遍历对象的方法：
 
1. for in 循环
 
使用for…in循环时，返回的是所有能够通过对象访问的、可枚举的属性，既包括存在于实例中的属性，也包括存在于原型中的实例。 
var obj = {
    name: "lokka",
    age: 18,
    address: "beijing",
    1: "ok",
    _:"yes"
for ( var key in obj ) {
    console.log(key +'-'+ obj[key]);
// 1-ok
// name-lokka
// age-18
// address-beijing
// _-yes
for in循环属性遍历的顺序是按照下面的顺序排列 
 首先遍历所有数值键，按照数值升序排列。
其次遍历所有字符串键，按照加入时间升序排列。
最后遍历所有 Symbol 键，按照加入时间升序排列。 
2. for of 循环
 
for of 循环也可以遍历对象，它主要用来获取对象的属性值（键值），而for…in主要获取对象的属性名（键） 
2.1 对于普通对象，没有部署原生的 iterator 接口，直接使用 for…of 会报错 
var obj = {
   'name': 'lokka',
   'age': 18
 for(let key of obj) {
   console.log('for of obj', key)
 // Uncaught TypeError: obj is not iterable
2.2 可以使用 Object.keys(obj) 方法将对象的键名生成一个数组，然后遍历这个数组 
for(let key of Object.keys(obj)) {
   console.log('key', key)
   key name
   key age
3. Object.keys().forEach() 方法遍历对象
 
3.1 先说下Object.keys()
 Object.keys()用于获得由对象属性名组成的数组 
var obj = {
    name: "lokka",
    age: 18,
    address: "beijing",
    1: "ok",
    _:"yes"
console.log(Object.keys(obj));
// [ '1', 'name', 'age', 'address', '_' ]
 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 
3.2 Object.keys() 结合 forEach() 遍历对象 
var obj = {
    name: "lokka",
    age: 18,
    address: "beijing",
    1: "ok",
    _:"yes"
Object.keys(obj).forEach(function(i) {
    console.log(i, obj[i]);
// 1 ok
// name lokka
// age 18
// address beijing
// _ yes
 有人会问，为什么不直接使用 for in 循环遍历对象，为什么要用 Object.keys(obj).forEach(i=>{})
 遍历对象，而且看着更加的复杂了？ 
 因为是从性能上进行考虑： 
 for in 会遍历整个原型链，这可能不是你所期望的结果，然后从性能角度上看 Object.keys 会更优。在一些eslint 的规则中也默认禁用了 for in 循环。 
其实做过相关测试的博客已经不少了, 但不自己亲身试一下, 死不了这条心. 所以今天恰逢周六,   
来用测评笔记本的思维测评一下两者的性能对比.(本人喜欢在51论坛发博客, 此论坛是一个笔记本分享体验的论坛)...
                                    文章目录一、`for...in`, `for...of`, `for `和 `forEach` 循环的区别1.1、for…in和for…of的区别1.2、for1.3、for...in（主要用于遍历对象）1.4、`for...of`(`ES6`新增，利用了遍历对象内部的`iterator`接口，主要用于`遍历数组`)1.5、forEach（参数分别为value,index,数组体）二、Set 和 Map 结构三、while循环
一、for...in, for...of, for和 forEach 循环的区别
测试函数参数  index:数组索引 item:index索引对应的值 arr:遍历的数
传递 this 参数 箭头函数this传递无效
// 判断数组中是否有name等于app
let arr = [
	{name:'app',cun:2},
	{name:'wxxcx',cun:3},
	{name:'app',cun:5}
arr...
                                    目录1.for...in2. for...of3.for...in和for...of的区别4.可枚举属性，可迭代对象1）可枚举属性2)可迭代对象5.迭代器，生成器6.数组，伪数组7.map对象可以使用for...in吗？遍历map的方法！
1.for…in
for...in循环遍历的是可枚举属性（包括原型链上的可枚举属性）
var obj = {a:1,b:2,c:3};
for(let key in obj){
	console.log(key);  // a  b  c
使用for...in也可以
                                    文章目录前言一、map1.简单数组2.对象数组3.修改简单数组内容4.修改对象数组内容二、forEach1.简单数组2.对象数组3.forEach() 的 continue 与 break
编码过程中一直分不清map和forEach的区别，闲下来，弄几个例子研究一下。
一、map
1.简单数组
    const a = [ 5, 7, 10, ]
    const mapA = a.map((item, index, arr) => {
      console.log(item, i
                                    在JavaScript中，有多种方法可以遍历数组，其中包括for循环、forEach方法和map方法。这些方法在不同场景下都有各自的优缺点，开发者需要根据实际情况来选择最适合自己的方法。本文将介绍这三种方法的使用和区别，希望对大家有所帮助。
                                    1、for 循环
for 循环是 Js 中最常用的一个循环工具，经常用于数组的循环遍历。格式就是for(下标变量；循环长度，下标递加){}
let arr = [1,2,3];
for (let i=0; i<arr.length; i++){
 console.log(i,arr[i])
// 0 1
// 1 2
// 2 3
2、for in 循环
for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj[i] 代表对应的 value,当用它来遍历数组时候，多数情况下也能
                                    利用Javascript map(),reduce()和filter()数组方法可以帮助您编写更加声明性、流畅的风格代码。
而不是积累起来for循环和嵌套来处理列表和集合中的数据，您可以利用这些方法更好地将逻辑组织成功能的构建块，然后将它们链接起来以创建更可读和更易于理解的实现。
ES6还为我们提供了一些更好的数组方法，比如.find,.findIndex,.of和for…of循环！
数组循环...