63ES6_數據類型_表達式

?

?

目錄

JS：... 1

ES：... 2

V8：... 2

nodejs：... 3

語法：... 4

注釋：... 4

常量和變量：... 4

數據類型：... 6

類型轉換：... 6

String字符串：... 8

Number數值型：... 10

運算符：... 11

表達式：... 17

?

?

?

https://developer.mozilla.org?? #提供完善的HTML、CSS、JS等技術資料

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript?? #javascript指南

?

?

JS：

javascript，是一種動態的弱類型腳本解釋語言，和HTML、CSS并稱三大web前端核心技術，得到了幾乎主流browser的支持；

?

94年，netscape公司成立并發布了netscape navigator瀏覽器，占據了很大的市場份額，網景意識到web需要動態，需要一種技術實現；

95年9月網景瀏覽器2發布測試版本livescript，隨即在12月測試版本更名為javascript；同時期，ms推出IE并支持jscript、vbscript；

97年，netscape、ms、sun、borland（delphi、java工具、IDE工具）和其它組織確定了ECMAScript標準，js是ECMAScript標準的實現之一；

?

由于IE的捆綁銷售行為，網景的單一瀏覽器市場萎縮，從90年代的90%下降至06年的1%；

99年網景被AOL收購，不久，netscape公開了瀏覽器代碼，并創建了mozilla組織，mozilla組織使用gecko引擎重寫瀏覽器，mozilla組織用gecko引擎發布了firefox瀏覽器；

03年5月，網景被解散；

AOL于07年12月宣布停止支持netscape瀏覽器；

?

netscape技術：

HTTP cookie，解決HTPP無狀態；

javascript；

ssl協議；

jar格式文件，將java的class文件打包壓縮，并加上簽名；

12年4月9日，ms以10億5千6百萬購買800+項專利或專利授權；

?

?

?

ES：

ECMAScript，由ECMA國際（前身為歐洲計算機制造商協會，European Computer Manufacturers Association）通過ECMA-262標準化的腳本程序設計語言，該語言被廣泛的應用于互聯網；

?

javascript是商品名，目前商標權在oracle公司手中，ES是標準名；

根據ES標準，有很多實現引擎，包括javascript、jscript，它們都是ECMA-262標準的實現和擴展；

?

為什么browser兼容是個大問題？

html、css、js技術都在發展，標準版本很多，b內嵌的引擎實現不太一致，甚至有不按標準實現、或減少實現、或改變實現、或增加功能的實現，如IE就導致了開發人員負擔，很難做到一套代碼可兼容的跑在多b中，甚至不能跑在同一種b的不同版本中；

?

97年，制定首個ECMA-262版本；

99年12月，ES3，支持更強大的IE；

ES4太激進，最終放棄；

09年，ES5發布，得到廣泛支持，支持嚴格模式，支持json；

15年，ES6發布，引入非常多的新的語言特性，還兼容舊版本特性，ES6之前按版本號命名，從ES6開始使用年份作為版本號，ES6即ECMAScript 2015；

?

?

?

V8：

在IE瀏覽器市場一家獨大時，firefox、chrome異軍突起；

09年9月2日，google的chrome瀏覽器發布，一并發布js引擎，即v8引擎，v8使用BSD協議開源；

v8引擎用C++開發，將javascript編譯成了機器碼，而不是字節碼，還用很多優化方法提高性能，因此v8引擎速度非常快；

v8引擎還可獨立運行，可嵌入到其它任何C++程序中；

v8引擎的誕生，使得服務器端運行js成為了方便的事情；

?

?

?

nodejs：

是服務器端運行javascript的開源、跨平臺運行環境；

nodejs的原始作者ryan dahl，于09年發布，使用了v8引擎，并采用事件驅動、非阻塞異步IO模型；

10年，npm軟件包管理誕生，通過它可方便的發布、分享nodejs的庫和源代碼；

nodejs4.0引入了ES6的語言特性；

當前學習js，就讓它運行在最新版的nodejs上，為調度方便，也為使用最新的ES2017特性；

?

https://code.visualstudio.com/?? # ms的visualstudio有自動完成功能，還可安裝Node Exec插件，將js運行在nodejs上，F8運行腳本文件，F9停止

?

https://npm.taobao.org/mirrors/node

?

node-v10.11.0-linux-x64.tar.gz

