JS 数组创建、访问、常用方法

最新推荐文章于 2021-09-09 10:42:22 发布

「已注销」

最新推荐文章于 2021-09-09 10:42:22 发布

阅读量590

点赞数 1

分类专栏： # ECMAScript 文章标签： js javascript

本文链接：https://blog.csdn.net/Ares5kong/article/details/117254330

版权

ECMAScript 专栏收录该内容

20 篇文章 5 订阅

订阅专栏

2. push() 新增元素 - 末尾添加

3. unshift() 新增元素 - 开头添加

4. pop() 移除元素 - 末尾删除

5. shift() 移除元素 - 开头删除

10. join() 转字符串并以指定符号连接

11. isArray() 判断是否为数组

12. forEach() 遍历数组

13. map() 遍历并返回新数组

14. filter() 遍历并过滤后返回新数组

创建

<script>
  // 方式 1
  let a = []
  a[0] = '1'
  a[1] = '2'
  a[2] = '3'
  console.log(a)

  // 方式 2
  let b = new Array()
  b[0] = '1'
  b[1] = '2'
  b[2] = '3'
  console.log(b)

  // 方式 3
  let c = ['1', '2', '3']
  console.log(c)

  // 方式 4
  let d = new Array('1', '2', '3')
  console.log(d)

  // 方式 5 构造参数为一个数字时, 代表申请数组长度
  let e = new Array(3)
  console.log(e)
</script>

访问

<script>
  let d = ['1', '2', '3']
  console.log(d[0])
  console.log(d[1])
  console.log(d[2])
</script>

常用属性和相关方法

1. length 长度属性

返回数组长度

<script>
  let arr = [1, 2, 3, 4, 5];
  console.log(arr.length) // 结果: 5
</script>

2. push() 新增元素 - 末尾添加

将一个或多个元素添加到数组的末尾, 并返回添加后的长度

<script>
  let arr = [1, 2, 3, 4, 5];
  console.log(arr.push(6, 7)) // 结果: 7
  console.log(arr) // 结果: [1, 2, 3, 4, 5, 6, 7]
</script>

3. unshift() 新增元素 - 开头添加

将一个或多个元素添加到数组的开头, 原元素自动后移, 并返回添加后的长度

<script>
  let arr = [1, 2, 3, 4, 5];
  console.log(arr.unshift(6, 7)) // 结果: 7
  console.log(arr) // 结果: [6, 7, 1, 2, 3, 4, 5]
</script>

4. pop() 移除元素 - 末尾删除

删除数组中最后一个元素, 并返回被删除的元素值

<script>
  let arr = ['a', 'b', 'c', 'd', 'e'];
  console.log(arr.pop()) // 结果: e
  console.log(arr) // 结果: ['a', 'b', 'c', 'd']
</script>

5. shift() 移除元素 - 开头删除

删除数组中第一个元素, 并返回被删除的元素值

<script>
  let arr = ['a', 'b', 'c', 'd', 'e'];
  console.log(arr.shift()) // 结果: a
  console.log(arr) // 结果: ['b', 'c', 'd', 'e']
</script>

6. concat() 复制数组后新增

复制原来数组, 并在新数组中添加元素，不会影响原数组

<script>
  let arr = ['a', 'b', 'c', 'd', 'e'];
  let arr2 = arr.concat('f', 'g')
  console.log(arr) // 结果: ['a', 'b', 'c', 'd', 'e']
  console.log(arr2) // 结果: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
</script>

7. slice() 复制数组

根据起始位置和结束位置复制一份数组, 不会影响原数组

<script>
  let arr = ['a', 'b', 'c', 'd', 'e'];
  let arr2 = arr.slice(1)
  let arr3 = arr.slice(1, 4)
  console.log(arr) // 结果: ['a', 'b', 'c', 'd', 'e']
  console.log(arr2) // 结果: ['b', 'c', 'd', 'e']
  console.log(arr3) // 结果: ['b', 'c', 'd']

  // 经典案例: 伪数组转真数组
  function func(){
    console.log(Array.isArray(arguments)) // false
    console.log(Array.isArray([].slice.call(arguments))) // true
  }
  func()
</script>

8. splice() 增删改

