zoukankan      html  css  js  c++  java
  • JS数组整理

    1. 检测数组的方法:

      1. instanceof【操作符】:

    var arr = [];
    console.log(arr instanceof Array);//true

        1. instanceof操作符的问题在于,它假定单一的全局执行环境。假如网页中包含多个框架,那就会存在两个以上的全局执行环境,也就意味着存在两个以上的Array构造函数。使用本方法就失灵了

      2. ec5新增了isArray();方法用来确定某个值到底是不是数组,忽略全局执行环境的问题

    2. 栈方法(push和pop)。栈是一种LIFO(last in first out)的数据结构,最新添加的最早删除

      1. push(),接受任意数量的参数,逐个添加到数组末尾

      2. pop(),从数组末尾弹出最后一项

    3. 队列方法(shift和unshift)。队列的访问规则是FIFO(first in first out)

      1. shift(),取得数组第一项

      2. unshift(),向数组头部添加

    4. 数组排序

      1. sort():

        1. 默认情况下sort()按照升序排列数组各项,底层方法是调用每个数组项的toString()方法,然后比较得到的字符串,即使数组中的每一项都是数字,sort()方法比较的也是字符串:

    var arr1 = [1,5, 8, 11 , 15];
    arr1.sort();
    console.log(arr1);    //[1, 11, 15, 5, 8]

        所以这个方法可以接受一个比较函数作为参数,以便指定哪个值位于哪个值的前面:

    var arr1 = [1,5, 8, 11 , 15];
    arr1.sort(function(a,b){return b-a;});
    console.log(arr1);    //[15, 11, 8, 5, 1]
    //比较函数中两参数相减,返回正值就交换位置,返回负值就不换

      2. reverse():鸡肋

    5. 数组操作方法:

      1. concat(),拼接串联数组。具体来说,该方法先创建当前数组的一个副本,然后将接受的参数添加到这个副本的的尾部,最后返回新创建的数组,原数组不变。

    var colors = ['red' , 'blue'  , 'black'];
    var newColors = colors.concat('yellow' , 'silver' , ['gloden'  ,'white' , 'purple']);
    
    console.log(colors);            //["red", "blue", "black"]
    console.log(newColors);      //["red", "blue", "black", "yellow", "silver", "gloden", "white", "purple"]

      2. slice():切出子数组。slice()方法接受一个或两个参数,即起始位置和结束位置(含头不含尾)。只有一个参数的情况下,返回从起始位置到最后的所有数组元素,不会影响原始数组。

    var bar = ['h' , 'e' ,  'l' , 'l' ,  'o' , 'w'  ,  'o'  , 'r'  , 'l'  , 'd'];
    var bar1 = bar.slice(5);
    console.log(bar1);    //["w", "o", "r", "l", "d"]
    var bar2 = bar.slice(0,5);
    console.log(bar2);    //["h", "e", "l", "l", "o"]

      3. splice():接合数组,全能的操作数组方法,改变原数组。最主要的的用途是向数组的中部插入元素,用法有3种:

        1. 删除指定位置的任意项:

    var bar = ['h' , 'e' ,  'l' , 'l' ,  'o' , 'w'  ,  'o'  , 'r'  , 'l'  , 'd'];
    var bar1 = bar.splice(5 ,5);    //从第5项开始删除,删5个
    console.log(bar1);    //["w", "o", "r", "l", "d"]
    console.log(bar);    // ['h' , 'e' ,  'l' , 'l' ,  'o']

        2. 插入:传3个以上的参数,第二个参数为0

    var bar = ['h' , 'e' ,  'l' , 'l' ,  'o' , 'w'  ,  'o'  , 'r'  , 'l'  , 'd'];
    var bar1 = bar.splice(5 ,  0  , 'xx' , 'oo');    //从第5项开始,删0个,然后插入内容
    console.log(bar1);    //[],删除0个,所以为空
    console.log(bar);    //["h", "e", "l", "l", "o", "xx", "oo", "w", "o", "r", "l", "d"]

        3. 替换:第二个参数不为0

    var bar = ['h' , 'e' ,  'l' , 'l' ,  'o' , 'w'  ,  'o'  , 'r'  , 'l'  , 'd'];
    var bar1 = bar.splice(5 ,  2  , 'xx' , 'oo');    //从第5项开始,删2个,然后插入内容
    console.log(bar1);    //['w',  'o'],删除的2个
    console.log(bar);    //["h", "e", "l", "l", "o", "xx", "oo",  "r", "l", "d"]

      4. join();最为常用的数组拼接字符串的方法

    var arr = ['h' , 'e' ,  'l' , 'l' ,  'o' , 'w'  ,  'o'  , 'r'  , 'l'  , 'd'];
    arr.join();//"h,e,l,l,o,w,o,r,l,d"  默认用逗号分隔符
    arr.join('')//"helloworld"    空分隔符
    arr.join('*')    //"h*e*l*l*o*w*o*r*l*d"

    6. 数组位置方法(两个),都接收两个参数:要查找的元素,和查找起点位置的下标。都返回查找的元素在数组中的位置下标,如果没找到,就返回-1

      1. indexof()

      2. lastIndexof()

    7. 数组迭代方法:ES5为数组定义了5个迭代方法,每个方法都接收两个参数:在每个元素上运行的函数、运行该函数的作用域对象[,可选]。函数接收三个参数:(value ,index , array)

      1. every():数组中的每一项运行函数,如果函数对每一项全都返回true,才返回true

      2. some():数组中的每一项运行函数,如果函数有任何一项返回true,就返回true

    //every()和some()方法类似
    var num = [1,2,5,6,7,5];
    num.every(
      function(value, index  , array){
        return value>=5;
        }  
    );    //false,不是每一个元素都大于等于5
    
    var num = [1,2,5,6,7,5];
    num.some(
      function(value, index  , array){
        return value>=5;
        }  
    );    //true,有一些元素大于等于5

      3. filter():数组中的每一项运行函数,返回的是函数过滤后返回true的元素组成的数组

    var num = [1,2,5,6,7,5];
    num.filter(
      function(value, index  , array){
        return value>=5;
        }  
    );    //[5, 6, 7, 5],把大于等于5的值过滤了出来
    //这个方法对查询符合某些条件的数组元素非常有用

      4. forEach():数组中的每一项运行函数,无返回值

    //forEach()只对数组的每个元素运行传入的函数,本质上与使用for循环迭代数组一个样
    var num = [1,2,5,6,7,5];
    num.forEach(
      function(value, index  , array){
        num[index] = value*5
        }  
    );   
    console.log(num);//[5, 10, 25, 30, 35, 25]

      5. map():数组中的每一项运行函数,返回每次函数调用的结果组成的数组

    //map()方法返回一个数组,这个数组的每个元素都是原数组中的元素执行函数之后产生的
    var num = [1,2,5,6,7,5];
    num.map(
      function(value, index  , array){
        return value*5
        }  
    );       //[5, 10, 25, 30, 35, 25]
    //注意与forEach()的区别

    8. 数组缩小方法reduce()和reduceRight(),都接收两个参数:在每个元素上运行的函数和运行该函数的作用域对象[,可选]。函数接收4个参数:(前一个值(prev) ,当前值 (cur),下标(index) , 数组对象(array)),第一次迭代发生在数组的第二个元素上,也就是说,第二元素的值为当前值,第一元素的值为前一个值,这个函数返回的任何值都会作为第一个参数自动传给下一项,第三个元素自动把值传给当前值(cur)……

    var num = [1,3,5,7,9];
    num.reduce(
      function(prev , cur , index , array){
            return prev*cur;
        }  
    );    //945
    //reduceRight()方法与此类似,只不过方向相反从最后一个元素开始

    至此,除了通用的.length和toString()等,数组的相关属性和方法基本就这些了,活学活用才是王道。

  • 相关阅读:
    如何在markdown隐藏代码块
    html基础
    驻留机制
    字典
    echarts简单使用
    selenium的基本操作
    Excel上传、下载、models 自定义字段、批量执行(可选)
    django之自定义标签(路径url反向解码)
    邮件自动生成发送用例报告
    前台获取后台保存的数据
  • 原文地址:https://www.cnblogs.com/chaosJS/p/5651515.html
Copyright © 2011-2022 走看看