node-v10.11.0-x64.msi?? #如果安裝失敗，禁用掉node運行環境中的performance counters 和ETW，全局安裝目錄D:\Program Files\nodejs，用戶目錄C:\Users\Administrator\AppData\Roaming\npm\

?

打開visualstudio，左側Extension，搜索并安裝Node Exec

?

vs code中快速生成html文件：

ctrl + N；右下角選擇HTML；文件第一行輸入!，回車；

?

語法：

注釋：

1、單行注釋：

//

2、多行注釋：

/*

……

*/

3、/**回車之后每一行會自動加上*，c++開始就有

?

?

常量和變量：

標識符：

必須是字母、數字、下劃線、$符號；

且必須是字母、數字、下劃線、$開頭，依然是不能數字開頭；

區分大小寫；

?

聲明：

var，聲明一個變量；var會把變量作用域提升；

let，聲明一個塊作用域中的局部變量；

const，聲明一個常量；

js中，變量聲明和初始化是可以分開的；

?

常量和變量選擇（C、C++都是這樣）：

如果明確知道一個標識符定義后不再修改，應盡量用const聲明為常量，減少被修改的風險，減少bug；

?

例，錯誤示例：

console.log(a);?? //X，要往后寫，在var a;之后

var a;

var b;

console.log(c)?? //X，c is not defined

?

輸出：

undefined

Error:

e:\git_practice\js\node_20697e6bb6d28.tmp:17

console.log(c)

??????????? ^

?

ReferenceError: c is not defined

?

例：

a = 'test';?? //隱式聲明帶初始化，不推薦用，在嚴格模式下會產生異常，在賦值之前不能引用，因為它沒有聲明，一旦賦值就是全局作用域

var b;?? //只是聲明，b為undefined

let c = 123;?? //規范的聲明并初始化，聲明全局或局部變量

var d = 456;?? //用var聲明并初始化，不推薦，推薦用let

console.log(a,b,c,d)

輸出：

test undefined 123 456

?

// const e;?? //X，SyntaxError: Missing initializer in const declaration

// e = 400;

// x = 6;?? //X，不規范的初始化，全局作用域，不推薦

const e = 400;?? //常量必須在聲明時初始化，之后不能再改

console.log(e)

輸出:

400

?

?

例：

function hello() {

??? var a = 100;

??? b = 200;

};

console.log(a)?? //X，作用域在函數內，突破不了

console.log(b)

?

?

例：

// console.log(a);

// var a = 100;

//相當于

var a;?? //提升的作用域，實際是把聲明提前了

console.log(a);

a = 100;

輸出：

undefined

?

// console.log(a);?? //X

// let a = 100;

let a;

console.log(a);

a = 100;

輸出：

undefined

?

?

?

數據類型：

number，數值型，包括整型和浮點型；

boolean，布爾型，true和flase；

string，字符串；

null，只有一個值null；

undefined，變量聲明未賦值的，對象未定義的屬性；

object，是以上基本類型的復合類型，是容器；

symbol，ES6新引入類型；

NaN，not a number；

?

類型轉換：

弱類型，不需要強制類型轉換；

遇到字符串，加號就是拼接字符串，所有非字符串隱式轉換為字符串；

如果沒有字符串，加號把其它所有類型都當數字處理，非數字類型隱式轉換為數字，undefined特殊為NaN；

如果是邏輯運算符、短路符，返回就是短路時的類型，沒有隱式轉換；

除非十分明確，否則不要依賴隱式轉換，寫代碼時，為了程序的健壯，請顯式的轉換；

?

例，弱類型，都轉為字符串，再相加：

console.log(a = 3 + 'magedu', typeof(a));

console.log(a = null + 'magedu', typeof(a));

console.log(a = undefined + 'magedu', typeof(a));

console.log(a = true + 'magedu', typeof(a));

輸出：

3magedu string

nullmagedu string

undefinedmagedu string

truemagedu string

?

?

例，數字：

console.log(a = null + 8, typeof(a));?? //null-->0

console.log(a = undefined + 8, typeof(a));?? //undefined沒法轉換成一個對應的數字

console.log(a = true + 8, typeof(a));?? //true-->1

console.log(a = false + 8, typeof(a));?? //false-->0

輸出：

8 'number'

NaN 'number'

9 'number'

8 'number'

?

?

例，bollean：

console.log(a = null + true, typeof(a));?? //0+1

console.log(a = null + false, typeof(a));?? //0+0

console.log(a = undefined + true, typeof(a));?? //undefined沒法轉換成一個對應的數字

console.log(a = undefined + false, typeof(a));

console.log(a = null & true, typeof(a));?? //0&1，與即按位乘

console.log(a = undefined & false, typeof(a));?? //NaN&0，結果0

輸出：

1 'number'

0 'number'

NaN 'number'

NaN 'number'

0 'number'

0 'number'

?

?

例，短路：

?

console.log(a = null && true, typeof(a));?? //null

console.log(a = false && null, typeof(a));?? //false

console.log(a = false && 'magedu', typeof(a));?? //false

console.log(a = true && 'magedu', typeof(a));?? //magedu

console.log(a = true && '', typeof(a));?? //

輸出：

null 'object'

false 'boolean'

false 'boolean'

magedu string

?string

?

?

例，null：

console.log(a = null + undefined, typeof(a));?? //NaN

輸出：

NaN 'number'

?

?

?

轉義字符：

\0，null字節；

\b，退格符；

\f，換頁符；

\n，換行符；

\r，回車符；

\t，tab制表符；

\v，垂直制表符；

\'，單引號；

\"，雙引號；

\，反斜杠字符；

\XXX，由從0-377最多三位八進制數XXX表示的Latin-1字符，如\251是版權符號的八進制序列；

\xXX，由從00-FF的兩位十六進制數字XX表示的Latin-1字符，如\xA9是版權符號的十六進制序列；

\uXXXX，由四位十六進制數字XXXX表示的unicode字符，如\u00A9是版權符號的unicode序列，見unicode escape sequences（unicode轉義字符）；

\U{XXXX}，unicode代碼點code point轉義字符，如\u{2F804}相當于unicode轉義字符\uD87E\uDC04的簡寫；

?

?

String字符串：

將一個值使用單引號或雙引號引用起來就是字符串；

ES6提供了反引號定義一個字符串，可支持多行和插值；

?

注：字符串插值，py3.6支持；

?

例：

let name = 'tom';

let age = 18;

let c = `line1

line2

Myname is ${name}. I am ${age}`;

console.log(c)

輸出：

line1

line2

Myname is tom. I am 18

?

?

字符串操作方法：

和py類似；

''.?? #查看方法

?

例：

let school = 'magedu';

console.log(school.charAt(2));?? //提供索引號返回對應的元素

console.log(school[2]);?? //同school.charAt(2)

console.log(school.toUpperCase());?? //轉大寫

console.log(school.concat('.com'));?? //連接

console.log(school.slice(3));?? //切片

console.log(school.slice(3, 5));?? //前包后不包

console.log(school.slice(-5, -1));?? //支持負索引

輸出：

g

g

MAGEDU

magedu.com

edu

ed

aged

?

?

例：

let url = 'www.magedu.com';

console.log(url.split('.'));

console.log(url.substr(7, 2));?? //返回子串，從何處開始，取多長

console.log(url.substring(7, 10));?? //返回子串，從何處開始，到什么為止，前包后不包

console.log(url.substring(7, 9));

輸出：

[ 'www', 'magedu', 'com' ]

ed

edu

ed

?

?

例：

let s = 'magedu.edu';

console.log(s.indexOf('ed'));?? //返回索引號

console.log(s.indexOf('ed', 6));?? //指定位置開始找

console.log(s.replace('.edu', '.com'));?? //替換

輸出：

3

7

magedu.com

?

?

例：

let s = ' \tmag edu? \r\n';

console.log(s.trim());?? //去除兩端的空白字符，trimLeft、trimRight是非標函數，不要用

輸出：

mag edu

?

?

?

Number數值型：

js中，數據均為雙精度浮點型，范圍只能在-(2^53-1)到2^53-1之間，整型也不例外；

?

數字類型還有三種符號值：

+Infinity，正無窮；

-Infinity，負無窮；

NaN，not a number，非數字；

?

二進制，0b0010、0B110；

八進制，0755，注意，0855被認作是十進制，因為8不在二進制中，ES6中最好使用0o前綴表示八進制；

十六進制，0xAA、0xff；

指數，1E3即1000，2e-2即0.02；

?

常量屬性：

var biggestNum = Number.MAX_VALUE;

var smallestNum = Number.MIN_VALUE;

var infiniteNum = Number.POSITIVE_INFINITY;

var negInfiniteNum = Number.NEGATIVE_INFINITY;

var notANum = Number.NaN;

?

數字的方法：

Number.parseFloat()，常用，把字符串參數解析成浮點數，和全局方法parseFloat()作用一致；轉換失敗為NaN；

Number.parseInt()，常用，把字符串解析成特定基數對應的整型數字，和全局方法parseInt()作用一致；轉換失敗為NaN；

Number.isFinite()，判斷傳遞的值是否為有限數字；

Number.isInteger()，判斷傳遞的值是否為整數；

Number.isNan()，判斷傳遞的值是否為NaN；

Math，內置數學對象Math，提供了絕對值、對數指數運算、三角函數運算、最大值、最小值、隨機數、開方等運算函數，提供PI值；

?

例：

console.log(parseInt('1100'));

console.log(Number.parseInt('1100'));

onsole.log(Number.parseInt('abc'));?? //X,NaN

輸出：

1100

1100

NaN

?

?

?

運算符：

?

算術運算符：+-*/%

