js数组

181 阅读4分钟

一. 创建方式

    1. 构造函数 

    var colors = new Array() 

    var colors = new Array(3)

    var colors = new Array("red", "blue", "yellow")

    也可以将new关键字去掉

    2. 字面量方式

    var colors = ['red', 'yellow', 'blue']

二. 属性

    1. length(可写

    var colors = ['red', 'yellow', 'blue']
    colors.length = 2    
    console.log('now' + colors) // ['red', 'yellow']

    colors.length = 4    
    console.log('now' + colors) // ['red', 'yellow', 'undefined']
三. 函数

    1. join: 把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的

    var colors1 = colors.join('!')
    console.log(colors1) // red!yellow!blue
    2. push: 向数组的末尾添加一个或更多元素,并返回新的长度。

    var colors = ['red', 'yellow', 'blue']    
    console.log(colors.push('white')) // 4

    3. pop: 删除并返回数组的最后一个元素

    colors.pop() // ['red', 'yellow','blue']

    4. unshift: 向数组的开头添加一个或更多元素,并返回新的长度。

    colors.unshift('white')    
    console.log(colors) // white red yellow blue

    5. shift: 删除并返回数组的第一个元素

    colors.shift() // red yellow blue

    6. revease: 颠倒数组中元素的顺序。

    colors.reverse()    
    console.log(colors) // blue yellow red

    7. sort: 对数组的元素进行排序(默认按照字符编码顺序)

    colors.sort()    
    console.log(colors) // ["blue", "red", "yellow"]    
    var colors = [1, 15, 2, 159, 258 ,199, 5]     
    colors.sort()    
    console.log(colors) // [1, 15, 159, 199, 2, 258, 5]

     数组元素自动转成字符串

     8. contact: 连接两个或多个数组(不改变原数组

    var city = ['bj','sh','gz','sz']    
    var newCity = city.concat('ln',[1,2])    
    console.log(city) // ["bj", "sh", "gz", "sz"]    
    console.log(newCity) // ["bj", "sh", "gz", "sz", "ln", 1, 2]

     9. slice: 从已有的数组中返回选定的元素(不改变原数组

    var city = ['bj','sh','gz','sz']    
    var newCity = city.slice(1,3)
    var newCity1 = city.slice(1)    
    console.log(city) // ["bj", "sh", "gz", "sz"]    
    console.log(newCity) // ["sh", "gz"]    
    console.log(newCity1) // ["sh", "gz", "sz"]

    10. splice(index,howmany,item1,...itemX): 向/从数组添加/删除项目,返回被删除的项目。

    var city = ['bj','sh','gz','sz']    
    city.splice(1,0,'ln')    
    console.log(city) //增 ["bj", "ln", "sh", "gz", "sz"]
    city.splice(2,2)
    console.log(city) //删 ["bj", "ln", "sz"]
    city.splice(0,1,'jl')
    console.log(city) //替 ["jl", "ln", "sz"]

    11. indexOf(searchEle,[,fromIndex=0]) 返回在数组中可以找到一个给定元素的第一个索              引,如果不存在,则返回-1

    var city = ['bj','ln','sh','gz','ln','sz']
    console.log(city.indexOf('ln')) // 1
    console.log(city.indexOf('ln',2)) // 4
    var indices = [];
    var array = ['a', 'b', 'a', 'c', 'a', 'd'];
    var element = 'a';
    var idx = array.indexOf(element);
    while (idx != -1) {
      indices.push(idx);
      idx = array.indexOf(element, idx + 1);
    }
    console.log(indices); //查找一共多少个 [0, 2, 4]
   // 判断有没有这个值,没有添加
   function updateVegetablesCollection (veggies, veggie) {
        if (veggies.indexOf(veggie) === -1) {
            veggies.push(veggie);
            console.log('New is : ' + veggies);
        } else if (veggies.indexOf(veggie) > -1) {
            console.log(veggie + ' already exists');
        }
    }
    var veggies = ['bj', 'sh', 'gz', 'sz'];
    updateVegetablesCollection(veggies, 'sp'); // New is : bj,sh,gz,sz,sp
    updateVegetablesCollection(veggies, 'sp'); // sp already exists

    fromIndex:从何处开始选取,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

    12. lastIndexOf(seearchEle,[,fromIndex=arr.length-1])

   var array = [2, 5, 9, 2];
   var index = array.lastIndexOf(2);// 3
   index = array.lastIndexOf(7);// -1
   index = array.lastIndexOf(2, 3);// 3
   index = array.lastIndexOf(2, 2);// 0
   index = array.lastIndexOf(2, -2);// 0
   index = array.lastIndexOf(2, -1);// 3

    indexOf()和lastIndexOf():支持的浏览器有IE9+,FireFox2+,Safari3+,Opera9.5+,          Chrome

    13. 迭代方法

        every,some, foreach, filter, map,其中foreach没有返回值,支持的浏览器IE9+,              FireFox2+,Safari3+,Opera9.5+,Chrome

    var number = [1,2,3,4,5,4,3,2,1]
    var everyR = number.every(function(item,index,array){
        return (item > 2)
    })
    console.log(everyR) // false
    var someR = number.some(function(item, index, array){
        return (item > 2)
    })
    console.log(someR) // true
    var filterR = number.filter(function(item,index,array){
        return (item > 2)
    })
    console.log(filterR) // [3, 4, 5, 4, 3]
    var mapR = number.map(function(item, index, array){
        return item * 2
    })
    console.log(mapR) // [2, 4, 6, 8, 10, 8, 6, 4, 2]
    var foreachR = []
    number.forEach(function(item,index,array){
        // 没有返回值
        foreachR.push(item * 2)
    })
    console.log(foreachR) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

        迭代器实现

    Object.defineProperty(myObject,Symbol.iterator,{
    enumerable: false,
    writable: false,
    configurable: true,
    value: function(){
      var o = this
      var idx = 0
      var keys = Object.keys(o)
      console.log('keys' + keys)
      return {
        next:function(){
          return {
            value:o[keys[idx++]],
            next: idx > keys.length
          }
        }
      }
    }
  })
  var it = myObject[Symbol.iterator]()
  console.log(it.next())
  console.log(it.next())
  console.log(it.next())

    14. 缩小方法

        reduce()、reduceRight(),迭代数组的所有项,并构建一个返回值,支持的浏览器                IE9+,FireFox3+,Safari4+,Opera10.5和Chrome

        14.1 求和

    var arr = [1,2,3,4]
    var arr1 = arr.reduce(function(pre,cur,curIndex,array){
        console.log(pre) // 10 11 13 16
        return pre + cur
    },10)
    console.log('result' + arr1) // 20

        14.2 找最大值

    var arr1 = arr.reduce(function(pre,cur,curIndex,array){
        return pre > cur ? pre : cur
    })
    console.log(arr1) // 4

        14.3 [{name:'bj'},{name:'sh'},{name:'ln'}]输出bj,sh&ln

    var arr = [{name:'bj'},{name:'sh'},{name:'ln'}]
    function carryBrick(arr){
        return arr.reduce(function(pre,cur,curIndex,array){
            console.log('index' + curIndex + 'pre' + pre.name + 'cur' + cur.name)
            if(curIndex === 0){
                return cur.name
            }else if(curIndex === array.length - 1){
                return pre + '&' + cur.name
            } else {
                return pre + ',' + cur.name
            }
        },'') // 这里要注意如果不传值,遍历index从1开始
    }    console.log(carryBrick(arr))

        14.4 reduceRight

    var arr = [{name:'bj'},{name:'sh'},{name:'ln'}]
    function carryBrick(arr){
        return arr.reduceRight(function(pre,cur,curIndex,array){
            console.log('curIndex' + curIndex) // 2 1 0
            if(curIndex === 0){
                return cur.name
            }else if(curIndex === array.length - 1){
                return pre + '&' + cur.name
            } else {
                return pre + ',' + cur.name
            }
        },'')
    }
    console.log(carryBrick(arr))

        14.5 for循环和reduce的耗时比较

    var arr = [1,2,3,4,5,6]; // reduce
    console.time("ruduce");
     Array.prototype.ruduceSum = function (){
         for (var i = 0; i < 10000; i++) {
             return this.reduce (function (preValue, curValue) {
                 return preValue + curValue;
             });
         }
     }
     arr.ruduceSum();
     console.log('最终的值:' + arr.ruduceSum()); // 21
     console.timeEnd("ruduce"); // 4.54ms

    var arr = [1,2,3,4,5,6]; // for循环
     console.time("forLoop");
     Array.prototype.forLoop = function (){
         for (var i = 0; i < 10000; i++) {
             var sumResult = 0;
            for (var j = 0; j < this.length; j++) {
                 sumResult += parseInt(this[j]);
             }
         }
         return sumResult;
     }
     arr.forLoop();
     console.log('最终的值:' + arr.forLoop()); // 21
     console.timeEnd("forLoop"); // 22.69ms

四. 实例

    1. 字符串反转abcde --> edcba()

    var str = 'abcde'
    var str1 = str.split("")
    str1.reverse()
    var restr = str1.join("")
    console.log(restr)


参考

www.w3school.com.cn/jsref/jsref…

developer.mozilla.org/zh-CN/docs/…

aotu.io/notes/2016/…