天天看點
傳回

JavaScript基礎知識《四》

常用運算符

算數運算符

  • 算術運算符用于執行兩個變量或值的運算。
  • 以下表格将向你說明算術運算符的使用： y = 5
    • JavaScript基礎知識《四》
  • 任何類型的資料都可以使用算數運算符參與運算 
    • var a = 10;
var b = false;
document.write(a + b);

指派運算符

  • 指派運算符用于給 javascript 變量指派。
  • 下面的表格解釋了指派運算符: x = 10; y = 5
    • JavaScript基礎知識《四》

比較運算符

  • 比較運算符用于邏輯語句的判斷，進而确定給定的兩個值或變量是否相等。
  • 下表展示了比較運算符的使用： x = 5
    • JavaScript基礎知識《四》
  • 數字可以與字元串進行比較，字元串可以與字元串進行比較。字元串與數字進行比較的時候會先把字元 串轉換成數字然後再進行比較 
    • var a = 125;
var b = "123";
document.write("字元串與數字比較的結果："+ (a>b)+"<br/>");

邏輯運算符

  • 邏輯運算符用來确定變量或值之間的邏輯關系。
  • 下表展示了邏輯運算符的使用： x = 6 , y = 3、
    • JavaScript基礎知識《四》

三目（元）運算符 

  • var age = 24;
document.write("是成年人嗎？"+ (age >= 18 ? "是":"不是")+"\<br/>");

流程控制語句

  • 進階語言中的三種基本結構：順序、分支、循環

if 判斷

if語句
  • 在一個指定的條件成立時執行代碼。 
    • if(條件表達式) {
//代碼塊;
}
if…else語句
  • 在指定的條件成立時執行代碼，當條件不成立時執行另外的代碼。 
    • if(條件表達式) {
//代碼塊;
}else {
//代碼塊;
}
if…else if…else 語句
  • 使用這個語句可以選擇執行若幹塊代碼中的一個。 
    • if (條件表達式) {
//代碼塊;
}else if(條件表達式) {
//代碼塊;
}else {
//代碼塊;
}
  • 條件判斷可以使用非邏輯運算符
    • JavaScript基礎知識《四》

循環

for循環
  • 循環指定次數 
    • for (var i=0; i<10; i++) {
//需要執行的代碼;
}
while循環
  • 當指定的條件為 true 時循環執行代碼 
    • while (條件表達式) {
// 需要執行的代碼;
}
do-while循環
  • 最少執行1次循環 
    • do {
// 需要執行的代碼;
}
while (條件表達式)
break和continue
  • break: 跳出整個循環
  • continue：跳出本次循環

在浏覽器中調試

  • IE、Chrome、FireFox中調試的快捷鍵：F12

設定斷點

  • JavaScript基礎知識《四》

文法錯誤

  • JavaScript基礎知識《四》

函數

  • JavaScript 使用關鍵字 function 定義函數。
  • 函數可以通過聲明定義，也可以是一個表達式。

函數的聲明

  • 一個函數的聲明（或者說是函數的定義）包含：
      1. 關鍵字function
      2. 函數名稱
      3. . 參數清單，包圍在括号中并由逗号分隔
      4. 定義函數的 JavaScript 語句，用大括号 {} 括起來 
    • function functionName(parameters){
// 執行的代碼
}
    • 例如：定義一個 square 函數： 
    • function square(number) {
return number * number;
}
    • 函數 square 使用了一個參數，叫作 number 。這個函數隻有一個語句，它說明該函數将函數的參數 （即 number ）自乘後傳回。函數的 return 語句确定了函數的傳回值。
    • 函數聲明後不會立即執行，會在我們需要的時候調用。
    • 原始參數（比如一個具體的數字）被作為值傳遞給函數；值被傳遞給函數，如果被調用函數改變了這個 參數的值，這樣的改變不會影響到全局或調用函數。 
    • var num = 10;
var r1 = square(10); // 調用函數
num = 11;
    • 如果你傳遞一個對象（即一個非原始值，例如 Array 或使用者自定義的對象）作為參數，而函數改變了這 個對象的屬性，這樣的改變對函數外部是可見的，如下面的例子所示: 
    • function myFunc(theObject) {
theObject.make = "Toyota";
}
var mycar = {make: "Honda", model: "Accord", year: 1998};
var x, y;
x = mycar.make; // x擷取的值為 "Honda"
myFunc(mycar);
y = mycar.make; // y擷取的值為 "Toyota"
// (make屬性被函數改變了)

