JavaScript 数组对象

数组类型检测

数组类型检测有两种常用的方式，分别是使用 instanceof 运算符和使用 Array.isArray() 方法。

var arr = [];
var obj = {};
// 第一种方式
console.log(arr instanceof Array);//输出结果：true
console.log(arr instanceof Array);//输出结果：false
// 第二种方式
console.log(Array.isArray(arr));//输出结果：true
console.log(Array.isArray(obj));//输出结果：false

添加或删除数组元素

JavaScript数组对象提供了添加或删除元素的方法，可以实现在数组的末尾或开头添加新的数组元 素，或在数组的末尾或开头移出数组元素。方法如下：

方法名	功能描述	返回值
push( 参数1… )	数组末尾添加一个或多个元素,会修改原数组	返回数组的新长度
unshift(参数1…)	数组开头添加一个或多个元素,会修改原数组	返回数组的新长度
pop()	删除数组的最后一个元素，若是空数组则返回undefined，会修改原数组	返回删除的元素 的值
shift()	删除数组的第一个元素，若是空数组则返回undefined，会 修改原数组	返回第一个元素 的值

// push
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.push('red'));// 返回的是数组长度 输出结果为：5
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white', 'yellow',
'red']

// unshift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.unshift('red', 'blue'));// 返回的是数组长度 输出结果为：6
console.log(arr);// 修改了原来的数组 输出结果为['red', 'blue', 'pink', 'black',
'white', 'yellow']

// pop
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.pop());// 返回的是删除的元素 输出结果为：yellow
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white']

// shift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.shift());// 返回的是删除的元素(第一个) 输出结果为：pink
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white']

注意:

• push()和unshift()方法的返回值是新数组的长度，而pop()和shift()方法返回的是移出的数组元素。

案例：筛选数组

