JavaScript-数组高级API

发布于 2019-05-17  58 次阅读


遍历数组的方式

  • 传统for循环
for(let i = 0; i < arr.length; i++){
            console.log(arr[i]);
        }
  • 利用forin循环来遍历数组
  • for...in语句以任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性。对于每个不同的属性,语句都会被执行。
    • 注意点: 在企业开发中不推荐使用forin循环来遍历数组
for(let key in arr){
            // console.log(key);
            console.log(arr[key]);
        }
  • 注意点: 对象中的属性是无序的
  • forin循环是专门用于遍历对象的, 但是对象的属性是无序的, 所以forin循环就是专门用于遍历无序的东西的, 所以不推荐使用forin循环来遍历数组
 function Person(){
      this.name = "hjs";
      this.age = 18;
      this.score = 99;
    }

    let p = new Person();

    for (let key in p) {
      console.log(p[key]);
    }
  • 利用ES6中推出的for of循环来遍历数组
for(let value of arr){
      console.log(value);
    }
  • 还可以用Array对象的forEach方法来遍历数组
arr.forEach(function (currentValue,currentIndex,currentArray) {
      console.log(currentValue, currentIndex, currentArray);
    })
  • forEach实现原理
 //通过Array构造函数,的原型对象创建一个myforEach方法
    Array.prototype.myForEach = function (fn) {
      //利用传统for循环循环接收的数组,此时的this是调用该方法的数组
      for (let i = 0; i <this.length ; i++) {
        //调用fn回调函数传入遍历的值,遍历到的元素this[i],遍历到的索引i,被遍历的数组this
        fn(this[i],i,this);
      }
    };
    arr.myForEach(function (currentValue,currentIndex,currentArray) {
      console.log(currentValue, currentIndex, currentArray);
    });
  • 数组的findIndex方法
    • findIndex方法是indexof的定制版,找到返回索引找不到返回-1
let arr = [1,3,5,7,9];

    //数组的findIndex方法
    //findIndex方法是indexof的定制版,找到返回索引找不到返回-1

    // 调用数组的findIndex方法传入三个参数
    let res = arr.findIndex(function (currentValue,currentIndex,currentArray) {
      //判断传入的数组中是否有当前需要的元素,没有就返回-1,有就返回索引
      if (currentValue === 5){
        return true;
      }
    });

    console.log(res);
  • findIndex实现原理
//通过Array构造函数创建一个myfindIndex方法,接收三个参数通过fn传入
    Array.prototype.myFindIndex = function (fn) {
      //利用for循环遍历传入的数组
      for (let i = 0; i <this.length ; i++) {
        //把遍历到的元素,索引,被遍历的数组传入fn再赋值给elm
        let elm = fn(this[i],i,this);
        //判断elm为true
        if(elm){
          //就反回数组的索引 i
          return i;
        }else {
          //找不到就返回 -1;
          return -1;
        }
      }
    };


    let res = arr.myFindIndex(function (currentValue,currentIndex,currentArray) {
      if(currentValue === 2){
        return currentValue;
      }
    });
    console.log(res);
  • 数组的find方法,找到指定元素就返回元素,找不到就返回undefined
let res = arr.find(function (currentValue,currentIndex,currentArray) {
      if(currentValue === 3){
        return true;
      }
    });

    console.log(res);
  • find方法实现原理
//通过Array构造函数创建一个myfindIndex方法,通过fn接收外部传入的参数
    Array.prototype.myFind = function (fn) {
      //利用for循环遍历传入的数组
      for (let i = 0; i <this.length ; i++) {
        // 把遍历到的元素,索引,被遍历的数组传入fn再赋值给result
        let result = fn(this[i],i,this);
        //判断是否等于undefined不等于undefined就满足条件执行下面的return result
        if(result !== undefined){
          return result;
        }
      }
    };

    let res =arr.myFind(function (a,b,c) {
      if(a === 2){
        return a;
      }
    });

    console.log(res);
  • 数组的filter方法
    • 将满足条件的元素添加到一个新的数组中
let res = arr.filter(function (currentValue,currentIndex,currentArray) {
      if(currentValue % 2 === 0){
        return true;
      }
    });

    console.log(res);
  • filter方法实现原理
    • 需要用到数组方法push
    • push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
Array.prototype.myFilter = function (fn) {
      //创建一个新的数组
      let newArray = [];
      //遍历接收的数组
      for (let i = 0; i <this.length ; i++) {
        // 创建一个新的变量接收传到fn回调函数里的值
        let result = fn(this[i],i,this);
        // 判断为真就执行if里面的代码
        if (result) {
          //把数组的每个元素(this[i])通过push方法传入新建的newAarray数组里
          newArray.push(this[i]);
        }
      }
      return newArray;
    };
  • 数组的map方法
  • 将满足条件的元素映射到一个新的数组中
let res = arr.map(function (currentValue,currentIndex,currentArray) {
      if(currentValue % 2 === 0){
        return currentValue;
      }
    });

    console.log(res);
  • map实现原理
Array.prototype.myMap = function (fn) {
      let result = new Array(this.length);  // 创建一个与数组调用者的长度一致的空数组
      for (let idx = 0; idx < this.length; idx ++) {
        result[idx] = fn(this[idx], idx, this); // 把新数组中当前索引的元素赋值为回调函数的返回结果
      }
      return result;
    };

改变思想才能改变我们的人生