这一篇就可以学会JavaScript Array 数组对象方法

JavaScript Array 对象

首先定义一个数组，打印数组以及数组原型方法如下

	let arr=["京","津","冀","鲁"];
	console.log(arr);
	console.log(arr.__proto__);

接下来，一个一个的介绍与使用

1.concat()

• 连接两个或更多的数组，并返回一个新的数组。
• 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

//语法:arrayObject.concat(arrayX,arrayX,......,arrayX)
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=["苏","闽","浙"];
console.log(arr2);//(3) ["苏", "闽", "浙"]

let arr3=arr1.concat(arr2);
console.log(arr3);//["京", "津", "冀", "鲁", "苏", "闽", "浙"]

let arr4=arr3.concat("晋","豫");
console.log(arr4);//(9) ["京", "津", "冀", "鲁", "苏", "闽", "浙", "晋", "豫"]

2.valueOf()

• 返回数组对象的原始值

//语法 arrayObject.valueOf()
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=arr1.valueOf();
console.log(arr2);// ["京", "津", "冀", "鲁"]

3.entries()

• entries() 遍历键值对

//语法 arr.entries() 
let arr=["京","津","冀","鲁"];
for (let [i,item] of arr.entries()){
    console.log(i,item)//entries()遍历下标以及内容 0 "京"  1 "津"  2 "冀"  3 "鲁"
}

4.keys()

• 遍历键名

//语法 arr.keys()
let arr=["京","津","冀","鲁"];
for(let i of arr.keys()){
    console.log(i)//keys()遍历下标 0 1 2 3
}

5. join()

• 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
• 返回一个字符串

//语法:arrayObject.join(separator)  
//separator参数可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let str1=arr1.join()
console.log(str1);//京,津,冀,鲁

let str2=arr1.join('-')
console.log(str2);//京-津-冀-鲁

6.indexOf()

• 正向查找数组是否包含某个元素,返回索引值，没有返回-1

//语法 arr.indexOf(value,startindex);
// 第一个参数为要查找的值 必填
// 第二个为查找的起始位置
// 返回值 true或false
let arr=["京","津","冀","鲁"];
let result= arr.indexOf("京");
console.log(result)//0
let result1= arr.indexOf("京",2);
console.log(result1)//-1

7.lastIndexOf()

• 逆向查找指定元素在数组中的第一个位置。[不改变原数组]
• 查找数组是否包含某个元素,返回索引值，没有返回-1
• 从右开始查找

//语法 arr.lastIndexOf(value,startindex);
// 第一个参数为要查找的值 必填
// 第二个为查找的起始位置
// 返回值 true或false
let arr=["京","津","冀","鲁","京"];
let result= arr.lastIndexOf("京");
console.log(result)//4
let result1= arr.lastIndexOf("京",-2);
console.log(result1)//-1

8.push()

• 向数组的末尾添加一个或更多元素，并返回新的长度。

//语法 arrayObject.push(newelement1,newelement2,....,newelementX)
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=arr1.push("苏");
console.log(arr2);//(5) ["京", "津", "冀", "鲁", "苏"]

9.pop()

• 删除并返回数组的最后一个元素。

//语法 arrayObject.pop()
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let value=arr1.pop();
console.log(value);//鲁

console.log(arr1);//(4) ["京", "津", "冀"]

10.shift()

• 删除并返回数组的第一个元素。

//语法 arrayObject.shift()
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=arr1.shift();
console.log(arr2);//京

11.unshift()

• 向数组的开头添加一个或更多元素，并返回新的长度。

//语法 arrayObject.unshift(newelement1,newelement2,....,newelementX)
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=arr1.unshift("苏");
console.log(arr2);//5
console.log(arr1);//(5) ["苏", "京", "津", "冀", "鲁"]

12.reverse()

• 颠倒数组中元素的顺序。

//语法 arrayObject.reverse()
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=arr1.reverse();
console.log(arr2);//(4) ["鲁", "冀", "津", "京"]

13.slice()

• 从某个已有的数组返回选定的元素。
• 返回形式:一个新的数组

//语法 arrayObject.slice(start,end) 
//start必需:规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
//end 可选:规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=arr1.slice(0,2);
console.log(arr2);//(2) ["京", "津"]

let arr3=arr1.slice(1);
console.log(arr3);//(3) ["津", "冀", "鲁"]

let arr4=arr1.slice(-3,-1);
console.log(arr4);//(2) ["津", "冀"]

14.splice()

