概念

数组是批量数据的集合，为引用类型，内置基本类型在内存中只有一块空间，该空间存放的就是数据的值；引用类型有两块空间，一块是栈空间，存储引用类型数据的地址（即new空间返回的地址），另一块是堆空间，存储真正的数据

定义方式

• var arr = []; ---- 字面量方式定义一个空数组
• var arr = new Array(); ---- 构造函数方式，定义一个空数组
• var arr = new Array(5); ---- 通过构造函数定义一个长度为5的数组，参数为一个整数，代表数组长度，否则代表数组的元素

length

获取数组的长度，可读写

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

读写

通过[下标]操作，下标从0开始

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

数组遍历

for...in遍历key(即下标)

const arr = [1, 2, 3, 4, 5];
for (let index in arr) {
    console.log(index); //0,1,2,3,4
}

for...of遍历value

const arr = [1, 2, 3, 4, 5];
for (let index of arr) {
    console.log(index); //1,2,3,4,5
}

常用方法

push

功能：向数组的尾部添加一个或多个元素

返回值：添加后的数组新长度

用法：Array.push(参数1,[参数2]...);

const arr = [1, 2, 3, 4, 5];
const length = arr.push(6);
console.log(arr);   //[1,2,3,4,5,6]
console.log(length);    //6

pop

功能：删除数组尾部的元素（一次删一个）

返回值：删除的元素

用法：Array.pop(); 

const arr = [1, 2, 3, 4, 5];
const item = arr.pop();
console.log(arr);   //[1,2,3,4]
console.log(item);    //5

unshift

功能：向数组的头部添加一个或多个元素

返回值：添加后的数组新长度

用法：Array.unshift(参数1，[参数2]...); 

const arr = [1, 2, 3, 4, 5];
const length = arr.unshift('aye');
console.log(arr);   //['aye',1,2,3,4,5]
console.log(length);    //6

shift

功能：删除数组头部的元素（一次删一个）

返回值：删除的元素

用法：Array.shift();  

const arr = [1, 2, 3, 4, 5];
const item = arr.shift();
console.log(arr);   //[2,3,4,5]
console.log(item);    //1

slice

功能：不改变原数组，截取数组

返回值：截取数组后的新的子数组

用法：Array.slice(start,end)；截取从start开始处到end-1位置处的元素

let arr = [1, 2, 3, 4, 5];
let result = arr.slice(0, 3);
console.log(result);    //[1,2,3]
console.log(arr);   //[1,2,3,4,5]

splice

功能：删除/添加/替换从开始位置指定长度的数据

返回值：以数组形式返回删除的元素

用法：

• Array.splice(start,length);从start开始删除length个元素，不加length，将start位置后面的元素都删除
• Array.splice(start,length,[参数1],...[参数n]);
  • 如果length是0，在start位置处添加元素  (添加)
  • 如果length是大于0，将start位置处的元素先删除。再添加元素（替换）

//删除：
let arr = [1, 2, 3, 4, 5];
const result = arr.splice(0, 2);
console.log(arr);   //[3,4,5]
console.log(result);    //1,2

//替换：
let arr = [1, 2, 3, 4, 5];
const result = arr.splice(0, 2, 'a');
console.log(arr);   //['a',3,4,5]
console.log(result);    //1,2

//添加
let arr = [1, 2, 3, 4, 5];
const result = arr.splice(0, 0, 'a');
console.log(arr);   //['a',1，2，3,4,5]
console.log(result);    //[]

join

功能：将数组转成字符串

返回值：数组的字符串形式

用法：Array.join([分隔符])；  不加分隔符默认以逗号隔开

let arr = ['hello', 'aye'];
let str = arr.join('-');
console.log(str);   //hello-aye
let str2 = arr.join();
console.log(str2);  //hello,aye

concat

功能：不改变原数组，连接并且合并

返回值：合并后的新数组

用法：Array.concat(brr,crr...nrr)；将这个数组与添加的数组/元素合并，形成一个新数组并返回

• Array.concat();  将这个数组赋值成新数组返回，与原数组无引用关系
• Array.concat([值1],...[值n]);  给数组尾部添加一个或多个元素/数组，并返回一个新数组

//一：
let arr = [1, 2, 3, 4, 5];
let result = arr.concat(6, 7, 8);
console.log(arr);   //[1,2,3,4,5]
console.log(result);    //[1,2,3,4,5,6,7,8]

//二：
let arr = [1, 2, 3, 4, 5];
let brr = [1, 2];
let result = arr.concat(brr, 6, 7, 8);
console.log(arr);   //[1,2,3,4,5]
console.log(result);    //[1,2,3,4,5,1,2,6,7,8]

//三：
let arr = [1, 2, 3, 4, 5];
let brr = arr;
let crr = arr.concat();
console.log(arr === brr);   //true
console.log(arr === crr);   //false

reverse

功能：数组反转

返回值：无

用法：Array.reverse()；

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

sort

功能：默认按照字符的ASCII码进行排序，如果进行数值排序,需要设置[参数]

