首页 > 其他分享 >数组常用方法(转)

数组常用方法(转)

时间:2023-06-27 17:47:27浏览次数:34  
标签:常用 console log arr 李四 let 数组 方法

常用使用

原文:https://www.jianshu.com/p/ba4f4637eaad

1. join()

join(’参数‘)把数组的元素以传入的参数为分割符,转换成字符串。

let arr = [1,2,3,4,5];
let str = arr.join(',');
console.log(str) // -> '1,2,3,4,5';

2.push()和pop()

push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。

pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。

let arr = ['张三','李四','王五'];
let count = arr.push('马六');
console.log(arr) // -> ['张三','李四','王五','马六']
console.log(count) // -> 4

let item = arr.pop();
console.log(item) // -> 马六;

3.shift() 和 unshift()

shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。

unshift:将参数添加到原数组开头,并返回数组的长度 。

let arr = ['张三','李四','王五'];
let item = arr.shift();
console.log(arr) // -> ['李四','王五']
console.log(item); // -> 张三

let count = arr.unshift('马六');

console.log(arr) // -> ['马六','李四','王五']
console.log(count) // -> 3

4.reverse()

将数组的数据进行反转,并且返回反转后的数组,会改变原数组

let arr = [1,2,3,4,5];
let arr1 = arr.reverse();
console.log(arr1) // -> [5,4,3,2,1]
console.log(arr) // -> [5,4,3,2,1]

5.sort()

对数组内的数据进行排序(默认为升序),并且返回排过序的新数组,会改变原来的数组

let arr = [12,2,43,5,2,5];
console.log(arr.sort()) // -> [12, 2, 2, 43, 5, 5]
// 注意:通过上面的案例,你会发现 打印的数组和原数组比较还是有变化的 [12,2,43,5,2,5] -> [12, 2, 2, 43, 5, 5];但是有没有达到我们想要的结果,这是为什么呢?
// 因为排序是针对字符的排序,先使用数组的toString()方法转为字符串,再逐位比较,3是大于12的,因为首位3>1,不要与Number型的数据排序混淆。

5.1那如果需要数值排序怎么办呢?

// 如果需要数值排序,sort(callback) 需要传入一个回调涵数,该函数应该具有两个参数,比较这两个参数,然后返回一个用于说明这两个值的相对顺序的数字(a-b);
例如:
let arr = [12,2,43,5,2,5];
console.log(arr.sort((a,b)=>a-b)) // -> [2, 2, 5, 5, 12, 43]

6.slice();

截取指定位置的数组,并且返回截取的数组,不会改变原数组

// 注意:slice(startIndex, endIndex)可以有两个参数,startIndex为必选,表示从第几位开始;endIndex为可选,表示到第几位结束(不包含endIndex位),省略表示到最后一位;startIndex和endIndex都可以为负数,负数时表示从最后一位开始算起,如-1表示最后一位。
let arr =  ['张三','李四','王五','马六'];
console.log(arr.slice(1,3)); // -> ['李四', '王五']
console.log(arr) // -> ['张三','李四','王五','马六']; 原数组是没有改变的。

7.splice();

向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素。

// 注意:splice(start,num,val1,val2,...); 所有参数全部可选。和 slice 相比 splice 是会改变原数组的。
// start 是开始位置,可以为负数,-1就代表从最后一位开始,num代表要删除或者替换的长度,不能为负数。
let arr = ['张三','李四','王五','马六'];
console.log(arr.splice(2,1)) // -> ['王五']
console.log(arr) // -> ['张三','李四','马六']

let arr = ['张三','李四','王五','马六'];
console.log(arr.splice(2,1,'七郎')) // -> ['王五'] 
console.log(arr) // -> ['张三', '李四', '七郎', '马六']

8.toString();

将数组转换成字符串,类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用,如果手动调用,就是直接转为字符串。不会改变原数组

let arr = [1,2,3,4,5,6];
console.log(arr.toString()) // -> '1,2,3,4,5,6'
// 注意:没有参数。

9.indexOf();

根据指定的数据,从左向右,查询在数组中出现的位置,如果不存在指定的数据,返回-1,找到了指定的数据返回该数据的索引