函數表達式

  • JavaScript 函數可以通過一個表達式定義。
  • 函數表達式可以存儲在變量中: 
    • var square = function (number){ return number * number };
  • 在函數表達式存儲在變量後，變量也可作為一個函數使用： 
    • var s = square(2);
  • 以上函數實際上是一個 匿名函數 (函數沒有名稱)。
  • 函數存儲在變量中，不需要函數名稱，通常通過變量名來調用。
  • 上述函數以分号結尾，因為它是一個執行語句。

Function() 構造函數

  • 通過前邊的内容我們學習了函數通過關鍵字 function 來定義。
  • 函數同樣可以通過内置的 JavaScript 函數構造器（Function()）定義 
    • new Function ([arg1[, arg2[, ...argN]],] functionBody)
  • arg1, arg2, … argN
    • 參數名稱是一個有效的JavaScript辨別符的字元串，或者一個用逗号分隔的有效字元串的清單;例 如“ × ”，“ theValue ”，或“ a,b ”
  • functionBody
    • 一個含有包括函數定義的 JavaScript 語句的字元串 
    • var sum = new Function("square", "return number * number");
    • 上面的聲明方式和我們之前函數表達式中聲明的函數是一樣的。

    • 實際上，很多時候你不用使用構造函數來聲明函數。而且要避免使用 new 關鍵字

      使用 Function 構造器生成的 Function 對象是在函數建立時解析的。這比你使用函數聲明或者 函數表達式并在你的代碼中調用更為低效，因為使用後者建立的函數是跟其他代碼一起解析的

      當一個函數是一個對象的屬性時，稱之為方法

調用函數

  • 定義一個函數并不會自動的執行它。定義了函數僅僅是賦予函數以名稱并明确函數被調用時該做些什 麼。調用函數才會以給定的參數真正執行這些動作。例如，一旦你定義了函數 square ，你可以如下這 樣調用它： 
    • square(2);
    • 上述語句通過提供參數 2 來調用函數。函數執行完它的語句會傳回值 4
    • 函數一定要處于調用它們的域(範圍)中，但是函數的聲明可以被提升(出現在調用語句之後)
    • 提升（Hoisting）是 JavaScript 預設将目前作用域提升到前面去的的行為 
    • console.log(square(5)); // 調用
function square(n) { return n*n } // 聲明
    • 函數域是指函數聲明時的所在的地方，或者函數在頂層被聲明時指整個程式
    • 注意隻有使用如上的文法形式（即 function funcName(){} ）才可以。而下面的代碼是無效 的。就是說，函數提升僅适用于函數聲明，而不适用于函數表達式。 
    • console.log(square); // square is hoisted with an initial value undefined.
console.log(square(2)); // TypeError: square is not a function
var square = function (n) {
return n * n;
}
    • 函數可以被遞歸，就是說函數可以調用其本身。例如，下面這個函數就是用遞歸計算階乘： 
    • function factorial(n){
if ((n == 0) || (n == 1))
return 1;
else
return (n * factorial(n - 1));
}

函數作用域

  • 在函數内定義的變量不能在函數之外的任何地方通路，因為變量僅僅在該函數的域的内部有定義。相對 應的，一個函數可以通路定義在其範圍内的任何變量和函數。換言之，定義在全局域中的函數可以通路 所有定義在全局域中的變量。在另一個函數中定義的函數也可以通路在其父函數中定義的所有變量和父 函數有權通路的任何其他變量。 
    • // 下面的變量定義在全局作用域(global scope)中
var num1 = 20,
num2 = 3,
name = "Chamahk";
// 本函數定義在全局作用域
function multiply() {
return num1 * num2;
}
multiply(); // 傳回 60
// 嵌套函數的例子
function getScore() {
var num1 = 2,
num2 = 3;
function add() {
return name + " scored " + (num1 + num2);
}
return add();
}
getScore(); // 傳回 "Chamahk scored 5"

