JavaScript学习笔记(6)——数组和数组的方法

---

前言

本篇学习数组

---

一、数组

数组也是对象，不同的是普通对象使用字符串作为属性名，而数组时使用数字来作为索引操作元素
索引：从0开始的整数
数组的存储性能比普通对象要好

//创建数组对象
var arr = new Array();
//使用typeof检查一个数组时，会返回object
console.log(typeof arr);
arr[0] = 10;
arr[1] = 33;
//获取数组长度
console.log(arr.length);
//修改length
arr.length = 10;
//向数组的最后一个位置不断添加元素
arr[arr.length] = 70;
arr[arr.length] = 80;

使用 数组.length 获取数组长度

//使用字面量创建数组
var arr = [1,2,3,4,5,10];
//使用构造函数创建数组
var arr2 = new Array(10,20,30);
//创建长度伪10的数组
arr3 = new Array(10);

//数组中的元素可以是任意的数据类型
arr = ["hello",1,true,null,undefined];
//也可以是对象
var obj = {name:"孙悟空"};
arr[arr.length] = obj;
//也可以是一个函数
arr = [function(){alert(1)},function(){alert(2)}];
//数组中也可以放数组，二维数组
arr = [[1,2,3],[3,4,5],[5,6,7]];

二、数组的方法

1.常见方法

push()
该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
pop()
该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
unshift()
向数组开头添加一个或多个元素，并返回新的数组长度
shift()
可以删除数组的第一个元素，并将被删除的元素作为返回值返回

2.数组的遍历

forEach()
这个方法只支持IE8以上的浏览器
IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach，还是使用for循环来遍历
像这种函数，由我们创建但是不由我们调用的，我们称为回调函数

浏览器会在回调函数中传递三个参数：
第一个参数，就是当前正在遍历的元素
第二个参数，就是当前正在遍历的元素的索引
第三个参数，就是正在遍历的数组

var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
arr.forEach(function(value , index , obj){
	console.log(value);
});

3.其他数组方法

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

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

const arr = [1, 2, 1, 3, 2, 2, 4, 5, 5, 6, 7]
for (let i = 0; i < arr.length; i++) {
	// 获取当前值后边的所有值
	for (let j = i + 1; j < arr.length; j++) {
		// 判断两个数是否相等
		if (arr[i] === arr[j]) {
			// 出现了重复元素，删除后边的元素
			arr.splice(j, 1)
			j--
		}
	}
}
//方法2:改变原数组
for(let i=0; i<arr.length; i++){
    const index = arr.indexOf(arr[i], i+1)
    if(index !== -1){
        // 出现重复内容
        arr.splice(index, 1)
        i--
    }
}
console.log(arr)
//方法3:不改变原数组
const newArr = []
for(let ele of arr){
	if(newArr.indexOf(ele) === -1){
		newArr.push(ele)
	}
}
console.log(newArr)

concat()可以连接两个或多个数组，并将新的数组返回
该方法不会对原数组产生影响

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

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

sort()
可以用来对数组中的元素进行排序
也会影响原数组，默认会按照Unicode编码进行排序
即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果

我们可以自己来指定排序的规则
我们可以在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参
浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
浏览器会根据回调函数的返回值来决定元素的顺序
  如果返回一个大于0的值，则元素会交换位置
  如果返回一个小于0的值，则元素位置不变
  如果返回一个0，则认为两个元素相等，也不交换位置

如果需要升序排列，则返回 a-b
如果需要降序排列，则返回b-a

arr = [5,4,2,1,3,6,8,7];
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);

三、函数的方法

1.call和apply

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

fun.call(obj,2,3);
fun.apply(obj,[2,3]);

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

---

总结

本节学习数组和数组的方法，额外有函数的call和apply方法，最后总结了this在JS中的四种情况指代。

根据尚硅谷李立超老师2022年的JS视频整理而成。