05-JS数组

数组

一、数组数据类型

1. 数组的概念

数组是计算机空间中一段有序的连续空间，使用一个变量名表示

数组和对象的区别

1. 数组：有序的数据集合
2. 对象：无需的数据集合

2. 数组的创建

// 1. 声明式
var arr = []
// 2. 构造函数
var arr = new Array()
1
2
3
4

3. 数组中数据的使用规则

1. 数组和对象的本质都一样的，是为了存储数据（数据也可以是任意的类型）
2. 对象是键值对方式存储的，数据有下标/索引
3. 数组的下标是表示当前数据是第几个，默认是从0开始的

// 面试题
var arr = new Array(1,2,3)//1 2 3
var arr = new Array(1)//empty

// 使用构造函数方式创建存储数据的时候，数据有多个表示有多个空间都存储了数据
// 当存储数据时候设置了一个，表示只是开辟空间，没有存储数据
// 加逗号也不行
1
2
3
4
5
6
7

4. 数组的下标

类似书籍的目录。是为了找出对应的目标数据。

// 1. 通过索引获取相应数据方法：数组[下标]
var arr = ["张三","李四","王五"]
console.log(arr[0]) // 张三

// 2. 查看数组中元素的个数：数组.length
var arr = ["张三","李四","王五"]
console.log(arr.length) //3
1
2
3
4
5
6
7

数组下标和长度的总结

1. 数组的第一个元素的下标永远是0
2. 数组的最后一个元素的下标是数组长度-1

5. 数组的操作

// 1. 增加：数组[下标] = 数据
// 2. 修改：数组[下标] = 数据
// 3. 删除：数组.length = 0
// 4. 查询：数组[下标]
1
2
3
4

6. 数组的遍历

var arr = ["张三","李四","王五"]
for(var i=0;i<arr.length;i++){
	console.log(arr[i]);
}
1
2
3
4

关于变量的条件两种写法

第一种： i

第二种： i<=arr.length-1

// 案例1：利用for循环求数字数组中所有元素的和
var arr = [1,2,3,4,5]
var sum = 0
for(var i=0;i<arr.length;i++){
    sum += arr[i]
}
console.log(sum)

// 案例2：求数组中的最大值
var arr = [3,5,7,1,9,6]
var max = arr[0]
for(var i=0;i<arr.length;i++){
    if(max<arr[i]){
        max = arr[i]
    }
}
console.log(max)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

7. 多维数组

var arr = [
    "jack",
    "rose",
    ["aa","AA"],
    ["bb","BB"]
]
console.log(arr)
console.log(arr[2])
console.log(arr[2][1])
1
2
3
4
5
6
7
8
9

8. for和for…in的总结

// for循环：可以得到数组中的每个数据
var arr = [1,2,3,4,5,6]
for(var i=0;i<arr.length;i++){
    console.log(i,arr[i])
}

// for...in循环：得到的对象中的每个数据
var obj = {
    name:'小明',
    gender:'男',
    age:18
}
for(var i in obj){
    console.log(i,obj[i])
}