• 删除元素，并向数组添加新元素。
• 该方法会改变原始数组。
• index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
• howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
• item1, …, itemX 可选。向数组添加的新项目。
• 返回删除的元素，是一个新的数组；

//语法 arrayObject.splice(index,howmany,item1,.....,itemX)
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=arr1.splice(2,0,"苏");
console.log(arr2);//[]
console.log(arr1);// ["京", "津", "苏", "冀", "鲁"]

let arr3=arr1.splice(2,1,"浙");
console.log(arr3);//["苏"]
console.log(arr1);// ["京", "津", "苏", "冀", "鲁"]

let arr4=arr1.splice(2,3,"闽");
console.log(arr4);//["浙", "冀", "鲁"]
console.log(arr1);//["京", "津", "闽"]

15.sort()

• 对数组的元素进行排序。
• 返回值：对数组的引用。请注意，数组在原数组上进行排序，不生成副本

//语法 arrayObject.sort(sortby)
//sortby 可选。规定排序顺序。必须是函数。
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=arr1.sort();
console.log(arr2);//(4) ["京", "津", "冀", "鲁"]

let arr3=["1","15","4","25"];
console.log(arr3);//(4) ["1", "15", "4", "25"]

let arr4=arr3.sort();
console.log(arr4);//(4) ["1", "15", "25", "4"]

function sortNumber(a,b)
{
    //若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
	//若 a 等于 b，则返回 0。
	//若 a 大于 b，则返回一个大于 0 的值。
    return a - b;
}
let arr5=arr3.sort(sortNumber);
console.log(arr5);//(4)  ["1", "4", "15", "25"]

16.toString()

• 把数组转换为字符串，并返回结果。
• 返回结果：arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

//语法 arrayObject.toString()
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=arr1.toString();
console.log(arr2);//京,津,冀,鲁

17.toLocaleString()

• 把数组转换为本地数组，并返回结果。

//语法 arrayObject.toLocaleString()
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]

let arr2=arr1.toLocaleString();
console.log(arr2);//京,津,冀,鲁

18.isArray()

• 判断变量是否是一个数组对象,返回值为false和true

// 语法 Array.isArray(arrayObject)
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]
console.log(Array.isArray(arr1));//true

let arr3={"p":"苏"};
console.log(Array.isArray(arr3));//false

19.toSource()

• 返回该对象的源代码。

//object.toSource()
//只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法。

遍历数组对象部分

1.forEach()

• 按升序依次遍历数组中的值和索引值

// 语法 arr.forEach(function(value, index, arr), this);
// value(必须): 当前遍历时的数组值。
// index(可选): 当前遍历时的索引值。
// arr(可选): 数组对象本身。
// this(可选): 执行回调函数时的。
let arr1=["京","津","冀","鲁"];
console.log(arr1);//(4) ["京", "津", "冀", "鲁"]
arr1.forEach((value,index,arr)=>{
    console.log("value:"+value,"index:"+index);//返回值和索引值
    console.log(arr);//返回当前数组
})

2.some()

• 检测数组中是否存在满足条件的元素，只要有一个元素满足条件就返回true

//语法 arr.some(function(value, index, arr), this);
//参数值同froEach一样
//返回值：布尔类型 ture / false
let arr=[2,4,6,8,10];

let result=arr.some((value,index,arr)=>{
    return value>2;
});
console.log(result);//true

let result1=arr.some((value,index,arr)=>{
    return value<2;
});
console.log(result1);//false

3.every()

• 检测数组中的元素是否全部满足条件,全部满足条件才返回true

//语法 arr.every(function(value, index, arr), this);
//参数值同froEach一样
//返回值：布尔类型 ture / false
let arr=[2,4,6,8,10];

let result=arr.every((value,index,arr)=>{
    return value>2;
});
console.log(result);//false

let result1=arr.every((value,index,arr)=>{
    return value<12;
});
console.log(result1);//true

4.map()

• 对数组中的每一个元素都进行处理，返回新的数组

//语法 arr.map(function(value, index, arr), this);
//参数值同froEach一样
//返回值：新数组
let arr=[2,4,6,8,10];
let result=arr.map((value,index,arr)=>{
    return value>2;
});
console.log(result);//[false, true, true, true, true]
let result1=arr.map((value,index,arr)=>{
    return value<12;
});
console.log(result1);// [true, true, true, true, true]
let result2=arr.map((value,index,arr)=>{
    return value-1;
});
console.log(result2);//  [1, 3, 5, 7, 9]

5.filter()

