4-15 JS数组（遍历数组、forEach、indexOf、find）

1.查看所有元素

1.查看所有属性名

• Object.keys(arr)：查看所有属性名
• Object.values(arr)：查看所有属性值
• for(let i in arr){console.log(i)}：for(in)是自动的所有key都遍历，是用来访问对象的=
• 缺点：以上方法只适合对象，不适合数组，用户在访问时只想访问数字（字符串），不想访问到 x
  
  

2.查看数字（字符串）的属性名和值
for循环是访问数组的常见形式

2.1 使用for循环

for(let i = 0; i< arr.length; i++){
   console.log(`${i}:${arr[i]}`)//注意此处是反引号
}

• ${i}：{}中可以添加一个变量，$没有任何实际含义，就是个符号
• 自己控制让i从0增长到length-1
  

2.2 使用forEach函数

• forEach接收一个函数，这个函数可以去遍历每一项
• 遍历整个数组，每一次都调用传入的函数
• 一般里面常用箭头函数
  arr.forEach( x=>{console.log(x)} )

2.2.1 代码

let arr = [1,2,3,4,5]

arr.forEach(function(xxx,yyy){
console.log(`${yyy}:${xxx}`)//yyy默认是从0开始的，xxx表示输出值
})

2.2.2 自己写一个 forEach

function forEach(array,fn){
   for(i = 0; i < array.length ; i++){
   fn(array[i])
  }
}
forEach(['a','b','c'],function(x){ console.log(x)})

• forEach接收一个数组和一个函数
• 运行forEach会遍历整个数组，会把数组里的每一项作为参数传给fn
• 数组有多少个值就会调用多少次fn
• 和第一个版本几乎等价
  第一版把数组写在前面
  第二版把函数写在前面

//版本一
arr.forEach(function(xxx,yyy){ console.log(`${yyy}:${xxx}`)})
//版本二
forEach(['a','b','c'],function(x){ console.log(x)})

• 只要把数组、forEach、函数三者结合在一起就可以了
  
• 函数传入3个参数：值、下标、数组本身
  一般只要前两个，特殊情况需要array

function forEach(array,fn){
   for(i = 0; i < array.length ; i++){
   fn(array[i],i,array)//一般只要前两个，特殊情况需要array
  }
}
forEach(['a','b','c'],function(x,y,z){ console.log(x,y,z)})

2.3 for循环和forEach遍历数组的区别

• for循环里面有break和continue，可以随时停下遍历
• 而forEach只是个普通的函数，不支持break和continue，一旦开始就要走到尾
• for循环是关键字，不是函数，因此里面只有块级作用域
• forEach是个函数，里面有函数作用域
  

3.查看单个属性

• 跟对象一样
  let arr = [11,22,33]
arr[0]
  JS中没有数字下标这一说，所有都会变成字符串

• 索引越界
  如果给的下标不存在，就会出现索引越界
  arr[arr.length]===undefined
arr[-1]===undefined
undefined不是一个对象，不是对象就没有toString

• 越界报错
  Cannot read property ‘toString’ of undefined
  

• 查看某个元素是否在数组里
  arr.indexOf(item)：存在返回其找到的第一个下标，否则返回 -1
  

• 使用条件查找元素
  箭头函数写法：arr.find( x=>x%5===0 )
  普通函数写法：arr.find(function(x){return x%5===0})
  返回满足条件的值
  1.find接收一个函数，函数就是要判断的条件
  2.find的特点是只要找到一个非false值，就会马上停止并返回该值
  

• 使用条件查找元素的索引（下标）
  arr.findIndex(function(x){return x%5===0})：返回满足条件的值的下标