数组

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

注意:

  1. 如果有多个匹配项,只会返回第一个:

    var a=[1,2,3,4,5,6];
    console.log(a.find(item => item>2))
    // 输出结果为3
    
  2. 如果没有找到,则会返回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. 如果有多个匹配项,只会返回第一个:
  2. 如果没有找到,则会返回**-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的返回值为反转之后的数组