前端-JavaScript基礎(chǔ)知識

作者：編程碼農(nóng)

來源：SegmentFault 思否社區(qū)

簡介

什么是JavaScript？

JavaScript ( JS ) 是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時編譯型的編程語言。

函數(shù)優(yōu)先：編程語言中的函數(shù)可以被當(dāng)作參數(shù)傳遞給其他函數(shù)，可以作為另一個函數(shù)的返回值，還可以被賦值給一個變量。

解釋型：對標(biāo)編譯型語言，編譯型需預(yù)先將源碼編成中間碼，再由解釋器解釋運行。解釋型不需要預(yù)先編譯，在程序在運行時才由解釋器翻譯運行。

JavaScript 的標(biāo)準(zhǔn)是ECMAScript截至 2012 年，所有的現(xiàn)代瀏覽器都完整的支持 ECMAScript 5.1，舊版本的瀏覽器至少支持 ECMAScript 3 標(biāo)準(zhǔn)。

我們所熟知的ES6是在2015年6月17日，由ECMA國際組織發(fā)布的ECMAScript 的第六版，該版本正式名稱為 ECMAScript 2015。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_Resources

使用場景

互聯(lián)網(wǎng)的興起，JavaScript的使用范圍已經(jīng)超出了瀏覽器。

1. 瀏覽器平臺。HTML5的出現(xiàn)，瀏覽器本身的功能越來越強(qiáng)，JavaScript 因此得以調(diào)用許多系統(tǒng)功能，如操作本地文件、操作圖片、調(diào)用攝像頭和麥克風(fēng)，可以開發(fā)更多富客戶端產(chǎn)品。

2. 服務(wù)端應(yīng)用。node的出現(xiàn)使得 JavaScript 可以用于開發(fā)服務(wù)器端應(yīng)用，也使得JavaScript成為一門可以同時開發(fā)前后端的語言。

3. 移動應(yīng)用。js也正在成為手機(jī)應(yīng)用的開發(fā)語言，比如：React Native 項目則是將 JavaScript 寫的組件，編譯成原生組件。

4. 桌面應(yīng)用。JavaScript甚至可以開發(fā)桌面應(yīng)用，比如electronjs。

5. 數(shù)據(jù)庫操作。在一些Nosql數(shù)據(jù)都是支持JavaScript作為操作語言，像mongodb。

基本語法

變量

var total; // 未賦值的變量是 undefined，它是個特殊的值，表示無定義。
total = 1;
var a,b; // 一個var后可以聲明多個變量。

console.log(a);
var a = 1;

• 第一個字符任意 Unicode 字母（包括英文字母和其他語言的字母），以及美元符號（$）和下劃線（_）

• 第二個字符及后面的字符，除了 Unicode 字母、美元符號和下劃線，還可以用數(shù)字0-9。

另外中文也可以聲明變量，下面保留字除外

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

語句

var total = 1 + 1; // 聲明了一個變量total，然后將1+1的運算結(jié)果賦值給它。

// 這是單行注釋

/*
 這是
 多行
 注釋
*/

{
  var a = 1;
}
a // 1

// if結(jié)構(gòu)
if (m === 1){ // 往往由一個條件表達(dá)式產(chǎn)生的
    console.log('ok')
}
// 或者
if (bool) console.log('ok');

// if/else結(jié)構(gòu)
if (m === 1){
  語句;
}else{
    語句;  
} 

// if/else if.../else 結(jié)構(gòu) m==1 m==2 其它
if (m === 1) {
} else if(m === 2){
}else {
}

switch (m) {
  case 1:
    // ...
    break;
  case 2:
    // ...
    break;
  default:
    // ...
}

注意區(qū)別 ==與===

使用==比較兩個變量時，會發(fā)生隱式類型轉(zhuǎn)換，例如，自動將字符串類型轉(zhuǎn)換為數(shù)字類型。

為了避免隱式轉(zhuǎn)換帶來的問題，我們都是用=== 進(jìn)行嚴(yán)格進(jìn)行比較。

(條件) ? 表達(dá)式1 : 表達(dá)式2

var i = 0;
while (i < 100) {
  console.log('i 當(dāng)前為：' + i);
  i = i + 1;
}
// 區(qū)別上面，它至少會執(zhí)行一次
var i = 0;
do {
  console.log('i 當(dāng)前為：' + i);
} while (i < 100);

• 初始化表達(dá)式：確定循環(huán)變量的初始值，只在循環(huán)開始時執(zhí)行一次。

• 條件表達(dá)式：每輪循環(huán)開始時，都要執(zhí)行這個條件表達(dá)式，只有值為真，才繼續(xù)進(jìn)行循環(huán)。

• 遞增表達(dá)式：每輪循環(huán)的最后一個操作，通常用來遞增循環(huán)變量。

  
  

for (初始化表達(dá)式; 條件; 遞增表達(dá)式) {
  語句
}

數(shù)據(jù)類型

• 變量沒有初始化：undefined。

• 變量不可用：null。

1 === 1.0 // true

• 第1位：符號位，0表示正數(shù)，1表示負(fù)數(shù)

• 第2位到第12位（共11位）：指數(shù)部分

• 第13位到第64位（共52位）：小數(shù)部分（即有效數(shù)字）

• 十進(jìn)制：沒有前導(dǎo)0的數(shù)值。

• 八進(jìn)制：有前綴0o或0O的數(shù)值，或者有前導(dǎo)0、且只用到0-7的八個阿拉伯?dāng)?shù)字的數(shù)值。

• 十六進(jìn)制：有前綴0x或0X的數(shù)值。

• 二進(jìn)制：有前綴0b或0B的數(shù)值。

'abc' "abc" "'a'" // 字符串

// 字符串換行
var str = 'String \
String \
String';

• \0 ：null（\u0000）
• \b ：后退鍵（\u0008）
• \f ：換頁符（\u000C）
• \n ：換行符（\u000A）
• \r ：回車鍵（\u000D）
• \t ：制表符（\u0009）
• \v ：垂直制表符（\u000B）
• \' ：單引號（\u0027）
• \" ：雙引號（\u0022）
• \\ ：反斜杠（\u005C）

var obj = { // 對象聲明
  a: '1',
  b: '2'
};

// 對象屬性讀取
obj.a 
obj['a']

// 刪除對象屬性
delete obj.a

// 判斷屬性是否存在
'a' in obj 

//對象遍歷
for (var i in obj) {
  console.log('鍵名：', i);
  console.log('鍵值：', obj[i]);
}

function foo(s) {
  console.log(s);
}
// 表達(dá)式形式
var foo = function(s) {
  console.log(s);
};

var add = new Function(
  'x',
  'y',
  'return x + y'
);

// 等同于
function add(x, y) {
  return x + y;
}

foo();
function foo() {console('ok')}

typeof [1, 2, 3] // "object"

var a = [1, 2, 3];
for (var i in a) {
  console.log(a[i]);
}

小結(jié)

• JavaScript介紹。
• JavaScript基本語法。
• 數(shù)據(jù)類型。