// 注意:indexOf(value, start);value为要查询的数据;start为可选,表示开始查询的位置,当start为负数时,从数组的尾部向前数;如果查询不到value的存在,则方法返回-1

let arr = ['张三','李四','王五','马六'];
console.log(arr.indexOf('李四')) // -> 1
console.log(arr.indexOf('李四',2)) // -> -1

10.forEach()

ES5新增的方法,用来遍历数组,没有返回值,

// 注意:forEach(callback);callback默认有三个参数,分别为value(遍历到的数组的数据),index(对应的索引),self(数组自身)。
let arr = ['张三','李四','王五','马六']
let a = arr.forEach((item,index,self)=>{
    console.log(value + "--" + index + "--" + (arr === self));
})
// 打印结果为:
// 张三--0--true
// 李四--1--true
// 王五--2--true
// 马六--3--true
console.log(a);  // -> undefined---forEach没有返回值
//该方法为遍历方法,不会修改原数组

11.map();

1.同forEach功能;
2.map的回调函数会将执行结果返回,最后map将所有回调函数的返回值组成新数组返回。

//注意:map(callback);callback默认有三个参数,分别为value,index,self。跟上面的forEach()的参数一样
let arr = ['张三','李四','王五','马六'];
let arr1 = arr.map(item => {
    return '你好:'+item
})
console.log(arr1) // -> ['你好:张三', '你好:李四', '你好:王五', '你好:马六']

12.filter();

1.同forEach功能;2.filter的回调函数需要返回布尔值,当为true时,将本次数组的数据返回给filter,最后filter将所有回调函数的返回值组成新数组返回(此功能可理解为“过滤”)。

// 注意:filter(callback);callback默认有三个参数,分别为value,index,self。
let arr = [1,2,3,4,5,6];
let arr1 = arr.filter((value,index,self)=>{
    console.log(item) // -> 1,2,3,4,5,6
    console.log(index) // -> 0,1,2,3,4,5
    console.log(self) // -> [1,2,3,4,5,6]
    return item > 3
})

console.log(arr1) // -> [4,5,6]

13.find();

数组的循环,查找到符合条件的值并且打断循环返回找到的值;

let arr = ['张三','李四','王五','马六'];
let str = arr.find(item => item == '李四');
console.log(str); // -> '李四'

14.findIndex();

数组的循环,查找到符合条件的索引并且打断循环返回找到的索引值

let arr = ['张三','李四','王五','马六'];
let index = arr.findIndex(item => item == '李四');
console.log(index); // -> 1;

15.every();

判断数组中每一项是否都满足条件,只有所有项都满足条件,才会返回true。

// 注意: every()接收一个回调函数作为参数,这个回调函数需要有返回值,every(callback);callback默认有三个参数,分别为value,index,self。
let arr = [1,2,3,4,5,6];
let bool = arr.every(item => item > 0);
console.log(bool); // -> true;

let bool = arr.every(item => item > 3);
console.log(bool); // -> false;

16.some();

判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。否侧就会返回false

//注意: some()接收一个回调函数作为参数,这个回调函数需要有返回值,some(callback);callback默认有三个参数,分别为value,index,self。
let arr = [1,2,3,4,5,6];
let bool = arr.some(item => item > 3);
console.log(bool) // -> true;

let bool = arr.some(item => item > 6);
console.log(bool) // -> false;

17.reduce();

数组的第一项开始,逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值。

// 注意: 参数:reduce()接收一个或两个参数:第一个是回调函数,表示在数组的每一项上调用的函数;第二个参数(可选的)作为归并的初始值,被回调函数第一次执行时的第一个参数接收。 reduce(callback,initial);callback默认有四个参数,分别为prev,now,index,self。 callback返回的任何值都会作为下一次执行的第一个参数。 如果initial参数被省略,那么第一次迭代发生在数组的第二项上,因此callback的第一个参数是数组的第一项,第二个参数就是数组的第二项。

let arr = [10,20,30,40,50];
let sum = arr.reduce((prev,now) => prev+now)

console.log(sum); // -> 150;

let sum = arr.reduce((prev,now) => prev+now,110)

console.log(sum) // -> 260;