嵌套函數和閉包

  • 你可以在一個函數裡面嵌套另外一個函數。嵌套（内部）函數對其容器（外部）函數是私有的。它自身 也形成了一個閉包。一個閉包是一個可以自己擁有獨立的環境與變量的表達式（通常是函數）。
  • 既然嵌套函數是一個閉包，就意味着一個嵌套函數可以”繼承“容器函數的參數和變量。換句話說，内部 函數包含外部函數的作用域。
  • 總結
      1. 内部函數隻可以在外部函數中通路。
      2. 内部函數形成了一個閉包：它可以通路外部函數的參數和變量，但是外部函數卻不能使用它的參數 和變量。 
    • function addSquares(a, b) {
function square(x) {
return x * x;
}
return square(a) + square(b);
}
a = addSquares(2, 3); // returns 13
b = addSquares(3, 4); // returns 25
c = addSquares(4, 5); // returns 41
  • 由于内部函數形成了閉包，是以你可以調用外部函數并為外部函數和内部函數指定參數： 
    • function outside(x) {
function inside(y) {
return x + y;
}
return inside;
}
fn_inside = outside(3); // 可以這樣想：給一個函數，使它的值加3
result = fn_inside(5); // returns 8
result1 = outside(3)(5); // returns 8
閉包
  • 閉包是 JavaScript 中最強大的特性之一。JavaScript 允許函數嵌套，并且内部函數可以通路定義在外部 函數中的所有變量和函數，以及外部函數能通路的所有變量和函數。但是，外部函數卻不能夠通路定義在内部函數中的變量和函數。這給内部函數的變量提供了一定的安全 性。

函數參數

  • 從ECMAScript 6開始，有兩個新的類型的參數：預設參數，剩餘參數。
預設參數
  • 在JavaScript中，函數參數的預設值是 undefined 。然而，在某些情況下設定不同的預設值是有用的。 這時預設參數可以提供幫助。
  • 在過去，用于設定預設參數的一般政策是在函數的主體中測試參數值是否為 undefined ，如果是則賦 予這個參數一個預設值。如果在下面的例子中，調用函數時沒有實參傳遞給 b ，那麼它的值就是 undefined ，于是計算 a*b 得到、函數傳回的是 NaN 。但是，在下面的例子中，這個已經被第二行獲 取處理： 
    • function multiply(a, b) {
b = (typeof b !== 'undefined') ? b : 1;
return a*b;
}
multiply(5); // 5
  • 使用預設參數，在函數體的檢查就不再需要了。現在，你可以在函數頭簡單地把1設定為 b 的預設值： 
    • function multiply(a, b = 1) {
return a*b;
}
multiply(5); // 5
剩餘參數
  • 剩餘參數文法允許将不确定數量的參數表示為數組。在下面的例子中，使用剩餘參數收集從第二個到最 後參數。然後，我們将這個數組的每一個數與第一個參數相乘。
  • 這個例子是使用了一個箭頭函數， 
    • function multiply(multiplier, ...theArgs) {
return theArgs.map(x => multiplier * x);
}
var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]
  • 注意的事項
      1. 形參的類型：在函數定義的時候不用指定類型，因為是可變類型
      2. 函數的傳回值：如果一個函數中需要傳回值，直接使用return傳回，如果沒有傳回值，不寫 return。
      3. 關于函數的重載：在JS中沒有函數的重載，同名的函數會覆寫原來的函數，調用的時候，隻會調用 最後聲明的函數，而且實參的個數與形參數的個數沒有關系。
      4. 所有函數的内部都有一個類數組對象，名字叫：arguments，用來接收調用時送出的所有的參 數。
  • 示範：定義一個函數，在函數的内部輸出arguments的長度和其中的每個元素。 
    • <script type="text/JavaScript">
function sum (a,b) {
//在函數的内部輸出arguments的長度和其中的每個元素
document.write("arguments數組的長度：" + arguments.length + "<hr/>");
//輸出每個元素
for (var i = 0; i < arguments.length; i++) {
document.write(arguments[i] + "<br/>");
}
document.write("a=" + a + "<br />");
document.write("b=" + b + "<br />");
}
//調用
sum(3,10,8);
//sum(3);
</script>

匿名函數

文法 
var 變量名 = function(參數清單) {
函數體;
}
函數調用 
//匿名函數
var sayHi = function(name) {
alert("Hello, " + name);
};
//調用
sayHi("Tom");

箭頭函數

  • 箭頭函數表達式（也稱胖箭頭函數）相比函數表達式具有較短的文法并以詞法的方式綁定 this 。箭頭 函數總是匿名的.
  • 有兩個因素會影響引入箭頭函數：更簡潔的函數和 this
