数组「In JavaScript」

仅个人学习复习用。

JS 数组区别与 Java 数组，数组元素的数据类型可以是任意的。

创建数组的两种方式

第一种是通过字面量直接创建数组。

var arr = [1,'hello',true,null,undefined];

第二种是 new 一个数组对象来创建数组。

//创建一个空数组
var arr = new Array();
//arr = [];

//若只有一个参数，则该参数代表数组的长度。
var arr = new Array(5);
//arr = [empty × 5];

//若有两个参数，则这些参数都将是数组元素。
var arr = new Array(1,2);
//arr = [1,2];

注意，上面出现了 empty ，而不是 undefined，这两还是稍微有点区别的。

如果你只是创建数组而没有赋值即 empty，但是你将它输出显示的将是 undefined。

参考以下链接。

怎样理解数组的空元素empty与undefined的区别 - aisowe - 博客园

通过索引获取数组元素

索引由 0 开始，通过索引可获得相应的数组元素。

如果索引没有对应的数组元素则返回 undefined 。

var arr = [1,2,3,4,5];
console.log(arr[0]);//1
console.log(arr[4]);//5
console.log(arr[5]);//undefined

通过数组元素获得索引indexOf()、lastIndexOf()

indexOf(searchvalue)，返回该元素在数组中出现的第一个索引，如果没有则返回 -1。

lastIndexOf(searchvalue)，返回该元素在数组中出现的最后一个索引，如果没有则返回 -1。

当然也可以加入限定，规定从第几个索引开始查找。

indexOf(searchvalue,start) 从第start个索引开始向后查找。

lastIndexOf(searchvalue,start) 从倒数第start个索引开始向前查找。

var arr = [1,2,3,4,5,4,3,2,1];
arr.indexOf(1);//0
arr.lastIndexOf(1);//8
arr.indexOf(1,0);//0,查找包含了start索引号
arr.indexOf(1,1);//8

遍历数组forEach()

遍历数组也有两种方法。

第一种是使用普通的 for 循环遍历。

var arr = ['a','b','c','d'];
for(var i = 0;i < arr.length;i++) {
    console.log(arr[i]);
}

第二种是使用数组对象里的 forEach 方法。forEach方法的参数通常是一个回调函数。对于每一项数组元素执行一次此回调函数。

//通常用法
var arr = [1,2,3,4,5];
var sum = 0;
arr.forEach(function (value){
    sum += value;
});
console.log(sum);

新增数组元素push()、shift()

四种方法。 

可以通过修改数组的长度来扩充数组。

var arr = [1,2,3];
arr.length = 7;
//arr = [1, 2, 3, empty × 4]

也可以通过直接给数组赋值来扩充数组。

var arr = [1,2,3];
arr[3] = 4;
//arr = [1, 2, 3, 4]

var arr = [1,2,3];
arr[5] = 4;
//arr = [1, 2, 3, empty × 2, 4]

更推荐以下两种方式：

push() 在数组后面追加元素。该方法会返回添加元素后的数组长度。

var arr = [1,2,3];
var length = arr.push("hello",4);
console.log(arr);    //[1, 2, 3, 'hello', 4]
console.log(length); //5

unshift() 在数组前面添加元素。该方法会返回添加元素后的数组长度。

var arr = [1,2,3];
var length = arr.unshift("hello",4);
console.log(arr);    //['hello', 4, 1, 2, 3]
console.log(length); //5

删除数组元素pop()、unshift()

两种方法。

pop() 删除数组最后一个元素。并返回被删除元素的值。

var arr = [1,2,3];
var del = arr.pop();
console.log(arr);    //arr = [1, 2];
console.log(del);    //3

shift() 删除数组第一个元素。并返回被删除元素的值。

var arr = [1,2,3];
var del = arr.shift();
console.log(arr);    //arr = [2, 3];
console.log(del);    //1

可同时删除/添加元素的splice()

splice()的语法是splice(index,number,item...)

index：

其中index是操作开始的索引号（此索引包括在内）。

如果函数中只有index参数，那么将会删除从索引号开始往后的所有元素。

number：

表示删除的数量，为0则不删除任何一个，否则删除相应数量的元素。

item：

如果有item，将会在删除操作完成后将item添加进数组。

注意，此方法会改变原数组。

let fruit = ['apple', 'banana', 'orange', 'pear']
fruit.splice(2);
console.log(fruit);//['apple', 'banana']

let fruit = ['apple', 'banana', 'orange', 'pear']
fruit.splice(2, 1);
console.log(fruit);//['apple', 'banana', 'pear']

let fruit = ['apple', 'banana', 'orange', 'pear']
fruit.splice(2, 1, '666', '777');
console.log(fruit);//['apple', 'banana', '666', '777', 'pear']

 

截取数组片段slice()

slice()与上方的splice()虽然长得很像，但实际是一点关系也没有。

slice的英文意思是切片，而splice的英语意思是粘接。所以...完全不一样。

slice的使用方法是splice(begin,end)，索引号包头不包尾，也不会像splice()一样修改原数组。

