资讯专栏INFORMATION COLUMN

JavaScript数组——常用数组方法汇总

HollisChuang / 1370人阅读

摘要:本文记录关于数组的一些常用方法,搜集总结。对于数组中的每个元素,都会调用函数一次。返回值是一个新数组,其中的每个元素均为关联的原始数组元素的回调函数返回值。

本文记录关于js数组的一些常用方法,搜集总结。

主要思路:
1. 方法功能是什么
2. 传递的参数是什么
3. 返回值是什么
4. 原来的数组是否改变
第一组:关于数组的增加、删除和修改 1.push 向数组末尾增加新的内容,返回的是添加后新数组的长度,原有的数组改变了
    var arr=[10,11,12,13,14,15];
    var res=arr.push(16,17);
    console.log(res);    //8
    console.log(arr);    //[10,11,12,13,14,15,16,17]
2.unshift 向数组的开头增加新的内容,返回的是添加后新数组的长度,原来的数组也改变
    var res=arr.unshift(16,17);
    console.log(res);   //8
3.splice(n,m,x) 把原有数组中的某些项进行替换。(先删除,然后用x替换)。从所以n(包含n)开始,向后删除m个元素,用x替换,返回删除的数组

原有数组改变规律:
splice(0,0,x) 相当于unshiftsplice(arr.length,0,x) 相当于pushsplice(n,0,x) 向数组中间某个位置添加新的内容 从索引n开始,删除0个内容,把新增的内容x放在索引n的前面。返回的是一个空数组,原有数组改变n开始的索引splice(n,m) 删除数组指定项,从所以n(包含n)开始,向后删除m个元素 ,把删除的内容当做新数组返回,原有数组改变

    var res=arr.splice(2,0,"michael");  //在12后面添加“michael"
    console.log(arr);
4.pop 删除数组最后一个,返回的是删除的那一项,原有数组改变。shift 删除数组第一个,返回的是删除的那一项,原有数组改变 第二组:数组的查询和复制 5.slice(n,m) 从索引n(包含n)开始找到索引m(不包含m)处。把找到的内容作为一个新的数组返回,原有数组是不改变的。
javascript    var arr=[10,11,12,13,14,15];
    var res=arr.slice(1,4);
    console.log(res);   //[11, 12, 13]
    console.log(arr);   //[10, 11, 12, 13, 14, 15]
    slice(n) 从索引n(包含n)开始找到末尾
    slice(0)  // slice()  将原来数组原封不动的复制一份,数组clone
6. concat 本意是实现数组的拼接的 arr1.concat(arr2) 将数组arr2和数组arr1合并成新的数组,原来的数组也不变

concat也可以是数组的克隆,原来的数组也改变(相当于slice(0))

    var arr1=[10,11,12,13,14,15];
    var arr2=[16,17];
    var res=arr1.concat(arr2);
    console.log(arr1);  //[10, 11, 12, 13, 14, 15]
    console.log(res);   //[10, 11, 12, 13, 14, 15, 16, 17]
第三组:将数组转化为我们的字符串 7.toString 把数组中的每一项拿出来,用逗号隔开,组成字符串,原有数组不变
javascript     var arr=["name","michael","age","24"];
     var res=arr.toString();
     console.log(res);   //name,michael,age,24
     console.log(arr);   //["name", "michael", "age", "24"]
8.join(分隔符) 把数组中的每一项拿出来,用指定的分隔符隔开,原有数组不变。
     var arr=["name","michael","age","24"];
     var res=arr.join("|");
     console.log(res);           //"name|michael|age|24"
     console.log(res.length);    //19
     console.log(arr);           //["name", "michael", "age", "24"]
     console.log(arr.length);    //4

例:实现数组中数字的求和

     var arr=[10,11,12,13,14,15];
     var str=arr.join("+");      //"10+11+12+13+14+15"
     var total=eval(str);        //eval 将指定的字符串变成真正的额表达式执行
     console.log(total);         //75
     console.log(arr);           //[10, 11, 12, 13, 14, 15]
第四组:排列和排序 9.reverse 数组倒过来排列,原有数组改变。
     var arr=[10,11,12,13,14,15];
     console.log(arr);           //[10, 11, 12, 13, 14, 15]
     var res=arr.reverse();      //"10+11+12+13+14+15"
     console.log(res);         //[15, 14, 13, 12, 11, 10]
10.sort 数组的排序,可以实现由大到小(由小到大),原有的数组也变

直接写sort只能处理10以内的数字排序,处理10以上的我们需要传递一个参数,这个参数必须是函数

     var arr=[10,12,11,19,13,15,6];
     console.log(arr);           //[10, 12, 11, 19, 13, 15,6]
     var res=arr.sort();
     console.log(res);         //[10, 11, 12, 13, 15, 19, 6]

改进:

     var arr=[10,12,11,19,13,15,6];
     console.log(arr);           //[10, 12, 11, 19, 13, 15,6]
     var res1=arr.sort(function(a,b){return a-b;});   //实现由小到大
     console.log(res1);
     var res2=arr.sort(function(a,b){return b-a;})   //实现由大到小
     console.log(res2);         //[10, 11, 12, 13, 15, 19, 6]
     var arr=[10,12,11,19,13,6];
     console.log(arr);           //[10, 12, 11, 19, 13, 15,6]

     var res1=arr.sort(function(a,b){
     //a表示每一次循环的时候的当前项,b是后面的项
     //return a-b;当前项减去后一项,如果大于0,代表前面的比后面的大,这样的话就交换位置
     //冒泡排序:sort实现排序,就是遵循冒泡排序的思想实现的
     console.log(a+"<====>"+b);
     return a-b;});   //实现由小到大
