遍历

76 阅读6分钟

遍历

var arr = [1, 2, 3, 4, 5, 6];

    // 第一种   for循环遍历
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
      newArr.push(arr[i])
      console.log(newArr)
    }

    // 第二种 es6语法  arr.forEach()遍历
    var newArr = [];
    arr.forEach((item) => {
      newArr.push(arr[item])
      console.log(newArr)
    })

    // 第三种   Object.keys()遍历
    // (个人推荐比较好用:枚举方法)   (返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).)
    var newArr = [];
    Object.keys(arr).forEach((item) => {
      newArr.push(arr[item])
      console.log(newArr)
    })


     // 第四种   arr.map(function callback(currentValue[, index[, array]]) 或者这样 array.map(item,index,arr) 
    // currentValue: callback一系列中正在处理的当前元素 index: callback一系列中正在处理的当前元素的索引。array:  map 调用方法的目录
    var newArr = []
    arr.map((item) => {
      newArr.push(arr[item])
      console.log(newArr)
    })

    // 第五种   for...in...遍历
    //  循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).).
    var newArr = []
    for(var i in arr ) {
      newArr.push(arr[i])
      console.log(newArr,'1111111')
    }

    // 第六种   for-of遍历
    //不仅支持数组,还支持大多数类数组对象,例如DOM NodeList对象.
    //也支持字符串遍历,它将字符串视为一系列的Unicode字符来进行遍历.
    var newArr = []
    for(var i of arr){
      newArr.push(arr[i])
      console.log(newArr)
    }

    // 第七种   Object.getOwnPropertyNames(obj) 遍历
    //  返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).
    var newArr = [];
    Object.getOwnPropertyNames(arr).forEach((item) => {
      newArr.push(arr[item])
      console.log(newArr,'!!!!')
    })

    // 第八种   Reflect.ownKeys(obj)遍历  
    // 返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.
    var newArr = [];
    Reflect.ownKeys(arr).forEach((item) => {
      newArr.push(arr[item])
      console.log(newArr) 
      //  数组可以全部打印出来特别!!!!
    })


// -----------------------------------------------------------------

 while 循环语法
var i = 1;
while( i <= 5) {
    document.write(i+", ");
    i++;
}
// 运行结果:1, 2, 3, 4, 5,



// -----------------------------------------------------------------
 for 循环语法
for (var i = 1; i <= 10; i++) {
    document.write(i + " ");
}


//break 语句 
// 使用 break 语句跳出 for 循环 
for (var i = 0; i < 10; i++) {
    if(i == 5) {
        break;
    }
    document.write("i = " + i + "<br>");
}
document.write("循环之外的代码");



// continue 语句
// continue 语句用来跳过本次循环,执行下次循环。当遇到 continue 语句时,程序会立即重新检测条件表达式,如果表达式结果为真则开始下次循环,如果表达式结果为假则退出循环。
// break 语句用来跳出整个循环,执行循环后面的代码;continue 语句用来跳过当次循环,继续执行下次循环。
for (var i = 0; i < 10; i++) {
    if(i % 2 == 0) {
        continue;
    }
    document.write(i + "&nbsp;");
}

// -----------------------------------------------------------------
 for in 循环
// 是一种特殊类型的循环,也是普通 for 循环的变体,主要用来遍历对象,使用它可以将对象中的属性依次循环出来

// 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {
    console.log(prop) // name surname age
    console.log(person[prop]) // Clark  Kent  36
}


// -----------------------------------------------------------------

forEach 遍历
// forEach方法中的function回调有三个参数:
// 第一个参数是遍历的数组内容,
// 第二个参数是对应的数组索引,
// 第三个参数是数组本身

var arr = [1,2,3,4,5];
arr.forEach((item,index,arr)=>{
   //item 为当前数组元素
   // index 为当前索引
   // arr 为数组名字
   console.log(item); // 1  2  3  4  5
})



 var arr = [1,2,3,4];
    arr.forEach(alert); 
 
//    等价于:
    
var arr = [1, 2, 3, 4];
for (var k = 0; k < arr.length; k++) {
    alert(arr[k]);
}  


