js 遍历、枚举

2018-5-27    分类: 前端资源

每次遍历数据我都用for循环基本都够日常需求了,但是js其实还提供了很多针对遍历对象和数组的。

为了方便理解这里事先创建一些例子,提供给遍历对象时使用:

 

//继承  ,只要是声明了对象或者数组都能调用window.Object.prototype里面的继承过来的属性和方法
window.Object.prototype.userProp = 'userProp11';
window.Object.prototype.getUserProp = function() {
  return window.Object.prototype.userProp;
};


//需要遍历的对象
var obj = {
  name: 'percy',
  age: 21,
  [Symbol('symbol 属性')]: 'symbolProp',
  unEnumerable: '我是一个不可枚举属性',
  skills: ['html', 'css', 'js'],
  getSkills: function() {
    return this.skills;
  }
};

//遍历obj对象时,忽略unEnumerable属性
window.Object.defineProperty(obj, 'unEnumerable', {
  enumerable: false
});

 

对象遍历

//推荐遍历1:会忽略掉 Symbol类型属性  和  不允许枚举的unEnumerable属性
for (var key in obj) {
   console.log(key); //name、age、skills、getSkills、userProp、getUserProp
   console.log(obj[key]); // right style
}

 

//遍历2:遍历对象里面的属性名 或者 数组的索引,集合起来并返回一个数组
Object.keys(obj); //["name", "age", "skills", "getSkills"] 不包括Symbol类型和继承过来的userProp和getUserProp

 

//遍历3:不含 Symbol 类型的属性,不包含继承属性,但是包括不可枚举属性
Object.getOwnPropertyNames(obj); // ["name", "age", "unEnumerable", "skills", "getSkills"]

 

//遍历4:包含对象自身的所有 Symbol 类型的属性(不包括继承的属性)
Object.getOwnPropertySymbols(obj); // [Symbol(symbol 属性)]

 

//遍历5:包含 Symbol 类型的属性,还有不可枚举的属性,但是不包括继承的属性
Reflect.ownKeys(obj); // ["name", "age", "unEnumerable", "skills", "getSkills", Symbol(symbol 属性)]

 

//判断某个属性是不是某个对象自身的属性,兼容ie7 (不包括继承)
Object.prototype.hasOwnProperty.call(obj,'userProp') //返回布尔值

 

//首先遍历所有属性名为数值的属性,按照数字排序
//其次遍历所有属性名为字符串的属性,按照生成时间排序
//最后遍历所有属性名为Symbol值的属性,按照生成时间排序
// (多使用console.log()打印出来看看)

 



 

数组遍历

//遍历1
var arr=[2,4,6];
for(var x of arr){
 console.log(x); //2,4,6
}

 

//遍历2
// 1,会修改原来数组
// 2,如果数组在迭代时被修改了,则按照索引继续遍历修改后的数组
var words = ["one", "two", "three", "four"];

words.forEach(function(currentValue, index, array) {
  console.log(currentValue); //"one", "two", "four"
  if (currentValue === "two") {
     words.shift(); //数组被修改后按照修改后的数组遍历
  }
});

console.log(words);  //["two", "three", "four"];

 

 

//遍历3
//1,返回一个新数组,不会修改原来数组
var arr=[2,4,6];

var new_arry=arr.map(function (currentValue,index,array) {
 return currentValue+1;
});

console.log(new_arry); //[3, 5, 7]

 

还有更多数组的遍历:(怎么用自己去查吧)

Array.prototype.every()
filter()
find()
findIndex()
some()
reduce()
reduceRight()

 

https://mp.weixin.qq.com/s/C-QEvoBc11gS-J3Kllgbyg

 

js中数字类型、字符串类型各自带的属性和方法

 

js数据类型检测