参数：回调函数,函数返回正数为升序,返回负数为降序

用法：Array.sort(function)

let arr = [4, 2, 6, 3, 7, 1];
//升序排序：
arr.sort((a, b) => a - b);
console.log(arr);   //[1,2,3,4,6,7]
//降序排序：
arr.sort((a, b) => b - a);
console.log(arr);   //[7,6,4,3,2,1]
//随机排序：
arr.sort(() => Math.random() - 0.5);
console.log(arr);   //随机，无固定顺序

//数组对象根据某个值排序
const data = [
    { id: 1001, name: "商品1", price: 80 },
    { id: 1002, name: "商品2", price: 100 },
    { id: 1003, name: "商品3", price: 60 },
    { id: 1004, name: "商品4", price: 30 },
    { id: 1005, name: "商品5", price: 90 },
    { id: 1006, name: "商品6", price: 30 },
    { id: 1007, name: "商品7", price: 50 }
];
data.sort(function (a, b) {
    return a.price - b.price;    //根据price的值升序排序
});
console.log(data);
/**
*[ { id: 1004, name: '商品4', price: 30 },
*  { id: 1006, name: '商品6', price: 30 },
*  { id: 1007, name: '商品7', price: 50 },
*  { id: 1003, name: '商品3', price: 60 },
*  { id: 1001, name: '商品1', price: 80 },
*  { id: 1005, name: '商品5', price: 90 },
*  { id: 1002, name: '商品2', price: 100 } ]
*/

fill

功能：填充数组

用法：

• Array.fill(value)：用指定的值填充数组
• Array.fill(value,[start],[end])：用指定值填充从start至end-1处的值

var arr = [];
arr.fill(6);
console.log(arr);  //[] 原数组没有长度，没有数据可以替换，所以结果仍为空

var arr = ['a', 'b', 'c'];
arr.fill(7);
console.log(arr);  //[7,7,7]，将数组的每一项都填充为7

var arr = new Array(5);
arr.fill(5);
console.log(arr);    //[5,5,5,5,5],将数组的5项都填充为5

var arr = [1, 2, 3, 4, 5];
arr.fill('h',2,4);
console.log(arr);   //[1,2,'h','h',5]   用'h'填充2到3处的值

indexOf

功能：查找数组中的元素

返回值：找到返回该元素首次出现时的位置下标，没找到返回-1

用法：Array.indexOf（目标元素，[从哪个下标处开始查找]），第二个参数不写默认从第0项开始查找

var arr = [1, 2, 3, 1, 5, 6];
let index = arr.indexOf(1);
console.log(index); //0
let index2 = arr.indexOf(1, 2);
console.log(index2);    //3

//利用按位非运算符判断元素是否找到：
if(!~arr.indexOf(目标元素)){}   //如果没有查找到  
if(~arr.indexOf(目标元素)){}    //如果查找到
/**
* 按位非：~(A) = -(A+1)
*    如：~(10) = -(10+1) = -11
*       ~(0)  = -(0+1) = -1
*       ~(-1) = -(-1+1) = 0
*  如上，js非0为真
*/

forEach

功能：遍历数组，对其每个元素执行回调函数

参数：回调函数

返回值：无

用法：Array.forEach(function(item,[index],[array]){})

var arr = [1, 2, 3, 4, 5];
arr.forEach((item, index, arr) => {
    console.log(`${item}--${index}--${arr}`);
    /**
    * 1--0--1,2,3,4,5
    * 2--1--1,2,3,4,5
    * 3--2--1,2,3,4,5
    * 4--3--1,2,3,4,5
    * 5--4--1,2,3,4,5
    */
    if (item >= 3) {
        console.log(item);  //3,4,5
    }
});

//通过forEach取最小值：
var arr = [2, 3, 5, 78, 2, 1, 45];
let min = arr.shift();
arr.forEach(item => {
    min = item > min ? min : item;
})
console.log(min);   //1

map

功能：遍历数组，对其每个元素执行回调函数

参数：回调函数

返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后return的值,没有return返回undefined

用法：Array.map(function(item,[index],[array]){})

var arr = [1, 2, 3, 4, 5];
var brr = arr.map(item => item * 2);
console.log(brr);   //[2,4,6,8,10]

var crr = arr.map(item => { })
console.log(crr);   //[undefined,undefined,undefined,undefined,undefined]

面试题：

以下代码打印什么？

var brr = [10, 10, 10];
console.log(brr.map(parseInt));

结果：[10,NaN,2],上述代码map遍历后打印的数据为：

parseInt(10,0);  //10
parseInt(10,1);  //NaN
parseInt(10,2);  //2

再看parseInt：

语法：parseInt(string, radix);

功能：解析一个字符串并返回指定基数的十进制整数

参数：

string：要被解析的值。如果参数不是一个字符串，则将其转换为字符串 (使用 [ToString]抽象操作)。字符串开头的空白符将会被忽略。

