來源：數(shù)據(jù)猿  作者：達觀數(shù)據(jù) 趙業(yè)輝

在前端工程師的工作中，有句話值得我們時刻警醒——“基礎(chǔ)不牢地動山搖”，掌握好基礎(chǔ)才能持續(xù)高效率的工作。在達觀數(shù)據(jù)的的前端工作中，面對超敏捷開發(fā)的業(yè)務需求， JavaScript基礎(chǔ)尤為重要。達觀數(shù)據(jù)專注于企業(yè)大數(shù)據(jù)技術(shù)服務，以獨創(chuàng)的多層智能挖掘算法，實現(xiàn)對海量用戶行為和文本數(shù)據(jù)的深入分析和挖掘，為企業(yè)提供智能文本分析、精準用戶行為建模、個性化推薦、智能搜索等尖端數(shù)據(jù)挖掘功能。下面我們總結(jié)一下 JavaScript 中的基本概念中的技術(shù)細節(jié)和編碼規(guī)范。

一、語法

1、區(qū)分大小寫

一切變量、操作符、函數(shù)名都區(qū)分大小寫。

var a = 1;
var A = 1;

a 和 A 是兩個不同的變量。

2、標識符

變量、函數(shù)、屬性的名字、函數(shù)的參數(shù)。

按照下列規(guī)則組合起來的一個或多個字符

第一個字符必須是字母、下劃線、貨美元符號

其他字符可以是字母、下劃線、美元符號或數(shù)字

不能把關(guān)鍵字、保留字、true、false、和用作標識符

最佳實踐推薦駝峰命名，如functionName

3、注釋

單行注釋

// 單行注釋

多行注釋

/*
*   多行注釋
*/

4、嚴格模式

為 JavaScript 定義了不同的解析和執(zhí)行模型。嚴格模式下ECMAScript 3 中的不確定行為將得到處理，對某些不安全操作也會拋出錯誤。

啟用嚴格模式。

// 頁面頂部，添加編譯指示到整個腳本
"use strict"

function doSomething() {
  // 函數(shù)內(nèi)部，添加編譯指示到單個函數(shù)
  "use strict"
  do something
}

5、語句

語句以一個分號結(jié)尾，沒有分號的語句將由編譯器自動確定語句的結(jié)束并加入分號。

代碼塊

{
 代碼塊內(nèi)容
}

二、關(guān)鍵字和保留字

使用保留字或關(guān)鍵字可能導致Identifier Expected錯誤

ECMA3 的關(guān)鍵字

break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger(ECMA5新增關(guān)鍵字), function, this, with, default, if, throw, delete, in, try

ECMA3 保留字

abstract, enum, int, short, boolean, export, interface, static, byte, extends, long, super, char, final, native, synchronized, class, float, package, throws, const, goto, private, transient, debugger, implements, protected, volatile, double, import, public

ECMA5 非嚴格模式下的保留字

class, enum, extends, super, const, export, import

ECMA5 嚴格模式下的保留字

implements, package, public, interface, private, static, let, protected, yield

veal, arguments嚴格模式下不能用作標識符或?qū)傩悦?/p>

三、變量

ECMAScript 的變量是松散類型的，可以保存任何類型的數(shù)據(jù)，每個變量只用于保存值的占位符。

未被初始化的變量會保存為值undefined。

var message;
console.log(message) // undefined

可以在修改變量值的同時修改值的類型。

var message = "hi"; // 字符串
var message = 100; // 數(shù)字

使用關(guān)鍵字var定義的變量將成為定義該變量的作用域中的局部變量。

function test() {
  var message = "hi" // 局部變量
};
test();
console.log(message); // error

不使用關(guān)鍵字var定義變量將成為全局變量。

不推薦此做法

在局部作用域中聲明的全局變量難以維護。

忽略了操作符var，會由于相應變量不會馬上就有定義而導致不必要的混亂。

給未經(jīng)聲明的變量賦值在嚴格模式下會拋出ReferenceError錯誤。

function test() {
  message = "hi"; //全局變量
}
test();
console.log(message); // hi

