JS基础笔记(二)9.数组

数组的简介

JS对象分为:
内置对象
​宿主对象
​自定义对象
数组(Array)

• 数组也是一个对象
• 它和我们普通对象功能类似，也是用来存储一些值的
• 不同的是普通对象是使用字符串作为属性名的，而数组使用数字的索引操作元素
• 索引:从0开始的整数就是索引
• 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据

		// 创建数组对象
		var arr = new Array();
		console.log(typeof arr);
		// 向数组中添加元素
		// 语法:数组[索引] = 值
		arr[0] = 10;
		arr[1] = 33;

读取数组中的元素
语法：数组[索引]
如果读取不存在的索引，他不会报错而是返回undefined

console.log(arr[1]);
console.log(arr[3]);

获取数组的长度，可以使用length属性来获取数组的长度（元素的个数）
语法：数组.length
对于元素连续的数组，使用length可以获取到数组的长度(元素的个数)。
对于元素非连续的数组，使用length会获取到数组的最大索引+1，尽量不要创建非连续数组。

console.log(arr.length);

修改数组长度
如果修改的length大于原长度，则多出部分会空出来
如果修改的length小于原长度，则多出的元素会被删除

arr.length = 10;
console.log(arr.length);

向数组的最后一个位置添加元素
语法:数组[数组.length] = 值;

arr[arr.length] = 70;
console.log(arr.length);

数组字面量

使用字面量来创建数组
语法:[]

var arr = [];

使用字面量创建数组时,可以在创建时就指定数组中的元素

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8];

使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作为构造函数的参数传递，元素之间使用逗号隔开

var arr2 = new Array(1, 2, 3, 4, 5, 6);

创建一个长度为10 的数组

arr3 = new Array(10);

数组中的元素可以是任意的数据类型

arr4 = ["hello", 1, true, null, undefined];

也可以是对象

var obj = {"name":"孙悟空"};
arr4[arr4.length] = obj;
arr4 = [{"name":"孙悟空"},{"name":"沙和尚"},{"name":"八戒"}];
console.log(arr4[1].name);

也可以是函数

arr4 = [function(){console.log("nb");},function(){console.log("np");}];
console.log(arr4);
arr4[0]();

数组中也可以放数组,如下这种数组我们称为二维数组

arr5 = [[1,2,3],[4,5,6],[7,8,9]];
console.log(arr5);
console.log(arr5[0]);

数组的四个方法

push()

• 该方法可以向数组的末尾添加一个或者多个元素，并返回数组的新长度
• 可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
• 该方法会将数组新的长度作为返回值返回

var result = arr.push("糖球");
console.log(result);
console.log(arr);

pop()

• 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回

var result = arr.pop();
console.log(arr);
console.log(result);

unshift()

• 向数组开头添加一个或多个元素，并返回新的数组长度
• 向前边插入元素以后，其他的元素索引会依次调整

var un = arr.unshift("牛头","杨戬");
console.log(arr);	
console.log(un);

shift()

• 可以刪除数组的第一个元素，并将被删除的元素作为返回值返回

result = arr.shift();
console.log(arr);
console.log(result);

数组的遍历

遍历数组,就是将数组所有的元素都取出来

var arr = [2,3,6,7,8,9];
for (var i=0;i<arr.length;i++) {
	console.log(arr[i]);
}

foreach循环

一般我们使用for循环遍历数组，JS中还为我们提供了一个方法，用来遍历数组
forEach()

• 这个方法只支持IE8以上的浏览器
  IE8及一下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEarch
  还是使用for循环来遍历
  forEach()方法需要一个函数作为参数
• 像这种函数，由我们创建但是不由我们去调用的，我们称为回调函数
• 数组中有几个元素函数中就会执行几次
  以实参的形式传递进来，我们可以定义形参，来读取这些内容
• 浏览器会在回调函数中传递三个参数
  第一个参数，就是当前正在遍历的元素
  第二个参数，就是当前正在遍历的元素的索引
  第三个参数，就是正在遍历的数组

var arr = [1, 2, 3, 4, 5, 6, 7];
arr.forEach(function(value, index, obj) {
			// console.log("hello");
			console.log("value=" + value);
			console.log("index=" + index);
			console.log("obj=" + obj);
			console.log(obj == arr);
});

数组的slice和splice

slice()

• 可以用来从数组提取指定元素
• 该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回
• 参数：
  1.截取开始位置的索引,包含开始索引
  2.截取结束位置的索引,不包含结束索引
• 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
• 索引可以传递一个负值,如果传递一个负值，则从后往前计算
  -1 倒数第一个
  -2 倒数第二个

var arr = ["孙悟空","猪八戒","沙和尚","白龙马"];
var result = arr.slice(0,2);
console.log("result="+result);//result=孙悟空,猪八戒

result = arr.slice(2);
console.log("result="+result);//result=沙和尚,白龙马

result = arr.slice(-1);
console.log("result="+result);//result=白龙马

result = arr.slice(1, -1);
console.log("result="+result);//猪八戒,沙和尚