1遍历数组
var arr = [ 'one ' , 'two' , 'three' l;
for (var arrInKey in arr) {
    console.log(arrInKey );
}
// for in会输出索引值,
// for of 会输出数组每一位的值
var arr = ['one ', 'two' , 'three ' ];
for (var arrOfKey of arr) {
    console.log(arrOfKey);
}

// 3. forEach 不能使用break continue
// for in和far of是可以使用break continue的
var arr = [ 'one ' , 'two' , 'three' ];
for (var arrOfKey of arr) {
    console.log(arrOfKey);
    if (arrOfKey == 'two ' )
        {break;
    }
}



// 1.for in遍历对象 可以遍历到属性名 和原型链上的方法
function Foo() {
    this.name = 'kingx' ;
    this,age = 20;
}
Foo. prototype . getName = function() K{
return this . name ;
    varfoo=newFoo();
    for (var inkey in foo) { 
console. log(inkey);
} 
// 输出 name age  getName

// 6,for in不能遍历到Symbol属性
var as = Symbol( 'a ');
var bs = Symbol( 'b ');
var obj = {
[as]: 'as',
[bs]: 'bs' ,
name: 'kingx',
age: 30
};
for (var obj Inkey in obj) {
console.log (objInkey);
}  // 输出: name  age


var symbolKeys = object . get0wnP rope rtySymbols(obj);
for (var key2 of symbolKeys) {
    console. log(key2);
}
//forin主要是遍历对象
// for of遍历具有iterator接口的数据结构
I


4、map:(这个方法用的地方很多)创建一个新的数组并返回,新数组的每一
个元素都由原数组的每一个元素执行提供的函数提供而来,其中原来的数组不会发生变化。

let arr1 = [1,2,3,4]
let arr2 = arr1.map( item => {
	//item就是每一个元素 其中这个箭头函数可以有三个参数下面也相似 value index arr
	return item + 1 //相当于每个元素都加1
})
console.log(arr2) //map以后新的数组结果为 [2,3,4,5]
console.log(arr1) //原来的数组结果没有变为 [1,2,3,4]


------------------------------------------------------------


5、every:检测数组中所有元素是否都符合指定的条件。只要检测到一个元素不满足就返回false,只有都满足才返回truelet arr1  = [1,2,3,4]
let test1 = arr1.every( item => {
	//item就是每一个元素
	return item > 0  //判断条件
})
let test2 = arr1.every( item => {
	//item就是每一个元素
	return item > 1  //判断条件
})
console.log(test1) //true 所有的item数组元素都满足 
console.log(test2) //false 里面有一个item不满足 就是那个1
console.log(arr1)  //原来的数组结果没有变为 [1,2,3,4]


------------------------------------------------------------


6、filter:创建一个新的数组,新数组中的元素是那些筛选以后满足条件的元素。

let arr1  = [1,2,3,4]
let arr2 = arr1.filter( item => {
	//item就是每一个元素
	return item > 1  //筛选条件
})

console.log(arr2) // 筛选以后的数组数据 [2,3,4]
console.log(arr1)  //原来的数组结果没有变为 [1,2,3,4]



------------------------------------------------------------


7、forEach:用于调用数组的每一个元素,并将元素传递给回调函数,这个方法返回undefinedlet arr1  = [1,2,3,4]
let res   = []  //用来记录数据操作的
arr1.forEach( item => {
	//item就是每一个元素
	res.push( item * 2 ) //相当于把每一个数组元素都乘以2然后放到res这个数组中
})

console.log(res) // 利用循环遍历进行数据操作后的数组 [2,4,6,8]
console.log(arr1)  //原来的数组结果没有变为 [1,2,3,4]


---------------------------------------------------------

JS 5种遍历对象的方式

for in

for in 循环是最基础的遍历对象的方式,它还会得到对象原型链上的属性

// 创建一个对象并指定其原型,bar 为原型上的属性
const obj = Object.create({
 bar:  'bar'
})
// foo 为对象自身的属性
 obj.foo =  'foo'
for  (let key  in obj) {
 console.log(obj[key]) // foo, bar
}
复制代码

可以看到对象原型上的属性也被循环出来了

在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性

for (let key in obj) {
 if (obj.hasOwnProperty(key)) {
  console.log(obj[key]) // foo
 }
}
复制代码

这时候原型上的 bar 属性就被过滤掉了

Object.keys

Object.keys() 是 ES5 新增的一个对象方法,该方法返回对象自身属性名组成的数组,它会自动过滤掉原型链上的属性,然后可以通过数组的 forEach() 方法来遍历

Object.keys(obj).forEach((key) => {
 console.log(obj[key]) // foo
})
复制代码

for in 循环和 Object.keys() 方法都不会返回对象的不可枚举属性

如果需要遍历不可枚举的属性,就要用到 Object.getOwnPropertyNames() 方法了

Object.getOwnPropertyNames

Object.getOwnPropertyNames() 也是 ES5 新增的一个对象方法,该方法返回对象自身属性名组成的数组,包括不可枚举的属性,也可以通过数组的 forEach 方法来遍历

// 创建一个对象并指定其原型,bar 为原型上的属性
// baz 为对象自身的属性并且不可枚举
const obj = Object.create({
 bar: 'bar'
}, 
{
 baz: {
  value: 'baz',
  enumerable: false
 }
})
obj.foo = 'foo'
// 不包括不可枚举的 baz 属性
Object.keys(obj).forEach((key) => {
 console.log(obj[key]) // foo
})
// 包括不可枚举的 baz 属性
Object.getOwnPropertyNames(obj).forEach((key) => {
 console.log(obj[key]) // baz, foo
})
复制代码

ES2015 (ES6) 新增了 Symbol 数据类型,该类型可以作为对象的键,针对该类型 ES2015 同样新增Object.getOwnPropertySymbols() 方法

Object.getOwnPropertySymbols

Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组,不包括字符串属性

let obj = {
  foo: 'foo'
}
Object.getOwnPropertySymbols(obj).forEach((key) => {
// 什么也不输出, 因为该对象还没有 Symbol 属性
 console.log(obj[key])
})
// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
 [Symbol('baz')]: {
  value: 'Symbol baz',
  enumerable: false
 }
})
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('bar')] = 'Symbol bar'
Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key]) // Symbol baz, Symbol bar
})
复制代码

Reflect.ownKeys

Reflect.ownKeys() 方法是 ES2015 (ES6) 新增的静态方法,该方法返回对象自身所有属性名组成的数组,包括不可枚举的属性和 Symbol 属性

let obj = {
  foo: 'foo'
}
Object.getOwnPropertySymbols(obj).forEach((key) => {
// 什么也不输出, 因为该对象还没有 Symbol 属性
 console.log(obj[key])
})
// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
 [Symbol('baz')]: {
  value: 'Symbol baz',
  enumerable: false
 }
})
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('bar')] = 'Symbol bar' 
Reflect.ownKeys(obj).forEach((key) => {
  console.log(obj[key]) // foo, Symbol baz, Symbol foo
 })