JS数组操作API ------【那些年一不留神踩的坑】

数据处理对于我们前端工程师而言,那可谓是每天都要面对的事情,今天我们就来总结一下在处理数组时,常用到的一些数组API,以及一些易错点。。。【前方干货,Are you ready? Go!】

概览数组API:

事实上,我们可以大致把数组 api 归结为以下几种功能:分合、调序、截取、遍历(判断、筛选、查找)

改变原数组的:  reverse,  sort,  splice

不会改变原数组的: slice,  indexOf,  join,  concat, every,  some,includes,  filter,  find,    fill,  reduce, forEach,map

    var arr = [1, 2, 5, 3, 4, 10];
    var arr1 = ["a", "b", "c", "d", "e"];

    // 判断数据是否为数组
    var a = Array.isArray([2,5,3,6]); // true
    // 将字符串转化为数组
    var a = Array.from("asfsds"); // ["a", "s", "f", "s", "d", "s"];
    // 1.---------- 分合-------------
    var a = arr.join("_");
    var a = arr.concat(arr1);

 // 2.------调序-----------------
    //  反转数组元素顺序
    var a = arr.reverse();
    //  排序(并不是排大小顺序)
    var arr = [1, 2, 5, 3, 4, 10];
    var a = arr.sort();

// 3.-------- 截取 ----------------
    // splice改变原数组
    // arr.splice(m,n)      (从第m位开始,截取n个元素)
    // arr.splice(m)         (从第m位开始,一直截取到数组末位)
    // arr.splice(m,n,a,b)   (从第m位开始,删掉n个元素, 添加a, 添加b,.....)
    var arr = [1, 2, 5, 3, 4, 10];
    var a = arr.splice(1,3,"a"); // [2,5,3]
    var arr = [1, 2, 5, 3, 4, 10];
    var a = arr.splice(1,3); // [2,5,3]
    var a = arr.splice(2,1,‘w‘,‘z‘); // 5(返回的是删除/截取的部分)
    // 从下标为2的地方删除1个元素,并添加两个元素

    // slice不改变原数组
    //  arr.slice(m,n)(从第m位开始,到第n位结束),不包含第n位
    var arr = [1, 2, 5, 3, 4, 10];
    var a= arr.slice(1,3); // [2,5](不包括下标为3的)
    console.log(arr)  //  [1,2,5,3,4,10]

// 4.----------  遍历  --------------

    // map 遍历数组
    arr.map((item,i) =>  console.log(item,i))    

    // every,some,includes 判断  是否有满足条件的元素,返回boolean值
    var a = arr.every(x=>x>3); // false
    var a = arr.some(x=>x>3);  // true
    var a = arr.includes(2)    // true

    // filter   筛选,返回满足条件的所有元素组成的一个新数组
    var a = arr.filter(x=>x>3);  // [5,4,10]

    //  find    查找,返回通过满足条件的第一个元素的值
    var a = arr.find(x=>x>3);   // 5

   // indexOf 查找,该方法既可操作数组,也可操作字符串,
   // 传入我们要查找的那个值
   //返回-1时代表没有此项;  返回非负数时 代表当前元素(或元素首位)在原数组(或原字符串)中所处的位数
   var a = arr.indexOf(2); // 1

最后简单提一下数组的遍历方法:

1. for (let  i=0; i<arr.length; i++)

2. for (let i  in  arr)   --------  i 为索引值

3. for (let i of  arr)    --------  i 位每一项

4.  arr.forEach()

5.  arr.map(item => console.log(item))

【本章拓展】:

// 把字符串类型的数组转化为真正的数组
let switchstr = ‘["index.html","dashboard.html","service.html"]‘
let switch1 = switchstr.replace(/\[/,",").replace(/\]/,",").replace(/"+/g,"").split(",")
switch1.pop()
switch1.shift()
console.log(switch1)

var a = [1,2,3,4,5]
console.log(a.toString())
var b = ‘4000‘
console.log(parseInt(b))
var c = a
console.log(c)

原文地址:https://www.cnblogs.com/edwardwzw/p/11674785.html

时间: 2024-10-26 23:00:01

JS数组操作API ------【那些年一不留神踩的坑】的相关文章

js数组操作

js数组操作大全(转) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7 注:在IE6.0下测试返回值总为undefined,FF2.0下测试

js数组操作常用方法(转自:http://www.jbxue.com/article/js/20224.html)

js数组操作常用方法,包括数组的创建.数组的元素的访问.数组元素的删除.数组的拷贝等. 原文参考自:http://www.jbxue.com/article/js/20224.html 在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像JSON数据是以数组的形式出现的,查阅了下相关JS中数组的操作一试果然很爽.记录下来.1.数组的创建 var arr

js 数组操作大集合

js数组的操作 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一下狠心,我学!呵呵.学了之后才知道,js数组的功能强大很,远比VB,C#强多了,大家慢慢看吧 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

js数组操作【转载】

用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一下狠心,我学!呵呵.学了之后才知道,js数组的功能强大很,远比VB,C#强多了,大家慢慢看吧 1.数组的创建 var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var array

一个js数组操作题

JS 控制一串数组,每隔2两秒显示 7个 数,要求自动拼接. 列如:var nums='1,2,3,4,5,6,7,8,9'; 第一次输出‘1,2,3,4,5,6,7’  第二次输出'8,9,1,2,3,4,5' 第三次输出'6,7,8,9,1,2,3' var array = [1,2,3,4,5,6,7,8,9]; var dom = document.getElementById('a'); function go(){ var result = array.splice(0,7); ar

js数组操作(增、删、改、查)

数组是js中非常常用的一个对象,它有一些经典的操作,今天零度就为大家介绍介绍. 首先,声明一个数组的方法有两种: var arr = []; 或者 var arr = new Array(); 一般情况都使用第一种,在创建的时候可以直接往里面放数据,也可以以后在添加. 一.给数组添加数据 常用的有两种方法: 1.push方法,向数组的末尾添加数据 arr.push('a','b'); alert(arr); //a,b 2.unshift方法,向数组的开头添加数据 arr.unshift('1'

js——数组操作

把教程里的api看了一遍,感觉记住了,又感觉没有记住...后来发现,如果给自己提需求,或许不错.想想对于一个数组,可能会用到哪些操作呢?基本的操作就是增删改查吧(有点像sql) 1. 创建数组                空数组:var arr = [] 包含undefined元素[undefined x 3] - var arr = []; arr.length = 3; - var arr = [1,2,3]; delete arr[i];//delete每个元素后 - var arr =

js 数组操作

toString():把数组转换成一个字符串 toLocaleString():把数组转换成一个字符串 join():把数组转换成一个用符号连接的字符串 shift():将数组头部的一个元素移出 unshift():在数组的头部插入一个元素 pop():从数组尾部删除一个元素 push():把一个元素添加到数组的尾部 concat():给数组添加元素 slice():返回数组的部分 reverse():将数组反向排序 sort():对数组进行排序操作 splice():插入.删除或者替换一个数组

js数组操作-数组去重

第一个和第二个,都是对新数组或新json进行操作,而第三个是对原数组本身进行indexOf.第一个是用新数组的indexOf来判断是否有重复元素,而第二个是通过nHash[item]来判断是否存在. var array = [1, 2, 3, 2, 1]; Array.prototype.unique1 = function () { var nArray = []; // 新建一个数组 console.log(this, 'this的值'); for (var i = 0, len = thi