12、數字
常規用法和java的用法相似,就不再做詳細的記錄,
JavaScript 數字
以下只記錄特殊用法:
12.1 數字字符串運算
- 在所有數字運算中,
JavaScript
會嘗試將字符串轉換為數字:
var x = "100";
var y = "10";
var z = x / y; // z 將是 10
var x = "100";
var y = "10";
var z = x - y; // z 將是 90
var x = "100";
var y = "10";
var z = x + y; // z 不會是 110(而是 10010)
var x = 100 / "10"; // x 將是 10
12.2 NaN
- 非數值(Not a Number)
NaN
屬于JavaScript
保留詞,指示某個數不是合法數。
var x = 100 / "Apple"; // x 將是 NaN(Not a Number)
- 可使用全局 JavaScript 函數 isNaN() 來確定某個值是否是數:
var x = 100 / "Apple";
isNaN(x); // 返回 true,因為 x 不是數
NaN
是數,typeof NaN
返回number
:
<!DOCTYPE html>
<html>
<body><h1>JavaScript 數字</h1><p>NaN 是數,typeof NaN 返回 number:</p><p id="demo"></p><script>
var x = NaN;
document.getElementById("demo").innerHTML = typeof x;
</script></body>
</html>
運行效果:
Javascript 數字
NaN 是數,typeof NaN 返回 number:number
12.3 Infinity
Infinity
(或-Infinity
)是 JavaScript 在計算數時超出最大可能數范圍時返回的值。- 除以 0(零)也會生成
Infinity
:
var x = 2 / 0; // x 將是 Infinity
var y = -2 / 0; // y 將是 -Infinity
Infinity
是數:typeOf Infinity
返回number
:
typeof Infinity; // 返回 "number"
12.4 十六進制
var x = 0xFF; // x 將是 255。
-
絕不要用前導零寫數字(比如 07)。
-
一些 JavaScript 版本會把帶有前導零的數解釋為八進制。
-
默認地,Javascript 把數顯示為十進制小數。
-
但是您能夠使用
toString()
方法把數輸出為十六進制、八進制或二進制:
var myNumber = 128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000
12.5 數值可以是對象
- 使用
==
相等運算符時,相等的數看上去相等 ===
運算符需要類型和值同時相等對象無法進行對比
var x = 123;
var y = new Number(123);
var z = new Number(500);// typeof x 返回 number
// typeof y 返回 object// (x == y) 為 true,因為 x 和 y 有相等的值// (x === y) 為 false,因為 x 和 y 的類型不同(=== 運算符需要類型和值同時相等。)// (y == z) 為 false,因為對象無法比較
13、JavaScript BigInt
JavaScript BigInt
14、JavaScript 數字方法
將變量轉換為數字:
14.1 toString()
方法
-
toString()
方法將數字作為字符串返回。 -
所有數字方法都可以用于任何類型的數字(文字、變量或表達式)
let x = 123;
x.toString();
(123).toString();
(100 + 23).toString();
14.2 toExponential()
方法
-
toExponential()
返回字符串,其中的數字四舍五入并使用指數表示法書寫。 -
參數定義小數點后的字符數
<script>
let x = 9.656;
document.getElementById("demo").innerHTML =x.toExponential() + "<br>" + x.toExponential(2) + "<br>" + x.toExponential(4) + "<br>" + x.toExponential(6);
</script>
運行結果:
9.656e+0
9.66e+0
9.6560e+0
9.656000e+0
14.3 toFixed()
方法
toFixed()
返回一個字符串,其中的數字帶有指定位數的小數部分。
<script>
let x = 9.656;
document.getElementById("demo").innerHTML =x.toFixed(0) + "<br>" +x.toFixed(2) + "<br>" +x.toFixed(4) + "<br>" +x.toFixed(6);
</script>
運行效果:
10
9.66
9.6560
9.656000
14.4 toPrecision()
方法
toPrecision()
返回一個字符串,其中包含指定長度的數字
<script>
let x = 9.656;
document.getElementById("demo").innerHTML = x.toPrecision() + "<br>" +x.toPrecision(2) + "<br>" +x.toPrecision(4) + "<br>" +x.toPrecision(6);
</script>
運行效果:
9.656
9.7
9.656
9.65600
14.5 valueOf()
方法
valueOf()
以數字形式返回數字。valueOf()
方法在 JavaScript 內部用于將Number
對象轉換為原始值- 提示:所有 JavaScript 數據類型都有
valueOf()
和toString()
方法。
<script>
let x = 123;document.getElementById("demo").innerHTML = x.valueOf() + "<br>" +(123).valueOf() + "<br>" +(100 + 23).valueOf();
</script>
運行效果:
123
123
123
14.6 Number()
方法
Number()
方法可用于將 JavaScript 變量轉換為數字- 如果無法轉換數字,則返回
NaN
(Not a Number
,非數字)。
<script>
document.getElementById("demo").innerHTML = Number(true) + "<br>" +Number(false) + "<br>" +Number("10") + "<br>" + Number(" 10") + "<br>" +Number("10 ") + "<br>" +Number(" 10 ") + "<br>" +Number("10.33") + "<br>" + Number("10,33") + "<br>" +Number("10 33") + "<br>" +Number("John");
</script>
運行效果:
1
0
10
10
10
10
10.33
NaN
NaN
NaN
- 日期上使用的
Number()
方法:
該示例返回時間的毫秒數
<script>
let x = new Date("1970-01-02");
document.getElementById("demo").innerHTML = Number(x);
</script>
運行效果:
86400000
14.7 parseInt()
方法
parseInt()
解析字符串并返回整數。允許有空格。僅返回第一個數字- 如果無法轉換數字,則返回
NaN
(Not a Number
,非數字)。
<script>
document.getElementById("demo").innerHTML = parseInt("-10") + "<br>" +parseInt("-10.33") + "<br>" +parseInt("10") + "<br>" +parseInt("10.33") + "<br>" +parseInt("10 6") + "<br>" + parseInt("10 years") + "<br>" + parseInt("years 10");
</script>
運行效果:
-10
-10
10
10
10
10
NaN
14.8 parseFloat()
方法
parseFloat()
解析字符串并返回數字。允許有空格。僅返回第一個數字- 如果無法轉換數字,則返回
NaN
(Not a Number
,非數字)。
<script>
document.getElementById("demo").innerHTML = parseFloat("10") + "<br>" +parseFloat("10.33") + "<br>" +parseFloat("10 6") + "<br>" + parseFloat("10 years") + "<br>" +parseFloat("years 10");
</script>
運行效果:
10
10.33
10
10
NaN
14.9 Number 對象方法
14.9.1 Number.isInteger()
方法
- 如果參數是整數,則
Number.isInteger()
方法返回true
。
<script>
document.getElementById("demo").innerHTML =
Number.isInteger(10) + "<br>" + Number.isInteger(10.5);
</script>
運行效果:
true
false
14.9.2 Number.isSafeInteger()
方法
-
安全整數指的是可以被精確表示為雙精度浮點數的整數。
-
如果參數是安全整數,則
Number.isSafeInteger()
方法返回 true。
<script>
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(12345678901234567890);
</script>
運行效果:
true
false
注意:
安全整數是從 -(253 - 1) 到 +(253 - 1) 的所有整數。
這是安全的:9007199254740991。這是不安全的:9007199254740992。
14.9.3 Number.parseFloat()
方法
-
Number.parseFloat() 解析字符串并返回數字。
-
允許有空格。僅返回第一個數字
<script>
document.getElementById("demo").innerHTML =
Number.parseFloat("10") + "<br>" +
Number.parseFloat("10.33") + "<br>" +
Number.parseFloat("10 20 30") + "<br>" +
Number.parseFloat("10 years") + "<br>" +
Number.parseFloat("years 10");
</script>
運行效果:
10
10.33
10
10
NaN
14.9.4 Number.parseInt()
方法
-
Number.parseInt()
解析字符串并返回整數。 -
允許有空格。僅返回第一個數字
<script>
document.getElementById("demo").innerHTML = Number.parseInt("-10") + "<br>" +Number.parseInt("-10.33") + "<br>" +Number.parseInt("10") + "<br>" +Number.parseInt("10.33") + "<br>" +Number.parseInt("10 6") + "<br>" + Number.parseInt("10 years") + "<br>" + Number.parseInt("years 10");
</script>
運行效果:
-10
-10
10
10
10
10
NaN
15、JavaScript 數字屬性
JavaScript 數字屬性
16、JavaScript 數字屬性
詳細見JavaScript 數字屬性
17、數組
17.1創建數組:
var cars = ["Saab", "Volvo", "BMW"];
(推薦使用)var cars = new Array("Saab", "Volvo", "BMW");
17.2 訪問數組元素
var name = cars[0];
(訪問)cars[0] = "Opel";
(修改)var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars;
(訪問完整數組)var person = {firstName:"Bill", lastName:"Gates", age:19};
(數組對象)- 遍歷數組:
(1)使用for
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p id="demo"></p><script>var cars = ['A', 'B', 'C'];text = '<ul>';for (var i = 0; i < cars.length; i++) {text += '<li>' + cars[i] + '</li>'}text += '</ul>';document.getElementById('demo').innerHTML = text;</script>
</body></html>
(2)使用 Array.foreach()
函數:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p id="demo"></p><script>var cars = ['A', 'B', 'C'];text = '<ul>';cars.forEach(myFunction);text += '</ul>';function myFunction(value){text+='<li>'+value+'</li>';}document.getElementById('demo').innerHTML = text;</script>
</body></html>
運行效果:
- 添加數組元素:
(1)向數組添加新元素的最佳方法是使用push()
方法:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button onclick="myFunction()">點擊添加元素</button><p id="demo"></p><script>var cars = ['A', 'B', 'C'];document.getElementById('demo').innerHTML = cars;function myFunction() {//添加元素cars.push('D');document.getElementById('demo').innerHTML = cars;}</script>
</body></html>
(2)也可以使用 length
屬性向數組添加新元素:
cars[cars.length]='D';
17.3 數組和對象的區別
-
在 JavaScript 中,
數組使用數字索引
。 -
在 JavaScript 中,
對象使用命名索引
。 -
數組是特殊類型的對象,具有數字索引。
17.4 如何識別數組
你可能首先考慮使用typeof
,但你要注意的是運算符 typeof
返回 “object
”
我們可以使用:
Array.isArray(fruits); // 返回 true
或者
var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits instanceof Array // 返回 true
18、數組方法
18.1 toString()
- 把數組轉換為數組值(逗號分隔)的字符串。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p id="demo"></p><script>var cars = ["A", "B", "C"];document.getElementById('demo').innerHTML = cars.toString();</script>
</body></html>
運行效果:
A,B,C
18.2 join()
- 可將所有數組元素結合為一個字符串。它的行為類似 toString(),但是您還
可以規定分隔符
。
<p id="demo"></p><script>var cars = ["A", "B", "C"];document.getElementById('demo').innerHTML = cars.join("*");</script>
運行效果:
ABC
18.3 Popping
和 Pushing
*在處理數組時,刪除元素和添加新元素是很簡單的。Popping
和 Pushing
指的是:從數組彈出項目
,或向數組推入項目
。
18.4 Popping
- 數組中刪除最后一個元素
pop()
方法返回“被彈出”的值
<p id="demo"></p><script>var cars = ["A", "B", "C","D"];document.getElementById('demo').innerHTML = cars;function myFunction(){cars.pop();document.getElementById('demo').innerHTML = cars;}</script>
點擊按鈕前:A,B,C,D
點擊按鈕后:A,B,C
18.5 Pushing
push()
方法(在數組結尾處)向數組添加
一個新的元素push()
方法返回新數組的長度
<body><button onclick="myFunction()">點擊添加一個元素</button><p id="demo"></p><script>var cars = ["A", "B", "C","D"];document.getElementById('demo').innerHTML = cars;function myFunction(){cars.push("E");document.getElementById('demo').innerHTML = cars;}</script>
</body>
點擊按鈕后:A,B,C,D,E
18.6 shift()
和unshift()
位移元素
- 位移與彈出等同,但處理首個元素而不是最后一個。
shift()
方法返回被“位移出”的字符串
18.6.1 shift()
shift()
方法會刪除首個數組元素,并把所有其他元素“位移”到更低的索引。
<body><button onclick="myFunction()">點擊</button><p id="demo"></p><script>var cars = ["A", "B", "C","D"];document.getElementById('demo').innerHTML = cars;function myFunction(){cars.shift();document.getElementById('demo').innerHTML = cars;}</script>
</body>
操作前:A,B,C,D
操作后:B,C,D
18.6.2 unshift()
unshift()
方法(在開頭)向數組添加新元素
,并“反向位移”舊元素。unshift()
方法返回新數組的長度。
<body><button onclick="myFunction()">點擊</button><p id="demo"></p><script>var cars = ["A", "B", "C","D"];document.getElementById('demo').innerHTML = cars;function myFunction(){cars.unshift("New");document.getElementById('demo').innerHTML = cars;}</script>
操作前:A,B,C,D
操作后:New,A,B,C,D
18.7更改元素
- (1)通過使用它們的索引號來訪問數組元素:
<body><button onclick="myFunction()">點擊</button><p id="demo"></p><script>var cars = ["A", "B", "C","D"];document.getElementById('demo').innerHTML = cars;function myFunction(){cars[0]='New';document.getElementById('demo').innerHTML = cars;}</script>
</body>
操作前:A,B,C,D
操作后:New,B,C,D
- (2)
length
屬性提供了向數組追加新元素的簡易方法:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
- (3)
delete
運算符來刪除元素(不建議使用
)
使用 delete 會在數組留下未定義的空洞。請使用 pop() 或 shift() 取而代之。
<body><button onclick="myFunction()">點擊</button><p id="demo"></p><script>var cars = ["A", "B", "C","D"];document.getElementById('demo').innerHTML = cars;function myFunction(){delete cars[0];//document.getElementById('demo').innerHTML = cars; //操作后:,B,C,Ddocument.getElementById('demo').innerHTML = cars[0];//操作后:undefined}</script>
</body>
18.8 拼接數組:splice()
18.8.1 拼接數組
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
-
第一個參數(2)定義了應添加新元素的位置(拼接)。
-
第二個參數(0)定義應刪除多少元素。
-
其余參數(“Lemon”,“Kiwi”)定義要添加的新元素。
<body><button onclick="myFunction()">點擊</button><p id="demo"></p><script>var cars = ["A", "B", "C", "D"];document.getElementById('demo').innerHTML = cars;function myFunction() {cars.splice(2, 1, "New01", "New02");document.getElementById('demo').innerHTML = cars;}</script>
</body>
運行效果:A,B,New01,New02,D
18.8.2 使用 splice()
來刪除
元素
-
第一個參數(0)定義新元素應該被添加(接入)的位置。
-
第二個參數(1)定義應該刪除多個元素。
-
其余參數被省略。沒有新元素將被添加。
<body><button onclick="myFunction()">點擊</button><p id="demo"></p><script>var cars = ["A", "B", "C", "D"];document.getElementById('demo').innerHTML = cars;function myFunction() {cars.splice(0, 1);document.getElementById('demo').innerHTML = cars;}</script>
</body>
運行效果:B,C,D
18.9 合并(連接)數組:concat()
- 通過合并(連接)現有數組來創建一個新數組:
(1)實例(合并兩個數組):
<body><button onclick="myFunction()">點擊</button><p id="demo"></p><script>var cars01 = ["A", "B", "C", "D"];var cars02 = ["E", "F", "G", "H"];document.getElementById('demo').innerHTML = cars01;function myFunction() {document.getElementById('demo').innerHTML = cars01.concat(cars02);}</script>
</body>
運行效果:A,B,C,D,E,F,G,H
(2)實例(合并三個數組):
<body><button onclick="myFunction()">點擊</button><p id="demo"></p><script>var cars01 = ["A", "B", "C", "D"];var cars02 = ["E", "F", "G", "H"];var cars03 = ["I", "J", "K", "L"];document.getElementById('demo').innerHTML = cars01;function myFunction() {document.getElementById('demo').innerHTML = cars01.concat(cars02,cars03);}</script>
</body>
運行效果:A,B,C,D,E,F,G,H,I,J,K,L
(3)實例(將數組與值合并):
<body><button onclick="myFunction()">點擊</button><p id="demo"></p><script>var cars01 = ["A", "B", "C", "D"];document.getElementById('demo').innerHTML = cars01;function myFunction() {document.getElementById('demo').innerHTML = cars01.concat("E","F");}</script>
</body>
運行效果:A,B,C,D,E,F
18.10 裁剪數組:slice()
slice()
方法創建新數組。它不會從源數組中刪除任何元素
<body><button onclick="myFunction()">點擊</button><p id="demo"></p><script>var cars01 = ["A", "B", "C", "D"];document.getElementById('demo').innerHTML = cars01;function myFunction() {// document.getElementById('demo').innerHTML = cars01.splice(1);document.getElementById('demo').innerHTML = cars01.splice(1,2);}</script>
</body>
18.11 自動 toString()
- 如果需要原始值,則 JavaScript 會自動把數組轉換為字符串。
- 所有 JavaScript 對象都擁有
toString()
方法。