第五组:一些常用但不兼容 11.indexOf array1.indexOf(searchElement[, fromIndex])

fromIndex可选 用于开始搜索的数组索引。 如果省略 fromIndex,则从索引 0 处开始搜索。
数组中的 searchElement 的第一个匹配项的索引;如果未找到 searchElement,则为 -1。

     var arr=["hello","michael","good","study"];
     var p=arr.indexOf("mi",0);
     console.log(p);           //-1
12.forEach array1.forEach(callbackfn[, thisArg])

callbackfn 必选。 最多可以接受三个参数的函数。 对于数组中的每个元素,forEach 都会调用 callbackfn 函数一次。

thisArg 可选。 callbackfn 函数中的 this 关键字可引用的对象。 如果省略 thisArg,则 undefined 将用作 this 值。

如果 callbackfn 参数不是函数对象,则将引发 TypeError 异常。

对于数组中出现的每个元素,forEach 方法都会调用 callbackfn 函数一次(采用升序索引顺序)。 将不会为数组中缺少的元素调用回调函数。

除了数组对象之外,forEach 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

回调函数的语法:function callbackfn(value, index, array1):

参数 参数说明
value 数组元素的值
index 数组元素的数字索引
array1 包含该元素的数组对象
     // Create an array.
     var numbers = [10, 11, 12];

     // Call the addNumber callback function for each array element.
     var sum = 0;
     numbers.forEach(
     function addNumber(value) { sum += value; }
     );

     document.write(sum);
     // Output: 33

https://msdn.microsoft.com/zh-cn/library/ff679980(v=vs.94).aspx

13.map array1.map(callbackfn[, thisArg])

callbackfn 必选。 最多可以接受三个参数的函数。 对于数组中的每个元素(不会对undefined元素调用),map 方法都会调用 callbackfn 函数一次。

[, thisArg] 可选。 callbackfn 函数中的 this 关键字可引用的对象。 如果省略 thisArg,则 undefined 将用作 this 值。

返回值是一个新数组,其中的每个元素均为关联的原始数组元素的回调函数返回值。如果 callbackfn 参数不是函数对象,则将引发 TypeError 异常。

对于数组中的每个元素,map 方法都会调用 callbackfn 函数一次(采用升序索引顺序)。 将不会为数组中缺少的元素调用回调函数。除了数组对象之外,map 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

回调函数的语法如下所示:function callbackfn(value, index, array1):

参数 参数说明
value 数组元素的值
index 数组元素的数字索引
array1 包含该元素的数组对象
    // Define the callback function.
     function AreaOfCircle(radius) {
     var area = Math.PI * (radius * radius);
     return area.toFixed(0);
     }

     // Create an array.
     var radii = [10, 20, 30];

     // Get the areas from the radii.
     var areas = radii.map(AreaOfCircle);

     document.write(areas);

     // Output:
     // 314,1257,2827
     */

本文记录关于js数组的一些常用方法,搜集总结,如有不妥,望指正。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85739.html

相关文章

  • JavaScript中操作数组常用函数汇总

    摘要:示例语法作用方法用于删除并返回数组的最后一个元素。返回值一个新的字符串,该字符串值包含的一个子字符串,其内容是从处到处的所有字符,其长度为减。返回值一个新的字符串,包含从的包括所指的字符处开始的个字符。 1.concat()语法:arrayObject.concat(array1,array2,......,arrayn)作用:concat() 方法用于连接两个或多个数组。特征:该方法...

    beita 评论0 收藏0
  • es6常用数组操作及技巧汇总

    摘要:检测数组或者检测对象的原型链是否指向构造函数的对象或者终极大招注意不可以用此方法检查常用方法合并多个数组,返回合并后的新数组,原数组没有变化。返回值是由被删除的元素组成的一个数组。 定义数组 const array = [1, 2, 3]; 或者 const array = new Array(); array[0] = 1; 建议尽量使用第一种形式定义数组,采用new的形式在大量的数...

    Noodles 评论0 收藏0
  • es6常用数组操作及技巧汇总

    摘要:检测数组或者检测对象的原型链是否指向构造函数的对象或者终极大招注意不可以用此方法检查常用方法合并多个数组,返回合并后的新数组,原数组没有变化。返回值是由被删除的元素组成的一个数组。 定义数组 const array = [1, 2, 3]; 或者 const array = new Array(); array[0] = 1; 建议尽量使用第一种形式定义数组,采用new的形式在大量的数...

    jk_v1 评论0 收藏0
  • 前端实习面试汇总

    摘要:题目来源前端实习生面试总结最近开始了几次面试,虽然还不知道结果如何,但是还是要记录下来进行一个总结,同样也希望对正在准备面实习生的童鞋们有所帮助最后一个参数是做什么用的答规定事件是冒泡还是捕获。 最近一直在多看基础的书多码代码准备找实习,在网上也搜罗了不少面经,现在把搜罗到的实习生面试题自己整理一下。 题目来源:前端实习生面试总结最近开始了几次面试,虽然还不知道结果如何,但是还是要记录...

    张利勇 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<