使用一條語句定義多個變量

var a = 1,
  b = 2,
  c = 3;

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

ECMAScript中有五種基本數(shù)據(jù)類型：Undefined、Null、Boolean、Number、String，還有一種復雜數(shù)據(jù)類型Object，其本質(zhì)上是由一組無序的鍵值對組成的。

1、typeof 操作符

檢測變量的數(shù)據(jù)類型

typeof是操作符而不是函數(shù)，因此其后的括號不是必須的

var message = ***;
console.log(typeof(message));

undefined：未定義

boolean：布爾值

string：字符串

number：數(shù)值

object：對象或Null

function：函數(shù)

2、Undefined類型

Undefined類型只有一個值：特殊的 undefined。使用var聲明變量但未對其初始化，這個變量的值就是Undefined

var a;
console.log(typeof(a)); // undefined

不推薦使用undefined顯式初始化變量。

包含Undefined值的變量和未定義的變量是不同的。

var message; // 這個變量聲明后默認得到了 Undefined 值
console.log(message); // undefined
console.log(a); // error

使用typeof檢測未初始化的變量和未聲明的變量都會返回undefined。

var message; // 這個變量聲明后默認得到了 Undefined 值
console.log(typeof message); // undefined，未初始化的變量
console.log(typeof a); // undefined，未聲明的變量

對尚未聲明的變量只能執(zhí)行一項操作——typeof檢測。對其調(diào)用delete不會導致錯誤，但也沒有實際意義，而且在嚴格模式下會報錯。

最佳實踐：推薦顯式初始化變量。在之后typeof操作符返回undefined即可斷定此變量未被聲明，而不是尚未初始化。

3、Null

Null類型只有一個值：特殊的 null。

從邏輯角度來看，null值表示一個空對象指針，所以使用typeof檢測null值會返回object。

var car = null;
console.log(typeof car) // object

如果定義的變量準備在將來用于保存對象，推薦將該變量初始化為null，以后只需要檢查null值即可知道其是否已經(jīng)保存了一個對象的引用。

var car = null;
if ( car =! null) {
  do something for car
}

undefined值派生自null，因此ECMA規(guī)定對它們的相等性測試要返回true。

console.log(null == undefined) // true

4、Boolean

該類型有兩個字面值：true和false。

Boolean類型的字面值true和false是區(qū)分大小寫的。

5、Number

使用IEEE754格式表示整數(shù)和浮點數(shù)值。為支持各種數(shù)值類型，ECMAScript定義了不同的數(shù)值字面量格式。

< >十進制八進制，以0開頭，在嚴格模式中無效，無效的八進制數(shù)字將會被當做十進制數(shù)值被解析。十六進制，以0x開頭默認情況下ECMAScript會將小數(shù)點后面帶有6個0以上的浮點數(shù)值轉(zhuǎn)換為科學計數(shù)法表示的數(shù)值。浮點數(shù)值的最高精度是17位小數(shù)，但做算術(shù)計算時精度遠不如整數(shù)值。

（3）NaN

NaN（Not a Number），用于表示一個本來要返回數(shù)值的操作數(shù)未返回數(shù)值的情況。

< >任何涉及NaN的操作都會返回NaN。NaN和任何值都不相等。Boolean值，true——1，false——0；數(shù)字，傳入——返回；null——0；undefined——NaN；字符串只包含數(shù)字的字符串——十進制數(shù)字；包含有效的浮點格式——對應的浮點數(shù)值；包含有效的十六進制——相同大小的十進制整數(shù)值；空字符串——0；上述都不符合——NaN。對象——valueOf()按照上述規(guī)則返回值valueOf()返回值是NaN——toString()方法按照上述規(guī)則返回字符串值。第一個字符不是數(shù)字字符或負號，返回NaN。第一個字符是數(shù)字字符，會繼續(xù)解析后續(xù)字符，直到解析完所有字符或遇到非數(shù)字字符。第一個小數(shù)點后的數(shù)字有效，第二個小數(shù)點后的數(shù)字將會被忽略。始終忽略前導的0。十六進制格式的字符串都會被解析為0。如果可以被解析為整數(shù)，會返回整數(shù)。