splice( 索引, 要删除的个数, 新元素1, 新元素2...)

很强大的方法, 可以对数组进行增删改, splice() 方法的返回值是被删除的数组元素。

<script>
  // 增
  let arr = ['a', 'b', 'c', 'd', 'e'];
  // 从索引 0 开始, 不删除, 插入 f 和 g
  console.log(arr.splice(1, 0, 'f', 'g')) // 结果：被删除元素为 []
  console.log(arr) // 结果：["a", "f", "g", "b", "c", "d", "e"]

  // 删
  let arr2 = ['a', 'b', 'c', 'd', 'e'];
  // 从索引 1 开始, 删除两个
  console.log(arr2.splice(1, 2)) // 结果：被删除元素为 ["b", "c"]
  console.log(arr2) // 结果：["a", "d", "e"]

  // 改
  let arr3 = ['a', 'b', 'c', 'd', 'e'];
  // 从索引 1 开始, 删除两个, 然后插入 f 和 g
  console.log(arr3.splice(1, 2, 'f', 'g')) // 结果：被删除元素为 ["b", "c"]
  console.log(arr3) // 结果： ["a", "f", "g", "d", "e"]
</script>

9. toString() 转字符串

调用数组内各个元素的 toString() 方法, 并把每个元素的 toString() 结果用逗号相连

<script>
  let arr = ['a', 'b', 'c', 'd', 'e'];
  console.log(arr.toString()) // 结果：a,b,c,d,e

  // 重写对象的 toString()
  let arr2 = [
    {
      name: 'a',
      toString: function () {
        return this.name;
      }
    },
    {
      name: 'b',
      toString: function () {
        return this.name;
      }
    },
    {
      name: 'c',
      toString: function () {
        return this.name;
      }
    }]
  console.log(arr2.toString()) // 结果：a,b,c
</script>

10. join() 转字符串并以指定符号连接

调用数组内各个元素的 toString() 方法, 并把每个元素的 toString() 结果用连接符相连

<script>
  let arr = ['a', 'b', 'c', 'd', 'e'];
  console.log(arr.join('-')) // 结果：a-b-c-d-e

  // 重写对象的 toString()
  let arr2 = [
    {
      name: 'a',
      toString: function () {
        return this.name;
      }
    },
    {
      name: 'b',
      toString: function () {
        return this.name;
      }
    },
    {
      name: 'c',
      toString: function () {
        return this.name;
      }
    }]
  console.log(arr2.join('-')) // 结果：a-b-c
</script>

11. isArray() 判断是否为数组

判断变量是否是数组类型, true: 数组 false: 非数组

<script>
  let num = 1;
  console.log(Array.isArray(num)) // 结果：false

  let arr = ['a', 'b', 'c', 'd', 'e'];
  console.log(Array.isArray(arr)) // 结果：true
</script>

12. forEach() 遍历数组

遍历数组, 回调函数的参数都是可选的, 但是必须保证参数列表顺序

<script>
  // 语法:
  // forEach(function (当前元素, 当前下标, 数组本身) {
  // })

  let arr = ['a', 'b', 'c', 'd', 'e'];
  arr.forEach(function (item, index, array) {
    console.log('第' + index + '个索引位置的数据是' + item)
    if (index === arr.length - 1) {
      console.log('数组对象:' + array)
    }
  })
</script>

13. map() 遍历并返回新数组

遍历数组, 每一次遍历都必须有一个返回值(默认返回 undefined), 最后根据每一次的返回值返回一个新的数组

回调函数的参数都是可选的, 但是必须保证参数列表顺序

<script>
  // 语法:
  // map(function (当前元素, 当前下标, 数组本身) {
  //     return item
  // })

  let arr = ['a', 'b', 'c', 'd', 'e'];
  let arr2 = arr.map(function (item, index, array) {
    return item += '1'
  })
  console.log(arr2) // 结果：["a1", "b1", "c1", "d1", "e1"]
</script>

14. filter() 遍历并过滤后返回新数组

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 最后把所有返回 true 的元素, 筛选成一个新的数组

