for in
- for in 遍歷數組的時候獲取的是它的索引（索引爲字符串類型的數字。執行加法操作時會變成字符串拼接，減法/乘法/除法時，由於操作符的兩邊只能是數字，因此會被自動轉換爲數字）【數組的索引也可以看作是鍵名】
- for in 在遍歷數組和對象的時候，除了它們本身的元素，還會遍歷其它所有可枚舉的屬性，包括原型（prototype）上的屬性與方法。
- for in 遍歷對象的時候獲取的是它的鍵名
const obj = {name: 'bob', age: 26, birthday: new Date("Jun 2,1990")};
const arr = ["a","b","c"];
arr.kname = "name";
Array.prototype.method = function(){
console.log(this.length)
}
Array.prototype.kproName = "proName";
const result = arr.forEach((value, index, array)=>{
console.log(value, index, array)
});
class cls{
constructor() {
this.name = 'bob';
this.age = 26;
this.birthday = new Date("Jun 2,1990");
}
clsFun() {
return "clsFun";
}
}
cls.prototype.kproName = "proName";
cls.prototype.kmethod = function(){
console.log("proMethod")
}
for(let o in obj) {
console.log(o)
}
for(let o in arr) {
console.log(o)
}
for(let o in new cls()) {
console.log(o);
}
- 如果不想遍歷原型（prototype）上的屬性和方法，需要進行如下判斷，過濾調原型上的屬性和方法。
obj.hasOwnPropery(key)方法可以判斷某屬性是否是該對象的實例屬性
for (var key in myObject) {
if（myObject.hasOwnProperty(key)){
console.log(key);
}
}
Object.getOwnPropertyNames(obj) 方法也可以只獲取對象本身的屬性。
需要注意的是，這裏說的是對象。如果調用 Object.getOwnPropertyNames(class) 獲取類的屬性的話，返回的將是
console.log(Reflect.ownKeys(cls)); //Array(3) [ "prototype", "length", "name" ]
console.log(Object.keys(cls)); //Array []
console.log(Object.getOwnPropertyNames(cls)); //Array(3) [ "prototype", "length", "name" ]
console.log(Reflect.ownKeys(new cls())); //Array(3) [ "name", "age", "birthday" ]
console.log(Object.keys(new cls())); //Array(3) [ "name", "age", "birthday" ]
console.log(Object.getOwnPropertyNames(new cls())); //Array(3) [ "name", "age", "birthday" ]
for of
- 只能遍歷數組，獲取每一個元素
- 不能用來遍歷對象
- 與forEach()不同的是，它可以正確響應break、continue和return語句
- 可以使用Object.keys拿到對象keys的數組，然後再進行 for of 遍歷，但這本質上是遍歷數組
for(let key of Object.keys(obj)) {
console.log(key, obj[key])
}
- for of 適用遍歷數/數組對象/字符串/map/set等擁有迭代器對象的集合。如果你實現了變量的 Symbol.iterator 方法，那自然就可以使用 for of 來遍歷對象了（所有擁有Symbol.iterator的對象被稱爲可迭代的）
Object.prototype[Symbol.iterator] = function(){
let index = 0;
//注意由於下面函數會改變this，所以這裏需要緩存一下
const that = this;
//下面這兩種獲取key的方法都是可行的(它們只會獲取本身的屬性，不會拿到原型prototype上的屬性)
//let propKeys = Reflect.ownKeys(this);
let propKeys = Object.keys(this);
return {
next() {
if (index < propKeys.length) {
let key = propKeys[index];
index++;
return { value: [key, that[key]] };
} else {
return { done: true };
}
}
}
}
//這個是ES6的自動解包的方法
for(let [key, value] of obj) {
console.log(key, value)
}
forEach((currentValue, index, arr){})
- forEach 是 ES5 引入的函數。
- 它支持遍歷數組和容器，依次取得數組中的每一個元素。
- 不能用來遍歷對象
- 使用 return 返回參數無效，使用 break 嘗試中斷循環會報錯。
- forEach 返回 undefined
map((currentValue, index, arr){})
- map 是 ES5 引入的函數。
- 它支持遍歷數組和容器，依次取得數組中的每一個元素。
- 不能用來遍歷對象
- 使用 break 嘗試中斷循環會報錯。
- map 返回一個新的數組，數組中的值是每個回調方法中 return 的值
<html>
<script>
let arr = [ 1, 2, 3, 4, 5, 6 ];
let newArr = arr.map( ( item, index, array ) => {
console.log("item=" + item + ", index=" + index + ", array=" + array);
return item * 2;
} );
console.log(arr);
console.log(newArr);
</script>
</html>
<html>
<script>
let arr = [ 1, 2, 3, 4, 5, 6 ];
let newArr = arr.map( Math.sqrt );
console.log(arr);
console.log(newArr);
</script>
</html>
filter((currentValue, index, arr){})
- 返回一個符合 filter 條件的新數組（並不會改變原始數組）
<html>
<script>
let arr = [ 1, 2, 3, 4, 5, 6 ];
let newArr = arr.filter( ( item, index, array ) => {
console.log("item=" + item + ", index=" + index + ", array=" + array);
return item > 3;
} );
console.log(arr);
console.log(newArr);
</script>
</html>
some((currentValue, index, arr){})
- 對數組中的每一項執行給定函數，若某一項返回 true，則返回 true
- 順序執行，若某一項返回 true，則立即終止並返回 true
- 相當於 “邏輯或”
<html>
<script>
let arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( ( item, index, array ) => {
console.log("item=" + item + ", index=" + index + ", array=" + array);
return item > 3;
} ) );
</script>
</html>
every((currentValue, index, arr){})
- 對數組中的沒一項執行給定函數，若每一項都返回 true，則返回 true
- 順序執行，若某一項返回 false，則立即終止並返回false
- 相當於 “邏輯與”
<html>
<script>
let arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( ( item, index, array ) => {
console.log("item=" + item + ", index=" + index + ", array=" + array);
return item > 3;
} ) );
</script>
</html>
