javascript数组常用函数与实战总结
栏目: JavaScript · 发布时间: 5年前
内容简介:在node.js后端开发过程中,数组这种数据类型(Object类型)再常见不过,本文主要介绍数组的一些常见函数,以及在实战开发过程中能更好的操作数组的说明:向数组的末尾添加一个或多个元素,并返回新的长度 代码:说明:将参数添加到原数组开头,并返回数组的长度 代码:
在node.js后端开发过程中,数组这种数据类型(Object类型)再常见不过,本文主要介绍数组的一些常见函数,以及在实战开发过程中能更好的操作数组的 lodash包 。
函数介绍
向数组末尾添加值
push
说明:向数组的末尾添加一个或多个元素,并返回新的长度 代码:
let array=[11,22]; let arrayChange=array.push("333"); console.log(arrayChange) //返回的结果就是数组改变后的长度:3 console.log(arrayChange.length)//undefined 复制代码
向数组头部添加值
unshift
说明:将参数添加到原数组开头,并返回数组的长度 代码:
let array=[11,22]; let arrayChange=array.unshift("333"); console.log(array) //[333,11,22] console.log(arrayChange) //返回的结果就是数组改变后的长度:3 console.log(arrayChange.length)//undefined 复制代码
删除数组元素
splice
说明: 当splice传递两个参数的时候,参数1:开始删除的下标位置,参数2:删除数组元素的个数,返回新的数组。当splice传递三个参数的时候,参数1:开始删除的下表位置,参数2:删除数组元素的个数,参数3:向数组添加的新元素。注意数组下标0开始。
代码:
let array=[11,22,33,44]; let arrayChange=array.splice(1,2);//movePos.splice(开始删除的下表位置,删除数组元素的个数); console.log(arrayChange) ; //返回新的数组:22,11 console.log(arrayChange.length) ;//返回数组长度2 let array =[111,222,333,444]; let arrayChange=array.splice(2,1,"666")//movePos.splice(开始删除的下表位置,删除数组元素的个数,向数组添加的新项目。);从下标2开始删除一位,并用666替换删除下表位置的元素 console.loge(arrayChange + "<br />") //返回新的数组 11,22,666,44 复制代码
获取数组的最后一个元素
常规获取元素最后一个值
let array=['1','2','3','312哦哦']; console.log(array[array.length-1]); 复制代码
pop 也可以说是删除数组的最后一个元素,与删除数组的第一个元素shift用法基本相同
说明:注意使用pop获取数组最后一个元素的时候,同时会删除掉数组的最后一个元素;使用shift获取数组最后一个元素的时候,同时会删除掉数组的最后一个元素,二者都是返回的那个元素的值,原始数组也发生变化。
let array=['1','2','3','312哦哦']; console.log(array.pop()) console.log(array) 复制代码
Lodash中的函数_last
说明:不会改变原始数组
let array=['1','2','3','312哦哦']; console.log(_.last(array)) 复制代码
颠倒数组元素(数组的反转)
-
数组传统方法 reverse
说明:颠倒数组元素后返回新的数组
代码:
let array=[11,22]; let arrayChange=movePos.reverse(); console.log(arrayChange) //返回新的数组:22,11 console.log(arrayChange.length) //返回数组长度2 复制代码
- lodash提供的函数 _.reverse
代码:
let array=[11,22]; console.log(_.reverse(array)) 复制代码
分隔数组放入字符串
join
说明:用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。返回一个字符串 代码
let array=[11,22]; let arrayChange=array.join("+"); console.log(arr) //11+22 复制代码
连接两个或多个数组
contact
说明:用于连接两个或多个数组,并返回一个新数组,新数组是将参数添加到原数组中构成
let array=[11,22]; let arrayChange=array.concat(4,5); console.log(arrayChange);//[11, 22, 4, 5] 复制代码
数组元素的去重
- 传统方法遍历去重 for of
代码:
let arr = ['数字','花朵','数字']; let result=[]; for (let i of arr) { if (!result.includes(i)) { result.push(i) } } 复制代码
- ES6 新增了Set这一数据结构 类似数组 但是Set成员具有唯一性,基于唯一性适合做数组去重
代码:
let array=['数字','花朵','数字','地球','人类','头发','眼睛','细胞']; console.log(...(new Set(array))) 复制代码
- lodash提供的函数 _uniq
代码:
let array=['数字','花朵','数字','地球','人类','头发','眼睛','细胞']; console.log(_.uniq(array)); 复制代码
数组求和
lodash中的函数 _sum
代码:
let sorce=_.sum([32,45,86,43]); 复制代码
获取数组中指定键值对的值组成数组
lodash中的函数 _map
说明:例如这样一个包含对象的数组[{id:1,name:'koala'},{id:2,name:'koala1'}],想拿到数组对象中id的数据组成一个数组。map的参数1:原型数组,参数2对象中的某一个键值对
代码:
let array=[{id:1,name:'koala'},{id:2,name:'koala1'}]; let result=_map(array,'id'); //[1,2] 复制代码
获取数组中某个值的角标
注意:下面两个函数都是返回遇到的第一个符合的值的下标值。 indexOf
说明:
- 用于在字符串和数组中找到目标的索引
- 在字符串中使用的话会转换类型为 "hello1".indexOf(1) //结果5
- 在数组中使用不会转换类型 [1,2,3,"4"].indexOf(4) //-1
- [,,,,,].indexOf(undefined) //-1
- [null,undefined,NaN].indexOf(NaN)] //-1 NaN是找不到的其他可以哟
- let num = 2019; (""+num).indexOf(0) //1 7.正常情况下indexOf返回数组中第一个数的位置是0 代码:
console.log('哈哈',("hello1".indexOf(1)))// 哈哈 5 console.log('哈哈',("hello1111".indexOf(1)))// 哈哈 5 console.log('哈哈',("hello1".indexOf('h')))//0 复制代码
lodash中的函数**_.findIndex** 说明:对于一个数组,里面每个值是对象的时候,这个函数,可以不完全判断对象一定是相同的。 代码:
var users = [ { 'user': 'barney', 'active': false ,'role':1}, { 'user': 'fred', 'active': false ,'role':2}, { 'user': 'fred', 'active': true ,'role':3} ]; console.log( _.findIndex(users, { 'user': 'fred', 'role': 3 }));// 输出2 复制代码
数组包含值判断
-
indexOf
说明:返回对应元素下标,在上面已经详细介绍过。
-
includes
说明:返回的直接是true/false,同时对NaN找不到的问题也得到解决。效率应该会比indexOf高一些。includes可以有两个参数,参数1:表示要判断的值,参数2:表示判断的起始位置,可以是负数,表示从右数过来第几个,但是不改变判断搜索的方向,搜索方向还是从左到右。
代码:
let array111=['koala','kaola1',NaN]; console.log(array111.includes('koala'));//true console.log(array111.includes(NaN));//true const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN] console.log('%s', arr1.includes('d', 3))//true console.log('%s', arr1.includes('d', 4))//false console.log('%s', arr1.includes('k', -1))//false console.log('%s', arr1.includes('k', -2))//true console.log('%s', arr1.includes('i', -3))//false 复制代码
把一个字符串分割成字符串数组
split
说明:split函数两个参数,参数1:字符串或正则表达式,从该参数指定的地方分割 (必须),参数2:可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度
var str="How are you doing today?" document.write(str.split(" ") + "<br />") document.write(str.split("") + "<br />") document.write(str.split(" ",3)) 输出: How,are,you,doing,today? H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? How,are,you "2:3:4:5".split(":") //将返回["2", "3", "4", "5"] "|a|b|c".split("|") //将返回["", "a", "b", "c"] "hello".split("") //可返回 ["h", "e", "l", "l", "o"] "hello".split("") //可返回 ["h", "e", "l", "l", "o"] "hello".split("", 3) //可返回 ["h", "e", "l"] 复制代码
附:
注意,文中提到的所有lodash中的函数,在使用的时候需要先
const _ = require('lodash'); 复制代码
一道面试题:
给定任意非负整数,反复累加各位数字直到结果为个位数为止。例如给定非负整数912,第一次累加9+1+2 = 12, 第二次累加1+2 = 3, 3为个位数,循 环终止返回3。请编程实现。
function add(num){ if(isNaN(num)) return; if(num<10) return num const res=num.toString().split('').reduce((sum,value)=>{ return sum+Number(value) },0) return add(res); } add(345); 3 复制代码
欢迎大家关注我的公众号——程序员成长指北。请自行微信搜索——“程序员成长指北”
以上所述就是小编给大家介绍的《javascript数组常用函数与实战总结》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 函数式编程之数组的函数式编程
- 巧用 PHP 数组函数
- C函数中返回字符数组
- c# – 数组的GetUpperBound()和GetLowerBound()函数
- python – 如何从numpy数组中确定什么是概率分布函数?
- PHP代码篇(二)-- array_column函数将二维数组格式化成固定格式的一维数组,及优化查询方法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web Services原理与研发实践
顾宁刘家茂柴晓路 / 机械工业出版社 / 2006-1 / 33.00元
本书以web services技术原理为主线,详细解释、分析包括XML、XML Schema、SOAP、WSDL、UDDI等在内在的web Services核心技术。在分析、阐述技术原理的同时,结合作者在Web Services领域的最新研究成果,使用大量的实例帮助读者深刻理解技术的设计思路与原则。全书共有9章,第1章主要介绍web Services的背景知识;第2-7章着重讲解webServic......一起来看看 《Web Services原理与研发实践》 这本书的介绍吧!