<script>
  // 语法:
  // filter(function (当前元素, 当前下标, 数组本身) {
  //     return true;
  // })

  let arr = ['a', 'b', 'c', 'd', 'e'];
  let arr2 = arr.filter(function (item, index, array) {
    return item === 'a' || item === 'e'
  })
  console.log(arr2) // 结果：["a", "e"]
</script>

15. some() 任意命中

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 只要有一次返回了 true, 那么 some() 的返回值就为 true

<script>
  // 语法:
  // some(function (当前元素, 当前下标, 数组本身) {
  //     return true;
  // })

  let arr = ['a', 'b', 'c', 'd', 'e'];
  console.log(arr.some(function (item, index, array) {
    return item === 'a'
  })) // 结果: true

  console.log(arr.some(function (item, index, array) {
    return item === 'z'
  })) // 结果: false
</script>

16. every() 全部命中

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 当所有的返回都为 true, 那么 every() 的返回值就为 true

<script>
  // 语法:
  // every(function (当前元素, 当前下标, 数组本身) {
  //     return true;
  // })

  let arr = ['a', 'b', 'c', 'd', 'e'];
  console.log(arr.every(function (item, index, array) {
    return item.length > 0
  })) // 结果: true

  console.log(arr.every(function (item, index, array) {
    return !item === 'e'
  })) // 结果: false
</script>

17. find() 查找

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 当碰见返回 true 的元素时, 停止遍历, 并返回该元素。

和 filter() 不同的是, filter() 会遍历完整个数组, 而 find() 只要碰见一次 true，就会直接停止遍历。

<script>
  // 语法:
  // find(function (当前元素, 当前下标, 数组本身) {
  //     return true;
  // })

  let arr = ['a', 'b', 'c', 'd', 'e'];
  let arr2 = arr.find(function (item, index, array) {
    return item === 'a'
  }) // 结果：a

  // 这个地方如果用 filter() 遍历, 会返回 ['a', 'e'], 但是用 find() 遍历只会返回 'a'
  // 因为 find() 遍历时, 只要有一次返回 true, 就会停止遍历
  // 第一次遍历 item === 'a' 这个结果返回 true, 所以遍历直接结束了
  let arr3 = arr.find(function (item, index, array) {
    return item === 'a' || item === 'e'
  })
  console.log(arr2) // 结果：a
</script>

18. reduce() 归并方法

作用：

遍历数组。每一次遍历, 都会把上一次遍历的结果，当作参数传入，

当是第一次遍历时, 因为没有上一次的结果, 所以需要指定一个初始值, 来代替上一次遍历结果

语法结构：
reduce(function (prev, item, index, array) {
return result
}, init))

参数解释：

prev: 上一次遍历的结果

item: 当前元素

index: 当前索引

array: 数组

init: 初始值。用来代替第一次遍历时, 没有上一次结果的情况。第一次遍历时 init 赋值给 prev

使用案例：

<script>
  // 累计求和
  let arr = [1, 2, 3, 4, 5]
  console.log(arr.reduce(function (prev, item, index, array) {
    return prev + item;
  }, 0)) // 结果：15

  // 求最大值
  console.log(arr.reduce(function (prev, item, index, array) {
    return Math.max(prev, item)
  }, 0)) // 结果：5
</script>

案例分析：

(1) 累计求和 - 共遍历五次：

第一次: prev = init = 0, item = 1, index = 0, array = 数组, 返回值 = 0 + 1

第二次: prev = 1, item = 2, index = 1, array = 数组, 返回值 = 1 + 2

第三次: prev = 3, item = 3, index = 2, array = 数组, 返回值 = 3 + 3

第四次: prev = 6, item = 4, index = 3, array = 数组, 返回值 = 6 + 4

第五次: prev = 10, item = 5, index = 4, array = 数组, 返回值 = 10 + 5

(2) 求最大值 - 共五次遍历

第一次: prev = init = 0, item = 1, index = 0, array = 数组, 返回值 = Math.max(0, 1)

第二次: prev = 1, item = 2, index = 1, array = 数组, 返回值 = Math.max(1, 2)

第三次: prev = 2, item = 3, index = 2, array = 数组, 返回值 = Math.max(2, 3)

第四次: prev = 3, item = 4, index = 3, array = 数组, 返回值 = Math.max(3, 4)