簡潔的函數 
var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryllium"
];
var a2 = a.map(function(s){ return s.length });
console.log(a2); // logs [ 8, 6, 7, 9 ]
var a3 = a.map( s => s.length );
console.log(a3); // logs [ 8, 6, 7, 9 ]
  • map() 方法建立一個新數組，其結果是該數組中的每個元素都調用一次提供的函數後的傳回值
this 的詞法
  • 在箭頭函數出現之前，每一個新函數都重新定義了自己的 this 值（在構造函數中是一個新的對象；在嚴 格模式下是未定義的；在作為“對象方法”調用的函數中指向這個對象；等等）。 
    • function Person() {
// 構造函數Person()将`this`定義為自身
this.age = 0;
setInterval(function growUp() {
// 在非嚴格模式下，growUp()函數将`this`定義為“全局對象”，
// 這與Person()定義的`this`不同，
// 是以下面的語句不會起到預期的效果。
this.age++;
}, 1000);
}
var p = new Person();
  • 在ECMAScript 3/5裡，通過把 this 的值指派給一個變量可以修複這個問題 
    • function Person() {
var self = this; // 有的人習慣用`that`而不是`self`，
// 無論你選擇哪一種方式，請保持前後代碼的一緻性
self.age = 0;
setInterval(function growUp() {
// 以下語句可以實作預期的功能
self.age++;
}, 1000);
}
  • 箭頭函數捕捉閉包上下文的 this 值，是以下面的代碼工作正常 
    • function Person(){
this.age = 0;
setInterval(() => {
this.age++; // 這裡的`this`正确地指向person對象
}, 1000);
}
var p = new Person();

預定義函數

  • JavaScript語言有好些個頂級的内建函數
    • JavaScript基礎知識《四》
  • NaN值 的産生:

    • 當算術運算傳回一個未定義的或無法表示的值時， NaN 就産生了。但是， NaN 并不一定用于表示 某些值超出表示範圍的情況。将某些不能強制轉換為數值的非數值轉換為數值的時候，也會得到 NaN 。

      例如，0 除以0會傳回 NaN —— 但是其他數除以0則不會傳回 NaN 。

js實作圖檔切換

  • 步驟： 
    • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖檔切換</title>
<style type="text/css">
.container {
/*居中*/
margin: auto;
border: 1px solid black;
width: 850px;
}
imgs {
width: 850px;
}
</style>
</head>
<body>
<div class="container">
<img src="../../imgs/4.jpg" id="pic">
</div>
<script>
//全局變量
var num = 4;
//擷取圖檔對象
var picObj = document.getElementById("pic");
//改變圖檔的src屬性
function changePicture() {
//得到圖檔的src屬性，替換它的值
picObj.src = "../../imgs/" + num + ".jpg";
//如果圖檔到了第4張圖檔，則重新變成第1張，否則就加1
if (num == 6) {
num = 4;
} else {
num++;
}
}
//每過3秒調用一次
setInterval("changePicture()", 2000);
</script>
</body>
</html>

json

定義

  • JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。采用完全獨立于程式設計語言的文本格式來存儲和表示資料。
  • 簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。
  • 易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效 率。

文法格式

  • json對象有三種資料格式
    • JavaScript基礎知識《四》
  • JSON是存儲和交換文本資訊的文法，類似 XML。
  • JSON 比 XML 更小、更快，更易解析。

JavaScript中json格式和json解析練習

練習 
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/**
* 案例一
* var person={key:value,key:value}
*
* class Person{
* String firstname = "張";
* String lastname = "三豐";
* Integer age = 100;
* }
*
* Person p = new Person();
* System.out.println(p.firstname);
*/
//json的定義
var person = {
"firstname": "張",
"lastname": "三豐",
"age": 100
};
//json解析
alert(person.firstname);
alert(person.lastname);
alert(person.age);
</script>
</body>
</html>

JSON對象及JSON字元串轉 

JSON.parse(jsonStr); // json字元串 --> json 對象
JSON.stringify(json); // json對象 --> json字元串```
javascript 前端 js
上一篇: JavaScript基礎知識《三》JavaScript
下一篇: VAE的三種不同推導方法1. 總則2. 從資料分布出現機率最大出發進行推導3. 從聯合機率密度出發進行推導4. 從encoder角度進行推導

繼續閱讀