?

單目運算符：

++，自增；

--，自減；

i++，先用i，用完之后i再自增加1；

++i，i先自增，再使用i；

?

i++和i+=1是兩碼事：

i++是plusplus(i)直接加未進棧；

i+=1，i=i+1，plus(i+1)，此函數與棧有關；

注：

java中的i++和i+=1是一回事，因此最終轉的字節碼是i++；

?

比較運算符：

<,>,>=,<=,

!=,==，寬松相等，進行類型轉換；

!==,===，嚴格相等，不進行類型轉換，內容和類型都關注時用嚴格相等；

?

邏輯運算符：

&&，與；

||，或；

!，非；

?

位運算：

&,|,^,~,<<,>>

位與，位或，異或，取反，左移，右移；

?

三元運算符：

條件表達式?真值:假值?? //等價于if...else結構

if (條件表達式) {

???????? 真值

} else {

???????? 假值

}

console.log('3' > 30 ? 'true' : 'false');

輸出：

false

?

?

注：

py中無三目運算符，類三目運算符為：

真值 if 條件 else 假值?? #如果語句簡單不超過3行，可用此處的類三目運算符

?

逗號操作符：

js允許多個表達式寫在一起；

let a=4+5,b=true,c='a' > 2 ? 't' : 'f';

console.log(a,b,c)

