乐趣区

js数组对象

1.js 中的最重要的类型就是对象
1. 对象是名 / 值对的集合,或字符串到值映射的集合

var book = {
   topic:"js";     // 属性 "topic" 的值是 "js"
   fat:true        // 属性 "fat" 的值是 true
};

2. 通过 ”.” 或 ”[]” 来访问对象属性

book.topic                   //"js"
book["fat"]                  // 另一种获取属性的方式
book.author = "Flanagan";    // 通过赋值创建一个新的属性
book.contents = {}           //{}是个空对象,它没有属性

3.js 同样支持数组(以数组为索引的列表)

primes[primes.length -1]    // 数组的最后一个元素
var empty = []              //[]是空数组,它具有 0 个元素
empty.length                // 输出为 0

4. 数组和对象都可以包含一个数组或对象

var points = [            // 具有俩个元素的数组
  {x: 0,y: 0},            // 每个元素都是一个对象
  {x: 1,y: 1}             
];
var data = [              // 一个包含俩个属性的对象
  trial1: [[1,2],[3,4]],  // 每一个属性都是数组
  trial2: [[2,3],[4,5]]   // 数组的元素也是数组
]

5.js 中 最常见的表达式写法:

3+2                          // 5  加法
3-2                          // 1  减法
3*2                          // 6  乘法
3/2                          // 1.5 除法
points[1].x - points[0].x    // 1 更复杂的操作数也能正常工作
"3"+"2"                      // 32  字符串链接
var count = 0;               // 定义一个变量
count += 2;                  // 自增 2:和 "count = count + 2;" 写法一样
count *= 3;                  // 自增 3:和 "count = count * 2;" 写法一样

6. 用二维数组做一个 9 * 9 表格

var table = new Array(10);                        // 表格有 10 行
for(var i=0;i<table.length;i++){table(i) = new Array(10);                     // 每行有 10 列
    for(var row=0;row<table.length;row++){for(var col=0;col<table.length;col++){table[row][col] = row*col;
        }
    }
} 

7. 使用多维数组来计算
var product = table5; //35

8.shift()删除首个数组元素,并把所有其他元素“位移”到更低的索引

var cars = ["jeep","bwm","benchi","vovor"];
cars.shift();
document.getElementById("demo").innerHTML = cars;   

shift() 方法返回被“位移出”的字符串:
<p id=”demo1″></p>
<p id=”demo2″></p>
<p id=”demo3″></p>
<script>
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“demo1”).innerHTML = fruits;
document.getElementById(“demo2”).innerHTML = fruits.shift();
document.getElementById(“demo3”).innerHTML = fruits;
</script>
demo1 : Banana,Orange,Apple,Mango
demo2 : Banana
demo3 : Orange,Apple,Mango

9.unshift() (在开头)向数组添加新元素,并“返回位移”旧元素
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“demo”).innerHTML = fruits;
function myFunction() {

 fruits.unshift("Lemon");
 document.getElementById("demo").innerHTML = fruits;

}

10. 既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除

<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"第一种水果是:" + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"第一种水果是:" + fruits[0];    

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之

11.splice() 方法可用于向数组添加新项:

<button onclick="myFunction()"> 试一试 </button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo1").innerHTML = "原数组:<br>" + fruits;
   function myFunction() {fruits.splice(2,0, "Lemon", "Kiwi");
      document.getElementById("demo2").innerHTML = "新数组:<br>" + fruits;
   }
</script>

第一个参数(2)定义了应添加新元素的位置(拼接)。
第二个参数(0)定义应删除多少元素。
其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组:

12.JavaScript 数组方法
12(1).js 方法 tostring() 把数组转换为数组值(逗号分隔)的字符串

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

(2)jion()方法也可以将所有数组元素结合为一个字符串
它的行为类似 tostring(),还可以规定分隔符

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

13.Popping 和 Pushing
Popping 和 Pushing 指的是:
从数组弹出项目,或向数组推入项目

Popping:
pop()方法从数组中删除最后一个元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.pop();              // 从 fruits 删除最后一个元素("Mango")document.getElementById("demo").innerHTML = fruits;
  结果:
      Banana,Orange,Apple

pop()方法返回“被弹出”的值

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

pushing:
push()方法(在数组结尾处)向数组添加一个新的元素

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.getElementById("demo").innerHTML = fruits;
 function myFunction() {fruits.push("Kiwi");
   document.getElementById("demo").innerHTML = fruits;
 }
 结果:   
     Banana,Orange,Orange,Mango,Kiwi

push()方法返回新数组的长度(新加一个数组并返回长度):

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.getElementById("demo1").innerHTML = fruits;    
 function myFunction() {document.getElementById("demo2").innerHTML = fruits.push("Lemon");
   document.getElementById("demo1").innerHTML = fruits;
 }
 结果:
      Banana,Orange,Orange,Mango,Kiwi
      5
      
      

位移元素
位移与弹出等同,但处理 首个元素 而不是最后一个
shift() 方法会删除首个数组元素,并把所有其他元素 ” 位移 ” 到更低的索引

   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   fruits.shift();            // 从 fruits 删除第一个元素 "Banana"
   document.getElementById("demo").innerHTML = fruits;
   结果: 
       Orange,Apple,Mango

shift()方法返回“被移除”的字符串(首个元素)

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

unshift()方法(在开头)向数组添加新元素,并 ” 返回位移 ” 旧元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits;
  function myFunction() {fruits.unshift("Lemon");
    document.getElementById("demo").innerHTML = fruits;
  }
  结果:Lemon,Banana,Orange,Apple,Mango

unshift()方法返回新数组的长度

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");
 结果:5

更改元素
通过使用它们的 索引号 来访问数组元素:
数组索引(下标)以 0 开始。[0] 是第一个数组元素,[1] 是第二个,[2] 是第三个 …

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Lemon";
document.getElementById("demo2").innerHTML = fruits;

结果:

   Banana,Orange,Apple,Mango
   Lemon,Orange,Apple,Mango

length 属性提供了向数组追加新元素的简易方法:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;    
function myFunction() {fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
结果:Banana,Orange,Apple,Mango,Lemon


删除元素
既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删 除:

<p id="demo1"></p>
<p id="demo2"></p>    
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"第一种水果是:" + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"第一种水果是:" + fruits[0];
</script>
结果:第一种水果是:Banana
    第一种水果是:undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

退出移动版