Array 对象

Array 对象用于在变量中存储多个值:
var cars = ["Saab", "Volvo", "BMW"];
第一个数组元素的索引值为 0，第二个索引值为 1，以此类推。

数组属性

Array 对象方法

简单使用

数组属性

Array.constructor

• 返回常见数组对象的函数原型

在 JavaScript 中, constructor 属性返回对象的构造函数。
返回值是函数的引用，不是函数名：
如:

// constructor
let arr = [1,2,3,4,5]
arr.constructor;    // Array() { [native code] }

let num = 1;
num.constructor;  // Number() { [native code] }

let str = 'str';
str.constructor;  // String() { [native code] }

Array.length

• 设置或返回数组元素的个数。

// 最简单的用法为获取数组的长度;
let arr = [1,2,3,4]
arr.length = 4;

// 也可以创建数组时设置数组的长度;
let arr = new Array();
arr.length = 5; //  [empty × 5]  即设置了长度为5的空数组;
// 这时我们可以使用fill()方法,对数组进行填充;
arr.fill(null)   // [null, null, null, null, null]

prototype

• 允许你向数组对象添加属性或方法。

Array数组原型链,我们可以使用数组方法其功不可没,同时我们也可以在其上面添加方法,最后通过Array来使用;

// 我们需要对数组中小于5的进行排除,但是用到的地方比较多,我们可以进行函数进行使用,也可以写在Array的原型链上;
// 其次在箭头函数和普通函数中要注意this指向;
// es6
Array.prototype.filterNumber = () => {
    console.log(this)     // 引其箭头函数没有this,所以和外层this指向相同,即指向window
}

// es5
Array.prototype.filterNumber = function() {
  console.log(this)  // 即谁调用即其本身    [].filterNumber() // []
}

MDN 箭头函数this指向说明: 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this;

数组添加删除

unshift shift push pop

• 头部添加,头部删除,尾部添加,尾部删除

let arr = [1, 2, 3, 4];
arr.unshift(0); // [0, 1, 2, 3, 4]
arr.shift();       // [1, 2, 3, 4];
arr.push(5);    // [1, 2, 3, 4, 5];
arr.pop();        // [1, 2, 3, 4];

splice(index, howmany, item...itemN)

• 从数组中添加或删除元素。
• 参数说明
  -- index: 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
  -- howmany: 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
  -- item...itemN: 可选。要添加到数组的新元素;

let arr = [1, 2, 3, 4, 5];
// 实现向首位添加删除
arr.splice(0, 0, 0);  // [0, 1, 2, 3, 4, 5];
arr.splice(0,1);       // [1, 2, 3, 4, 5];
// 实现向尾部添加删除
arr.splice(arr.length, 0, 6);  //  [1, 2, 3, 4, 5, 6];
arr.splice(arr.length - 1, 1); // [1, 2, 3, 4, 5];
// 替换
arr.splice(0, 1, 99);    // [99, 2, 3, 4, 5];

数组合并

...

• ... es6展开操作符

let arrA = [1,2,3]
let arrB = [4,5,6]
let arr = [...arrA,...arrB]    // [1,2,3,4,5,6]

concat()

• 连接两个或更多的数组，并返回结果。此时应注意合并顺序, concat(Arr), Arr会放置到数组后面;

let arrA = [1,2,3]
let arrB = [4,5,6]
let arr = arrA.concat(arrB)    // [1, 2 ,3 ,4 ,5 ,6]
let arrs = arrB.concat(arrA)  // [4, 5, 6, 1, 2, 3]

数组内容过滤及判断等

every()

• 检测数值元素的每个元素是否都符合条件。如果符合则返回true, 不符则返回false

let arr = [10, 9, 4, 20]
arr.every(item => item > 20)   // false;
arr.every(item => item > 1)     // true;

// 检测数组内对象的属性值是否都为true;
let arr = {a: true, b: true, c: true}
// 这里使用Object.entries()  将对象拆分成数组, 数组为[[属性名: 属性值], ...] 等形式
Object.entries(arr).every(item => item[1])   // 如果检测到数组下标为1的内容全部为true时返回true, 否则返回false

filter()

• 检测数值元素，并返回符合条件所有元素的数组。

let arr = [1,3,5,7,10];
let ar = arr.filter(item => item > 5);
console.log(ar)   // [7, 10]

find()

• 返回符合传入测试（函数）条件的数组元素, 返回符合条件的第一条数据

