共计 5360 个字符,预计需要花费 14 分钟才能阅读完成。
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() 取而代之。