輸出：

9 true 'f'

?

?

其它：

instanceof，判斷是否屬性指定類型，要求必須使用new關鍵字聲明創建的，明確使用類型定義變量，可用于繼承關系的判斷；instanceof用得少，typeof用的多；

typeof，返回對象的類型字符串；

delete，操作符，刪除一個對象（an object）或一個對象的屬性（an object's property），或一個數組中某一個鍵值（數組元素，an element at a specified index in an array）；隱式類型的聲明都可刪除，如x = 42,myobj = new Number()；隱式聲明定義的變量可用delete刪掉，var、let預定義的變量不能用delete刪；

in，如果指定的屬性在對象內，則返回true，如數組Array對象中的索引號和length都是其屬性，console.log(0 in trees);console.log('length' in trees)，元素（即值）不能用in；

?

運算符優先級：

.,[]

(),new

!,~,-,+,++,--,typeof,void,delete

*,/,%

+,-

<<,>>,>>>

<,>,<=,>=,in,instanceof

==,!=,===,!==

&

^

|

&&

||

?:

=,+=,-=,*=,/=,%=,<<=,>>=,>>>=,&=,^=,|=

?

例：

console.log(1/2);

console.log(1/0);?? //無異常，返回無窮

console.log(5%3);

輸出：

0.5

Infinity

2

?

?

例：

let i = 0;

let a = i++;?? //let a=i;i++

?

console.log(a, i);

console.log(a, i++);

?

a = ++i;

console.log(a, i);

輸出：

0 1

0 1

3 3

?

?

例，C、C++、java面試題：

i = 0;

let a = ++i+i+++i+++i;?? //單目運算符(++)優先級高于雙目運算符(+)，(++i)+i+(++i)+(++i)

console.log(a);

輸出：

7

?

?

例：

console.log(100 > '200');

console.log(300 > '200');

console.log(300 > '2000');

console.log(300 > '2a');

console.log(300 == '300');

console.log('200' == '200');

console.log(300 === '300');

console.log(200 === 200);

