数组遍历以及数组迭代方式和数组常用方法

103 阅读3分钟

数组的遍历方式:

(1)古老的for循环:

    let arr = [12, 52, 84, 88, 99, 64]
    for (let i = 0; i < arr.length; i++) {
      console.log(`index[${i}]:${arr[i]}`);
    }

(2)forEach循环(迭代方式之一)

    let arr = [12, 52, 84, 88, 99, 64]
    arr.forEach((item, index) => {
      console.log(`index[${index}]:${arr[index]}`);
    })

(3)for-in循环( k输出是以字符串形式输出,但是在当下标遍历数组时,系统会自动转成数字形式,一般不会用来遍历数组)

    // 遍历对象
    let obj = {
      name: 'lili',
      age: '25',
      gender: '女',
      hobby: 'read'
    }
    for (let k in obj) {
      console.log(k, obj[k]);
    }
    // 遍历数组
    /*  k输出是以字符串形式输出,但是在当下标遍历数组时,系统会自动转成数字形式,一般不会用来遍历数组 */
    let arr = [12, 52, 84, 88, 99, 64]
    // 可以遍历原型
    Array.prototype.age = 25
    for (let k in arr) {
      console.log(k, arr[k]);
    }

(4)for-of循环(ES6 用于可迭代对象)

let obj = [{
      name: 'lili',
      age: '25',
      gender: '女',
      hobby: 'read'
    }, {
      name: 'xiaoxiao',
      age: '20',
      gender: '女',
      hobby: 'sing'
    }]
    for (let item of obj) {
      console.log(item);
      // 不可使用for - of
      for (let k in item) {
        console.log(k, item[k]);
      }
    }

for-in以及for-of的区别:

  • 1.功能不同
    for-in是遍历数组的下标
    for-of是遍历数组的元素
  • 2.原型的属性
    for-in会遍历原型的属性
    for-of不会遍历原型的属性
  • 3.数据类型
    for-in可以遍历Object类型
    for-of不可以遍历Object类型
    总结:如果只想要属性值/元素,使用for-of效率更高

数组的迭代方式

(1)map方法(map方法遍历数组元素)

  let arr = [12, 52, 84, 88, 99, 64]
    // 返回的形式是数组
    let rel = arr.map((item, index) => {
      return `index[${index}]:${item}`
    })
    console.log(rel);

(2)filter方法(filter方法挑选出满足条件的元素)

let arr = [12, 52, 84, 88, 99, 64]
    let rel = arr.filter((item) => {
      return item > 70
    })
    console.log(rel);

(3)reduce方法(计算元素的和)

let arr = [12, 52, 84, 88, 99, 64]
    let rel = arr.reduce((sum, item) => {
      return sum + item
    }, 0)
    console.log(rel);

(4)some方法(判断数组中是否有满足条件的元素Boolean值返回)

  let arr = [12, 52, 84, 88, 99, 64]
    let rel = arr.some((item) => {
      return item > 100
    })
    console.log(rel);

(5)every方法(判断数组中是否所有的元素都满足条件Boolean值返回)

   let arr = [12, 52, 84, 88, 99, 64]
    let rel = arr.every((item) => {
      return item > 10
    })
    console.log(rel);

(6)find方法(返回满足条件的元素)

    let arr = [12, 52, 84, 88, 99, 64]
    let rel = arr.find((item) => {
      return item > 55 && item < 70
    })
    console.log(rel);

(7)findIndex方法(查找满足条件的元素返回下标)

 let arr = [12, 52, 84, 88, 99, 64]
    let rel = arr.findIndex((item) => {
      return item === 88
    })
    console.log(rel)

数组常用方法

(1)pop方法(移除数组中最后一个元素)

(2)push方法(在数组最后添加元素)

 let arr = [12, 52, 84, 88, 99, 64]
    arr.push(999)

(3)shift方法(把数组中第一个元素删除)

(4)unshift方法(在数组最前面添加元素)

(5)splice方法(添加或者删除元素)

删除元素

 let arr = [12, 52, 84, 88, 99, 64]
    // 删除下标为4的元素并从这个元素开始查仅仅删除一个
    arr.splice(4, 1)
    console.log(arr);

添加元素

 let arr = [12, 52, 84, 88, 99, 64]
    // 从下标为2的元素开始,移除两个,然后在下标为2的地方添加元素
    arr.splice(2, 2, 999)
    console.log(arr);

(6)sort方法(对数组进行排序)

(7)reverse方法(对数组进行排序)

(8)join方法(将数组中的元素进行拼接)

 let arr = ['Hello', 'World!!!']
    arr = arr.join('')
    console.log(arr);