zoukankan      html  css  js  c++  java
  • JS数组攻略

    本文参考了部分书籍和博客以及个人感悟,谢谢观看!

    定义:数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引。

    数组属性

    length
    length属性表示数组的长度,即其中元素的个数。
    JavaScript数组的length属性是可变的,当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。

    prototype
    返回对象类型原型的引用。prototype 属性是 object 共有的。
    一般用来给数组实例添加方法。

    constructor
    表示创建对象的函数。
    说明:constructor 属性是所有具有 prototype 的对象的成员。constructor 属性保存了对构造特定对象实例的函数的引用。

    基本操作

    一、创建数组

    1. Array()构造函数。 
      var arr = [];//创建空数组
      var arr = [1,"{1,2}","string"];//创建一个数组并赋值
    2. 数组字面量表示法。
      var arr = new Array(); //创建一个空数组 []
      
    var arr = new Array(5); //创建一个length为5的数组 [undefined, undefined, undefined, undefined, undefined]
      var arr = new Array(1,2,3,4,5); //创建数组并赋值 [1,2,3,4,5]
    3. Array.of()方法。
      var arr = Array.of(7); // 创建数组并赋值 [7]   var arr = Array.of(1, 2, 3); // 创建数组并赋值 [1, 2, 3]

     二、检测数组

    //判断一个对象是不是数组
    var arr = [1,8,9];
    
    方法一  instanceof是Java、php的一个二元操作符(运算符),和==,>,<是同一类东西,它的作用是判断其左边对象是否为其右边类的实例,返回boolean类型的数据
     
      if(arr instanceof Array){}
    
     方法二   prototype 属性使您有能力向对象添加属性和方法
    
      if(Object.prototype.toString.call(arr) == '[object Array]')}{}
    方法三 这种是最常用的方法

      if(Array.isArray(arr)){} 方法四 constructor 属性返回对创建此对象的数组函数的引用,Construction代表类中的一个构造方法,这个方法封装了类的定义   if(arr.constructor == Array){}

    数组方法

    所有对象都有toString()  toLocaleString()  valueOf()  方法,数组也对其进行了重写。

    ① isArray()

    Array.isArray(obj) 检测对象是否 Array(数组) ,是则返回true,否则为false。

    ② from()

    Array.from(arrayLike, mapFn, thisArg)
    该方法从一个类似数组或可迭代对象创建一个新的数组实例。参数 arrayLike 是想要转换成真实数组的类数组对象或可遍历对象。mapFn是可选参数,如果指定了该参数,则最后生成的数组会经过该函数的加工处理后再返回。thisArg是可选参数,为执行 mapFn 函数时 this的值。

    所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组。见下面的小例子:

    var  arrayLike = {
        0: 'a',
        1: 'b',
        2: 'c',
        length: 3
     }
    var  arrayLike2 = {length: 3}
    var  str = 'abcd'
    
    var  newArray = Array.from(arrayLike) //['a', 'b', 'c']
    var  newArray2 = Array.from(arrayLike2) // [undefined, undefined, undefined]
    var  newArray3 = Array.from(str) // ['a', 'b', 'c', 'd']
    console.log(newArray);
    console.log(newArray2);
    console.log(newArray3);

    ③ of();

    Array.of(item,.....) 该方法用于创建数组实例。该方法用于替代 Array() 或 new Array()。Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个包含 7 个 undefined 元素的数组。
    eg:
    var a1 = Array(7);
    var a2 = Array(1,2,12);
    var a3 = Array.of(7);
    var a4 =Array.of(1,2,12);
    console.log(a1);
    console.log(a2);
    console.log(a3);
    console.log(a4);

    数组实例方法

    数组的转换

    ① 数组转换成字符串 Array.join(separator);.

    把数组转换成字符串,先把数组中的每个元素转换成字符串,然后再用 separator 分隔符把它们链接在一起,separator 分隔符默认是逗号 “,”,要想做到无间隔链接,可以使用空字符串作为 separator:见下面的例子:

    var arr = [1,2,3,4,5]
    //默认符号 ","
    var a1 = arr.join();//1,2,3,4,5
    //自定义符号“ | ”
    var a2=arr.join('|') //"1|2|3|4|5"
    // 没有符号,用空字符串
    var a3=arr.join("") //12345
    console.log(a1);
    console.log(a2);
    console.log(a3);

    ② 字符串转换成数组 a.split();

    var arr = [1,2,3,4,5]
    //arr 转换成字符串并赋值给 a
    var a = arr.join();
    // 再把 a 转换成 数组,并用“ , ”隔开
    var b = a.split(",");
    console.log(b);

    栈方法 (后进先出 push pop )    数组最后一项的索引是length-1.因此下一个新项的位置是length

     

    Array.push(item......)  接收任意数量的参数,逐个添加到数组末尾,并返回修改后的长度。

     

    var arr = ["Orange","Apple"];
    var a = arr.push("banana","Mango");
    console.log(a);//返回数值长度为  4
    Array.pop() 移除数组末尾最后一项,减少length值,并返回移除的项
    var arr = ["Orange","Apple"];
    var a = arr.pop();
    console.log(a);// 移除最后一个元素 返回最后一个值Apple
    可以像删除对象属性一样使用 delete 运算符来删除数组元素。
    对一个数组元素使用 delete 不会修改数组的 length 属性,也不会将元素从高索引处移下来填充已删除属性留下的空白。
    a = [1,2,3]; 
    delete a[1];   // a在索引1的位置不再有元素
    1 in a         // => false: 数组索引1并未在数组中定义
    a.length       // => 3: delete操作并不影响数组长度

    队列方法 (先进先出 unshift shift)

    Array.unshift(item...);将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度。
    var arr = ["Orange","Apple"];
    var a = arr.unshift("banana");
    console.log(a);//   返回新数组的长度为  3
    Array.shifit();移除最前一个元素,减少length值,返回该元素值,数组中元素自动前移.如果这个数组是空的,它会返回undefined。shift 通常比 pop 慢的多。
    var arr = ["Orange","Apple","banana"];
    var arr1 = [];
    var a1 = arr1.shift();
    var a2 = arr.shift();
    console.log(a1);//  空数组返回undefined
    console.log(a2);//   移除第一个元素,并返回该元素  Orange

    重排序方法(reverse, sort)

    1、Array.reverse() 颠倒数组的顺序

    var arr = ["Orange","Apple","banana"];
    var a = arr.reverse();
    console.log(a); //(3) ["banana", "Apple", "Orange"]

    2、Array.sort() 给数组排序, 默认升序。 sort 默认会将数组内容视为字符串来排序,所以对数字排序时默认的排序规则会错的离谱,看下面的例子是怎么错的:

    var arr = [2,4,10,6,8,20];
    var a = arr.sort();
    console.log(a); 
    //(6) [10, 2, 20, 4, 6, 8]

    解决这种按照字符串来排序的方法就是给sort传入一个比较函数作为参数,进行自定义排序

     1、 比较函数接收两个参数,如果第一个参数位于第二个参数之前返回一个负数,相等为0,第一个参数位于第二个之后返回一个正数。

    从小到大排序(大到小顺序相反)
    function campare(value1,value2){
    if(value1<value2){
      return -1;
    }else if(value1>value2){
      return 1;
    }else{
      return 0;
      }
    }
    arr.sort(campare)
    //(6) [2, 4, 6, 8, 10, 20]

    2、排序对象是数值类型或者value of()方法会返回数值类型的对象类型可以采取下面方法

    function campare(val1,val2){
        return val1-val2;
    }
    arr.sort(campare)
    //(6) [2, 4, 6, 8, 10, 20]
    var arr = [2,4,10,6,8,20];
    var a = arr.sort(function(a,b){
        return a-b;
    });
    console.log(a);

    操作方法 ( concat, slice, splice, copyWithin, fill )

    Array.concat(arr);该方法产生一份 arr的潜复制,并将多个数组(也可以是字符串,或者是数组和字符串的混合)附加在其后连接为一个数组,返回连接好的新的数组。
    var a = [1,2,3];
    var b = ["string"];
    var arr = a.concat(b);
    console.log(arr);
    //(4) [1, 2, 3, "string"]
    Array.slice(start,end) 截取数组 ,如果没有 end ,则输出 start
    之后的所有元素,这里遵循数学上的思想(左闭右开),意思就是不包括 end --------[ )   截取end-start个元素
    var a = [1,2,3];
    var b = ["string"];
    var arr = a.concat(b);
    var arr1 = arr.slice(1, 3);
    console.log(arr1);
    // (2) [2, 3]
    Array.splice(start,deleteCount,item...),该方法从 数组 中移除一个或多个元素,并将新的 item插入至移除元素的开始位置, 参数 start 是移除元素的开始位置,deleteCount 是要移除的元素的个数,item是要被插入的元素。它返回一个包含被移除元素的数组。

    ① 添加新的元素

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
        //在第三个元素的位置插入新的元素
        fruits.splice(2,0,"Lemon","Kiwi");
        console.log(fruits);
    //(6) ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

    ② 删除某个元素并添加新的元素

     var fruits = ["Banana", "Orange", "Apple", "Mango"];
       //先移除从第二个位置开始后面的两个元素,并把新的元素添加到第二个位置
        fruits.splice(1,2,"Lemon")
        console.log(fruits);
    // ["Banana", "Lemon", "Mango"]
    Array.copyWithin(target,start,end) 
    target必须有的,复制到指定目标的索引位置(开始替换数据的位置),start可选,元素复制的起始位置,end 停止复制的索引位置,默认为 Array.length 返回值是数组
    var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
        //复制数组的前面两个元素到第三和第四个位置上,这里也遵循左闭右开的思想,也就是 strat=0,end=2 这样理解  [0,2)
          fruits.copyWithin(2, 0, 2);
            console.log(fruits);
    //(6) ["Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya"]
    
    
    Array.fill(value,start,end) 
    fill()方法用于将一个固定值替换数组的元素,value是必选的,start可选,开始填充的位置,end可选,表示停止填充位置(默认为Array.length),返回的是数组
    var  a = [1,2,3,4,6];
       console.log(a.fill(5,2,4) );
    //[1, 2, 5, 5, 6]

    位置方法 (indexOf, lastIndexOf, includes)

    Array.indexOf(item,start)
    item是必须要查找的元素,start 可选,规定在字符串中开始检索的位置,合法取值为 0 到 array.length-1 ,如果没有这个值,则从首字符开始查找,返回值为Number
    var arr = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
    var a =  arr.indexOf("Orange");
     console.log(a);//返回值为  1
    //1
    Array.lastIndexOf(item,start)
    和indexOf 类似 唯一区别就是他是倒着数,strat的默认值为 array.length-1 ,注意该方
    法在比较查找项与数组中每一项时,会使用全等操作符(===),也就是要求查找的项必须严格相等
       var arr = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
            var a =  arr.lastIndexOf("Kiwi");
             console.log(a);//返回值为  4
    // 4
    Array.includes(searchElement, fromIndex)
    includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false. 
    fromIndex可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length +fromIndex 的索引开始搜索。默认为 0。
     var  arr =  ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
     var  a = arr.includes("Apple",-2);//如果为fromIndex为负值,则数组的总长度  arr.length + fromIndex   就为当前我们要从这个位置开始检索的位置
    console.log(a);//   返回  false

    迭代方法 (every, some, filter, forEach, map, find, findIndex, entries, keys, values)

    Array.every(function(currentValue,index,arr), thisValue)
    这个方法用于检索数组中所有的元素是否满足某个条件,若满足,则返回true ,剩余元素不用继续检测,否则为false
               var  arr = [18,16,17,20];
                var a = arr.every(function(item){
                    return  item > 18;
                });
                console.log(a);//返回false
    Array.some(function(currentValue,index,arr), thisValue)
    这个方法用于检索数组中的元素是否满足某个条件,若有一个满足,则返回true ,剩余元素不用继续检测,都不满足返回false
               var  arr = [18,16,17,20];
                var a = arr.some(function(item){
                    return  item > 18;
                });
                console.log(a);//返回 true
    Array.filter(function(currentValue,index,arr), thisValue)
    对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组
               var  arr = [18,16,17,20];
                var a = arr.filter(function(item){
                    return  item > 17;
                });
                console.log(a);//返回 一个检索过后的新数组
    Array.forEach(function(currentValue, index, arr), thisValue)

    对数组中的每一项运行给定函数,这个方法的返回值为undefined;

    array.map(function(currentValue,index,arr), thisValue)
    对数组中的每一项运行给定函数,返回每次函数调用组成的数组
               var  arr = [4,16,25,36];
                var a = arr.map(function(item){
                    return  Math.sqrt(item);
                });
                console.log(a);//返回数组元素的平方根
    Array.find(function(currentValue, index, arr),thisValue)
    该方法对数组所有成员依次执行函数,直到找出第一个返回值为 true 的成员,然后返回该成员。如果没有符合条件的成员,则返回 undefined
               var  arr = [4,16,25,36];
                var a = arr.find(function(item){
                    return  item == 25;
                });
                console.log(a);//返回查找到的该成员  25 
    Array.findIndex(function(currentValue, index, arr), thisValue)
    该方法与 Arr.find() 类似,对数组中的成员依次执行 函数,直至找到第一个返回值为 true 的成员,然后返回该成员的索引。如果没有符合条件的成员,则返回 -1
               var  arr = [4,16,25,36];
                var a = arr.findIndex(function(item){
                    return  item == 25;
                });
                console.log(a);//返回查找到的该成员的索引值  2
                
    Array.entries()

    Array.keys()

    Array.values()

    这三个方法都返回一个新的Array Iterator对象,可以用for...of循环进行遍历,区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历

    for...in循环是为了遍历对象而设计的,并不适合遍历数组,切记!切记!切记!重要的事情说三遍!!!

    归并方法(reduce, reduceRight)

    Array.reduce(function(total, currentValue, currentIndex, arr),
    initialValue)
    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
                var  arr = [12,20,10];
                var a = arr.reduce(function(total,item){
                    return  total+item;
                });
                console.log(a);//返回和的结果为  42
    reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight()
    从数组的末尾向前将数组中的数组项做累加
     
                var  arr = [12,20,10];
                var a = arr.reduceRight(function(total,item){
                    return  total+item;
                });
                console.log(a);//返回和的结果为  42

     数组去重方法:

    1.

    2.

    3.

    4.


  • 相关阅读:
    wex5 实战 框架拓展之2 事件派发与data刷新
    wex5 实战 框架拓展之1 公共data组件(Data)
    wex5 实战 HeidiSQL 导入Excel数据
    wex5 实战 手指触屏插件 hammer的集成与优劣
    wex5 实战 登陆帐号更换与用户id一致性
    wex5 实战 用户点评与提交设计技巧
    wex5 实战 省市县三级联动与地址薄同步
    wex5 实战 wex5与js的组件关系与执行顺序(父子与先后)
    wex5 实战 单页模式下的多页面数据同步
    [BZOJ]4237: 稻草人
  • 原文地址:https://www.cnblogs.com/jeffjoy/p/9630656.html
Copyright © 2011-2022 走看看