js for...in、for...of 、forEach和map的区别

 

· for( let i = 0; i < arr.length; ++i )

· for ( let i in arr )

· for (let item of arr)

· arr.forEach((item,i) => {/*...*/})

 

语法

for...in 和for 访问的数组下标，而不是实际的数组元素值

for (let i = 0; i< arr.length; ++i) {
  console.log(arr[i]);      
}

for (let i in arr) {
  console.log(arr[i]);
}

 

使用 for...of 直接访问数组的元素

for (let item of arr) {
    console.log(item)
}

 

使用forEach() , 则可以同时访问数组的下标和元素值

arr.forEach((item,i) => {
  console.log(item)
})

 

非数字属性

js中的数组就是Object， 意味着我们可以给数组添加字符串属性

const arr = ["a","b","c"];
typeof arr; // object

arr.test = "bac";  // 添加非数字属性

 

4种循环方法只有for...in 不会忽略非数字属性：

const arr = ["a","b","c"];

arr.test = "def";

for (let i in arr) {
  console.log(arr[i]);     // "a" "b" "c" "def"
}

for(let i = 0; i < arr.length; ++i) {
    console.log(arr[i];)    // "a,b,c"
}

for(let item of arr) {
  console.log(item)   // "a,b,c"
}

arr.forEach((item,i,arr) => {
    console.log(item)  // "a,b,c"
})

所以，for...in 会遍历数组内可枚举的属性，包括原型上的属性和方法，for in 更适合遍历对象，尽量不要使用 for in 遍历数组

 

数组的空元素

for in 与forEach 会跳过空元素， 而 for 与for of 不会

let arr = ["a",,"c"];   // 注意a和c的引号

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);   // "a, undefined, c"
}

for(let item of arr) {
  console.log(item)   //  "a,undefined,c"
}

for(let i in arr) {
  console.log(arr[i]);  // "a,c"
}
arr.forEach((item,i) => {
  console.log(item);   // "a,c"
})

 

for...in 适合遍历对象，不适合遍历数组

for...of 可以遍历数组/字符串/map/set等拥有迭代器对象的集合， 能正确响应break、return、continue 语句

forEach 使用break不能中断循环，使用return也不能返回到外层函数， 不会生成新数组，也不会该不改变原数组。

 

 

map

和forEach类似，map会把数组中的每项遍历一遍，会返回一个新数组，保持原数组不变，map不会对空数组进行检测

 

filter

把满足条件的元素拿出来放到一个新数组，不会改变原数组

 

let arr = [1,2,2,3]  // 数组去奇
let arr1 = arr.filter(item => {
　　return item % 2 === 0;
})

console.log(arr1);  // [2，2]
// 注意原数组不会改变

 

数组去重：

方法1：

let arr = [1,2,2,3]
function unique(arr){
  let arr1 = []
  for (let item of arr) {
     if (arr1.indexOf(item) == -1) {
        arr1.push(item)
     }
   }
   return arr1
}
let arr2 = unique(arr)
console.log(arr2)

 

方法2（需多理解）：

 

let phone = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子']
let result = phone.filter((el,index,arr) => {
　　return arr.indexOf(el) == index
})
console.log(result)

 

方法3 （es6写法）：

let arr = [1,2,2,3]
let arr2 = [...new set(arr)]
console.log(arr2)


// 
let arr3 = Array.from(new set(arr))   // Array.from() 能把set结构转换为数组
console.log(arr3)  

 

 

 

indexOf():

语法：

stringObject.indexOf(searchvalue, fromindex)

 

searchvalue: （必需） 规定检索的字符串值
fromindex：（可选） 规定在字符串中检索的位置，合法值是- 到stringObject.length - 1.

提示和注释：

• indexOf() 对大小写敏感
• 如果检索的字符串值没有出现，则该方法返回 -1

 

 

Array.isArray()

Array.isArray() 用于确定传递的值是否是一个Array

返回值： 如果值是Array, 则为true， 否则为false