JavaScript-Array对象

属性

length

属性提供了向数组追加新元素的简易方法

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

方法

Array.from()

用于将两类对象转为真正的数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5 的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6 的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.of()

将参数中所有值作为元素形成数组

console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]

参数值可为不同类型

console.log(Array.of(1, '2', true)); // [1, '2', true]

参数为空时返回空数组

console.log(Array.of()); // []

join()

将所有数组元素结合为一个字符串

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join(','));//Banana,Orange,Apple,Mango

pop()

从数组中删除最后一个元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.pop());//Mango

push()

在数组结尾处向数组添加一个新的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
console.log(fruits);//[ 'Banana', 'Orange', 'Apple', 'Mango', 'Kiwi' ]

shift()

删除首个数组元素，并把所有其他元素“位移”到更低的索引

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.shift());//Banana

unshift()

（在开头）向数组添加新元素，并“反向位移”旧元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

返回新数组的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5

更改元素

通过使用它们的索引号来访问数组元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 把 fruits 的第一个元素改为 "Kiwi"

splice()

可用于向数组添加新项

第一个参数（2）定义了应添加新元素的位置（拼接）

第二个参数（0）定义应删除多少元素

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits)//[ 'Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango' ]

使用 splice() 来删除元素

在数组中不留“空洞”的情况下移除元素

第一个参数（0）定义新元素应该被**添加（接入）**的位置

第二个参数（1）定义应该删除多个元素

其余参数被省略。没有新元素将被添加

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // 删除 fruits 中的第一个元素
console.log(fruits)//[ 'Orange', 'Apple', 'Mango' ]

concat()

通过合并（连接）现有数组来创建一个新数组

不会更改现有数组，它总是返回一个新数组

//合并两个数组
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
console.log(myChildren)//[ 'Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus' ]

使用任意数量的数组参数

//合并三个数组
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起
console.log(myChildren)//['Cecilie', 'Lone','Emil','Tobias','Linus','Robin','Morgan']

也可以将值作为参数

//将数组与值合并
var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 

裁剪数组

slice()

数组的某个片段切出新数组

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
console.log(citrus)//[ 'Orange', 'Lemon', 'Apple', 'Mango' ]

可接受两个参数，比如 (1, 3)

该方法会从开始参数选取元素，直到结束参数（不包括）为止

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
console.log(citrus)//[ 'Orange', 'Lemon' ]

如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分

sort()

默认排序顺序为按字母升序

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits)//[ 'Apple', 'Banana', 'Mango', 'Orange' ]

reverse()

颠倒数组中元素的顺序

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits)//[ 'Mango', 'Apple', 'Orange', 'Banana' ]

查看数组中是否包含某个值

let arr = [1,2,3,4]
console.log(arr.includes(1))    //true
console.log(arr.includes(5))    //false
// NaN 的包含判断
[1, NaN, 3].includes(NaN); // true

indexOf() & lastIndexOf()

开头或者结尾开始查找 返回对应下表，没找到返回-1 indexOf（item，start）

const arr6 = [1,2,3,4,5,6]
console.log(arr6.indexOf(6,0))  //2
console.log(arr6.indexOf(3,3))  //-1
console.log(arr6.lastIndexOf(4,0))  //-1
console.log(arr6.lastIndexOf(4,3)) //3

fill()

将一定范围索引的数组元素内容填充为单个指定的值

let arr = Array.of(1, 2, 3, 4);
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]

copyWithin()

将一定范围索引的数组元素修改为此数组另一指定范围索引的元素

// 参数1：被修改的起始索引
// 参数2：被用来覆盖的数据的起始索引
// 参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾
console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4]
 
// 参数1为负数表示倒数
console.log([1, 2, 3, 4].copyWithin(-2, 0)); // [1, 2, 1, 2]
 
console.log([1, 2, ,4].copyWithin(0, 2, 4)); // [, 4, , 4]

entries()

遍历键值对

for(let [key, value] of ['a', 'b'].entries()){
    console.log(key, value);
}
// 0 "a"
// 1 "b"
 
// 不使用 for... of 循环
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]
 
// 数组含空位
console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]

keys()

遍历键名

for(let key of ['a', 'b'].keys()){
    console.log(key);
}
// 0
// 1
 
// 数组含空位
console.log([...[,'a'].keys()]); // [0, 1]

values()

遍历键值

for(let value of ['a', 'b'].values()){
    console.log(value);
}
// "a"
// "b"
 
// 数组含空位
console.log([...[,'a'].values()]); // [undefined, "a"]

遍历方法

forEach()

数组方法，不改变原数组，没有返回值

1.forEach0方法用于调用数组的每个元素，并将元素传递给回调函数。

2.forEach()有三个参数，第一个是遍历的数组内容，第二个是对应的数组索引，第三个是数组本身;

var arr = ['a','b','c']
arr.forEach(function(item,index,self){
    console.log('item',item)
    console.log('index',index)
    console.log('self',self)
})
//item a
//index 0
//self [ 'a', 'b', 'c' ]

//item b
//index 1
//self [ 'a', 'b', 'c' ]

//item c
//index 2
//self [ 'a', 'b', 'c' ]

map()

数组方法，不改变原数组，有返回值，可链式调用

映射，处理数组中的值并返回一个新数组

const arr7 = [1,2,3,4,5,6]
const arr8 = arr7.map(item=>{
    return item*10
})
console.log(arr8)   // [10, 20, 30, 40, 50, 60]

filter()

数组方法，过滤数组，返回包含符合条件的元素的数组，可链式调用

过滤，操作数组选出所需要的值

const arr7 = [1,2,3,4,5,6]
const arr9 = arr7.filter(item=>item%2)
console.log(arr9)   //[1, 3, 5]

some()&every()

数组中某一项满足条件就返回true；数组中所有项均满足条件返回true

const arr7 = [1,2,3,4,5,6]
// some
arrsome1 = arr7.some(item=>item>1)
arrsome2 = arr7.some(item=>item>7)
console.log(arrsome1)   //true
console.log(arrsome2)   //false

// every
arrevery1 = arr7.every(item=>item>0)
arrevery2 = arr7.every(item=>item>2)
console.log(arrevery1)   //true
console.log(arrevery2)   //false    存在数不大于2

find() & findIndex()

find（item,index) 返回第一个符合要求的值，没有符合值返回-1

findIndex(item,index) 返回第一个满足条件的值的索引值 没有返回-1

// find
const arr6 = [1,2,3,4,5,6]
const findarr1 = arr6.find((item,index)=>{
    return item>3
})
const findarr2 = arr6.find((item,index)=>{
    return item>7
})
console.log(findarr1)   //4
console.log(findarr2)   //undefined

// findIndex
const findarr3 = arr6.findIndex((item,index)=>{
    return item>3
})
const findarr4 = arr6.findIndex((item,index)=>{
    return item>6
})
console.log(findarr3)   //3
console.log(findarr4)   //-1

reduce() 和 reduceRight()

数组方法，reduce()对数组正序操作；reduceRight()对数组逆序操作