前端数组的常用方法汇总

数组

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<arr.length 是一样的,只不过在数组过多的时候会影响性能。

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
  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值