07------数组深入

认识数组

• 内置对象是JS语言自带的对象，提供了一些基本的功能供开发者使用。常用的内置对象有Math、String、Array、Date等。
• 对象：属性（变量）和方法（函数）的集合
• 数组就是对象
• 可以存储多个不同类型的数据

创建数组

1.内存

• 栈区：基本数据类型保存在栈区，会根据函数的结束而自动释放
• 堆区：需要手动开辟，并且需要手动释放

2.new

• 在堆区开辟内存空间来存储对象
• 返回堆区对象的引用
• 通过栈区的引用，访问堆区的对象

var arr = new Array()
//  栈区        堆区
//  变量        数组对象

3.创造函数法创建数组

• 创建空数组：var arr = new Array()
• 创建确定容量的数组：var arr = new Array（10）
• 创建一个拥有一些数据的数组：var arr = new Array(1，2，“alice”)

4.字面量法创建数组

• 创建空数组：var arr = [];
• 创建一个拥有一些数据的数组：var arr = [1，2，“alice”]

数组的访问（赋值与取值）

1.数组元素的访问

• 直接通过数组下标访问

2.赋值与取值

• 通过数组下标取值，并可以对其进行赋值

var arr = [1,2,3,4,5]
//取值
console. log(arr[1]) // 2
// 赋值
arr[1] = 6
console. log(arr[1]) // 6

数组的遍历

1.快速遍历：for-in

• in的前面针对于数组来说是数组下标

var arr = [1,2,3,4,5]
for(var i in arr){
   console.log(i) // 0 1 2 3 4
   console.log(arr[i])// 1 2 3 4 5
}

2.for循环遍历

• for循环按顺序遍历

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

3.forEach()遍历

• ECMAScript5.0加入的新方法，低版本IE中不支持

var arr = [1,2,3,4,5]
arr.forEach(function(item,index)){
	console.log(index + "-" + item)
}
// 0-1 1-2 2-3 3-4 4-5

数组的长度，元素的更新 增加和删除

数组长度

• 数组元素的个数
• length不计算非正规（数字）下标
• 数组最多可以包含4294967295个项，基本上可以满足任何编程要求

数组长度的增加

• 数组长度的增加，默认赋值为undefined

var arr = [1,2,3]
arr.length = 5
console.log(arr) // [1,2,3,undefined,undefined]

数组长度的减少

• 数组长度的减少，多余的删除

var arr = [1,2,3,4,5]
arr.length = 3
console.log(arr) // [1,2,3]

添加数组元素

var arr = [1,2,3]
arr[2]= 10
console.log(arr) // [1,2,10]
arr[5]= 20
console.log(arr) // [1,2,10,undefined,undefined,20]

删除数组元素

• 用delete操作符来删除指定的元素
• 注意：数组长度不会改变，只是对应的值为undefined

var arr = [1,2,3,4,5]
delete arr[2]
console.log(arr) // [1,2,undefined,4,5]

数组中常用的方法

1.push(item1,item2,…)

• 功能：在数组的末尾添加一个或者多个元素
• 参数：要添加的元素
• 返回值：添加数据后数组的长度

var arr = [1,2,3]
var result = arr.push(4,5,6)
console.log(result) // 6
console.log(arr) // [1,2,3,4,5,6]

2.unshift(item1,item2,…)

• 功能：在数组的开头添加一个或者多个元素
• 参数：要添加的元素
• 返回值：添加数据后数组的长度

var arr = [1,2,3]
var result = arr.push(4,5,6)
console.log(result) // 6
console.log(arr) // [4,5,6,1,2,3]

3.pop()

• 功能：删除数组末尾的一个元素
• 参数：无
• 返回值：被删除的元素

var arr = [1,2,3]
var result = arr.pop()
console.log(result) // 3
console.log(arr) // [1,2]

4.shift()

• 功能：删除数组开头的一个元素
• 参数：无
• 返回值：被删除的元素

var arr = [1,2,3]
var result = arr.shift()
console.log(result) // 1
console.log(arr) // [2,3]

5.join(str)

• 功能：将数组的元素用参数字符串拼接成一个新的字符串
• 参数：一个字符串
• 返回值：拼接的结果

var arr = [1,2,3]
var result = arr.join('-')
console.log(result) // 1-2-3
console.log(arr) // [1,2,3]

6.reverse()

• 功能：倒置数组元素
• 参数：无
• 返回值：倒置以后的数组
• 注意：将会改变原数组

var arr = [1,2,3]
var result = arr.reverse()
console.log(result) // [3,2,1]
console.log(arr) // [1,2,3]

7.slice(startIndex,endIndex)

• 功能：在数组中，从startIndex下标开始一直截取到endIndex下标之前
• 参数：开始和结束下标
• 返回值：截取的数据数组
• 注意：不包含endIndex下标处的元素
• 注意：不会改变原数组

var arr = [1,2,3,4,5,6]
var result = arr.slice(1,3)
console.log(result) // [2,3]
console.log(arr) // [1,2,3,4,5,6]

8.splice(下标，个数，item1,item2,…)

• 功能：在数组的中间添加或者删除一些元素

添加

// 
var arr = [1,2,3,4,5,6]
var result = arr.splice(1,2,8,9)
console.log(result) // [2,3]
console.log(arr) // [1,8,9,4,5,6]
// 如果下标大于原数组最大的下标，都是在数组最后添加元素
var result1 = arr.splice(8,2,8,9)
console.log(arr) // [1,8,9,4,5,6,8,9]
console.log(result1) // []

