为什么需要数组？

基本数据类型的数据结构比较单一，不能够满足我们的开发所需，而且我们需要保存一系列的数据，需要用到数组。

引言：

由于我的爱好广泛，想展示我的个人爱好，需要通过多个变量来定义非常的繁琐，这个时候如果能够将一组值保存到一起就太好了。

什么是数组？

数组方法汇总：

es5:

方法 描述
concat() 链接两个过着更多的数组，并返回结果
join(x) 将数组以 x 分隔符分割为字符串
pop() 删除并且返回数组的最后一个元素
push() 数组末尾添加元素
reverse() 点到数组中元素的顺序
shift() 删除并返回数组的第一个元素
slice() 对某个已有的数组返回选定的元素
sort() 对元素进行排序
splice() 删除元素，并向数组添加新元素
toSource() 返回该对象的源代码
toString() 把数组转换为字符串，并返回结果
toLocaleSting() 把数组转换为贝蒂数组，并返回结果
unshift 在数组开头添加一个或者更多元素，返回新的数组
indexOf 查找数据在数组中是否存在，返回下标

es6 数组新增方法

方法 描述
… 扩展运算符可以展开数组、对象
apply 将数组转换为函数的参数
form 将类数组转换为真正的数组
of 用于将一组值转换为数组
copyWithin 数组实例的方法，将指定位置成员复制到其他位置，会覆盖原有成员，然后返回当前数组
find 返回满足条件的第一个项
findIndex 返回满足条件的第一个项的下标
entries 返回一个二维数组 [ key:[val]]
keys 找到数组中所有项的键
values 找到数组中所有项的值
includes 返回一个布尔值，表示某个数组是否包含给定的值
flat() 降维，只降低一维
flatMap() 对每个原数组成员执行一个函数
forEach 数组遍历
filter 过滤数组
every 一假为假，全真为真
reduce 求和等
some 全假为假，一真为真
map 遍历返回新数组

数组方法

arrayObject.slice(start,end)

slice() 方法可从已有的数组中返回选定的元素。
请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

1
2
3
4
5
6
7
8
let arr = [1, 2, 3, 4, 5]
let newArr = arr.slice(1)
// arr= [1, 2, 3, 4, 5]   原数组保持不变
// newArr = [2, 3, 4, 5] 返回新数组
• 1
• 2
• 3
• 4

arrayObject.map()

将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，不改变原来的数组

1
2
3
4
5
6
7
8
let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(x => x * 2)
// arr= [1, 2, 3, 4, 5]   原数组保持不变
// newArr = [2, 4, 6, 8, 10] 返回新数组
• 1
• 2
• 3
• 4

arrayObject.forEach()

将数组中的每个元素调用一个提供的函数，没有返回值，返回值为 undefined，不会改变原数组，注意和 map 方法区分

1
2
3
4
5
6
let arr = [1, 2, 3, 4, 5]
arr.forEach(x => x * 2)
// arr = [1, 2, 3, 4, 5]  原数组不改变,注意和map区分
• 1
• 2
• 3

arrayObject.filter()

将所有元素进行判断，将满足条件的元素作为一个新的数组返回

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let arr = [1, 2, 3, 4, 5]
let newArr = arr.filter(x => {
	return x >= 3
})
// 箭头函数加了{} 就需要加上return 不然返回undefined
// 箭头函数不加{} 就可以不加return
let newArr = arr.filter(x => x >= 3)
//newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组
//数组去重
let myArr = [1,3,4,5,6,3,7,4];
console.log(myArr.filter((value,index,arr)=>arr.indexOf(value)===index));
//[ 1, 3, 4, 5, 6, 7 ]
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

arrayObject.every()

将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回 true，否则为 false：

1
2
3
4
5
6
7
8
9
10
let arr = [1, 2, 3, 4, 5]
const isLessThan4 = value => value < 4
const isLessThan6 = value => value < 6
arr.every(isLessThan4 ) //false
arr.every(isLessThan6 ) //true
• 1
• 2
• 3
• 4
• 5

arrayObject.some()