let fruit = ['apple', 'banana', 'orange', 'pear']
let newFruit1 = fruit.slice(1, 3);
console.log(newFruit1);
//输出 ['banana', 'orange']，说明包括开始的索引号，不包括结束的索引号。
let newFruit2 = fruit.slice(2);
console.log(newFruit2);
//输出 ['orange', 'pear']，说明如果只有一个参数，那么从此参数截取到结束。
console.log(fruit);
//输出 ['apple', 'banana', 'orange', 'pear']，说明slice()方法不改变原数组。

数组转换成字符串toString()、join()

三种方法。

使用 for 循环来遍历数组。

var arr = ["a", "b", "c"];
var str = "";
for(var i = 0;i < arr.length;i++) {
    str += arr[i];
}
console.log(str);//abc

使用 toString() 方法来转换。

var arr = ["a", "b", "c"];
var str = arr.toString();
console.log(str);    //'a,b,c'

使用 join() 方法来转换。join 与 toString 方法的区别在于可以自定义分隔符，加不加引号都行。

var arr = ["a", "b", "c"];
var str = arr.join(1);    //等效于arr.join('1'),加不加引号都一样
console.log(str);    //a1b1c

数组排序sort()

Array对象提供 sort 方法直接进行数组排序。

var arr = [1,6,3,2,6,7,8,4];
arr.sort();
console.log(arr);
//arr = [1, 2, 3, 4, 6, 6, 7, 8]

数组反转reverse()

var arr = [1,2,3,4,5,6,7];
arr.reverse();
console.log(arr);
//arr = [7, 6, 5, 4, 3, 2, 1]

数组过滤filter()

使用 filter() 函数来过滤数组，参数同样是一个回调函数。

var ages = [32, 33, 16, 40];
var filAges = ages.filter(function(value) {
    return value >= 18;
});
// filAges = [32, 33, 40]

看例子可以明白，filter函数时创建一个新的数组，并不会改变原来的数组，因此需要return返回新数组。

使用filter进行人名筛选：

let persons = [{
    name: "张三",
    age: 18
}, {
    name: "李四",
    age: 19
}, {
    name: "王五",
    age: 20
}, {
    name: "王老五",
    age: 21
}]
let keyword = "王"
let filPersons = persons.filter((p) => {
    return p.name.indexOf(keyword) !== -1
})
console.log(filPersons)
//结果
//Array(2)
//>0: {name: '王五', age: 20}
//>1: {name: '王老五', age: 21}
//>length: 2
//>[[Prototype]]: Array(0)

连接不同数组的concat()

此方法不会改变原有的数组，会返回一个新生成的数组。

let fruit = ['apple', 'banana', 'orange', 'pear']
let num = ['1', '2', '3']
let character = ['a', 'b', 'c']
let newArr = fruit.concat(num, character)
console.log(newArr)
//['apple', 'banana', 'orange', 'pear', '1', '2', '3', 'a', 'b', 'c']
console.log(fruit)
//['apple', 'banana', 'orange', 'pear'],因此不会改变原来的数组

检查数组中是否存在符合某类条件的元素们some()

let ages = [23, 22, 5, 48, 18, 20, 6, 3];
let flag = ages.some((age) => {
    return age > 18
})
console.log(flag)

some()与indexOf()的区别在于：

1.some()查找的是数组中是否存在符合条件的元素们，只要查找到一个即返回true否则为false。而indexOf()查找的是数组中的指定元素。

2.some()返回的是true或者false。而indexOf()返回的是-1（未存在该元素），或者该元素的第一个索引。 

检查数组中是否存在某元素includes()

includes()也是检查数组中是否存在某一个元素。对比与some()和indexOf()，我觉得它跟indexOf()更像一些。

some()是检查是否存在某类元素，includes()和indexOf()是检查是否存在某个指定的元素。

区别在于includes()返回true或者false，indexOf()返回索引。

let names = ["张三", "李四", "王五"]
let flag = names.includes('李四')
console.log(flag)//true

得到符合条件的数组元素find()

如果说indexOf()是includes()的加强版，那么find()就是some()的加强版了。

find()返回符合条件的第一个元素的元素值。

let ages = [18, 20, 16, 30, 52, 66, 73, 19]
let theAge = ages.find((age) => {
    return age > 50
})
console.log(theAge)//52

对数组元素进行相同操作的map()

map()函数是对数组的每一个元素进行相同的函数操作，然后返回操作的结果，从而又组成了一个数组。

因此map()方法不会改变原来的数组。

let names = ["张三", "李四", "王五"]
let mapNames = names.map((name) => {
    return "我的名字是" + name
})
console.log(mapNames)
//输出结果：['我的名字是张三', '我的名字是李四', '我的名字是王五']

对比forEach()，要实现上诉方法，map()会更简单。

//使用forEach()函数来实现上述功能，会更复杂一点点
let names = ["张三", "李四", "王五"]
let mapNames = []
names.forEach((name) => {
    mapNames.push("我的名字是" + name)
})
console.log(mapNames)

检查所有数组元素every()

every()会对所有数组元素进行检查然后返回true或者false。

let ages = [18, 20, 16, 30, 52, 66, 73, 19]
let flag = ages.every((age) => {
    return age > 3
})
console.log(flag)//true