let arr = [1, 2, 3, 4]
arr.find(item => item > 2)   // 3

findIndex()

• 返回符合传入测试（函数）条件的数组元素下标

let arr = [1, 2, 3, 4]
arr.find(item => item > 2)   // 1 下标

includes()

• 判断一个数组是否包含一个指定的值。返回值布尔值, 包含返回true, 反之返回false;

let arr = [1, 2, 3, 4]
arr.includes(2)  // true;
arr.includes(5)  // false;
//   字符串也有includes()方法

indexOf()

• 搜索数组中的元素，并返回它所在的位置。

// 会走循环,检测数组中想要的内容,返回其下标,如果没有则返回-1;
let arr = [1, 2, 3, 4]
arr.indexOf(1)   // 0;
arr.indexOf(5)   // -1;

lastIndexOf()

• 搜索数组中的元素，并返回它最后出现的位置。

let arr = [1, 2, 3, 1]
arr.lastIndexOf(arr)    // 3

some()

• 检测数组元素中是否有元素符合指定条件。
• some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。some() 方法会依次执行数组的每个元素：
• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
  如果没有满足条件的元素，则返回false。
  注意： some() 不会对空数组进行检测。
  注意： some() 不会改变原始数组。

  let arr = [1, 2, 3, 4, 5];
  let a = arr.some(item => item > 3)   // true
  let a = arr.some(item => item < 0)   // false

isArray()

• 判断对象是否为数组。

let arr = [1,2,3]
let obj = {a: 1, b: 1}
Array.isArray(arr);    // true;
Array.isArray(obj);    // false;

循环

map

• 通过指定函数处理数组的每个元素，并返回处理后的数组。
• 可以接受三个字段(item, index, arr)即当前内容, 当前下标及数组

let arr = [1,2,3,4,5]
let ar = arr.map((item,index,arr) => {
     console.log(item, index, arr)     
})

let ars = arr.map((item) => {
    if (item >= 3) {
        return item;
    }
})
console.log(ars)   // 处理每个参数,此时有个判断如果大于等于3时才返回item即: 结果为[undefined, undefined, 3, 4, 5]

forEach()

• 数组每个元素都执行一次回调函数。

let arr = [1, 2, 3, 4, 5];
let ar = [];
arr.forEach(item => {if (item > 2) {ar.push(item)}});   // [3, 4, 5]

其他

copyWithin()

• 从数组的指定位置拷贝元素到数组的另一个指定位置中
• array.copyWithin(target, start, end)
  -- target: 必需。复制到指定目标索引位置。
  -- start: 可选。元素复制的起始位置。
  -- 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

let arr = ['a', 'b', 'c' , 1, 2, 3]
arr.copyWithin(0 ,3)    // 拷贝的元素从下标0开始渲染, 拷贝的内容为下标3开始到length-1为止 即: arr = [1, 2, 3, 1, 2, 3];
arr = ['a', 'b', 'c' , 1, 2, 3];
arr.copyWithin(0, 3, 5)   // 拷贝的元素从下标0开始渲染, 拷贝的长度为2位, 拷贝从下标3开始, 到5结束, 即拷贝的内容为 1,2; 即输出为: arr = [1,2,'c',1,2,3];

fill()

• 使用一个固定值来填充数组。

// 固定值,即填充的数组内容为相同的;
let arr = new Array();
arr.length = 3;    // 
arr.fill(1)  // [1,1,1]

from()

• 通过给定的对象中创建一个数组。

var setObj = new Set(["a", "b", "c"]);
var objArr = Array.from(setObj);
objArr[1] == "b";  // true

join()

• 把数组的所有元素放入一个字符串。

let arr = [1,2,3,4]
arr.join(',')  //   "1,2,3,4"

keys()

• 返回数组的可迭代对象，包含原始数组的键(key)。

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}
// 0
// 1
// 2

reduce()

• 将数组元素计算为一个值（从左到右）。

var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}

numbers.reduce(getSum);        // 125

reduceRight()

• 将数组元素计算为一个值（从右到左）。

reverse()

• 反转数组的元素顺序。

let arr = [1,2,3,4]
arr.reverse()    // [4, 3, 2, 1]

sort()

• 对数组的元素进行排序。

let arr = [2,1,4,3]
arr.sort()    // [1, 2, 3, 4]

toString()

• 把数组转换为字符串，并返回结果。

let arr = [1,2,3,4]
arr.toString()   //   "1,2,3,4"