删除

// 删除
var arr = [1,2,3,4,5,6]
var result = arr.splice(1,2)
console.log(result) // [2,3]
console.log(arr) // [1,4,5,6]
// 如果省略可选参数，则从下标开始删除对应个数的元素，返回删除的元素数组
var result1 = arr.splice(1,1)
console.log(arr) // [1,5]
console.log(result1) // [4]

• 参数

  • 下标：必需。规定从何处添加/删除元素，该参数是开始插入或删除的数组元素的下标，必须是数字。
  • 个数：必需。规定应该删除多少元素。必须是数字，但是可以是0。如果未规定此参数，则删除从index开始到原数组结尾的所有元素。
  • item1,item2,…：要添加到数组的新元素。

• 返回值：含有被删除的元素的数组

• 注意：将会改变原数组

9.concat()

• 功能：将多个数组拼接成一个数组
• 参数：一个或多个数组或者元素
• 返回值：拼接之后新的数组
• 注意：拼接后数组的元素将按照传入参数的顺序排列
• 注意：不改变原数组

var arr = [1,2]
var arr2 = arr.concat([3,4], 'a', true)
console.log(arr) //[1,2]
console.log(arr2) //[1,2,3,4,'a',true]

10.indexOf(item)

• 功能：从数组的左侧开始查找对应第一次出现的参数元素的下标
• 参数：要查找的元素值
• 返回值：如果找到了对应的元素则返回该元素的下标值，否则返回-1

var arr = [1,2,3,4,5]
var result = arr.indexOf(4)
console.log(arr) // [1,2,3,4,5]
console.log(result) // 3
console.log(arr.indexOf(6)) // -1

11.lastIndexOf(item)

• 功能：从数组的右侧开始查找对应第一次出现的参数元素的下标
• 参数：要查找的元素值
• 返回值：如果找到了对应的元素则返回该元素的下标值，否则返回-1

var arr = [1,2,3,4,5]
var result = arr.lastIndexOf(4)
console.log(arr) // [1,2,3,4,5]
console.log(result) // 3
console.log(arr.lastIndexOf(6)) // -1

数组排序

1.冒泡排序

• 原理：冒泡排序的基本思想是，对相邻的元素进行两两比较，顺序相反则进行交换，这样，每一趟会将最小或者最大的元素浮到顶端，最终达到完全有序。
• 公式

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

2.sort()

• 默认升序排序

var arr = [4,5,2,3,1,7]
arr.sort()
console.log(arr) // [1,2,3,4,5,7]

• sort()调用每一项的toString()方法，然后比较得到的字符串，确定如何排序
• 排降序，需要给出排序的标准，排序的标准是一个函数

var arr = [4,5,2,3,1,7]
//降序
arr.sort(function(v1,v2){
	if(v1 < v2) {
		return 1
	}
	return -1
})
console.log(arr) // [7,5,4,3,2,1]

多维数组

迭代方法

• ECMAScript5为数组定义了5个迭代方法，每个方法接收2个参数，一个是每一项运行的函数，一个是运行该函数的作用域对象，传入这些方法的函数会接受三个参数：数组项的值，该项在数组中的位置，数组对象本身。

1.every()

• 对数组中的每一项运行给定函数，如果该数组中每一项都返回true，则返回true

var arr = [1,2,3,4,5]
var result = arr.every(function(item, index, arr){
	return item > 2
})
console.log(result) // false

2.filter()

• 对数组中的每一项运行给定函数，返回该函数返回true的项组成的数组

var arr = [1,2,3,4,5]
var result = arr.filter(function(item, index, arr){
	return item > 2
})
console.log(result) // [3,4,5]

3.forEach()

• 对数组中的每一项运行给定函数，这个方法没有返回值

var arr = [1,2,3,4,5]
arr.forEach(function(item, index, arr){
	// todo
})

4.map()

• 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的函数

var arr = [1,2,3,4,5]
var result = arr.map(function(item, index, arr){
	return item * 2
})
console.log(result) // [2，4，6，8，10]

5.some()

• 对数组中的每一项运行给定函数，只要其中有一项返回true，则返回true。与every()相反

var arr = [1,2,3,4,5]
var result = arr.some(function(item, index, arr){
	return item > 2
})
console.log(result) // true

归并方法

• ECMAScript5还新增了2个归并方法，这两个方法都会迭代数组的所有项，然后构建成一个最终返回的值

1.reduce()

• 语法：arr.reduce([callback,initialValue])
  (1).callback(previousValue,currentValue,currentIndex,array)

  • 这个函数返回的任何值都会作为第一个参数自动传递给下一项
  • previousValue：上一次调用回调函数返回的值，或者是提供的初始值(initialValue)
  • currentValue：数组中当前被处理的元素
  • currentIndex：当前被处理元素在数组中的索引，即currentValue的索引。如果有initialValue初始值，从0开始，否则从1开始。
  • array：调用reduce()的数组
    (2).initialValue：可选参数，作为第一次调用callback的第一个参数

• 例子

var arr = [1,2,3,4,5]
var result = arr.reduce(function(prev,cur,index,array) {
	// 实现数组元素累加求和
	return prev + cur
})
console.log(result) // 15

2.reduceRight()

• 从数组的最后一项开始，向前遍历到第一项
• 与reduce()一样，方向相反