zoukankan      html  css  js  c++  java
  • js数组对象

    数组

    有序的数据的集合。

    创建数组 

    1) 字面量表达式

     var arr = [1,2,3,,,6] 

    字面量表达式中用“,”省略的数组元素是存在的,每一个省略的元素都占了一个长度,但是它们的值为undefined。即是说,arr的长度为6,arr[3]和arr[4]的值为undefined。

    字面量表达式中不一定全为常量,也可以是任意的变量或变量表达式:

     var num = 1 

     var arr = [num+1,num+2,num+3] 

    字面量表达式中的元素的组合可以是任意类型:

     var arr = [1,”haha”,true,[1,2,3],{name:”yatou”}] 

    2) new Array()调用

    Array是JavaScript的一个内置对象,使用new关键字新建一个数组,如果没有任何参数,效果等同于 var arr = [] ,即新创建了一个空数组。

    当如 var arr = new Array(3) 所示定义,括号里有且只有一个数字型的参数时,这个参数的值代表新创建的数组的长度,即先分配了一个长度为3的数组空间,但里面的元素还未定义;如果括号里的参数有多个参数或者有一个非数字型的参数,那么这些参数就代表新数组对应的各个元素。

    var arr = new Array(3); // [undefined,undefined,undefined]  // arr.length=3
    var arr = new Array(1,2,true,"2");  // [1, 2, true, "2"]
    var arr = new Array(“2”);  // [“2”]

    * 稀疏数组:形如[1,,,2,,2] 的数组,及数组中存在被省略的元素的数组。

    稀疏数组里被省略赋值的元素的值为undefined。

    数组的读与写

      数组是对象的特殊形式。

      所以数组元素的访问与赋值跟对象是相似的,只不过数组里的属性是字符串类型的数字(下标),访问数组元素时必须用数组名+[]来调用:arr[“2”],同样的,[]内部的参数是可以转换为数字型的数值,这里的”2”可以转换为2,但如果是arr[“hello”],结果显示undefined。

      数组元素的赋值也是通过赋值运算符“=”来实现的,也就是对数组进行“写”的操作:

       arr[1] = 2; arr[2] = 3; 

      特殊的是,当方括号[]里面的下标值是小于232的非负整数时,该数组会自动维护其length属性,即使说,当var arr = [1,2],此时arr.length = 2,然后给一个不存在的索引项赋值arr[4] = 5,那么此时的arr.length = 5。

    数组长度

       console.log(arr.length) //结果为4 

      数组长度可以通过 arr.length = 长度值 来改变,当数组长度大于定义的数组元素的个数时,多出的长度对应的数组元素的数据类型为undefined
      一般情况下,数组的长度length的值是大于数组的最大索引值i的,且length = i+1。

    数组的length属性可以被重新赋值,且新的length值产生后,数组中那些索引值大于length-1的数组元素都会被删除掉:

    var arr = [1,2,3,4,5];  // arr.length=5
    arr.length = 3;  // [1,2,3]

    也可以利用length来清空数组:

     arr.length = 0 // [] 

    在ECMAScript 5 中,可以使用Object.defineProperty() 方法把数组的length属性的读写性改为只读:

     Object.defineProperty(arr, “length”, {writable: false}); 

    在这之后再重新给length赋值并不会报错,但是实际上的length也不会被修改(假设原本的arr.length = 5):

    arr.length = 3;  // 不会报错
    arr.length  // 结果显示5,上一行代码不起作用

    数组的方法(es3)

    push() 

    往数组的 末尾 添加数组元素,可添加多个,返回值为改变后的数组长度,会改变原数组

    var arr1 = [1,2];
    arr1.push(3,4); // 返回4
    arr1 // [1,2,3,4]

    pop()

      删除 末尾 数组元素,无参,返回值为被弹出的元素,会改变原数组
    var arr2 = [1,2,3,4];
    arr2.pop(); // 返回arr2末尾的元素4
    arr2 // [1,2,3]

    unshift()

      往数组的 开头 添加数组元素,可添加多个,返回值为改变后的数组长度,会改变原数组
    var arr3 = [1,2];
    arr3.unshift(3,4); // 返回新的长度4
    arr3 // [3,4,1,2]

      数组的unshift方法有一点要注意:当插入的元素为多个时,该方法的操作是一次性插入元素。即是说,既然是插入到数组最开头,那么按理说上面的代码操作结果应该是arr3的值为[4,3,1,2],但实际上却是[3,4,1,2],说明unshift方法是吧(3,4)作为一个整体一次性插入到了原数组开头,而不是一个一个地做插入操作。

    shift()

      删除 开头 数组元素,无参,返回值为被弹出的元素,会改变原数组
    var arr4=[1,2,3,4];
    arr4.shift();  // 返回原数组的第一个元素1
    arr4  // [2,3,4]

      数组的push和pop方法多用来进行入栈和弾栈操作,即把数组当做栈来使用

    splice()

      返回一个包含已删除项的数组
      1. 当只有一个参数时,表示从下标为该参数值的位置开始依次删除元素
        var arr = [1,2,3,4]
        arr.splice(2);  // 从下标为2的位置开始删,直到最后一个,返回由被删除项组成的数组[3,4]
        console.log(arr)    // [1,2]
         
      2. 当有两个参数时,表示从下标为参数1 的位置开始删除 参数2的值 代表的元素个数
        var arr = [1,2,3,4]
        arr.splice(1,2)    // 从下标为1的位置开始删除2个元素,返回[2,3]
        console.log(arr)    // [1,4]
      3. 当有三个及三个以上的参数时,表示替换元素,第二个参数为0时,表示添加元素。例如:
        1 var arr = [1,2,3,4]
        2 arr.splice(1,2,5,6) //从下标为1的位置,替换2个元素,返回被替换的元素组成的数组[2,3]
        3 console.log(arr)    //结果arr里有 1 5 6 4
        1 arr.splice(1,0,5) //从下标为1的位置,添加1个元素5,返回[]
        2 console.log(arr)    //结果arr里有 1 5 2 3 4

      添加元素时,splice方法返回一个空数组,因为没有删除任何元素

      替换元素时,splice方法返回被替换下来的元素组成的数组;如果新的元素个数大于被替换的元素,那么splice方法会继续在数组之后添加多出的元素

    var arr = [1,2,3,4,5]
    arr.splice(3,2,1,2,3)    // 从第三个位置开始替换2个元素,把4,5替换为1,2,然后多出的3添加到数组后面,返回被替换的元素[4,5]
    console.log(arr)    // [1,2,3,1,2,3]

    concat

      连接数组,但不会改变原数组,返回连接之后的新数组
    1 var arr1 = [1,2,3]
    2 var arr2 = [4,5,6]
    3 var arr3 = arr1.concat(arr2)
    4 console.log(arr3) //结果arr3里有 1 2 3 4 5 6

    join

      将数组元素结合为一个字符串,而且可以通过分隔符来实现,不会改变原数组,返回变化过后的新数组
    var arr=[ 'hello', 'world', 'haha']
    var arr2=arr.join()    //'hello', " world', ' haha
    var arr2=arr.join('')  //helloworldhaha
    var arr2=arr.join('-')    //hello-world-haha 
    console.log(arr2);

    toString

      将数组元素转换为一个字符串。 所有 JavaScript 对象都拥有 toString() 方法。针对数组,这里的toString方法是将数组的每个元素都变成字符串(不包括方括号),然后用逗号分隔并以字符串列表的形式返回,不会改变原数组
    var arr = [1,2,3,4]
    arr.toString()  // "1,2,3,4"
    var arr1 = [1,2,3,[4,[5,6]]
    arr1.toString()  // "1,2,3,4,5,6"

    slice

      截取数组的部分元素并返回数组,但不会改变原数组。
      2个参数时,表示从下标为 参数1 的位置开始截取,到 下标为 参数2 的位置停止截取,但不包括下标为 参数2 的位置
    var arr = [1,2,3,4]
    var arr2 = arr.slice(1,3)
    console.log(arr2)   //结果arr2 中有 2 3
        //实现浅拷贝
        var arr = [1,2,3,4]
        var arr2 = arr.slice()
        arr2[3] = 5
        console.log(arr,arr2)
        //结果arr里依旧是 1 2 3 4,arr2里是 1 2 3 5

     如果是多维数组,slice并不能拷贝一层以上的数组,所以会影响原数组

    当参数中含有负数时,表示截取倒数的第几个元素到某个元素开的一个片段
    var arr = [1,2,3,4]
    arr.slice(-1,-3)  // [3,4]

    sort

      数组排序,返回的是排序后的数组,会改变原数组
      如果sort没有参数,那么默认是以字母表顺序从小到大排序  
    var arr = ["banana", "mango" ,"cherry", "apple"]
    arr.sort();  // ["apple","banana" ,"cherry", "mango" ]

    当数组元素是数字时,并且sort无参时,sort方法会把这些数字转换成字符串类型,然后通过字符串编码的顺序从小到大排序

    var arr1 = [1,2,11,123,21,27,98,200,3];
    arr1.sort()  // [1, 11, 123, 2, 200, 21, 27, 3, 98]

    先比较数组元素的第一个字符,按“0”到“9”排序,再比较第二个字符,按“0”到“9”排序,...以此类推,最后得到结果

    [1, 11, 123, 2, 200, 21, 27, 3, 98],所以如果数组元素是0-9以内的数字,那么可以直接使用无参的sort进行排序
            若要按照数字大小排序,可以通过比值函数来实现,即在sort方法内部传一个函数参数,sort方法的参数必须是一个有返回值的函数,并且该函数要有两个比较的参数,代表数组中相邻的两个数组元素
    var arr1 = [1,2,11,123,21,27,98,200,3];
    arr1.sort((a,b) => {
        if(a<b){
            return -1;  // 如果前面的元素小于后面的元素,就返回一个负值
        }else if(a>b){
            return 1;  // 如果前面的元素大于后面的元素,就返回一个正值
        }else{
            return 0 // 如果前面的元素与后面的元素相等,返回0
        }
    })  // [1, 2, 3, 11, 21, 27, 98, 123, 200]   

    reverse

    数组反转,也就是颠倒数组中的元素的顺序。返回倒序后的数组,改变原数组。

    var arr1 = [1,2,3,4,5];
    arr1.reverse()  // [5, 4, 3, 2, 1]
  • 相关阅读:
    WebView与 JS 交互方式
    ES6常用知识点
    Flash Builder 破解与开发环境配置
    如何修改默认浏览器
    基本数据类型和常用内建对象
    VS 2010 使用技巧
    javascript之事件驱动编程的几个基本概念
    javascript笔记之DHTML基础
    浏览器对象模型
    开发心得记录
  • 原文地址:https://www.cnblogs.com/lindang/p/13461060.html
Copyright © 2011-2022 走看看