乐趣区

重学ES6之出来混迟早要还的三未写完版

jiezi

本系列博客为 ES6 基础语法的使用及总结，如有错误，欢迎指正。
重学 ES6 之出来混迟早要还的（三）主要包括for of 循环。

for of 循环

循环的几种方式

普通 for 循环

for(let i=0;i<arr.length;i++){// 内容}

forEach 循环

1.forEach 的使用

  • 格式

    arr.forEach(function (element,index,array) {console.log(element,index,array);
})
  • forEach 方法会自动调用传入的函数
  • 每次调用都会将当前遍历到的元素和当前遍历到的索引和当前被遍历的数组传递给这个函数

2.forEach 注意点

  • forEach 不能终止、不能跳过

for in 循环

1.for in 循环的使用

let arr = ['god','gosh','jesus','christ'];
for(let key in arr){console.log(key); // 取出的是索引
   console.log(arr[key]); // 取出的是值
}

2.for in 循环的注意点

  • console.log(key); –> 取出的是索引
    console.log(arr[key]); –> 取出的是值

  • for in 循环遍历的是对象上的所有可枚举属性(包括原型上面的属性)

    Array.prototype.des = function(){return this[0];
};
let arr = ['god','gosh','jesus','christ'];
arr.title = 'words';
for(let key in arr){console.log(key); // 取出的是索引
   console.log(arr[key]); // 取出的是值
}

  • 在企业开发中不推荐使用 for-in 循环来遍历数组
  • 对象中的属性是无序的，for-in 循环就是专门用于遍历无序的东西的

for-in 循环是专门用于遍历对象的, 对象的属性是无序的, 所以 for-in 循环就是专门用于遍历无序的东西的, 因此不推荐使用 forin 循环来遍历数组

for of 循环

1. 使用格式

Array.prototype.des = function(){return this[0];
};
let arr = ['god','gosh','jesus','christ'];
arr.title = 'words';
for(let key of arr){console.log(key); // 直接遍历的是值
}

2. 注意点

  • console.log(key); –> 直接遍历的是值
  • 不会遍历原型上面的属性
  • 支持循环的终止和跳过

Object.keys() 方法遍历属性

1. 用法

  • Object.keys()将一个对象中的属性名放到一个数组中；数组中每个元素类型为 string
  • 数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致。
  • 如果对象的键 - 值都不可枚举，那么将返回由键组成的数组。

遍历对象时：

let object1 = {
    a: 'somestring',
    b: 42,
    c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

遍历数组时：

// simple array
let arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
console.log(typeof Object.keys(arr)[0]); //string

遍历类数组：

// array like object
let obj = {0: 'a', 1: 'b', 2: 'c'};
console.log(Object.keys(obj)); // console: ['0', '1', '2']

遍历对象时是无序的 (也就是上文所说的 数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致。)

// array like object with random key ordering
var anObj = {100: 'a', 2: 'b', 7: 'c'};
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

2.Object.keys() 方法可以用来判断一个对象是否为空
利用Object.keys() 方法返回的数组，判断该数组长度是否为 0；长度为 0 则代表该对象为空；反之则不为空

let object1 = {
    a: 'somestring',
    b: 42,
    c: false
};
let keys = Object.keys(object1);
console.log(keys);
console.log(keys.length === 0); //false

for of 循环的再探讨

1.for of 循环可以用来遍历可迭代对象，在上一篇 ES6 语法文章中也提到了什么是可迭代对象

可迭代对象就是部署了 Iterator 接口，或者是定义了 [Symbol.iterator] 方法的数据结构，在 ES6 中 Iterator 接口主要供 for of 消费。

好，弟中弟中弟又要问了：什么是[Symbol.iterator]，顺手放个参考链接

a zero arguments function that returns an object,conforming to the iterator protocol

2.entries() 方法
entries() 方法返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键 / 值对。

let arr = ['god','gosh','jesus','christ'];
for(let key of arr){console.log(key);
}

在控制台输入arr.entries()，返回一个新的 Array Iterator 对象

3. 返回一个新的 Array 迭代器对象。Array Iterator 是对象，它的原型（__proto__:Array Iterator）上有一个 next 方法，可用用于遍历迭代器取得原数组的[key,value]。

  • next 方法每次执行都会返回一个对象{value: Array(2), done: false}
  • 这个对象中存储了当前取出的数据和是否取完了的标记，未取完标记是 false，取完了标记是 true


4. 使用 for of 遍历arr.entries()（也就是它的 iterator），返回的是一个数组，可以同时获取到原数组中每个索引的键 / 值对。

let arr = ['god','gosh','jesus','christ'];
for(let key of arr.entries()){console.log(key);
}


5. 当然了，分开写分开获取也是可以的

let arr = ['god','gosh','jesus','christ'];
for(let key of arr.entries()){// console.log(key);
   console.log(key[0]); // 获取索引
   console.log(key[1]); // 获取属性值
}

可以利用解构赋值对处理键值完成后续操作

let arr = ['god','gosh','jesus','christ'];
for(let [index,value] of arr.entries()){// console.log(key);
   // console.log(key[0]); // 获取索引
   // console.log(key[1]); // 获取属性值
   console.log((` 第 ${index + 1}个单词是 ${value}`));
}

6.for of 循环可以用 Array/Map/Set/String/TypedArray/arguments 对象 /NodeList 对象。因此在遍历时不需要考虑是否可以使用哪种循环，for of 可以解决这些场景；但是 for of 循环不支持对象的遍历

function sum() {
    let count = 0;
    for (let key of arguments){count = count + key;}
    return count;
}
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8));
退出移动版