美文网首页让前端飞
javascript 数组(二)

javascript 数组(二)

作者: 二十三往后 | 来源:发表于2018-11-23 13:24 被阅读1次
1.数组的元素增减方法:pop,push,shift,unshift

pop(),用于删除并返回数组的最后一个元素,把数组长度减 1
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度
这些方法都会修改原数组

    var arr = [1,2,3,4,5,6];
    arr.pop();//返回6,arr=[1,2,3,4,5]
    arr.push(6,7);//返回新的arr.length 7,arr=[1,2,3,4,5,6,7]
    arr.shift();//返回1,arr=[2,3,4,5,6]
    arr.unshift(0)// 返回新的arr.length 7,arr = [0,2,3,4,5,6,7]
2.splice() 方法从数组中删除项目,然后返回被删除的项目

1.会修改原数组
2.返回值是数组
3.可用来在指定位置增加或者替换项目

    //array.splice(index,howmany,item1...itemX);
    //index,删除或者增加的位置(必需);howmany 删除的数量,0为不删除(必需);item是增加的项(可选);
    var arr = [1,2,3,4,5,6];
    arr.splice(1,1); // 删除:返回数组类型 [2],arr = [1,3,4,5,6];
    arr.splice(0,0,2);//增加: 第二个参数为0,不删除元素,返回[],arr = [2,1,3,4,5,6];
    arr.splice(1,1,2);//替换:返回[1],arr=[2,2,3,4,5,6];
3.concat() 方法用于连接两个或多个数组
    var arr = [1,2,3];
    var arr1 = [4,5,6];
    arr.concat(arr1) //返回新的数组[1,2,3,4,5,6];不会修改参与的arr和arr1
    arr.concat(arr1,arr2)//可以一次连接多个数组
4.sort() 方法用于对数组的元素进行排序

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字
是对原数组进行修改,不生成副本

    var arr = [b,a,c,e,d];
    arr.sort();//arr=[a,b,c,d]; 字母排序
    arr = [5,2,4,1,6];
    arr.sort(function(a,b){
        return a-b;
    }); //arr = [1,2,4,5,6]; 数字排序
5.reverse() 方法用于颠倒数组中元素的顺序

该方法会改变原来的数组,而不会创建新的数组

    var arr = [1,2,3];
    arr.reverse();//arr = [3,2,1];
6.slice(start,end) 方法可从已有的数组中返回选定的元素

返回一个新的数组,包含从 start 到 end (不包括该元素)的数组中的元素
您可使用负值从数组的尾部选取元素
如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素

    arr = [1,2,3,4,5,6];
    arr.slice(1,3);//返回[2,3]
    arr.slice(3);//返回[4,5,6]
    arr.slice(-1);//[6]
7.join(str) 方法用于把数组中的所有元素放入一个字符串

str为指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符

    var arr = [a,b,c];
    arr.join('-');//'a-b-c'
    arr.join();//a,b,c
8.toString();toLocalString();

toString() 方法可把数组转换为字符串,并返回结果。返回值与没有参数的 join() 方法返回的字符串相同。
toLocaleString()首先调用每个数组元素的 toLocaleString() 方法,然后使用地区特定的分隔符把生成的字符串连接起来,形成一个字符串。

9.forEach(function(value,index,arr)) 方法用于调用数组的每个元素,并将元素传递给回调函数

1.value 数组中的每一项值
2.index 每一项value对应的索引
3.arr 数组本身
4.forEach 没有返回值
5.对value进行修改,并不会影响原数组
6.对arr进行修改就会修改原数组

    var arr = [1,2,3];
    arr.forEach(function(value,index,arr){
        value++; // value 值改变,但arr里的没变
        //use value do something /////
        arr.push(value);//arr改变,原数组被改变
    });//arr = [1,2,3,2,3,4];

更详细的forEach内容请点我

10.array.map(function(value,index,arr), thisValue)方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

1.value 当前元素的值
2.index 当前元素的索引值
3.arr 当前元素属于的数组对象
4.map() 方法按照原始数组元素顺序依次处理元素
5.map() 不会对空数组进行检测,不会改变原始数组
6.thisValue 执行callback函数时使用的this值

    var arr = [1,2,3];
    var a = arr.map(function(value,index,arr){
       return value*value;
    });//a [1,4,9];

更详细的map请点我

10.reduce(function(total, value, index, arr), initialValue) 方法对累计器和数组中的每个元素(从左到右)应用一个函数,将其简化为单个值。

total 初始值, 或者计算结束后的返回值
value 当前元素
index 当前元素的索引
arr 当前元素所属的数组对象
reduce() 可以作为一个高阶函数,用于函数的 compose
reduce() 对于空数组是不会执行回调函数的

    var arr = [0,1,2,3,4]
    var res = arr.reduce(function(a,b){
        return a+b;
    }); // res = 10

更详细的reduce点我

未完待续....
参考来源:W3C MDN 有错请指出,谢谢!

相关文章

  • Javascript数组系列三之迭代方法2

    今天我们来继续 Javascript 数组系列的文章,上文 《Javascript数组系列二之迭代方法1》 我们说...

  • JavaScript数组去重

    JavaScript中数组的常用操作之数组去重 方法一 方法二

  • javascript 数组(二)

    1.数组的元素增减方法:pop,push,shift,unshift pop(),用于删除并返回数组的最后一个元素...

  • Javascript特效开发(二)

    本文内容承接Javascript特效开发(一) 第三章 Javascript特效开发第二阶段 3.1、数组 数组...

  • JavaScript 数组方法 笔记

    JavaScript 数组创建 一维数组 二维数组 数组方法 arr = [1,2,3,4,5] arr.join...

  • typescript中的二维数组和初始化

    在javascript中其实没有二维数组的类型, 我们实现二维数组的方法是向数组的元素插入数组, 而typescr...

  • 2018-04-22

    javascript基础 一.函数的arguments 伪数组:像数组,但不是数组 可以动态添加参数 二.函数的其...

  • 06-JavaScript数组和函数

    JavaScript数组 JavaScript中的数组可以存储不同类型的数据 JavaScript中的数组是引用类...

  • js数组方法大全

    JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: (二)使用数组字面量表示法: 数组的...

  • JavaScript数组

    javascript笔记(二) 数组 length 设置length会导致数组丢掉超长的数据,很危险,要小心。 以...

网友评论

    本文标题:javascript 数组(二)

    本文链接:https://www.haomeiwen.com/subject/qfflqqtx.html