16.javascript 数组的操作


1.通过索引号即下标访问数字元素

var cars = ["Saab", "Volvo", "BMW"];
cars[0];
//结果是:Saab

2.修改数组中的值,索引方式修改

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
//结果:cars = ["Opel", "Volvo", "BMW"];

3.直接输出完整数组

var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars; 
//结果:Audi,BMW,porsche

4.获取数组长度Array.length;

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits 的长度是 4

5.访问数组最后一个数组元素

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

6.遍历数组两种方法

  第一种方法for循环

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "
    "; for (i = 0; i < fLen; i++) { text += "
  • " + fruits[i] + "
  • "; }

  第二种方法Array.forEach()

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "
    "; fruits.forEach(myFunction); text += "
"; document.getElementById("demo").innerHTML = text; function myFunction(value) { text += "
  • " + value + "
  • "; }

    7.向数组结尾添加新元素Array.push();,方法返回新数组的长度

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)
    //结果:fruits = ["Banana", "Orange", "Apple", "Mango", "Lemon"];
    

    8.空数组中,通过下标方式可添加数组元素

    var person = [];
    person[0] = "Bill";
    person[1] = "Gates";
    person[2] = 62;
    var x = person.length;          // person.length 返回 3
    var y = person[0];              // person[0] 返回 "Bill"
    //结果:person=["Bill", "Gates", 62];
    

    9.如何判断一个变量是不是数组:Array.isnArray();

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    Array.isArray(fruits);    // 返回 true
    

      自己创建isArray()函数判断

    function isArray(x) {
        return x.constructor.toString().indexOf("Array") > -1;
    }
    

      假如对象由给定的构造器创建,则 instanceof 运算符返回 true:

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits instanceof Array     // 返回 true
    

    10.数组转字符串Array.toString();

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits.toString();
    //结果:Banana,Orange,Apple,Mango
    

    11.将所有的数组元素结合成为一个字符串Array.join(),可对元素与元素直接使用自定义连接符

    var fruits = ["Banana", "Orange","Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits.join(" * ");
    //结果:Banana * Orange * Apple * Mango
    

    12.删除数组中最后一个元素Array.pop();,返回值是被删除的那个元素

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = fruits.pop();              // 从 fruits 删除最后一个元素("Mango"),x的值是"Mango"
    

    13.删除数组中首个也就是第一个元素Array.shift();,返回值是被删除的那个元素

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = fruits.shift();            // 从 fruits 删除第一个元素 "Banana",x的值是"Banana"
    

    14.向数组开头添加新元素Array.unshift();,返回值是新数组的长度

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = fruits.unshift("Lemon");    // x值是 5
    

    15.使用delete运算符删除数组中的元素,不建议用,会使数组留下未定义的空洞

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    delete fruits[0];           // 把 fruits 中的首个元素改为 undefined
    

    16.splice()方法可自定义需要添加的元素,也可删除元素

      添加元素:

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.splice(2, 0, "Lemon", "Kiwi"); 

      第一个2表示开始位置

      第二个0表示需要删除多少个元素

      第三,第四表示需要插入的元素,可省略

      删除元素

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.splice(0, 1);        // 删除 fruits 中的第一个元素
    

    17.将A,B两个数组合并,甚至更多的数组合并,合并成一个新的数组A.concat(B,C,D)

    var myGirls = ["Cecilie", "Lone"];
    var myBoys = ["Emil", "Tobias", "Linus"];
    var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
    
    var arr1 = ["Cecilie", "Lone"];
    var arr2 = ["Emil", "Tobias", "Linus"];
    var arr3 = ["Robin", "Morgan"];
    var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起
    
    var arr1 = ["Cecilie", "Lone"];
    var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);
    

    18.使用slice()裁剪數組,返回裁剪后的新数组

      一個參數時(參數為數字),表示從几下标位置开始裁剪,直接裁剪到最后一个数组元素,  

    //从索引1的位置开始裁剪,一直到结尾
    var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(1);
    document.getElementById("demo").innerHTML = fruits + "

    " + citrus; //结果:Orange,Lemon,Apple,Mango

      两个参数时,表示从索引几开始裁剪,裁剪到索引几(不包括

    var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(1,3);
    document.getElementById("demo").innerHTML = fruits + "

    " + citrus; //结果:Orange,Lemon

    19.数组转换成字符串Array.toString();

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits.toString();
    //结果:Banana,Orange,Apple,Mango