63ES6_數(shù)據(jù)類型_表達式

?

?

目錄

JS：... 1

ES：... 2

V8：... 2

nodejs：... 3

語法：... 4

注釋：... 4

常量和變量：... 4

數(shù)據(jù)類型：... 6

類型轉(zhuǎn)換：... 6

String字符串：... 8

Number數(shù)值型：... 10

運算符：... 11

表達式：... 17

?

?

?

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

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

?

?

JS：

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

?

94年，netscape公司成立并發(fā)布了netscape navigator瀏覽器，占據(jù)了很大的市場份額，網(wǎng)景意識到web需要動態(tài)，需要一種技術(shù)實現(xiàn)；

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

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

?

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

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

03年5月，網(wǎng)景被解散；

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

?

netscape技術(shù)：

HTTP cookie，解決HTPP無狀態(tài)；

javascript；

ssl協(xié)議；

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

12年4月9日，ms以10億5千6百萬購買800+項專利或?qū)＠跈?quán)；

?

?

?

ES：

ECMAScript，由ECMA國際（前身為歐洲計算機制造商協(xié)會，European Computer Manufacturers Association）通過ECMA-262標準化的腳本程序設(shè)計語言，該語言被廣泛的應(yīng)用于互聯(lián)網(wǎng)；

?

javascript是商品名，目前商標權(quán)在oracle公司手中，ES是標準名；

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

?

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

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

?

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

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

ES4太激進，最終放棄；

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

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

?

?

?

V8：

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

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

v8引擎用C++開發(fā)，將javascript編譯成了機器碼，而不是字節(jié)碼，還用很多優(yōu)化方法提高性能，因此v8引擎速度非?？欤?/span>

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

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

?

?

?

nodejs：

是服務(wù)器端運行javascript的開源、跨平臺運行環(huán)境；

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

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

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

當前學習js，就讓它運行在最新版的nodejs上，為調(diào)度方便，也為使用最新的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運行環(huán)境中的performance counters 和ETW，全局安裝目錄D:\Program Files\nodejs，用戶目錄C:\Users\Administrator\AppData\Roaming\npm\

?

打開visualstudio，左側(cè)Extension，搜索并安裝Node Exec

?

vs code中快速生成html文件：

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

?

語法：

注釋：

1、單行注釋：

//

2、多行注釋：

/*

……

*/

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

?

?

常量和變量：

標識符：

必須是字母、數(shù)字、下劃線、$符號；

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

區(qū)分大小寫；

?

聲明：

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

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

const，聲明一個常量；

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

?

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

如果明確知道一個標識符定義后不再修改，應(yīng)盡量用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';?? //隱式聲明帶初始化，不推薦用，在嚴格模式下會產(chǎn)生異常，在賦值之前不能引用，因為它沒有聲明，一旦賦值就是全局作用域

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

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

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，不規(guī)范的初始化，全局作用域，不推薦

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

console.log(e)

輸出:

400

?

?

例：

function hello() {

??? var a = 100;

??? b = 200;

};

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

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

?

?

?

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

number，數(shù)值型，包括整型和浮點型；

boolean，布爾型，true和flase；

string，字符串；

null，只有一個值null；

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

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

symbol，ES6新引入類型；

NaN，not a number；

?

類型轉(zhuǎn)換：

弱類型，不需要強制類型轉(zhuǎn)換；

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

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

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

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

?

例，弱類型，都轉(zhuǎn)為字符串，再相加：

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

?

?

例，數(shù)字：

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

console.log(a = undefined + 8, typeof(a));?? //undefined沒法轉(zhuǎn)換成一個對應(yīng)的數(shù)字

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沒法轉(zhuǎn)換成一個對應(yīng)的數(shù)字

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，結(jié)果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'

?

?

?

轉(zhuǎn)義字符：

\0，null字節(jié)；

\b，退格符；

\f，換頁符；

\n，換行符；

\r，回車符；

\t，tab制表符；

\v，垂直制表符；

\'，單引號；

\"，雙引號；

\，反斜杠字符；

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

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

\uXXXX，由四位十六進制數(shù)字XXXX表示的unicode字符，如\u00A9是版權(quán)符號的unicode序列，見unicode escape sequences（unicode轉(zhuǎn)義字符）；

\U{XXXX}，unicode代碼點code point轉(zhuǎn)義字符，如\u{2F804}相當于unicode轉(zhuǎn)義字符\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));?? //提供索引號返回對應(yīng)的元素

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

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

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是非標函數(shù)，不要用

輸出：

mag edu

?

?

?

Number數(shù)值型：

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

?

數(shù)字類型還有三種符號值：

+Infinity，正無窮；

-Infinity，負無窮；

NaN，not a number，非數(shù)字；

?

二進制，0b0010、0B110；

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

十六進制，0xAA、0xff；

指數(shù)，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;

?

數(shù)字的方法：

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

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

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

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

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

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

?

例：

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

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

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

輸出：

1100

1100

NaN

?

?

?

運算符：

?

算術(shù)運算符：+-*/%

?

單目運算符：

++，自增；

--，自減；

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

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

?

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

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

i+=1，i=i+1，plus(i+1)，此函數(shù)與棧有關(guān)；

注：

java中的i++和i+=1是一回事，因此最終轉(zhuǎn)的字節(jié)碼是i++；

?

比較運算符：

<,>,>=,<=,

!=,==，寬松相等，進行類型轉(zhuǎn)換；

!==,===，嚴格相等，不進行類型轉(zhuǎn)換，內(nèi)容和類型都關(guān)注時用嚴格相等；

?

邏輯運算符：

&&，與；

||，或；

!，非；

?

位運算：

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

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

?

三元運算符：

條件表達式?真值:假值?? //等價于if...else結(jié)構(gòu)

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關(guān)鍵字聲明創(chuàng)建的，明確使用類型定義變量，可用于繼承關(guān)系的判斷；instanceof用得少，typeof用的多；

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

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

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

?

運算符優(yōu)先級：

.,[]

(),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;?? //單目運算符(++)優(yōu)先級高于雙目運算符(+)，(++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();?? //隱式聲明，創(chuàng)建實例

myobj.h = 45;?? //創(chuàng)建屬性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），整個數(shù)組中元素位置未移動

?

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在數(shù)組對象的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中非標準不推薦；

?

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

function表示普通函數(shù)，function*表示生成器函數(shù)；

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

?

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

}

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

{

}

?

死循環(huán)：

方式一，while (true) {}：

while (1) {

}

或

while (-1) {

}

方式二：

for (;;) {

}

?

例，解構(gòu)：

使用...解構(gòu)；

js的解構(gòu)很靈活；

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

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

?

console.log(lyrics);

?

function f(x,y,z) {?? //參數(shù)解構(gòu)

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

}

var args = [2,3,4];

f(...args);?? //函數(shù)調(diào)用

輸出：

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

9

?

?

?

?

?

例，生成器函數(shù)：

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

??? 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 }

?

?

?

?