前端数组的常用方法汇总

数组

1、创建数组

创建数组有两种方式：

1、数组的字面量

var = arr['诸葛亮','张飞','刘备','关羽']
console.log(arr);
//调用数组直接调用变量名称
//数组内部用逗号隔开

2、通过关键字new来创建

var arr=new Arry('诸葛亮','张飞','刘备','关羽')

两种变量的调用方式完全相同，只是创建方式不同。

2、数组的访问

1、直接读取数组的下标；

数组的下标是从零开始的，等同于Length-1;

var arr=['诸葛亮','张飞','刘备','关羽'];
console.log(arr[0]);//此时打印的是 '诸葛亮';
console.log(arr[1]);//此时打印的是 '张飞'
console.log(arr[2);//此时打印的是 '刘备'
console.log(arr[3]);//此时打印的是 '关羽'
console.log(arr[4]);//此时打印的结果为undefined,因为下标4上面没有值，所以默认出现undefined
console.log(arr.length)//打印结果为4。

2、利用for循环去读取数组，也叫做遍历

var arr=['诸葛亮','张飞','刘备','关羽']; 
var newarr=arr.length
for(i=0;i<newarr;i++){
    arr[i];
}
// 这里不声明一个新的变量直接用i

3、通过for Each 来读取数组

var arr=['诸葛亮','张飞','刘备','关羽'];
arr.forEach(function(value,index)// 两个参数，第一个参数是数组值，第二个是下标
{
    console.log(value,index)
            })
// value 打印的是数组中的所有值，一个value直接把所有值全部打出，index是值的对应下标。

4、通过for in 来读取数组

//遍历 for in 增强型for循环 取数组的下标,通过数组的下标直接遍历数组的值
var arr=['诸葛亮','张飞','刘备','关羽'];
 	for (var i in arr){
  console.log(arr[i]);
    }

5、通过for of来读取数组

//遍历for of 是最强的读取，直接取数组的下标就可以读取数组的值
var arr=['诸葛亮','张飞','刘备','关羽'];
 for (var i of arr){
  console.log(i);
    }
//它与for in 的区别在于 for in 的写法是需要通过数组arr[i]读取数组的值，而 for of 只需要读取i就可以获取到值。

6、数组的slice读取

//.slice(start,end)读取数组里面的数
//start 是开始读取下标
//end 是结束读取下标，该下标不会被包含
var arr=['诸葛亮','张飞','刘备','关羽'];
var newarr=arr.slice(1,3);
console.log(newarr);
//此时打印的结果为 '张飞', '刘备',从下标1张飞的位置开始读取，读取到3关羽，但不包含3，所以读取的结果为下标1，2
//读取的下标可为负数，如果是负数的话就是从后往前查
var arr=['诸葛亮','张飞','刘备','关羽'];
var newarr=arr.slice(-1,-3);
console.log(newarr);
//此时打印的结果为 '关羽', '刘备'。

slice读取只能从小到大，不能从大到小。

3、数组length长度属性

length打印的是数组的长度，有几个值长度就是几，数组的下标是从0开始的，而数组的长度是从1开始的，所以数组的下标为length-1

var arr=['诸葛亮','张飞','刘备','关羽'];
arr.length=5;//注意arr的长度为4，这里赋值的长度为5
console.log(arr[5]);//此时打印的数组结果为undefined长度比实际多的都值都为undefined

若是赋值的长度大于数组的实际长度，则会自动赋值empty到多余的长度。

若是赋值的长度小于数组的实际长度，则会自动删除掉多余的长度。

4、数组的join方法

join语法：

.join(‘’)

数组.join('括号里面是值与值之间的连接符号，变为字符串后也会成为一个下标,不写默认为逗号，加引号，直接连接)

作用是把数组种的所有值拼接成字符串，但不改变原数组。

var arr=['诸葛亮','张飞','刘备','关羽'];
var str=arr.join('=');
console.log(str);
//此时打印的结果应为，诸葛亮=张飞=刘备=关羽。

5、数组的sort排序

//sort语法：
var arr=[1,2,6,4,5,3.]
arr.sort(function(a,b){
return a-b;
})
console.log(arr);
// 此时打印的数组结果为1.2.3.4.5.6 从小到大排序
var arr=[1,2,6,4,5,3.]
.sort(function(a,b){
return b-a;
})
console.log(arr);
//此时打印的数组结果为6，5，4，3，2，1

在sort排序方法中，a代表数组中的第二个数，b代表数组中的第一个数

a-b就要求数组中的第二个数要大于第一个数，也就是从小到大，所以sort就会把数组从小到大排序。

同理，b-a就要求数组中的第一个数大于第二个数，也就是从大到小，所以sort就会把数组从大到小进行排序。

6、数组的添加与删除

数组的添加，在数组前面或后面添加数据

//数组名称.unshift()在数组前面添加数据
var arr=['诸葛亮','张飞','刘备','关羽'，'赵云']
arr.unshift('黄忠');
console.log[arr]
//此时打印的结果为'黄忠'，'诸葛亮','张飞','刘备','关羽'，'赵云'

//数组名称.push() 在数组的后面面添加数据
var arr=['诸葛亮','张飞','刘备','关羽'];
arr.push('赵云');
console.log(arr);
//此时打印的结果为 '诸葛亮','张飞','刘备','关羽'，'赵云'

数组的删除，在数组前面或后面删除数据

//数组名称.shift()在数组前面删除数据,每执行一次删除一个代码
var arr=['诸葛亮','张飞','刘备','关羽'，'赵云']
arr.shift();
console.log(arr);
//此时打印的结果为 '张飞','刘备','关羽'，'赵云'，删除了前面第一个诸葛亮。

//数组名称.pop() 在数组后面删除数据,每执行一次删除一个代码
var arr=['诸葛亮','张飞','刘备','关羽'，'赵云']
arr.pop();
console.log(arr);
//此时打印的结果为 '诸葛亮','张飞','刘备','关羽',删除了赵云。

7、数组的concat合并

将两个数组合并成一个新的数组

//数组名称.concat()
var arr1=[1,2,3,4,5];
var arr2=[6,7,8,9,10];
var arr3=arr1.concat(arr2);
console.log(arr3);
//此时打印的结果为12345678910
//谁在括号里面谁接到后面。

扩展运算符，也属于数组的合并，可以理解为脱衣服。

var arr1=[1,2,3,4,5];
var arr2=[6,7,8,9,10];
var arr3=[...arr1,...arr2]
console.log(arr3);

8、数组的splice剪切及添加

剪切并添加数组内部的数据

//.splice(index,num,item)
//index,读取数组的下标并开始删除
var arr=['诸葛亮','张飞','刘备','关羽'，'赵云']
arr.splice(1);//此时.splice内部只有一个参数，默认为index，值为1就是从下标1的位置开始删除所有值。
//num,删除几个值
arr.splice(0,2)//,此时，splice内部有两个参数，为index和num，表示为从下标0开始删除两个值
//item 添加的值，添加的位置为第一个被删除的下标
arr.splice(1,3,'黄忠')
console.log(arr);//此时，打印的值为 '诸葛亮'，'黄忠'，'赵云';从下标1的位置开始删除三个值，把 '黄忠'添加在了下标1的位置

9、判断数组中重复出现元素的数量

var arr=[1,,2,1,3,1,4,5]//声明一个有重复元素的数组
var length=arr.length //声明一个变量读取数组的长度
var index=0;//声明一个接受重复出现元素数量的变量
for(i=0;i<length-1;i++){// 通过数组循环读取数组的每个下标
    if(arr[i]==1)
        index++;//如果元素重复出现一次，计数器加一
}
console.log(index);

10、数组的去重与排序

首先，需要明白一下index Of用法：

//.indexOf() 读取数组里面的元素，如果读取到就返回该元素的下标，如果没找到的话就是-1
var arr=[1,2,3,4,5];
var newarr=arr.indexOf(5);
console.log(newarr);//此时打印的值为下标4
var newarr2=arr.indexOf(6)
console.log(newarr2);//此时打印的值为-1。因为arr这个数组中没有6这个值。

明白了index Of的用法后再来看数组的去重；

var arr=[1,3,3,2,5,4,5,6,2,7,8]//声明一个有重复值的数组
var temp=[];//首先声明一个空数组，用来接受值
for(i=0;i<arr.length;i++){//循环通过下标读取数组的值
  if(temp.indexOf(arr[i])==-1){
      temp.unshift(arr[i]);
  }//通过if判断来添加值到temp数组中，如果==-1那就     证明这个值在temp数组中还没有出现，添加。
   //如果不等于-1的话则说明值重复。
}
console.log(temp);//此时打印的数组就是一个基于arr数组的没有重复值的新数组。
temp.sort(function(a,b){
    return a-b;
})
console.log(temp);//通过sort方法将temp数组从小到大排序。

11、数组累加器

//.reduce() 数组累加器，能把数组内的所有数进行相加
var arr=[1,2,3,4,5,6]
 var res= arr.reduce(function(a,b){
    return a+b;
},0)//这个零的意思为初始值如果不需要在数组前相加任何值的话，这个0也可以不写。
console.log(res);

12、数组翻转

.reverse()

var arr=[1,2,3,4,5]
var newarr=arr.reverse()
console.log(newarr)// 此时打印的结果为5,4,3,2,1

13、数组的加工

.map()根据括号里面的规则对数组进行遍历加工生成新数组，但不改变原数组

let arr=[1,2,3,4,5]
let newArr=arr.map((a)=>a*10)
console.log(newArr)
//此时返回的结果为 newArr[10,20,30,40,50]

14、数组的过滤

.filter ()根据括号内的规则对数组进行判断，符合判断条件的会生成一个新数组，不影响原数组

let arr=[1,2,3,4,5,6];
let newArr=arr.filter((a)=>a>2)
console.log(newArr)
// 此时输出的结果为3,4,5,6

15、find对象的查找

.find () 查找对象数组中是否有符合要求的值，找到返回对应对象，找不到返回undefined

.findIndex()查找对象数组中是否有符合要求的值，找到返回对应下标，找不到返回-1

let obj={
    id:1,
    name:'张三'
}，
{
    id:2,
    name:'李四'
}，
{
    id:3,
    name:'王五'
}

let newobj=obj.find((a)=>a.id==1)
console.log(newobj)

16、some和every

.some()判断数组是否满足括号里面的判断条件，some是只有一个满足就会返回true，every是所有的值都需要满足，否则返回false

let arr=[1,2,3,4,5]
let res=arr.some((a)=>a>4)
console.log(res)
//此时返回的是true
let arr=[1,2,3,4,5]
let res=arr.every((a)=>a>4)
console.log(res)
//此时返回的是false