将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回 true，若所有元素都不满足判断条件，则返回 false

1
2
3
4
5
6
7
8
9
10
let arr= [1, 2, 3, 4, 5]
const isLessThan4 = value => value < 4
const isLessThan6 = value => value > 6
arr.some(isLessThan4 ) //true
arr.some(isLessThan6 ) //false
• 1
• 2
• 3
• 4
• 5

arrayObject.reduce()

将所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let arr = [1, 2, 3, 4, 5]
const add = (a, b) => {
	console.log("a:" + a + ";b:" + b)
	return a + b
}
let sum = arr.reduce(add)
// a:1;b:2
// a:3;b:3
// a:6;b:4
// a:10;b:5
// console.log(sum) // 15  相当于累加的效果
// 与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

arrayObject.push()

在数组的后面添加新加元素，此方法改变了数组的长度

1
2
3
4
5
6
let arr = [1, 2, 3, 4, 5]
arr.push(6, 7, 8)
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8]
• 1
• 2
• 3

arrayObject.pop()

此方法删除数组最后一个元素，并返回数组，此方法改变了数组的长度

1
2
3
4
5
6
7
8
let arr = [1, 2, 3, 4, 5]
arr.pop()
console.log(arr) //[1, 2, 3, 4]
console.log(arr.length) //4
• 1
• 2
• 3
• 4

arrayObject.shift()

此方法删除数组第一个元素，并返回数组，此方法改变了数组的长度

1
2
3
4
5
6
7
8
let arr = [1, 2, 3, 4, 5]
arr.shift()
console.log(arr) // [2, 3, 4, 5]
console.log(arr.length) // 4
• 1
• 2
• 3
• 4

arrayObject.unshift()

此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度：

1
2
3
4
5
6
7
8
let arr = [1, 2, 3, 4, 5]
arr.unshift(6, 7)
console.log(arr) //[6, 7, 1, 2, 3, 4, 5]
console.log(arr.length) //7
• 1
• 2
• 3
• 4

Array.isArray()

判断一个对象是不是数组，返回的是布尔值

1
2
3
4
5
6
7
8
let str1 = 'hello world'
let arr1 = ['hello', 'world']
Array.isArray(str1) // false
Array.isArray(arr1) // true
• 1
• 2
• 3
• 4

arrayObject.concat()

此方法可以将多个数组拼接成一个数组：

1
2
3
4
5
6
7
8
let arr1 = [1, 2, 3]
arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr)//[1, 2, 3, 4, 5]
• 1
• 2
• 3
• 4

concat
如果 concat 方法的参数是一个元素，该元素会被直接插入到新数组中；如果参数是一个数组，该数组的各个元素将被插入到新数组中；

1
2
3
4
5
6
7
8
let arr1 = [1, 2, 3]
arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr)//[1, 2, 3, 4, 5]
• 1
• 2
• 3
• 4