// 拓展：for...of 方法
// 只能用来循环数组，得到的数组中的值
var arr = [1,2,3,4]
for(var i of arr){
    console.log(i)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

二、不同数据类型的存储

1. 简单数据类型：number、string、boolean、undefined、null
2. 复杂数据类型：Array、function、Object

// 案例1
var a = 1
var b = a
b++
console.log(a) //1
console.log(b) //2

// 案例2
var a = 10
function fn(b){
    b++
    console.log(b) //11
}
fn(a)
console.log(a) //10

// 案例3
var arr = [1,2,3]
var brr = arr
brr[0] = 0
console.log(arr) // [0,2,3]
console.log(brr) // [0,2,3]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

总结：关于基本和引用的回答方式参考

一、js的数据类型有哪些？

1. 数据类型有：number、string、boolean、undefined、null、Array、function、Object
2. 以上可以分成两大类：基本数据类型、引用数据类型

二、基本数据和引用数据类型的区别？

1. 基本数据类型是存在计算机的栈内，存的是值
2. 引用数据类型是存在计算机的栈内，存的是地址，地址的指向是堆内存

三、特殊情况 null类型

1. typeof 检测的时候返回的是object
2. 注意，null是属于基本数据类型

三、数组的常用方法

1. 数组的增删操作

// 1.添加到数组的末尾： 数组.push(添加的值)
var arr = [1,2,3]
arr.push(4)//在数组末尾添加一个4
console.log(arr) //[1,2,3,4]

// 2.添加到数组的首位： 数组.unshift(添加的值)
arr.unshift(0)//在数组的首位添加一个0
console.log(arr)//[0,1,2,3,4]

// 3.删除数组中的第一个元素： 数组.shift()
arr.shift()//删除数组中第一个数值
console.log(arr)//[1,2,3,4]

// 4.删除数组中的最后一个元素： 数组.pop()
arr.pop()//删除数组的最后一个元素
console.log(arr)//[1,2,3]

// 注意：这几个方法是会改变原数组的（数组的长度对应更改）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2. 数组的splice删除方法

// 1. 删除数组中的值： 数组.splice(开始的下标,删除的个数)
var arr = [1,2,3]
arr.splice(0,1) // 表示从第一个值选择开始，删除一个值
console.log(arr)// [2,3]

// 2. 可以添加新的值： 数组.splice(开始的下标,0,添加的值)
arr.splice(0,0,4)//表示开始下标是0，删除0个，添加一个4
console.log(arr)//[4,2,3]

arr.splice(0,2,1,2,3,4,5)//开始下标是0，删除2个，后面添加12345
console.log(arr)//[1,2,3,4,5,3]

arr.splice(0,0,11,12,13)
console.log(arr)//[11,12,13,1,2,3,4,5,3]

// 注意：会改变原数组，返回一个新数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. 数组的reverse / concat / join / sort / slice 方法

// 1. 数组的反转方法：数组.reverse()
var arr = [3,2,1]
arr.reverse()
console.log(arr)//[1,2,3]

// 2. 数组的拼接方法： 数组.concat(需要拼接的值)
var arr1 = arr.concat(4)
console.log(arr1) // [3,2,1,4]
// (1)拼接数组方法会返回一个新的数组，需要用变量去接收
// (2)如果想拼接多个值的时候，之间需要使用逗号隔开
// (3)数组拼接方法不仅可以拼接数组，还可以拼接其他的数据类型

// 3. 拼接字符串方法：数组.join("需要拼接的值")
var arr = ["a","b","c"]
var arr1 = arr.join("***")
console.log(arr1)//"a***b***c"
//可以拼接数组中的多个值，然后转换为字符串

// 4. 数组排序方法：数组.sort()
var arr = [1,5,4,7,9,2,10]
var arr1 = arr.sort()
console.log(arr1)
var arr2 = arr.reverse()
console.log(arr2)
// (1)默认是升序的，从小到大的
// (2)如果想从大到小，需要反转一下
// (3)只能判断第一位数，10以下的排序

// 5. 截取数组方法：数组.slice(开始下标,结束下标)
var arr = [1,2,3,4,5,6,7]
var arr1 = arr.slice(1,4)
console.log(arr1) // [2,3,4]
var arr2 = arr.slice(1)
console.log(arr2) // [2,3,4,5,6,7]
var arr3 = arr.slice(-3,-2)
console.log(arr3) // [5]
// (1)截取方法也会返回一个新的数组，需要使用变量去接受
// (2)[开始下标,结束下标) 包含开始，不包含结束
// (3)截取数组只写一个参数的时候表示从当前下标开始后面的全部都要选中
// (4)当两个参数为正的时候：当第一个参数比第二个参数大的时候返回空
// (5)当两个参数为负的时候：第二个参数要比第一个参数大，从后往前数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

4. 数组的indexOf / lastIndexOf 方法

// 1. 通过数组的值获取相对应下标出现的第一次位置：数组.indexOf(值)
var arr = [1,2,3,3,3,3,4,5,6,7,3,2,1]
var res = arr.indexOf(2) //1
console.log(res)

// 2. 通过数组的值获取相对应下标出现的最后一次位置： 数组.lastIndexOf(值)
var arr = [1,2,3,3,3,3,4,5,6,7,3,2,1]
var res = arr.lastIndexOf(1)
console.log(res)//最后一次出现的下标

// 注意：如果没找到会返回-1
1
2
3
4
5
6
7
8
9
10
11

5. 数组 every / some / filter / map / forEach / reduce 方法

es5语法

// 1. 判断数组中的每一个值是否满足需求： 数组.every(function(值,下标,数组){})

var arr = [1,2,3,4,5]
// 判断数组中的值是否都大于0
var res = arr.every(function(value){
    return value>0
})
console.log(res)

// (1) (value,index,arr) 后面两个参数是可选参数（可省略）
// (2) 由于参数是函数，所以函数体中需要return返回值
// (3) 数组方法最终的值是一个布尔类型的值

// 2. 判断数组中的值是否至少有一个满足需求：数组.some(function(值,下标,数组){})
var arr = [1,2,3,4,5]
//判断数组中的值至少有一个大于4
var res = arr.some(function(value){
    return value>4
})
console.log(res)

// 3. filter过滤器，过滤数组（可以将满足条件的元素过滤到一起重新组成一个新的数组）：数组.filter(function(值){})
var arr = [1,2,3,4,5,6,7]
// 判断数组中大于1的数字，重新组成一个新的数组
var res = arr.filter(function(value){
    return value>1
})
console.log(res)

// 4. 【重点】map方法：将数组中的每一个值都交给函数去处理，处理之后的结果返回输出即可：数组.map(function(){})
var arr = [1,2,3,4,5]
var res = arr.map(function(value){
    // 将数组中的值都加1
    value +=1
    return value
})
console.log(res)

// 5. forEach专门用来遍历数组的：数组.forEach(function(值){})
// for循环遍历
var arr = [1,2,3,4,5,6]
for(var i=0;i<arr.length;i++){
    console.log(i,arr[i])
}
// forEach遍历
arr.forEach(function(value,index){
    console.log(index,value)
})

// 6. reduce方法表示可以遍历数组，每次都会返回一个新的值：数组.reduce(function(previous,next){})
var arr = [1,2,3,4,5]
arr.reduce(function(previous,next){
    console.log(previous,next)
})
// reduce方法的优势：利用reduce实现数组的求和
var arr = [1,2,3,4,5]
var res = arr.reduce(function(previous,next){
    return previous + next
})
console.log(res)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

四、数组的排序方法

1. 冒泡排序

相邻两个元素进行比较，将一个数组中的数字使用循环进行升序或降序的排序

var arr = [1,8,3,96,234,124,251,2,3,66,7]

for(var j=0;j<arr.length-1;j++){
    var temp;
    for(var i=0;i<arr.length;i++){
        if(arr[i]>arr[i+1]){
            temp = arr[i]
            arr[i] = arr[i+1]
            arr[i+1] = temp
        }
    }
}
console.log(arr)
1
2
3
4
5
6
7
8
9
10
11
12
13

2. 选择排序

先找最大值或者最小值，排在最左边，再找第二大的值，往左边靠，已经排好的不再参与比较

var arr = [1,11,2,78,8,3,5,53,66]
for(var j=0;j<arr.length-1;j++){
    for(var i=j+1;i<arr.length;i++){
        if(arr[j]>arr[i]){
            var temp = arr[i]
            arr[i] = arr[j]
            arr[j] = temp
        }
    }
    console.log(arr)
}
1
2
3
4
5
6
7
8
9
10
11