JavaScript-Array数组的遍历

Array 数组的遍历

1. for 循环遍历

1. 所谓的遍历数组，就是将数组中所有的元素都取出来

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);

2. for 遍历演示

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
for (var i = 0; i < arr.length; i++) {
    
    
  console.log(arr[i]);
}

3. 利用 for 循环遍历修改 Person 原型的 toString

function Person(name, age, gender) {
    
    
  this.name = name;
  this.age = age;
}

//修改Person原型的toString
Person.prototype.toString = function () {
    
    
  return "Person[name=" + this.name + ",age=" + this.age + "]";
};

//创建一个Person对象
var per = new Person("孙悟空", 18);
var per2 = new Person("猪八戒", 28);
var per3 = new Person("红孩儿", 8);
var per4 = new Person("蜘蛛精", 16);
var per5 = new Person("二郎神", 38);

/*
 * 将这些person对象放入到一个数组中
 */
var perArr = [per, per2, per3, per4, per5];

/*
 * 创建一个函数，可以将perArr中的满18岁的Person提取出来，
 * 	然后封装到一个新的数组中并返回
 * arr
 * 	形参，要提取信息的数组
 */
function getAdult(arr) {
    
    
  //创建一个新的数组
  var newArr = [];

  //遍历arr，获取arr中Person对象
  for (var i = 0; i < arr.length; i++) {
    
    
    var p = arr[i];
    //判断Person对象的age是否大于等于18
    if (p.age >= 18) {
    
    
      //如果大于等于18，则将这个对象添加到newArr中
      //将对象放入到新数组中
      newArr.push(p);
    }
  }
  //将新的数组返回
  return newArr;
}

var result = getAdult(perArr);
console.log(result);

4. 利用 for 循环遍历去除数组中重复元素

//创建一个数组
var arr = [1, 2, 3, 2, 2, 1, 3, 4, 2, 5];

//去除数组中重复的数字
//获取数组中的每一个元素
for (var i = 0; i < arr.length; i++) {
    
    
  //console.log(arr[i]);
  /*获取当前元素后的所有元素*/
  for (var j = i + 1; j < arr.length; j++) {
    
    
    //console.log("---->"+arr[j]);
    //判断两个元素的值是否相等
    if (arr[i] == arr[j]) {
    
    
      //如果相等则证明出现了重复的元素，则删除j对应的元素
      arr.splice(j, 1);
      //当删除了当前j所在的元素以后，后边的元素会自动补位
      //此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素
      //使j自减
      j--;
    }
  }
}

console.log(arr);

2. forEach() 遍历

1) 说明

1. JS 中还为我们提供了一个方法，用来遍历数组
2. 这个方法只支持 IE8 以上的浏览器
   • IE8 及以下的浏览器均不支持该方法，所以如果需要兼容 IE8，则不要使用 forEach
   • 还是使用 for 循环来遍历

2) 使用

1. forEach()方法需要一个函数作为参数
2. 像这种函数，由我们创建当但是不由我们调用的，我们称为回调函数
3. 数组中有几个元素函数就会很执行几次,每次执行时，浏览器会将遍历到的元素
   • 以实参的形式传递进来,我们可以定义形参来读取这些内容
4. 浏览器会在回调函数中传递三个参数
   • 第一个参数就是当前正在遍历的元素
   • 第二个参数就是当前正在遍历的元素的索引
   • 第三个参数就是正在遍历的数组

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];

arr.forEach(function (value, index, obj) {
    
    
  console.log(value);
});