介绍数组
数组是相同数据的有序集合,即存储一系列同一种数据类型的值。在js中,数组也可以保存不同类型的值,也是可以修改的。
定义
- 数组是相同数据的有序集合
- 数组描述的相同类型的若干个数据,按照一定的先后顺序排列组合而成
- 每个数据称作数组元素,可通过数组下标访问数组元素
特点
- 长度是确定的。被创建后,大小不可以改变(js中是一个可修改的对象,会动态变化)。
- 元素必须是同类型,不可以出现混合类型
- 元素可以是任意数据类型,包括基本类型和混合类型。
- 数组变量为引用类型,也可以将其看为对象,每个元素相当于对象的成员变量。数组本身就是对象。数组对象本身是在堆中的。
JavaScript中数组方法
方法 | 描述 |
---|---|
concat | 连接2个或者更多的数组 |
every | 对数组中的每个元素运行指定函数,如果该函数对每个元素都返回true,则返回true |
filter | 对数组的每个元素运行指定函数,返回函数运行结果为true的元素组成的数组。 |
forEach | 对数组的每个元素运行指定函数,没有返回值 |
join | 讲所有的数组元素连接成一个字符串 |
indexOf | 返回第一个与给定参数相等的数组元素的索引,没有则返回-1 |
lastIndexOf | 返回一个与给定参数相等的数据索引中的最大的一个索引,没有则返回-1 |
map | 对数组中的每个元素运行指定函数,返回每次函数调用的结果组成的数组 |
reverse | 颠倒数组中的元素的顺序 |
slice | 传入索引值,将数组中对应索引范围内的元素作为新数组返回 |
some | 对数组中每个元素运行指定函数,如果任意元素返回true,则返回true |
sort | 按照字母顺序对数组排序,支持传入指定排序方法对函数作为参数 |
toString | 将数组作为字符串返回 |
valueOf | 和toString相似,将数组作为字符串返回 |
push | 最数组末尾添加元素 |
unshift | 在数组开头插入元素 |
pop | 删除数组的最后一个元素 |
shift | 删除数组的第一个元素 |
splice | 在任意位置添加或删除元素 |
添加元素
在数组末尾添加元素
使用数组长度做下标,可以直接在末尾添加一个元素,也可以使用push方法添加。
let arr = [0, 1, 2, 3, 4, 5];
// 给数组末尾添加一个元素
arr[arr.length] = 6;
// 输出[0,1,2,3,4,5,6]
console.log(arr)
// 使用push方法
arr.push(12)
arr.push(12, 'aa')
// 输出[0,1,2,3,4,5,6,12,12,"aa"]
console.log(arr)
在数组开头插入元素
创建一个将所有元素都往后移一个位置的方法,数组会空出一个下标为0的位置,并在方法内把需要插入的元素赋值给下标为0的空位。也可以用js的方法unshift方法在开头插入元素
// 给数组原型添加方法
Array.prototype.insertFirstPosition = function(value) {
for (let i = this.length; i >= 0; i--) {
this[i] = this[i - 1];
}
this[0] = value;
};
// 在开头插入一个元素
arr.insertFirstPosition(-1);
// 使用js方法unshift插入元素
arr.unshift(-2);
arr.unshift(-2, -3)
// 输出[-3,-2,-2,-1,0,1,2,3,4,5,6,12,12,"aa"]
console.log(arr)
删除元素
删除数组末尾元素和开头元素
删除末尾元素使用pop方法,开头元素使用shift方法。
// 删除末尾元素
arr.pop();
// 删除开头元素
arr.shift();
// 输出[-2,-2,-1,0,1,2,3,4,5,6,12,12]
console.log(arr);
任意位置添加或删除元素
使用splice方法,通过指定位置/索引,就可以删除相应位置上指定数量的元素
// 表示删除从下标5开始的3个元素
arr.splice(5,3)
// 输出[-2,-2,-1,0,1,5,6,12,12]
console.log(arr)
splice方法接收的第一个参数,表示想要删除或者插入元素的索引值;第二个参数是删除元素的个数;从第三个参数往后,就是要添加到数组里面的数据。
// 插入数据
arr.splice(5, 0,2,3,4);
// 输出[-2,-2,-1,0,1,2,3,4,5,6,12,12]
console.log(arr)
arr.splice(5, 3,2,3,4);
// 输出[-2,-2,-1,0,1,2,3,4,5,6,12,12]
console.log(arr)
数组合并
concat可以传递数组、对象或元素,按照传入上顺序连接数组。
const zero = 0;
const positiveNumbers = [1, 2, 3];
const negativeNumbers = [-3, -2, -1];
let numbers = negativeNumbers.concat(zero, positiveNumbers);
console.log('zero', zero); // 0
console.log('positiveNumbers', positiveNumbers); // [1, 2, 3]
console.log('negativeNumbers', negativeNumbers); // [-3, -2, -1]
// [-3, -2, -1, 0, 1, 2, 3]
console.log('negativeNumbers.concat(zero, positiveNumbers)', numbers);
every方法迭代数组
every会运行给定函数迭代数组的每个元素,直到迭代遇到第一个false,执行结束,返回false
// 判断是否是2的倍数
const isEven = x => x % 2 === 0;
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
// arr里面的第一个元素是1,不是2的倍数,因此返回false,every执行结束
console.log('arr.every(isEven)', arr.every(isEven));
some方法迭代数组
some与every相反,是迭代遇到第一个true,执行结束,返回true
// arr里面的第二个元素是2,是2的倍数,因此返回true,some执行结束
console.log('arr.some(isEven)', arr.some(isEven));
forEach方法迭代数组
forEach迭代与for循环结果一样
arr.forEach((x) =>consle.log(x % 2 === 0))
map和filter方法迭代数组
map方法是运行指定函数,返回指定函数的运行结果组成的数组。filter方法是运行指定函数返回指定函数结果为true的元素的数组,可以理解为过滤器,是给定数组的一部分的浅拷贝。
// [false, true, false, true, false, true, false, true, false, true, false, true, false, true, false]
arr.map(isEven)
// [2, 4, 6, 8, 10, 12, 14]
arr.filter(isEven)
reduce方法迭代数组
reduce方法是运行有如下4个参数的函数: previousValue、currentValue、index和array。index和array是可选的参数,用不到的话可以不传这两个参数。函数返回的是一个被叠加的累加器的值,方法停止后会返回这个累加器。如求数组中的和:
// 120
arr.reduce((pre, cur) => pre + cur)
ES6及之后新增的方法
方法 | 描述 |
---|---|
@@iterator | 返回一个包含数组健值对的迭代器对象,可以通过同步调用得到数组的健值对 |
copyWithin | 赋值数组中一系列元素到同一数组指定的起始位置 |
entries | 返回包含数组所有健值对的@@iterator |
includes | 如果数组中存在某个元素就返回true,否则就返回false |
find | 根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素 |
findeIndex | 根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素的索引值 |
fill | 用静态值填充数据 |
from | 根据已有数组创建一个新数组 |
keys | 返回包含数组所有索引的@@iterator |
of | 根据传入的参数创建一个新数组 |
values | 返回包含数组所有值的@@iteratior |
使用for…of循环迭代
for…of与forEach、for循环两个方法类似
for (const n of arr) {
console.log(`for..of loop: ${n} % 2 === 0`, n % 2 === 0 ? 'even' : 'odd');
}
// for..of loop: 1 % 2 === 0 odd
// for..of loop: 2 % 2 === 0 even
find和findIndex方法
find和findIndex方法都是接收一个回调函数,搜索满足回调函数条件的值。不同之处是find方法会返回第一个满足条件的值,而findIndx是返回这个值的索引。没有满足条件就是find返回undefined,findIndex返回-1。
function multipleOf(element, index, array) {
return element % 4 === 0;
}
console.log(arr.find(multipleOf)', arr.find(multipleOf)); // 4
console.log('arr.findIndex(multipleOf)', arr.findIndex(multipleOf)); // 3
includes方法
判断数组里是否存在某个元素,存在返回true,否则返回false。如果传个起始索引,则会从指定索引位置开始查询。
console.log('arr.includes(15)', arr.includes(15)); // true
console.log('arr.includes(20)', arr.includes(20)); // false
// 从索引位置为5开始查询3是否存在
console.log('arr.includes(3,5)', arr.includes(3, 5)); // false
将数组输出为字符串
数组转为字符串可以用toString和join方法。
如果想把数组里所有元素输出为一个字符串,可以用toString方法;想用一个分隔符把元素隔开,可以用join方法
// 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15
console.log('arr.toString()', arr.toString());
// 1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-10
console.log(numbers.join('-'));