以上字符字面量可以出現(xiàn)在字符串的任意位置，也會被當做一個字符解析。

console.log('He said, \"hello!\".'.length); // 18

（2）字符串的特點

字符串不可變，被創(chuàng)建后其值不能改變。如果要改變一個變量保存的字符串，首先要銷毀原來的字符串，再用另一個包含新值的字符串填充該變量。這也導致了老版本瀏覽器拼接字符串速度慢的問題。（趙業(yè)輝 達觀數(shù)據(jù)）

var lang = 'Java';
lang = lang + 'Script';

< >變量lang包含字符串'Java'創(chuàng)建10個字符的字符串并填充'Java'和'Script'銷毀原來的'Java'和'Script'數(shù)值、布爾值、對象和字符串都有toString()方法，null和undefined沒有。

調(diào)用數(shù)值的toString()方法時，可以傳遞輸出數(shù)值的進制數(shù)作為參數(shù)，默認為十進制。如果值有toString()方法——調(diào)用該方法（沒有參數(shù)的）并返回相應結(jié)果。null —— 'null'。undefined —— 'undefined'。constructor構(gòu)造函數(shù)：保存著用于創(chuàng)建當前對象的函數(shù)。var o = new Object()的構(gòu)造函數(shù)就是Object()。

hasOwnProperty(propertyName)：檢查給定的屬性在當前對象實例中（不是在實例的原型中）是否存在。作為參數(shù)的屬性名必須以字符串形式指定，例如o.hasOwnProperty('properName')。isPrototypeOf(object)：用于檢查傳入的對象是否是傳入對象的原型。

propertyIsEnumerable(propertyName)：檢查給定的屬性是否可以使用for-in語句枚舉，參數(shù)的屬性名必須以字符串形式指定。

toLocaleString()：返回對象的字符串表示，該字符串于執(zhí)行環(huán)境的地區(qū)對應。toString()：返回對象的字符串表示。

valueOf()：返回對象的字符串、數(shù)值或布爾值表示，通常與toString()方法的返回值相同。由一個嘆號（!）表示，有一個操作數(shù)可以用于任何值。無論這個值是什么數(shù)據(jù)，其都會返回一個布爾值。

首先將操作值使用Boolean()轉(zhuǎn)換為一個布爾值，再求其反。由兩個和號表示（&&），有兩個操作數(shù)兩個操作數(shù)都為 true，則返回 true；兩個操作數(shù)任一個為 false，則返回 false由兩個豎線表示（||），有兩個操作數(shù)兩個操作數(shù)都為 false 返回false，否則返回true

或操作可以用于任何類型。在有一個操作數(shù)不是布爾值的情況下，邏輯與操作不一定返回布爾值：

邏輯或與邏輯與相似，都是短路操作符，如果第一個操作數(shù)的求值結(jié)果為true，就不會對第二個操作數(shù)求值。（趙業(yè)輝 達觀數(shù)據(jù)）

可以使用邏輯或的這一行為避免為變量賦值null 或undefined：

var backupObject = 'backup value',
  preferredObject;
var myObject = preferredObject || backupObject;
console.log(myObject);
// 'backup value'

在上例代碼中，變量preferredObject 的值會優(yōu)先賦給myObject，變量backupObject 負責在preferredObject 不包含有效值的情況下提供后備值。如果preferredObject 的值不是null 或undefined，它的值將被賦給myObject，反之會將backupObject 的值賦給myObject。

3、乘性操作符

ECMAScript 中定義了三個乘性操作符：乘法、除法和求模。操作數(shù)為非數(shù)值的情況下會執(zhí)行自動的類型轉(zhuǎn)換，即先調(diào)用Number()轉(zhuǎn)型函數(shù)將其轉(zhuǎn)換為數(shù)值。

（1）乘法

乘法操作符由一個星號（*）表示，用于計算兩個數(shù)的乘積。