輸出：

false

true

false

false

true

true

false

true

?

?

例：

console.log('abc' instanceof String);?? //false

a = new String('abc');

console.log(a instanceof String);?? //true

?

console.log(typeof(a));

console.log(typeof('abc'));

console.log(typeof(1));

?

console.log(typeof('abc') == 'string');

輸出：

false

true

object

string

number

true

?

?

例：

x = 42;?? //隱式聲明，嚴格模式下會報錯

var y = 43;?? //ES6之前用var聲明變量，ES6開始不推薦使用

let z = 44;?? //ES6推薦用let

?

myobj = new Number();?? //隱式聲明，創建實例

myobj.h = 45;?? //創建屬性h

?

console.log(delete x);?? //true,can delete if declared implicitly

console.log(delete y);?? //false,cannot delete if declared with var

console.log(delete z);?? //false,cannot delete if declared with let

console.log(delete Math.PI);?? //false,cannot delete predefined properties

console.log(delete myobj.h);?? //true,can delete user-defined properties

console.log(delete myobj);?? //true,can delete if declared implicitly

輸出：

true

false

false

false

true

true

?

?

例：

var trees = new Array(1,2,3,4,5);

for (var i=0;i<trees.length;i++)

??? console.log(trees[i]);

?

delete trees[3];?? //僅清除元素，位置仍留著（刪后為undefined），整個數組中元素位置未移動

?

for (var i=0;i<trees.length;i++)

??? console.log(trees[i]);

輸出：

1

2

3

4

5

1

2

3

undefined

5

?

?

例：

let trees = new Array('a','b','c','d','e','f');

?

console.log(0 in trees);?? //true，0在數組對象的index中，注意此處0是索引而不是值

console.log(3 in trees);?? //true

console.log(6 in trees);?? //false

console.log('c' in trees);?? //'c'不是屬性而是值，

console.log('length' in trees);?? //true，length是對象的屬性

?

delete trees[3];

console.log(3 in trees);?? //false

for (var i=0;i<trees.length;i++)

??? console.log(trees[i]);

輸出：

true

true

false

false

true

false

a

b

c

undefined

e

f

?

?

例：

let mycar = {

??? make: 'Honda',

??? model: 'Acord',

??? year: 2018

}

?

console.log('make' in mycar);

console.log('model' in mycar);

輸出：

true

true

?

?

?

?

表達式：

基本表達式，和py差不多；

?

解析式和py相似，但在ES6中非標準不推薦；

?

生成器推薦使用生成器函數，ES6開始支持；

function表示普通函數，function*表示生成器函數；

每次調用next()返回一個對象，該對象包含2個屬性，value和done，value表示本次yield表達式的返回值，done為boolean類型（false表示后續還有yield語句執行，如果執行完或return后done為true）；

?

function inc() {?? //java風格

}

function inc()?? //C++風格

{

}

?

死循環：

方式一，while (true) {}：

while (1) {

}

或

while (-1) {

}

方式二：

for (;;) {

}

?

例，解構：

使用...解構；

js的解構很靈活；

var parts = ['shoulder','kness'];

var lyrics = ['head',...parts,'toes'];

?

console.log(lyrics);

?

function f(x,y,z) {?? //參數解構

??? console.log(x+y+z);

}

var args = [2,3,4];

f(...args);?? //函數調用

輸出：

[ 'head', 'shoulder', 'kness', 'toes' ]

9

?

?

?

?

?

例，生成器函數：

function* inc() {?? //function表示普通函數，function*表示生成器函數

??? let i = 0;

??? while (1) {

??????? yield (++i);

??? }

}

let g = inc();

console.log(g.next());?? //

console.log(g.next());

輸出：

{ value: 1, done: false }

{ value: 2, done: false }

?

?

例：

function* inc() {

??? let i = 0;

??? let j = 7;

??? while (true) {

??????? yield i++;

??????? if (!j--) return 100;

??? }

}

let g = inc();

for (let i=0;i<10;i++)

??? // console.log(g.next().value)

??? console.log(g.next());

輸出：

{ value: 0, done: false }

{ value: 1, done: false }

{ value: 2, done: false }

{ value: 3, done: false }

{ value: 4, done: false }

{ value: 5, done: false }

{ value: 6, done: false }

{ value: 7, done: false }

{ value: 100, done: true }

{ value: undefined, done: true }

?

?

?

?