16.javascript 数组的操作

Posted 2022-01-06 种太阳

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 = "<ul>";
for (i = 0; i < fLen; i++) 
     text += "<li>" + fruits[i] + "</li>";
 

　　第二种方法Array.forEach()

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

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;

function myFunction(value) 
  text += "<li>" + value + "</li>";
 

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 + "<br><br>" + citrus;
//结果：Orange,Lemon,Apple,Mango

　　两个参数时，表示从索引几开始裁剪，裁剪到索引几（不包括）

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
//结果：Orange,Lemon

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

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