一,对象的遍历
对象属性的遍历,有以下几种方法:
- for…in
- object.key()
- object.getOwnPropertyNames()
1, for…in
for…in是通过in运算符遍历对象中的可枚举属性,包括原型中的属性
// 构造函数中定义私有属性
function Animal(name) {
this.name=name
this.run = function() {
console.log(this.name + ' is running')
}
}
// 定义原型上的共享属性
Animal.prototype.age=12
Animal.prototype.say = function() {
console.log(this.name + ' is saying')
}
// 创建对象,枚举对象中的属性
var animal = new Animal('kikky')
for (prop in animal) {
console.log(prop + ':' + animal[prop])
}
输出结果:
name:kikky
run:function() {
console.log(this.name + ’ is running’)
}
age:12
say:function() {
console.log(this.name + ’ is saying’)
}
2, object.keys()
object.keys()是构造函数object的一个方法函数,它获取的是自身属性的可枚举属性,不包括原型中的属性,返回的是一个包含对象属性的名称的数组。
// 构造函数中定义私有属性
function Animal(name) {
this.name=name
this.run = function() {
console.log(this.name + ’ is running’)
}
}
// 定义原型上的共享属性
Animal.prototype.age=12
Animal.prototype.say = function() {
console.log(this.name + ’ is saying’)
}
// 创建对象,枚举对象中的属性
var animal= new Animal(‘kikky’)
var props = Object.keys(animal)
console.log(props) // 输出 [“name”, “run”]
3 , object.getOwnPropertyNames()
object.getOwnPropertyNames()是构造函数object的另一个方法函数,它返回的是对象自身属性中的所有属性,不包括原型属性。
// 构造函数中定义私有属性
function Animal(name) {
this.name = name
this.address = ‘somewhere’ // 新添加一个address属性,用来测试可枚举性
this.run = function() {
console.log(this.name + ’ is running’)
}
}
// 定义原型上的共享属性
Animal.prototype.age=12
Animal.prototype.say = function() {
console.log(this.name + ’ is saying’)
}
// 创建对象
var animal = new Animal(‘kikky’)
// 通过defineProperty()函数将address属性的可枚举性设为否
Object.defineProperty(animal, ‘address’, {
enumerable: false, // 设置为不可枚举
value: ‘anywhere’
})
// 输出属性
var allProps = Object.getOwnPropertyNames(animal)
console.log(allProps) // 输出 [“name”, “run”, “address”]
// 输出可枚举属性作为对比
var enumProps = Object.keys(animal)
console.log(enumProps) // 输出 [“name”, “run”]
二,数组
1, 数组项的全部遍历,方法有:
- for循环
- forEach()函数
- map()函数
- for…of
- for…in
2, 数组项的有操作的遍历,方法有:
- filter()函数
- every()函数
- some()函数
- reduce()函数
- reduceRight()函数
1,for循环
var array = [1,4,7,9]
for (var i = 0, len = array.length; i < len; i++) {
console.log(array[i]) // 输出 1 4 7 9
}
2,forEach函数
forEach()函数是构造函数Array的原型上的函数,即Array.prototype.forEach,因此所有数组都可以用这个方法。它接受一个处理函数作为参数,处理函数的参数分别是数组的元素、数组索引、和数组本身。函数没有返回值,因此主要用来对数组的过程处理
var array = [‘a’, ‘b’, ‘c’]
array.forEach(function(item, index, array) { // 处理函数作为参数
console.log(index + ’ is ’ + item)
})
输出:
0 is a
1 is b
2 is c
3, map函数
map()函数也是构造函数Array的原型上的函数,即Array.prototype.map,所以所有数组都可以用这个方法。和forEach一样,它接受一个处理函数作为参数,处理函数的参数分别是数组的元素、数组索引、和数组本身;与forEach不同的是,函数有返回值,返回的是处理函数return的值组成的数组。
var array = [‘a’, ‘b’, ‘c’]
var result = array.map(function(item, index, array) { // 处理函数作为参数
console.log(index + ’ is ’ + item) // 过程处理
return item + index // 返回结果
})
console.log(result) // 输出[“a0”, “b1”, “c2”]
4, for…of
for…of是ES6新增的语法,它不仅可以用来遍历数组,还可以遍历字符串,以及ES6中的Map,Set。
var array = [‘a’, ‘b’, ‘c’]
for (let item of array) {
console.log(item) // 输出 a b c
}
5,for … in
var array = [‘a’, ‘b’, ‘c’]
// for…in遍历的是对象属性,数组中的索引就相当于对象的属性,因此枚举出来的是索引
for (let index in array) {
console.log(index + ‘:’ + array[index])
}
输出:
0:a
1:b
2:c
数组项的有结果处理的遍历
1, filter()函数
filter函数是过滤函数,根据传入的处理函数,得到处理函数返回值为true的元素所组成的数组,函数结果为过滤后得到的数组。
function getEven(item, index, array) {
return item % 2 === 0
}
var array = [1, 2, 3, 5, 8]
var evenArray = array.filter(getEven)
console.log(evenArray) // 输出 [2, 8]
2,every() 函数
every()函数是一个判断函数,检测是否每个元素都通过了测试。通过传入的处理函数判断,如果每个元素处理后得到的返回值都为true,则最后结果为true。
every()函数不会遍历所有数组项,当遇到处理结果为false时,函数立即返回false,否则遍历到最后,直到返回true。
var array = [1, 2, 3, 5, 8]
// 判断是否每个元素都小于3
var result = array.every(function(item, index, array) {
console.log('processing: ’ + item)
return item < 3
})
console.log('result: ’ + result)
输出结果
processing: 1
processing: 2
processing: 3 // 执行到3后停止了,3不小于3
result: false
3,some()函数
some()函数是判断函数,检测数组中是否有符合条件的元素。只要有元素的处理结果为true,则返回值为true。
some()函数也不会遍历所有项,只要遇到处理结果为true,立即返回true;否则执行到最后,直到返回false。
var array = [1, 2, 3, 5, 8]
// 判断是否存在小于3的元素
var result = array.some(function(item, index, array) {
console.log('processing: ’ + item)
return item < 3
})
console.log('result: ’ + result)
输出结果:
processing: 1 // 找到一个满足条件的元素立即返回了
result: true
原文出处:借鉴原文出处