radix：可选，从 2 到 36 的整数，表示进制的基数。例如指定 16 表示被解析值是十六进制数。如果超出这个范围，将返回 NaN。假如指定 0 或未指定，基数将会根据字符串的值进行推算。注意，推算的结果不会永远是默认值 10

filter

功能：根据过滤条件返回一个新的数组

参数：回调函数

返回值：有return有返回，没有return没有返回，return只有两种结果，true就保留这个数据，false就删除这个数据

用法：Array.filter(function(item,[index],[array]){})

var arr = [1, 2, 3, 4, 5];
var result = arr.filter(item => item % 2 === 0);
console.log(result);    //[2,4]

var result2 = arr.filter(item => { });
console.log(result2);   //[]

扩展

过滤数组空值：

var arr = [1, undefined, 2, NaN, 3, false, , 4, '', 5, null];
console.log(arr.filter(Boolean));   //[1,2,3,4,5]

reduce

功能：对数组进行归并操作

参数：回调函数

用法：Array.reduce(function(pre,item,[index],[array]){},[initvalue])

• pre：表示上次操作返回的结果，初始值为当前数组的第0项或initvalue
• item：传了initvalue从第0项开始，没传从第1项开始
• index：下标（传了initvalue从0开始，没传从1开始）
• array：当前操作的数组

//不传initvalue：
var arr = [1, 2, 3, 4, 5];
arr.reduce((pre, item, index, arr) => {
    console.log(`pre：${pre}--item:${item}--index:${index}--arr:${arr}`);
    /**
     * pre:1--item:2--index:1--arr:1,2,3,4,5
     * pre:undefined--item:3--index:2--arr:1,2,3,4,5
     * pre:undefined--item:4--index:3--arr:1,2,3,4,5
     * pre:undefined--item:5--index:4--arr:1,2,3,4,5
     */
})

//传了initvalue：
var arr = [1, 2, 3, 4, 5];
arr.reduce((pre, item, index, arr) => {
    console.log(`pre：${pre}--item:${item}--index:${index}--arr:${arr}`);
    /**
     * pre:5--item:1--index:0--arr:1,2,3,4,5
     * pre:undefined--item:2--index:1--arr:1,2,3,4,5
     * pre:undefined--item:3--index:2--arr:1,2,3,4,5
     * pre:undefined--item:4--index:3--arr:1,2,3,4,5
     * pre:undefined--item:5--index:4--arr:1,2,3,4,5
     */
},5)

//对数组求和：
var arr = [1, 2, 3, 4, 5];
const result = arr.reduce((pre, item, index, arr) => {
    console.log(`pre：${pre}--item:${item}--index:${index}--arr:${arr}`);
    /**
     * pre:1--item:2--index:1--arr:1,2,3,4,5
     * pre:3--item:3--index:2--arr:1,2,3,4,5
     * pre:6--item:4--index:3--arr:1,2,3,4,5
     * pre:10--item:5--index:4--arr:1,2,3,4,5
     */
    return pre + item;
})
console.log(result);    //15

find

功能：类似于filter，但方法中找到符合条件的项，就不会继续遍历数组。IE11及之前不支持

返回值：找到返回符合的项，未找到返回undefined

用法：Array.find(function(item,[index],[array]){})

var arr = [
    { id: 1, name: '张三', age: 20 },
    { id: 2, name: '李四', age: 21 },
    { id: 3, name: '王五', age: 22 },
    { id: 4, name: '赵六', age: 23 }
]
const result = arr.find(item => item.id === 2);
const result2 = arr.find(item => item.id === 6);
console.log(result);    //{ id: 2, name: '李四', age: 21 }
console.log(result2);   //undefined

some

功能：对数组的每一项执行回调函数，查看是否有一个元素满足条件

返回值：有就返回true，否则返回false

用法：Array.some(function(item,[index],[array]){})

var arr = [1, 2, 3, 4, 5];
const result = arr.some(item => item > 3);
const result2 = arr.some(item => item > 5);
console.log(result);    //true
console.log(result2);    //false

every

功能：对数组的每一项执行回调函数，查看是否所有元素足条件

返回值：是返回true，否则返回false

用法：Array.every(function(item,[index],[array]){})

var arr = [1, 2, 3, 4, 5];
const result = arr.every(item => item > 0);
const result2 = arr.every(item => item > 3);
console.log(result);    //true
console.log(result2);    //false

flat

功能：将嵌套的数组“拉平”，变成一维数组，即将子数组的成员取出来，添加在原来的位置并返回一个新数组。不支持ie

返回值：拉平后的数组

用法：Array.flat([arg]);

参数：

• 整数：表示想要拉平的层数，默认为1。
• Infinity：不管有多少层嵌套，都转成一维数组

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

//如果数组有空位会自动跳过空位：
var arr = [1, 2, , , [3, [4, [5]]]];
console.log(arr.flat(Infinity));    //[1,2,3,4,5]

isArray

功能：判断是否是数组

返回值：布尔值

用法：Array.isArray()

var arr = [1, 2, 3]
var str = 'hello';
console.log(Array.isArray(arr));    //true
console.log(Array.isArray(str));    //false