js变量数组和对象常用方法
一、遍历对象方法
1.for...in
遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的
eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {};//在原型链上添加属性
Object.defineProperty(obj, 'country', {
Enumerable: true //可枚举
});
Object.defineProperty(obj, 'nation', {
Enumerable: false //不可枚举
})
obj.contry = 'china';
for (var index in obj) {
console.log('key=', index, 'value=', obj[index])
}
输出结果:
key = name value = yayaya
key = age value = 12
key = sex value = female
key = contry value = china
key = pro1 value = function(){}
2.Object.keys()
遍历对象返回的是一个包含对象自身可枚举属性的数组(不含Symbol属性).
eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
Enumerable: true,
value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.keys(obj).forEach(function(index) {
console.log(index, obj[index])
});
输出结果:
name yayaya
age 12
sex female
contry china
3.Objcet.getOwnPropertyNames()
输出对象自身的可枚举和不可枚举属性的数组,不输出原型链上的属性
eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
Enumerable: true,
value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.getOwnPropertyNames(obj).forEach(function(index) {
console.log(index, obj[index])
});
输出结果:
name yayaya
age 12
sex female
country ccc
nation undefined
contry china
4.Reflect.ownKeys()
返回对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.
eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
Enumerable: true,
value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
Enumerable: false //不可枚举
})
obj.contry = 'china';
Reflect.ownKeys(obj).forEach(function(index) {
console.log(index, obj[index])
});
返回结果:
name yayaya
age 12
sex female
country ccc
nation undefined
contry china
5. _.keys
用underscore插件的遍历方法只可以遍历出对象自身的可枚举属性
eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
Enumerable: true,
value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
Enumerable: false //不可枚举
})
obj.contry = 'china';
console.log(_.keys(obj));
输出结果:
name age sex country
二.遍历数组方法
1.forEach(无法使用break中断)
eg:
var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function(value, index) {
console.log('value=', value, 'index=', index);
})
输出结果:
value=a index=0
value=b index=1
value=c index=2
value=d index=3
2.map(可以使用break中断)
可以对遍历的每一项做相应的处理,返回每次函数调用的结果组成的数组
eg:
var arr = ['a', 'b', 'c', 'd'];
arr.map(function(item, index, array) {
console.log(item, index);
})
输出结果:
a 0
b 1
c 2
d 3
3.for循环遍历
eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i = 0; i < arr.length; i++) {
console.log(i, arr[i])
}
输出结果:
0 a
1 b
2 c
3 d
4.for...in(虽然也可以遍历数组,但是此方法一般用于遍历对象)
eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i in arr) {
console.log('index:', i, 'value:', arr[i])
}
输出结果:
index:0 value:a
index:1 value:b
index:2 value:c
index:3 value:d
5.for...of(es6)
只遍历出value,不能遍历出下标,可遍历出Symbol数据类型的属性,此方法作为遍历所有数据结构的统一的方法
eg:
var arr = ['a', 'b', 'c', 'd'];
for (var value of arr) {
console.log('value', value)
}
输出结果:
value a
value b
value c
value d