在處理特殊值的情況下遵循以下規(guī)則：

（2）除法

除法操作符由一個斜線（/）表示，執(zhí)行第二個操作數(shù)除第一個操作數(shù)的計算。

除法操作符對特殊值的處理規(guī)則：

（3）求模

求模（余數(shù)）操作符由一個百分號（%）表示。

在處理特殊值的情況下遵循以下規(guī)則：

4、關(guān)系操作符

包括大于（>）、小于（<）、大于等于（>=）、小于等于（<=）。

console.log(5 > 3);
// true
console.log(5 < 3);
// false

當關(guān)系操作符的操作數(shù)用了非數(shù)值時，轉(zhuǎn)換規(guī)則如下：

比較字母時應先轉(zhuǎn)換為全部大寫或全部小寫，因為大小寫字母的字符編碼不同。

5、相等操作符

相等和不相等——先轉(zhuǎn)換再比較。全等和不全等——僅比較不轉(zhuǎn)換。

（1）相等和不相等

相等操作符由兩個等于號（==）表示，兩個操作數(shù)相等返回true。不相等操作符由嘆號后跟等于號（!=）表示，兩個操作數(shù)不相等返回true。這兩個操作符都會先轉(zhuǎn)換操作數(shù)再比較相等性。（趙業(yè)輝 達觀數(shù)據(jù)）

相等操作符和不相等操作符轉(zhuǎn)換規(guī)則：

相等操作符和不相等操作符比較規(guī)則：

< >null 和 undefined是相等的。比較相等性之前，null 和undefined 不能轉(zhuǎn)換為其他值。有一個操作符是NaN，返回false，因為NaN不等于任何值。如果兩個操作數(shù)都是對象，則比較它們是不是同一個對象。如果兩個操作數(shù)都指向同一個對象，則相等性操作符返回true，否則返回false。'*=''/=''%=''+=''-=''<<=''>>=''>>>='不能把函數(shù)命名為 eval 或 arguments不能把參數(shù)命名為 eval 或 arguments同一函數(shù)內(nèi)的兩個命名參數(shù)不能同名

1、參數(shù)

ECMAScript 函數(shù)不介意傳遞進來的參數(shù)的數(shù)量和數(shù)據(jù)類型，因為 ECMAScript 中的參數(shù)在內(nèi)部是用一個數(shù)組來表示的，函數(shù)接收到的始終都是這個數(shù)組，與數(shù)組中有哪些參數(shù)無關(guān)。在函數(shù)體中可以通過arguments 對象來訪問這個參數(shù)數(shù)組，從而獲取傳遞給函數(shù)的每一個參數(shù)。（趙業(yè)輝 達觀數(shù)據(jù)）

arguments對象與數(shù)組類似，但它并不是 Array 的實例。在函數(shù)體中可以使用方括號語法訪問該函數(shù)的arguments對象的每個元素，使用 length 屬性來獲知傳遞進的參數(shù)數(shù)量。

根據(jù)這個特性，上文中的 hello 函數(shù)也可以用下面的方式重寫

function hello () {
   alert('Hello ' + arguments[0] + ',' + arguments[0]);
}

重寫后的函數(shù)不包含命名的參數(shù)。雖然沒有使用前文中的參數(shù)標識符，但是對函數(shù)的功能沒有影響，這說明了函數(shù)中命名的參數(shù)只是為了提供便利，但不是必須。

2、重載

ECMAScript 函數(shù)不能像傳統(tǒng)意義上那樣實現(xiàn)重載，只能通過再次定義函數(shù)變相地實現(xiàn)重載:

// 第一次聲明
function sum(num) {
  return num + 100;
}

//第二次聲明實現(xiàn)重載
function sum(num) {
  return num + 200;
}

注：本文由 達觀數(shù)據(jù) 投稿數(shù)據(jù)猿發(fā)布。

歡迎更多大數(shù)據(jù)企業(yè)、愛好者投稿數(shù)據(jù)猿，來稿請直接投遞至：tougao@datayuan.cn

來源：數(shù)據(jù)猿