1.数组概念
JavaScript数组是无类型的,数组元素可以是任意类型,并且同一个数组中元素类型也可以不同。
每一个js数组都有一个length属性。
创建数组
数组创建可以使用直接量的方式定义[],或者使用创建对象的方式new Array()
let arr1 = [];
console.log(arr1);// 长度为0空数组
let arr2 = [0,"h",new Date()];
console.log(arr2);// 长度为3的数组
let arr3 = new Array(2);
console.log(arr3);// 长度为2空数组
数组长度
数组.length
let arr4 = [2,5,1];
console.log(arr4.length);//3
let arr5 = [,,];
console.log(arr5.length);//2
注意:数组元素后面可以添加逗号,而不是用于间隔,所以[,]是两个元素,不是三个元素。
2.数组增删改查
增加元素
给数组增加元素有很多种方式。
(1)为新索引赋值
let arr1 = ['h'];
console.log(arr1);//['h']
arr1[1] = 'i';
console.log(arr1);//['h','i']
(2)push方法在数组末尾增加一个或多个元素
let arr2 = ['a'];
arr2.push('b');// ['a', 'b']
console.log(arr2);
arr2.push('c','d','e');
console.log(arr2);// ['a', 'b', 'c', 'd', 'e']
(3)unshift方法在数组首部插入一个元素或多个元素
let arr2 = ['a'];
arr2.unshift('b');// ['b', 'a']
console.log(arr2);
arr2.unshift('c','d','e');
console.log(arr2);// ['c', 'd', 'e', 'b', 'a']
删除元素
删除元素也同样有多种方式。
(1)splice方法删除指定索引位置元素
数组长度相应减少,后面的数组元素索引递减。
splice方法可以增加、删除、修改数组元素。
let arr2 = ['a','b','c','d'];
arr2.splice(0,1);// 删除索引0开始,长度为1的数组元素,即删除a
console.log(arr2);// ['b', 'c', 'd']
let arr3 = ['a','b','c','d'];
arr3.splice(2,2);// 删除索引2开始,长度为2的数组元素,即删除c、d
console.log(arr3);// ['a', 'b']
(2)delete删除数组元素
let arr9 = ['a',1,'hi',23];
console.log(arr9.length);// 4
delete arr9[2];// 删除'hi'
console.log(arr9);// ['a',1,,23]
console.log(arr9.length);// 4
【注意】delete只是被删除的元素变成了 undefined ,其他的元素的键值还是不变。
而splice方法会改变原始数组。
(3)pop删除数组最后一个元素
let arr8 = ['a',1,'hi',23];
console.log(arr8.length);// 4
arr8.pop();
console.log(arr8);// ['a', 1, 'hi']
console.log(arr8.length);// 3
(4)shift删除数组第一个元素
let arr8 = ['a',1,'hi',23];
console.log(arr8.length);// 4
arr8.shift();
console.log(arr8);// [1, 'hi', 23]
console.log(arr8.length);// 3
遍历数组
(1)最基础for循环
let arr8 = ['a',1,'hi',23];
for(let i=0; i<arr8.length; i++){
console.log(arr8[i]);
}
结果:
(2)forEach
forEach中可以遍历得到数组元素、数组元素索引、原数组,注意先后位置。
let arr7 = ['a',1,'hi',23];
arr7.forEach(item => {
console.log(item)
})
console.log("------------------");
arr7.forEach((item,index) => {
console.log(index+":"+item)
})
console.log("------------------");
arr7.forEach((item,index,oldArr) => {
console.log(index+":"+item+":"+oldArr)
})
结果:
(3)for…of
for…of是ES6新增的遍历方式,它提供了统一的遍历机制。for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串。
优点:
有着同for…in一样的简洁语法,但是没有for…in那些缺点
不同用于forEach方法,它可以与break、continue和return配合使用
提供了遍历所有数据结构的统一操作接口
let arr8 = ['a',1,'hi',23];
for(item of arr8){
console.log(item);
}
3.常用方法
获取元素在数组中索引、判断数组是否包含某元素
【语法】数组.indexOf(元素)
返回-1表示数组不存在该元素,否则返回钙元素的索引值。
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let a = fruits.indexOf("Apple"); // 2
数组复制
数组进行拼接等操作时,如果将原数组使用等号赋值给新数组,只是将同一内存地址指向两个引用,新数组的操作会连带操作原数组,影响原数组的元素。
此时可以将原数组复制到新数组。
【语法】Object.assign(目标数组, 原数组);
let oldArr = ['sdsd',123,123,123]
let newArr = []
Object.assign(newArr, oldArr);
数组拼接concat
将两个数组拼接为一个新的数组。
【语法】新数组=A数组.concat(B数组)
concat返回一个新数组,并不会改变参与计算的两个原数组。
let arr1 = ['a','b','c'];
let arr2 = [1, 2, 3];
let arr3 = arr1.concat(arr2);
console.log(arr1);// ['a', 'b', 'c']
console.log(arr2);// [1, 2, 3]
console.log(arr3);// ['a', 'b', 'c', 1, 2, 3]
数组转换为字符串
join可以将数组中所有元素转换为字符串并拼接在一起,返回最后生成的字符串。
默认使用逗号连接,也可以自己指定元素之间连接符。
【语法】数组.join(连接符)
不修改原数组,返回字符串。
let arr1 = ['a','b','c'];
let res1 = arr1.join();
console.log(res1);// a,b,c
let res2 = arr1.join('-');
console.log(res2);// a-b-c
let res3 = arr1.join('/');
console.log(res3);// a/b/c
数组截取
slice方法可以截取数组的一个片段得到一个子数组。
【语法】数组.slice(开始索引, 结束索引)
它的两个参数分别指定了子数组的开始和结束位置,前闭后开。即包含前面的索引,不包含后面的索引。
不修改原数组,返回新数组。
let arr1 = ['a','b','c','d','e','f'];
let res1 = arr1.slice(0,1);// 截取索引0的子数组
console.log(arr1);// ['a', 'b', 'c', 'd', 'e', 'f']
console.log(res1);// ['a']
let res2 = arr1.slice(2,5);// 截取索引2,3,4的子数组
console.log(arr1);// ['a', 'b', 'c', 'd', 'e', 'f']
console.log(res2);// ['c', 'd', 'e']
map
对数组中每一个元素逐个进行操作,并返回一个新数组。新数组中的每一个元素就是原数组元素进行操作后的结果。
【语法】
不修改原数组,返回新数组。
let arr1 = ['a','b','c','d','e','f'];
let res = arr1.map(item => {
return item+"t";
})
console.log(arr1);// ['a', 'b', 'c', 'd', 'e', 'f']
console.log(res);// ['at', 'bt', 'ct', 'dt', 'et', 'ft']
filter
对数组中每一个元素逐个进行过滤,并筛选出符合条件的子数组。
【语法】
every
所有元素都满足,返回true;否则返回false.
some
只要有一个满足,返回true,否则返回false