标签:常用,console,log,arr,李四,let,数组,方法
From: https://www.cnblogs.com/yitiaogua/p/17509506.html

相关文章

  • 新书上市 | 《复分析:可视化方法》
    之前在2月书讯,我们聊过这是一本“千呼万唤始出版”的图书。《复分析》的出版当年在数学界曾经引起过不小震动,主要原因是它的写法可谓独树一帜,在数学圈可谓不可替代:《复分析:可视化方法》用一种真正不同寻常的、独具创造性的视角和可以看得见的论证方式解释初等复分析的理论,公开挑......
  • PDF文件怎么设置密码?PDF设置密码方法分享!​
    PDF文件怎么设置密码?PDF文件是一种非常常见的文件格式,在日常的工作和学习中,我们都会接触到它。是我们经常使用的文件格式之一,它可以被轻松地共享和传输。然而,有时候我们需要保护PDF文件的机密性,以免被未经授权的人员访问。这时候,密码保护是一个非常有效的方式。那么到底怎么给PDF文......
  • 图片大小如何调整?调整图片大小方法分享!​
    相信大家在日常的生活中,经常会遇到图片加载很慢或者图片不兼容的情况,比如考试报名,或者网上办理业务,都需要上传自己的证件照,这类要求是比较严格的,一般出现无法上传的情况,那么可能是因为你的图片大小不合适,或者图片不兼容。那么图片的大小怎么才能调整呢?今天小编教大家两种方法,让你顺......
  • 怎么截图识别文字?截图识别文字方法分享!​
    怎么截图识别文字?截图识别文字技术的应用领域非常广泛。在现今的信息时代,我们经常会遇到需要把图片中的文字转化为可编辑的文本的情况。这时候,截图识别文字技术就显得非常重要。在商业领域,截图识别文字技术可以帮助公司快速处理大量的文件和数据。在教育领域,学生们可以使用截图识别......
  • css居中(自己常用的)
    水平居中:1.text-aligin:center  如果仅使用 text-aligin:center   是无法达到水平居中的效果的,为什么?text-aligin:center  需要在行内块元素上使用的,而盒子是块级元素,所以,需要将盒子转换为行内块元素 text-aligin:center  才能生效。<divstyle="text-align:cen......
  • echarts绘制地图使用dispatchAction方法高亮区域
    1.高亮方法代码如下:highlightMap(myChart){//高亮轮播展示varindex=0;this.timer=null;this.timer=setInterval(()=>{myChart.dispatchAction({type:'downplay',//取消高亮seriesIndex:0})myChart.dispatchAction({......
  • js常用操作
    1.重新渲染页面元素this.$forceUpdate(); 2.对象转化为json字符串再传参JSON.stringify()  3.删除js对象元素index表示对象下标deletethis.imgList[index];......
  • 关于项目初期,数据量小的内容推荐的实现方法
    前言当下,只要是一个初具规模的内容应用都具备个性化推荐系统。比如购物类的会有推荐商品模块,搜索条下有个性化的搜索关键词或词条补全词,社交类的有博主推荐,视频或文章推荐等等。这些功能除了要有庞大的数据量,还要有健全的数据存储仓库建设方案,以及后面对数据的清洗,排序,训练后的......
  • docker ubantu 常用操作
    运行容器dockerrun--namenginx-p80:80-dnginx查看容器列表dockercontainerls查看容器列表dockercontainerl停止容器dockerstopnginx-test启动容器dockerstartnginx-test删除容器dockerrmnginx-test容器自启动dockerupdate--restart=alwaysnginx-test ......
  • 【转】网络常用颜文字(文字表情)
    网络常用颜文字:本文纯属从阿林这里截取转帖的部分内容,只是为了使用方便,感谢原作者的收集。【啊啊】w(゚Д゚)w【擦眼泪】(ノへ ̄、)【不屑】( ̄_, ̄)【好耶】ヽ(✿゚▽゚)ノ【棒】(๑•̀ㅂ•́)✧【抽】( ̄ε(# ̄)☆╰╮o( ̄皿 ̄///)【亲】(づ ̄3 ̄)づ╭❤~【汗】Σ(°△°|||)︴【笨】(......