JavaScript数组

数组(Array),引用数据类型(复杂数据类型),用来存储一组相关的值,从而方便进行求和、计算平均数、逐项遍历等操作。

一、数组定义

1 使用 [] 定义,其中每一个用,分割的内容称之为数组的
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr)
2 使用 new Array 定义。
var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9)
console.log(arr)
3 使用 new Array 定义,只定义长度,不定义项,这种定义方法每一项的值都是 undefined
var arr = new Array(4)
console.log(arr)

二、数组访问

1 数组的每一项都有一个下标,数组的下标从 0 开始,可以使用方括号中书写下标的形式,访问数组的任一项。
var arr1 = new Array(4)
console.log(arr1[0])
var arr2 = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9)
console.log(arr2[2])
2 访问数组中不存在的下标项会返回 undefined 不会报错。
var arr = new Array(1, 2, 3, 4)
console.log(arr[4])
3 我们可以通过数组 length 属性来获取数组的长度,并且数组最后一项的下标为数组长度减1。
var arr = new Array(1, 2, 3, 4)
var arrLength = arr.length
console.log(arr[arrLength - 1])

三、数组修改

1 对数组中已存在的项进行修改。
var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9)
console.log('修改前数组:', arr)
arr[0] = 10 
console.log('修改后数组:', arr)
2 对数组中不存在的项进行修改。
var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9)
console.log('修改前数组:', arr)
arr[18] = 10 
console.log('修改后数组:', arr)

四、数组常用操作

1 isArray:检测是否是数组类型
// 思考为什么不用typeof检测?
var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9)
console.log('isArray检测结果:', Array.isArray(arr))
console.log('typeof检测结果:', typeof arr)
2 push:在数组结尾插入一项,调用push方法后会直接改变原数组值,并返回插入的项
var arr = [1, 2, 3]
var res = arr.push(4)
console.log(arr)
console.log(res)
3 unshift:在数组开头插入一项,调用unshift方法后会直接改变原数组值,并返回插入的项
var arr = [1, 2, 3]
var res = arr.unshift(4)
console.log(arr)
console.log(res)
4 pop:删除数组最后一项,调用pop方法后会直接改变原数组值,并返回删除的项
var arr = [1, 2, 3, 4]
var res = arr.pop()
console.log(arr)
console.log(res)
5 shift:删除数组第一项,调用shift方法后会直接改变原数组值,并返回删除的项
var arr = [1, 2, 3, 4]
var res = arr.shift()
console.log(arr)
console.log(res)
6 indexOf:判断数组中是否存在某一项,存在的会返回当前项在数组中的下标,不存在返回-1
var arr = [1, 2, 3, 4]
var index_exist = arr.indexOf(3)
var index_unexist = arr.indexOf(20)
console.log(arr)
console.log(index_exist)
console.log(index_unexist)
7 includes:判断数组中是否存在某一项
var arr = [1, 2, 3, 4]
var is_includes = arr.includes(3)
var is_unincludes = arr.includes(20)
console.log(arr)
console.log(is_includes)
console.log(is_unincludes)
8 reverse:将原数组中的项的顺序反过来,这个操作将直接改变原数组,并返回修改后的数组
var arr = [1, 2, 3, 4]
console.log('原数组:', arr)
var res = arr.reverse()
console.log('新数组:', arr)
console.log(res)
9 split:将字符串以其中某一个字符进行分割成数组
var arr_string = '1, 2, 3, 4'
var arr = arr_string.split(',')
console.log('字符串:', arr_string)
console.log('数组:', arr)
10 join:将字符串以其中某一个字符进行分割成数组
var arr = [1, 2, 3, 4]
var arr_string = arr.join(',')
console.log('数组:', arr)
console.log('字符串:', arr_string)
11 concat:将两个数组合并,并返回新数组,不会改变原数组
var arr = [1, 2, 3, 4]
console.log('原数组:', arr)
var add_arr = [5, 6, 7]
var res = arr.concat(add_arr)
console.log('操作后数组:', arr)
console.log('操作结果:', res)
12 splice:替换数组中指定项,会修改原数组,splice(index, howmany, item1, item2, ...)返回删除项的数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8]
console.log('原数组:', arr)
// 从下标为2的位置删除1个项,并添加三个新的项
var res = arr.splice(2, 1, 99, 99, 99)
console.log('新数组:', arr)
console.log('返回结果:', res)
13 sort:数组排序,参数为一个函数,函数有两个值a,b分别表示数组中靠前和靠后的一项,如果需要他们的位置,则返回一个任意的正数,否则就返回一个负数
var arr = [5, 6, 2, 4]
var res = arr.sort(function(a, b) {
  if (a > b) {
    return 1
  } else {
    return -1
  }
})
console.log('原数组:', arr)
console.log('返回结果:', res)

五、数组遍历

var arr = [5, 6, 2, 4]
for (var i = 0; i < arr.length - 1; i++) {
  console.log(arr[i])
}

六、数组克隆

1 为什么要对数组进行克隆,先看下面的代码
var arr1 = [5, 6, 2, 4]
var arr2 = arr1
arr1[1] = 4
console.log('数组1:', arr1)
console.log('数组2:', arr2)

在上面代码中,我们将arr1赋值给arr2,然后我们修改arr1中的某一项,这时我们会发现arr2中相关项的值也被修改了,这里涉及到两个概念:栈和堆,栈和堆是计算机内存中两个重要区域,对于基本数据类型的值是直接存储在栈中,而在复杂数据类型中,数据是存储在堆的内存区块里面的,每一个区块都有相应的内存地址,栈中存储的是变量对应值在堆中的内存地址,所以当我们将arr1赋值给arr2,其实是将arr1的值的内存地址赋值给arr2,所以当我们修改arr1的中某个项的值的时候,arr2的值也会发生变化,下面我们用两张图来分别表示下基本数据类型和引用数据类型对应栈和堆的关系

基本数据类型: 基本数据类型 引用数据类型: 引用数据类型

2 浅克隆:只对数组的第一层进行克隆
var arr1 = [1, 2, 3, 4]
var arr2 = []
for (var i = 0; i < arr1.length; i++) {
  arr2.push(arr1[i]);
}
arr1[1] = 4
console.log('数组1:', arr1)
console.log('数组2:', arr2)
2 深克隆:如果数组中某一项的值也是引用类型,将继续对该项及其内部值一起进行遍历

七、作业:求数组中每一项的总和,平均数:[1, 2, 3, 4, 5]

Copyright © 高笑石 (2021 - present) all right reserved,powered by Gitbook文件修订时间: 2023-04-27 16:24:18

results matching ""

    No results matching ""