splice()

• 可以用于删除数组中的元素
• 使用splice()会影响到原数组，会将指定元素从原数组中删除,并将被删除的元素作为返回值返回
• 参数：
  第一个，表示开始位置的索引
  第二个，表示删除的数量
  第三个及以后，这些元素将会自动插入到开始位置索引前边

var arr = ["孙悟空","猪八戒","沙和尚","白龙马"];
result = arr.splice(0,1,"牛魔王");
console.log(result);//["孙悟空"]
console.log(arr);//["牛魔王", "猪八戒", "沙和尚", "白龙马"]

练习:
数组去重

// 创建一个数组
		var arr = [1,2,3,2,1,3,4,2,5];		
		// 去掉数组中重复的数字
		// 获取数组的每一个元素
		for (var i = 0;i<arr.length;i++) {
			/* 获取当前元素后的所有元素 */
			console.log(arr[i]);
			for (var j = i+1 ;j<arr.length;j++) {
				console.log("---"+arr[j]);
				// 判断俩个元素的值是否相等
				if (arr[i] == arr[j]) {
					//如果相等则证明出现了重复元素,则删除对应的j
					arr.splice(j,1);
					// 当删除了当前j所在的元素以后,后边的元素自动补位
					// 此时将不会在比较这个元素吧,我需要在比较一次j所在的位置的元素
					//使j自减
					j--;
				}
			}
		}
		console.log(arr);

数组的其余方法

concat()可以连接俩个或多个数组，并将新的数组返回

• 该方法不会对原数组产生影响

var arr  = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["白骨精","杠精","蘑菇精"];
var arr3 = ["二郎神","如来","灭世"];
var result = arr.concat(arr2,arr3,"牛头","jianmo");
console.log(arr.concat(arr2));//"孙悟空","猪八戒","沙和尚","白骨精","杠精","蘑菇精"
console.log(result);//"孙悟空","猪八戒","沙和尚","白骨精","杠精","蘑菇精","二郎神","如来","灭世","牛头","jianmo"

join()

• 该方法可以将数组转换成一个字符串
• 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
• 在join()中可以指定字符串作为参数，这个字符串将会成为数组中元素的连接符
  如果不指定连接符，则默认使用逗号作为连接符

var arr  = ["孙悟空","猪八戒","沙和尚"];
result = arr.join("@-@");
console.log(result);//孙悟空@-@猪八戒@-@沙和尚
console.log(typeof result);//string

reverse()

• 该方法用来反转数组(前边的去后边，后边的去前边)
• 该方法会直接修改原数组

var arr  = ["孙悟空","猪八戒","沙和尚"];
arr.reverse();
console.log(arr);//"沙和尚", "猪八戒", "孙悟空"

sort()

• 可以用来对数组进行排序
• 也会影响原数组，默认会按照Unicode编码进行排序

var arr  = ["孙悟空","猪八戒","沙和尚"];
arr.sort();
console.log(arr);//"孙悟空", "沙和尚", "猪八戒"

• 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进行排序时，可能会得到错误的结果
  我们可以自己指定排序的规则
  我们可以在sort中指定回调函数
  回调函数中需要定义俩个形参。
• 浏览器将会分别使用数组中的元素作为实参调用回调函数
  如果返回一个大于0的值，则元素会交换位置
  如果返回一个小于0的值，则元素位置不变
  如果返回一个0的值，则认为俩个元素相等，元素位置不变

arr = [3,4,11,2,5];
/* 
  数字排序
 */
arr.sort(function(a,b){
/* if (a > b) {
	return 1;
	}else if (a < b) {
	return -1
	}else{
	return 0;
} */
//升序
// return  a - b;
// 降序
return b-a;
});
console.log(arr);//[11, 5, 4, 3, 2]

call和apply()

call和apply()

• 这俩个方法都是函数对象的方法，需要通过函数对象来调用
• 当对函数调用call()和apply()都会调用函数执行
• 在调用call和apply可以将一个对象指定为第一个参数
  此时这个对象将会成为函数执行时的this
• call()方法可以将实参在对象之后依次传递
• apply()方法需要实参封装到数组统一传递

this的情况：
1.以函数形式调用时，this永远是window
2.以方法形式调用时，this是调用方法的对象
3.以构造函数调用时，this是新创建的那个对象
4.使用call和apply调用时，this是指定的那个对象

arguments

调用函数时，浏览器每次都会调用俩个隐含的参数，
1.函数上下文对象 this
2.封装实参的对象 arguments

• arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度
• 在调用函数时，我们所传递的实参都会封装到arguments中
• arguments.length可以用来获取实参的长度
• 我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦
  arguments[0] 表示第一个实参
  arguments[1] 表示第二个实参
  依此类推
• 它里面有一个属性callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象

function fun(a,b){
			console.log(arguments.length);//3
			console.log(arguments[0]);//he
			console.log(arguments[1]);//true
			console.log(arguments.callee);//fun
			console.log(arguments.callee == fun);//true
		}
fun("he",true,"类");