数组
JavaScript
中的数组可以包含多个不同类型的值,譬如:
var a=[1, "hello world!", 3.14, {name:'zhouc'}];
下面来介绍一些常用的数组方法
注意,下面的方法中带*的表示会改变数组本身,而不带*的表示有一个返回值,需要输出或者赋值
如果需要将修改的数组赋值给另外一个变量或者仅作为参数传递,可以这样使用:
// 以reverse方法为例,reverse方法会修改数组本身
const array1 = [1, 4, "hello", 16];
var array2 = array1.slice().reverse();
console.log(array1);
// 原始的array1没有改变
console.log(array2);
// 输出结果:
// [ 1, 4, 'hello', 16 ]
// [ 16, 'hello', 4, 1 ]
filter
Filter
这个方法可以快速地筛选出所需要的变量:
var a=["hello world!", "hello js", "testString"];
a=a.filter(function(item){
return item.includes("hello")
});
// 等同于 a = a.filter(item => item.includes("hello"));
console.log(a);
// 输出结果:[ 'hello world!', 'hello js' ]
find
find
这个方法可以找到数组中的某个值:
var a=[1,2,3,4,5,6];
console.log(a.find(item => item>5))
// 输出结果为6
注意:
如果有多个匹配项,只会返回第一个:
var a=[1,2,3,4,5,6]; console.log(a.find(item => item>2)) // 输出结果为3
如果没有找到,则会返回
undefind
var a=[1,2,3,4,5,6]; console.log(a.find(item => item>10)) // 输出结果为undefind
findIndex
find
这个方法可以找到数组中的某个值的下标:
var a=[1,2,3,4,5,6];
console.log(a.findIndex(item => item>5))
// 输出结果为5
注意:
- 如果有多个匹配项,只会返回第一个:
- 如果没有找到,则会返回**-1**
inludes
inlcudes
这个方法可以判断某个数组是否包含某个对象,包含返回true
,不包含返回false
var a=[1,2,3,4,5,6];
console.log(a.includes(3))
// 输出为true
索引的开始位置
const arr = ["a", "b", "c"];
arr.includes("a", -100); // true
arr.includes("a", -2); // false
注意:多个参数不能使用数组:
var a=[1,2,3,4,5,6];
console.log([1,2])
// 输出为false
如果要判断是否包含多个值直接使用,
隔开:
var a=[1,2,3,4,5,6];
console.log(1,2)
// 输出为true
indexOf
indexOf
可以输出某个数组中的值的索引
var a=[1, "hello world!", 3.14, {name:'zhouc'}];
console.log(a.indexOf('hello world!'));
// 输出为1
注意:如果不存在这个值,则返回**-1**
concat
concat
可以拼接多个数组
var a=[1, "hello world!", 3.14, {name:'zhouc'}];
var b=[1, 2, 3, 4]
console.log(a.concat(b));
// 输出结果:[ 1, 'hello world!', 3.14, { name: 'zhouc' }, 1, 2, 3, 4 ]
当然也可以拼接非数组,例如这样的:
var a=[1, "hello world!", 3.14, {name:'zhouc'}];
var b="hello js"
console.log(a.concat(b));
// 输出结果:[ 1, 'hello world!', 3.14, { name: 'zhouc' }, 'hello js' ]
slice
slice
方法用于对数组进行切分
array.slice(startIndex, endIndex)
// startIndex: 开始的索引
// endIndex: 结束的索引
var a=[1, "hello world!", 3.14, {name:'zhouc'}, 1, 2, 3, 4, 5, 6];
console.log(a.slice(2, 5));
// 输出结果:[ 3.14, { name: 'zhouc' }, 1 ]
可以使用逆向索引:
var a=[1, "hello world!", 3.14, {name:'zhouc'}, 1, 2, 3, 4, 5, 6];
console.log(a.slice(-3, -1));
// 输出结果:[ 4, 5 ]
注意: 包括开始索引,不包括结束索引
map
map
方法用于对所有的数组值进行处理
const array1 = [1, 4, 9, 16];
console.log(array1.map((x) => x * 2));
// 输出结果:[2, 8, 18, 32]
注意,使用map方法需要确保每个值的类型相同,防止出现错误:
const array1 = [1, 4, "hello", 16];
console.log(array1.map((x) => x * 2));
// 输出结果:[2, 8, NaN, 32]
// 出现无法处理的问题
注意,下面的方法会修改数组本身
push*
push
方法会在数组末尾添加一个**(或多个)**元素
const array1 = [1, 4, "hello", 16];
array1.push("world!");
console.log(array1);
// 输出结果:[ 1, 4, 'hello', 16, 'world!' ]
push
方法也有返回值,返回数组在push
操作之后的长度:
const array1 = [1, 4, "hello", 16];
console.log(array1.push("world!"));
// 输出结果:5
pop*
pop
方法会删除数组中最后一个元素
const array1 = [1, 4, "hello", 16];
array1.pop();
console.log(array1);
// 输出结果:[ 1, 4, 'hello' ]
其中,pop
方法也有返回值,返回删除的元素:
const array1 = [1, 4, "hello", 16];
console.log(array1.pop());
// 输出结果:16
shift*
shift
方法会删除数组中第一个元素
const array1 = [1, 4, "hello", 16];
array1.shift();
console.log(array1);
// 输出结果:[ 4, 'hello', 16 ]
其中,shift
方法也有返回值,返回删除的元素:
const array1 = [1, 4, "hello", 16];
console.log(array1.shift());
// 输出结果:1
unshift*
unshift
方法会在数组开头添加一个**(或多个)**元素
const array1 = [1, 4, "hello", 16];
array1.unshift("javascript");
console.log(array1);
// 输出结果:[ 'javascript', 1, 4, 'hello', 16 ]
unshift
方法也有返回值,返回数组在unshift
操作之后的长度:
const array1 = [1, 4, "hello", 16];
console.log(array1.unshift("javascript"));
// 输出结果:5
splice*
splice
是一个多功能方法,其参数如下:
array.splice(start, deleteCount, item1, item2, ...)
start
: 开始执行操作位置deleteCount
:删除的长度(如果不需要删除则为0)item
:(如果要插入)的元素
插入元素
const array1 = [1, 4, "hello", 16];
array1.splice(3, 0, "javascript");
console.log(array1);
// 输出结果:[ 1, 4, 'hello', 'javascript', 16 ]
删除元素
const array1 = [1, 4, "hello", 16];
array1.splice(1, 2);
console.log(array1);
// 输出结果:[ 1, 16 ]
替换元素
const array1 = [1, 4, "hello", 16];
array1.splice(2, 1, "hello, javascript");
console.log(array1);
// 输出结果:[ 1, 4, 'hello, javascript', 16 ]
注:一般来说如果只替换一个元素,直接赋值即可:
const array1 = [1, 4, "hello", 16];
array1[2]="hello, javascript";
// 对于只替换一个元素,这样写更易读
返回值
splice
只有在有元素被删除的情况下才会有返回内容,如果没有删除的元素,则会返回一个空数组:
const array1 = [1, 4, "hello", 16];
console.log(array1.splice(3, 0, "javascript"));
// 输出结果:[]
在有元素被删除的情况下,会返回被删除的元素(数组):
const array1 = [1, 4, "hello", 16];
console.log(array1.splice(1, 2));
// 输出结果:[ 4, 'hello' ]
sort*
sort
方法用于对数组进行排序:
字符串排序
const array1 = ["a", "c", "d", "b"];
array1.sort();
console.log(array1);
// 输出结果:[ 'a', 'b', 'c', 'd' ]
注意,在不添加任何参数的情况下,sort
方法无法对数字进行排序:
⚠️不正确的代码:
const array1 = [52, 5, 4, 21];
array1.sort();
console.log(array1);
// 输出结果:[ 21, 4, 5, 52 ]
自定义排序规则
array.sort(function(a,b){
// ...
return // ...
})
如果函数的返回值<0
则将把a
放在b
的前面,如果>0
则把a
放在b
的后面,如果=0
则保持不变
var returnVal=function(a,b);
if(returnVal<0){
// [..., a, b, ...]
}else if(returnVal>0){
// [..., b, a, ...]
}else{
// 保持原来顺序
}
所以得到对数字排序的方法应该这样写:
const array1 = [52, 5, 4, 21];
array1.sort(function(a, b){
return a - b;
});
console.log(array1);
// 输出结果:[ 4, 5, 21, 52 ]
sort
方法的返回值为排序之后的数组
reverse*
reverse
用于反转数组:
const array1 = [1, 4, "hello", 16];
array1.reverse();
console.log(array1);
// 输出结果:[ 16, 'hello', 4, 1 ]
reverse
的返回值为反转之后的数组