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

说明:

  1. 用于在字符串和数组中找到目标的索引
  2. 在字符串中使用的话会转换类型为 "hello1".indexOf(1) //结果5
  3. 在数组中使用不会转换类型 [1,2,3,"4"].indexOf(4) //-1
  4. [,,,,,].indexOf(undefined) //-1
  5. [null,undefined,NaN].indexOf(NaN)] //-1 NaN是找不到的其他可以哟
  6. 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数组常用函数与实战总结

欢迎大家关注我的公众号——程序员成长指北。请自行微信搜索——“程序员成长指北”


以上所述就是小编给大家介绍的《javascript数组常用函数与实战总结》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Beginning Apache Struts

Beginning Apache Struts

Arnold Doray / Apress / 2006-02-20 / USD 44.99

Beginning Apache Struts will provide you a working knowledge of Apache Struts 1.2. This book is ideal for you Java programmers who have some JSP familiarity, but little or no prior experience with Ser......一起来看看 《Beginning Apache Struts》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具