• 过滤原数组，返回新数组

//语法 arr.filter(function(value, index, arr), this);
//参数值同froEach一样
//返回值：新数组
let arr=[2,4,6,8,10];
let result=arr.filter((value,index,arr)=>{
    return value>2;
});
console.log(result);//[4, 6, 8, 10]
let result1=arr.filter((value,index,arr)=>{
    return value<12;
});
console.log(result1);// [2, 4, 6, 8, 10]

6.reduce()

• 数组的累加器(从前往后计算)，合并成为一个值

//语法 arr.reduce((total, value, index, arr), init)
//参数 total(必须)：初始值，之后为上一次回调的返回值。
//value(必须): 数组元素的值。
//index(可选): 索引值。
//arr(可选): 数组对象。
//init(可选): 初始值。
//返回值 ：累加后的值在这里插入代码片
let arr=[2,4,6,8,10];
let result=arr.reduce((total, value, index, arr)=>{
     console.log(total);//0 6 12 20 28 30
    return total+value;
},0)
console.log(result);//30

7.reduceRight()

• 数组的累加器(从后往前计算)，合并成为一个值

let arr=[2,4,6,8,10];
let result=arr.reduceRight((total, value, index, arr)=>{
    console.log(total);//0 10 18 24 28 30
    return total+value;
},0)
console.log(result);//30

ES6部分

1.fill()

• 数组的填充 [改变原数组、ES6]

//语法：arr.fill(value, start, end)
//value  必需。填充的值。
//start  可选。开始填充位置。
//end    可选。停止填充位置 (默认为 array.length)
let arr=["京","津","冀","鲁","京"];
let result= arr.fill("京");
console.log(result)//(5) ["京", "京", "京", "京", "京"]

let arr1=["京","津","冀","鲁","京"];
let result1= arr1.fill("京",2);
console.log(result1)//(5) ["京", "津", "京", "京", "京"]

let arr2=["京","津","冀","鲁","京"];
let result2= arr2.fill("冀",1,3);
console.log(result2)//(5) ["京", "冀", "冀", "鲁", "京"]

2.find()

• 根据条件找到数组成员 [ES6]
• 返回满足条件的第一个值

//语法arr.find(function(value, index, arr), this);
//参数值同froEach一样
//返回值： find()返回第一个符合条件的数组成员，若不存在返回undefined。 findIndex()返回符合条件的数组成员的索引。
let arr=[2,4,6,8,10];
let result=arr.find((value,index,arr)=>{
    return value>2;
});
console.log(result);//4 返回满足条件的第一个值
let result1=arr.find((value,index,arr)=>{
    return value<12;
});
console.log(result1);//2

3.findIndex()

• 主要用于在数组中查找元素，并把元素的位置返回来
• 返回满足条件的第一个值的索引值

//语法arr.find(function(value, index, arr), this);
//参数值同froEach一样
//返回值： find()返回第一个符合条件的数组成员，若不存在返回undefined。 findIndex()返回符合条件的数组成员的索引。let arr=[2,4,6,8,10];
let result=arr.findIndex((value,index,arr)=>{
    return value>2;
});
console.log(result);//1 返回满足条件的第一个值的索引值
let result1=arr.findIndex((value,index,arr)=>{
    return value<12;
});
console.log(result1);//0

4.includes()

• 查找数组是否包含某个元素。[不改变原数组]

//语法 arr.includes(value,startindex);
// 第一个参数为要查找的值 必填
// 第二个为查找的起始位置
// 返回值 true或false
let arr=["京","津","冀","鲁"];
let result= arr.includes("京");
console.log(result)//true
let result1= arr.includes("京",2);
console.log(result1)//false

5.copyWithin()

• 数组的指定位置复制[改变原数组、ES6]

//语法：arr.copyWithin(index, start, end)
//index：复制到指定目标索引位置。
//start：元素复制的起始位置 (可选)
//end：停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。(可选)
let arr=["京","津","冀","鲁"];
let result= arr.copyWithin(1);
console.log(result)//["京", "京", "津", "冀"]
console.log(arr);//["京", "京", "津", "冀"]

let arr1=["京","津","冀","鲁"];
let result1= arr1.copyWithin(2,0,2);
console.log(result1)// ["京", "津", "京", "津"]

let arr2=["京","津","冀","鲁"];
let result2= arr2.copyWithin(0,0,3);
console.log(result2)//["京", "津", "冀", "鲁"]

文档下载地址：https://download.youkuaiyun.com/download/firstlt0217/19024687