案例需求：要求在包含工资的数组中，剔除工资达到2000或以上的数据，把小于2000的数重新放 到新的数组里面。

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] < 2000) {
    	newArr.push(arr[i]);// 相当于：newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

数组排序

JavaScript数组对象提供了数组排序的方法，可以实现数组元素排序或者颠倒数组元素的顺序等。 排序方法如下：

方法	功能
reverse()	颠倒数组中元素的位置，该方法会改变原数组，返回新数组
sort()	对数组的元素进行排序，该方法会改变原数组，返回新数组

// reverse
var arr = ['red', 'blue', 'green']
console.log(arr.reverse());//输出的结果为：['green', 'blue', 'red']
console.log(arr);// 改变原数组['green', 'blue', 'red']

// sort: 如果调用该方法时没有使用参数，按照字符编码的顺序进行排序。
var arr1 = [1, 4, 5, 6, 73, 32, 22, 15];
// 不传参数的情况
console.log(arr1.sort());//输出的结果为：[1, 15, 22, 32, 4, 5, 6, 73]

// 传参数：参数是用来指定按某种顺序进行排列的函数
/*
即 a 和 b 是两个将要被比较的元素：
*/
arr1.sort(function (a, b) {
	// return b - a;//降序 // [73, 32, 22, 15, 6, 5, 4, 1]
	return a - b;//升序 // [1, 4, 5, 6, 15, 22, 32, 73]
})
console.log(arr1);

注意：

• sort 如果调用该方法时没有使用参数，按照 ASCII 字符编码的顺序进行排序。

数组索引

在开发中，若要查找指定的元素在数组中的位置，可以利用Array对象提供的检索方法。检索方法 如下：

方法	功能介绍
indexOf()	返回在数组中可以找到给定值的第一个索引，如果不存在，则返回-1
lastIndexOf()	返回指定元素在数组中的最后一个的索引，如果不存在则返回-1

indexOf() – 参数1：要查找的元素 – 参数2：开始查找的位置 – 注意： 如果第二个参数是-1 表示从最后一个元素开始查找，-2 表示从倒数第二个元素开始查 找，以此类推。

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// 输出结果为： 1

// 找到第二个bison的索引
console.log(beasts.indexOf('bison', 2));
// 输出结果为： 4

console.log(beasts.indexOf('giraffe'));
// 输出结果为： -1

lastIndexOf()

– 如果该值大于或等于数组的长度，则整个数组会被查找。

– 如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。

– 如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
// 输出结果为： 3

console.log(animals.lastIndexOf('Tiger'));
// 输出结果为： 1

注意：

• 默认都是从指定数组索引的位置开始检索，并且检索方式与运算符“===”相同，即只有全等时才会 返回比较成功的结果。

案例：数组去重

案例需求：要求在一组数据中，去除重复的元素

function unique(arr) {
	var newArr = [];
	// 遍历数组
	for (var i = 0; i < arr.length; i++) {
        // 判断新数组中是否有原数组中的元素
        // indexOf 结果为-1表示没有该元素
		if (newArr.indexOf(arr[i]) === -1) {
			// 没有的话就把该元素push到新数组中
			newArr.push(arr[i])
		}
	}
	return newArr;
}
// 调用数组
var res = unique([1, 2, 3, 4, 3, 2])
console.log(res);

数组转换为字符串

在开发中，可以利用数组对象的join()和toString()方法，将数组转换为字符串。方法如下：

方法	功能描述
toString()	把数组转换为字符串，逗号分隔每一项
join(‘分隔符’)	将数组的所有元素连接到一个字符串中

// toString
var arr = ['a', 'b', 'c']
console.log(arr.toString());// 输出结果为:a,b,c

join

– 参数可选:指定一个字符串来分隔数组的每个元素

– 如果需要，将分隔符转换为字符串()小括号里面填写的是指定的分隔符

– 如果省略，数组元素用逗号（,）分隔。

– 如果 separator 是空字符串（‘’），则所有元素之间都没有任何字符。

// join
console.log(arr.join());// 输出结果为:a,b,c
console.log(arr.join(''));// 输出结果为:abc
console.log(arr.join('-'));// 输出结果为:a-b-c

其他方法

JavaScript还提供了很多其他常用的数组方法。例如，填充数组、连接数组、截取数组元素等。方 法如下：

方法	功能描述
fill()	用一个固定值填充数组中指定下标范围内的全部元素
splice()	通过删除或替换现有元素或者原地添加新的元素来修改数组，返回被删除项目的新数组
slice()	数组截取，参数为slice(begin, end)，包含 begin ，但不包含 end ，返回被截取项目的新数组
concat()	连接两个或多个数组，不影响原数组，返回一个新数组

注意：

• slice() 和 concat() 方法在执行后返回一个新的数组，不会对原数组产生影响，剩余的方法在执行后 皆会对原数组产生影响。

fill

– 参数:value start end

– value:用来填充数组元素的值

– start:基于零的索引，从此开始填充，转换为整数。

– end:基于零的索引，在此结束填充，转换为整数。fill() 填充到但不包含 end 索引。

// fill
const array1 = [1, 2, 3, 4];

// 填充0,从数组索引2(包含)开始到4(不包含)结束
console.log(array1.fill(0, 2, 4));
// 输出结果为： Array [1, 2, 0, 0]

// 填充5,从数组索引1(包含)开始
console.log(array1.fill(5, 1));
// 输出结果为： Array [1, 5, 5, 5]

// 填充6
console.log(array1.fill(6));
// 输出结果为： Array [6, 6, 6, 6]

splice

– 参数:start deleteCount item1…

– start:执行修改的开始位置(从0计数)

– deleteCount:整数,表示要移除的数组元素的个数

– item1:要添加进去数组的元素

// 从索引 2 的位置开始删除 0 个元素，插入“小红”
var myFish = ["小米", "小明", "小张", "小李"];
var removed = myFish.splice(2, 0, "小红");
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ["小米", "小明", "小红", "小张", "小李"]
// 被删除的元素：[], 没有元素被删除


// 从索引 2 的位置开始删除 0 个元素，插入“小刚”和 "小蔡"
var myFish = ["小米", "小明", "小张", "小李"];
var removed = myFish.splice(2, 0, '小刚', '小蔡');
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ["小米", "小明", "小刚", "小蔡", "小张", "小李"]
// 被删除的元素：[], 没有元素被删除


// 从索引 3 的位置开始删除 1 个元素
var myFish = ["小米", "小明", "小刚", "小蔡", "小张", "小李"];
var removed = myFish.splice(3, 1);
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小米', '小明', '小刚', '小张', '小李']
// 被删除的元素：['小蔡']


// 从索引 2 的位置开始删除 1 个元素，插入“小兰”
var myFish = ["小米", "小明", "小刚", "小蔡", "小张", "小李"];
var removed = myFish.splice(2, 1, "小兰");
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小米', '小明', '小兰', '小蔡', '小张', '小李']
// 被删除的元素：["小刚"]


// 从索引 0 的位置开始删除 2 个元素，插入"小兰"、"小蔡"和"小刚"
var myFish = ["小米", "小明", "小张", "小李"];
var removed = myFish.splice(0, 2, '小兰', '小蔡', '小刚');
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小兰', '小蔡', '小刚', '小张', '小李']
// 被删除的元素：['小米', '小明']


// 从索引 2 的位置开始删除 2 个元素
var myFish = ['小兰', '小蔡', '小刚', '小张', '小李'];
var removed = myFish.splice(myFish.length - 3, 2);
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小兰', '小蔡', '小李']
// 被删除的元素： ['小兰', '小蔡', '小李']


// 从索引 2 的位置开始删除所有元素
var myFish = ['小兰', '小蔡', '小刚', '小张', '小李'];
var removed = myFish.splice(2);
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小兰', '小蔡']
// 被删除的元素：['小刚', '小张', '小李']

slice

– 参数:begin end

– begin : 从该索引开始提取原数组元素(包含)

– end : 在该索引处结束提取原数组元素(不包含)

// 从索引 2 的位置开始截取
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(2);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小刚', '小张', '小李']


// 从索引 2 的位置开始 截取到 索引4 的位置(包含2 不包含4)
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(2, 4);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小刚', '小张']


// 从索引 2 的位置开始 截取到 数组的倒数第一个元素(不包含)
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(2, -1);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小刚', '小张']


// 截取后两个元素
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(-2);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小张', '小李']

concat

// 连接两个数组
const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];

const concatArr = letters.concat(numbers);
console.log(letters);//['a', 'b', 'c']
console.log(concatArr);//['a', 'b', 'c', 1, 2, 3]
// 连接三个数组
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numArr = num1.concat(num2, num3);
console.log(numArr);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

// 将值连接到数组
const arr1 = ['a', 'b', 'c'];
const newArr1 = letters.concat(1, [2, 3]);

console.log(newArr1);//['a', 'b', 'c', 1, 2, 3]