二维数组降维

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let arr = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function reduceDimen(arr) {
  let reduce = [];
  for (let i = 0; i < arr.length; i++) {
    reduce = reduce.concat(arr[i]);
  }
  return reduce;
}
reduceDimen(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

arrayObject.toString()

此方法将数组转化为字符串

1
2
3
4
5
6
let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(str)// 1,2,3,4,5
• 1
• 2
• 3

arrayObject.join()

此方法也是将数组转化为字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let arr = [1, 2, 3, 4, 5];
let str1 = arr.toString()
let str2 = arr.toString(',')
let str3 = arr.toString('##')
console.log(str1)// 12345
console.log(str2)// 1,2,3,4,5
console.log(str3)// 1##2##3##4##5
// 可以跟toString()对比
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

arrayObject.splice(开始删除的位置， 删除的个数，删除后新插入的元素)

这方法可以实现增删改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.splice(2, 0 'haha')
let arr2 = arr.splice(2, 3)
let arr1 = arr.splice(2, 1 'haha')
console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素
console.log(arr2) //[1, 2] 删除三个元素
console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素
• 1
• 2
• 3
• 4
• 5
• 6
• 7

arrayObject.sort()

这方法可以将数组元素排序,传进一个函数,函数带两个参数
第一参数 a, 第二参数 b
a-b 升序 b-a 降序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 升序
let arr = [77, 99, 115, 135, 147, 191, 197, 219, 221, 227, 229, 233, 237, 269, 30, 189, 63, 87, 121, 143, 201, 211, 243, 12, 17, 9, 171, 279, 23, 24, 31, 34, 35, 37, 53, 55, 59, 60, 61, 62, 67, 68, 71, 75, 89, 91, 95, 107, 109, 123, 137, 139, 149, 165, 173, 175, 185, 205, 213, 217, 225, 239, 293, 294, 275, 296, 297]
arr.sort((a,b) => {
	return a - b
	})
console.log(arr)
// [9, 12, 17, 23, 24, 30, 31, 34, 35, 37, 53, 55, 59, 60, 61, 62, 63, 67, 68, 71, 75, 77, 87, 89, 91, 95, 99, 107, 109, 115, 121, 123, 135, 137, 139, 143, 147, 149, 165, 171, 173, 175, 185, 189, 191, 197, 201, 205, 211, 213, 217, 219, 221, 225, 227, 229, 233, 237, 239, 243, 269, 275, 279, 293, 294, 296, 297]
// 降序
arr.sort((a, b) => {
	return b - a
	})
console.log(arr)
// [297, 296, 294, 293, 279, 275, 269, 243, 239, 237, 233, 229, 227, 225, 221, 219, 217, 213, 211, 205, 201, 197, 191, 189, 185, 175, 173, 171, 165, 149, 147, 143, 139, 137, 135, 123, 121, 115, 109, 107, 99, 95, 91, 89, 87, 77, 75, 71, 68, 67, 63, 62, 61, 60, 59, 55, 53, 37, 35, 34, 31, 30, 24, 23, 17, 12, 9]
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

arrayObject.find()

此方法返回通过函数判断的数组第一个元素的值。

1
2
3
4
5
6
7
8
9
10
11
12
let arr1 = [1, 2, 3, 4]
let str = arr1.find((x) => {
	return x > 2
	})
console.log(str ) // 3
// 如果没有符合条件的元素 返回undefined
• 1
• 2
• 3
• 4
• 5
• 6

arrayObject.findIndex()

findIndex()与 find()的使用方法相同，只是当条件为 true 时 findIndex()返回的是索引值，而 find()返回的是元素。如果没有符合条件元素时 findIndex()返回的是-1，而 find()返回的是 undefined。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
const bookArr=[
    {
        id:1,
        bookName:"三国演义"
    },
    {
        id:2,
        bookName:"水浒传"
    },
    {
        id:3,
        bookName:"红楼梦"
    },
    {
        id:4,
        bookName:"西游记"
    }
];
var i=bookArr.findIndex((value)=>value.id==4);
console.log(i);// 3
var i2=bookArr.findIndex((value)=>value.id==100);
console.log(i2);// -1
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

arrayObject.includes()

用来判断一个数组是否包含一个指定的值，如果是返回 true，否则 false。

1
2
3
4
5
6
let site = ['runoob', 'google', 'taobao']
site.includes('runoob') // true
site.includes('baidu')  // false
• 1
• 2
• 3

arrayObject.reverse()

用于颠倒数组中元素的顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "
") // George,John,Thomas
document.write(arr.reverse()) // Thomas,John,George
• 1
• 2
• 3
• 4
• 5
• 6
• 7

arrayObject.fill(value, start, end)

fill() 方法用于将一个固定值替换数组的元素。

1
2
3
4
5
6
7
8
9
10
11
value	必需。填充的值。
start	可选。开始填充位置。
end 	可选。停止填充位置 (默认为 array.length)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4); // ["Banana", "Orange", "Runoob", "Runoob"]
• 1
• 2
• 3
• 4
• 5
• 6

Array.from()

Array.from()就是将一个类数组对象或者可遍历对象转换成一个真正的数组。(ES6)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let arrayLike = {
    0: 'tom',
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9