js遍历对象

ES6:不同数据结构的遍历方法

扶醉桌前 提交于 2020-03-27 05:31:15
ES6对数组,对象都有不同的遍历方法,以下内容均摘自阮一峰的《ES6标准入门》 一、数组的遍历 除了原生js的forEach()遍历方法外,ES6 提供三个新的方法—— entries() , keys() 和 values() ——用于遍历数组。可以用 for...of 循环进行遍历,唯一的区别是 keys() 是对键名的遍历、 values() 是对键值的遍历, entries() 是对键值对的遍历。 for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1 for (let elem of ['a', 'b'].values()) { console.log(elem); } // 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"entries()、keys()、values()会将空位处理成undefined。 二、对象的遍历 ES6 一共有5种方法可以遍历对象的属性。 (1)for...in for...in 循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。 (2)Object.keys(obj) Object

JavaScript中的迭代器与循环

烂漫一生 提交于 2020-03-24 18:15:35
引言: 本文涉及内容包括: forEach方法 for-in方法 for-of方法 eval()方法 map()方法 今天来总结一下,JS中我们常见的循环方式与迭代器,深入了解他们之间的区别,及适合的使用场景。 最早的数组遍历方式 var a = ["a", "b", "c"]; for(var index = 0;index < a.length;index++){ console.log(a[index]); } for循环 ,我们最熟悉也是最常用的循环迭代方式,后来的许多迭代方法都是基于for循环封装的。 1 forEach 语法: [].forEach( function (value, index, array) { // ... }); forEach遍历数组,而不是遍历对象哦,而且在遍历的过程中不能被终止,必须每一个值遍历一遍后才能停下来. 也就是说:你不能使用break来退出循环, 不能使用return语句来返回到外层 jquery中forEach 注意其与jQuery的$.each类似,只不过参数正好是相反的! $.each([], function (index, value, array) { // ... }); 2 for...in 适合进行普通对象的遍历 for-in循环遍历对象的key,即键值对的键名。 特性如下: 1. 方法遍历到的index

JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别

霸气de小男生 提交于 2020-03-17 08:29:04
ECMAScript将对象的属性分为两种: 数据属性 和 访问器属性 。每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以理解为:是否可枚举。 然后根据具体的上下文环境的不同,我们又可以将属性分为: 原型属性 和 实例属性 。原型属性是定义在对象的原型(prototype)中的属性,而实例属性一方面来自己构造函数中,然后就是构造函数实例化后添加的新属性。 本文主要介绍JavaScript中获取对象属性常用到的三种方法的区别和适用场景。 for..in循环 使用for..in循环时,返回的是所有能够通过对象访问的、可枚举的属性,既包括存在于实例中的属性,也包括存在于原型中的实例。这里需要注意的是使用for-in返回的属性因各个浏览器厂商遵循的标准不一致导致对象属性遍历的顺序有可能不是当初构建时的顺序。 遍历数组 虽然for..in主要用于遍历对象的属性,但同样也可以用来遍历数组元素。 var arr = ['a', 'b', 'c', 'd']; // 使用for..in for (var i in arr) { console.log('索引:' + i + ',值:' + arr[i]); } // 使用for循环 for (var j = 0; j < arr.length; j++) {

JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别

本小妞迷上赌 提交于 2020-03-13 19:28:37
ECMAScript将对象的属性分为两种: 数据属性 和 访问器属性 。每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以理解为:是否可枚举。 然后根据具体的上下文环境的不同,我们又可以将属性分为: 原型属性 和 实例属性 。原型属性是定义在对象的原型(prototype)中的属性,而实例属性一方面来自己构造函数中,然后就是构造函数实例化后添加的新属性。 本文主要介绍JavaScript中获取对象属性常用到的三种方法的区别和适用场景。 for..in循环 使用for..in循环时,返回的是所有能够通过对象访问的、可枚举的属性,既包括存在于实例中的属性,也包括存在于原型中的实例。这里需要注意的是使用for-in返回的属性因各个浏览器厂商遵循的标准不一致导致对象属性遍历的顺序有可能不是当初构建时的顺序。 遍历数组 虽然for..in主要用于遍历对象的属性,但同样也可以用来遍历数组元素。 var arr = ['a', 'b', 'c', 'd']; // 使用for..in for (var i in arr) { console.log('索引:' + i + ',值:' + arr[i]); } // 使用for循环 for (var j = 0; j < arr.length; j++) {

JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别

随声附和 提交于 2020-03-07 08:25:40
ECMAScript将对象的属性分为两种: 数据属性 和 访问器属性 。每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以理解为:是否可枚举。然后根据具体的上下文环境的不同,我们又可以将属性分为: 原型属性 和 实例属性 。原型属性是定义在对象的原型(prototype)中的属性,而实例属性一方面来自己构造函数中,然后就是构造函数实例化后添加的新属性。   本文主要介绍JavaScript中获取对象属性常用到的三种方法的区别和适用场景。 一、for..in循环   使用for..in循环时,返回的是所有能够通过对象访问的、可枚举的属性,既包括存在于实例中的属性,也包括存在于原型中的实例。这里需要注意的是使用for-in返回的属性因各个浏览器厂商遵循的标准不一致导致对象属性遍历的顺序有可能不是当初构建时的顺序。( 实例+原型中的可枚举属性 ) 1、遍历数组   虽然for..in主要用于遍历对象的属性,但同样也可以用来遍历数组元素。 var arr = ['a', 'b', 'c', 'd']; // 使用for..in for (var i in arr) { console.log('索引:' + i + ',值:' + arr[i]); } // 使用for循环 for (var j = 0;

JavaScript引用类型

折月煮酒 提交于 2020-03-06 13:45:34
引用类型虽然看起来和类很相似,但是它们却是不同的概念,引用类型的值,也就是对象是引用类型的一个实例。在Js中引用类型主要有Object,Array,Date,正则,Function等。 数组Array   在Js中数组可以存储任意的数据,而且它的大小是可以动态调整的。创建数组可以使用构造函数的方式也可以使用字面量的形式,另外可以使用concat从一个数组中复制一个副本出来。 方法:    length 数组的长度    toString 将数组转换为一个字符串,并且返回这个字符串,相当于是调用了下join(',')    join 把数组中的所有元素放入一个字符串中,元素通过指定的分隔符进行分割的。如果省略参数,则会使用逗号作为分隔符。    push 向数组末尾添加一个或者多个元素,并返回新的长度。    pop 删除数组中的最后一项,把数组的长度减1,并且返回它被删除元素的值,如果数组变为空,则该方法不改变数组,返回undefine值。    shift 删除数组的第一项,返回值同pop    unshift 是向数组的开头添加一个或者更多元素,并返回新的长度。    reverse 倒序    concat 该方法用于连接2个或者多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。如果连接多个数组,使用逗号隔开。    sort 该方法是对数组的元素进行排序

快速掌握ES6 iterator Generator和async 之间的关系及其用法

﹥>﹥吖頭↗ 提交于 2020-03-05 23:17:38
1.遍历器iterator 1.1 for遍历 首先从远古讲起,刚出js的时候如何遍历一个数组呢? var arr = [1, 2, 3, 4, 7, 8, 9] for (let i = 0;i < arr.length;i++) { console.log(arr[i]); } 1.2 forEach遍历 看起来笨的一批,所以ES5给你研究了一个foreach方法,但是这个方法不能break,也不能改变数组自身的值,也不能返回任何值。 var arr = [1, 2, 3, 4, 7, 8, 9] var arr2 = arr.forEach((element, index) => { console.log('第' + index + '个数值为:' + element); return element * 2; }); console.log(arr2) // undefined console.log(arr1) // [1, 2, 3, 4, 7, 8, 9] 所以说foreach只给你最基本的操作,其他一概不管,如果你想要改变自身的值或者有break和countinue操作我们可以使用map操作,不展开讲了,之前专门写了篇博客总结了下。 wzr: 数组遍历方法总结 1.3 for-in遍历 那么ES6专门为遍历数组提供了一种方法,就是for-of。说道for-of

JS中的迭代

眉间皱痕 提交于 2020-03-03 23:27:40
for each...in 使用一个变量迭代一个对象的所有属性值。对于每一个属性值,有一个指定的语句块被执行。 作为ECMA-357(E4X)标准的一部分,for each...in语句已被废弃,E4X中的大部分特性已被删除,但考虑到向后兼容,for each...in只会被禁用而不会被删除,可以使用ES6中新的for...of语句来代替。大部分非Mozilla浏览器都没有实现该标准,E4X并不是 ECMAScript 标准的一部分。 语法 for each (variable in object) { statement } 参数 variable 用来遍历属性值的变量,前面的var关键字是可选的。该变量是函数的局部变量而不是语句块的局部变量。 object 该对象的属性值会被遍历。 statement 遍历属性值时执行的语句。 如果想要执行多条语句,请用({ ... }) 将多条语句括住。 警告 永远不要使用for each...in语句遍历数组,仅用来遍历常规对象。 一些对象的内置属性是无法被遍历到的,包括所有的内置方法,例如String对象的indexOf方法。不过,大部分的用户自定义属性都是可遍历的。 for...in for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。 语法 for (variable in object) {.

js中forEach,for in,for of循环的用法【转】

拜拜、爱过 提交于 2020-03-03 19:13:22
一、一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i++) { console.log(i,array[i]); } 二、 用for in的方遍历数组 for(let index in array) { console.log(index,array[index]); }; 三、 forEach array.forEach(v=>{ console.log(v); }); array.forEach(function(v){ console.log(v); }); 四、 用for in不仅可以对数组,也可以对enumerable对象操作 var A = {a:1,b:2,c:3,d:"hello world"}; for(let k in A) { console.log(k,A[k]); } 五、 在ES6中,增加了一个for of循环,使用起来很简单 for(let v of array) { console.log(v); }; let s = "helloabc"; for(let c of s) { console.log(c); } 总结来说:for in总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值 结果for

javascript数组的知识点讲解

怎甘沉沦 提交于 2020-02-29 16:35:30
阅读目录 数组的基本方法如下 concat() join() pop() push() reverse() shift() sort() splice() toString() unshift() slice() 判断一个数组中是否有相同的元素; 计算一个数组中每个元素在数组中出现的次数; Javascript删除数组重复元素的操作 Javascript删除数组里面的某个元素。 在javascript中求出2个数组的相同的元素及不同的元素 Javascript检测2个数组是否相似 如何判断该对象是否为数组。 js将类数组对象转换成数组对象 查找数组中最大值与最小值 回到顶部 数组的基本方法如下 1. concat() 该方法用于连接2个或者多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。 语法:arrayObject.concat(array1,array2,....arrayx); 连接多个数组,使用逗号隔开; 比如如下代码演示: var arr1 = [1,2,3], arr2 = [4,5,6], arr3 = [7,8,9,1,2,3]; console.log(arr1.concat(arr2,arr3)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3] console.log(arr1); // [1,2,3]