js前端技術

1、前端技術

一、HTML

HTML（hypertext markup language）超文本標記語言，不一樣於編程語言。

超文本就是超出純文本的範疇，描述文本的顏色、大小、字體。

 

HTML由一個個標籤組成，標籤各司其職，有的提供網頁信息，有的負責圖片，有的負責網頁佈局。

 

超文本須要顯示，就得有軟件呈現超文本定義的排版格式，，例如顯示圖片、表格、顯示字體的大小，顏色，軟件就是瀏覽器。

 

超文本的誕生是爲了解決純文本不能格式顯示問題，是爲了好看，可是隻用經過網絡分享超文本的內容，因此制定了HTTP協議。

 

二、瀏覽器

1）歷史、1980年代，tim berners-Lee爲cern設計基於超文本思想的enquire，以促進科研人員之間信息更新和共享。19899年其編寫了《信息化管理;建議》一文，並構建基於Internet的hypertext系統，並在cern開發了world wide web項目。打造了世界上第一站。於1991年8月6日上線。

 

Tim berners-lee於1990年發明了第一個瀏覽器，還發明瞭HTTP協議。

1994年MIT建立了w3c。w3c萬維網聯盟，負責萬維網持續發展，提出w3c的標準應該基於無專利權、無版稅。

 

Marc Andreessen於1993年發明了mosaic瀏覽器，看到了技術前景，不久後成立本身的公司---網景公司Netscape，1994發不了Netscape navigator瀏覽器，席捲全球。

 

1995年微軟發佈IE。

 

1999年網景被aol收購，收購後，Netscape公開了瀏覽器代碼。建立了Mozilla組織。Mozilla組織使用gecko引擎重寫瀏覽器。。

 

2003網景被解散。

 

2008年google的Chrome瀏覽器待着v8引擎橫空出世。

 

 

 

2）網景公司

HTTP cookie，解決HTTP無狀態。

Javascript

Ssl協議：

Jar格式文件，將Java的class文件打包壓縮，並加上簽名。

 

2012年4月9日，微軟購買800項美國在線的專利或專利受權。

 

 

3）瀏覽器技術

瀏覽器是特殊的客戶端。

瀏覽器軟件分爲兩個部分
         外殼：

         外殼提供用戶交互的界面。

         內核（引擎engine）

         提供HTML，css，圖像的渲染引擎。提供DOM編程接口。

         提供Javascript引擎。

排版（渲染）引擎	瀏覽器	說明
Gecko	Firefox
Trident	IE，AOL
Khtml
Presto	oPera
Webkit	Safari，Chrome
Blink	Chrome，Opera

 

Js引擎：

Jscript、tracemonkey（firefox）  v8等

 

 

使用jquery等框架來解決兼容性問題。

 

三、js

是一種動態的弱類型的腳本解釋性語言。和HTML、css秉承三大web核心技術。

 

 

 

四、ES

ECMAscript：是ecma國際組織

 

JavaScript是商品名。

2009年 ES5發佈

2015年ES6發佈

五、v8引擎

谷歌推出的，使用的是bsd協議開源。

 

 

 

2、nodejs

一、nodejs簡介

 

Nodejs是服務器端運行JavaScript的開源、跨平臺運行環境。

做者是瑞安達爾（ryan dahl），2009年發佈，使用了v8引擎，採用時間驅動，非阻塞，異步IO模型。

 

2012年，npm軟件包管理器誕生，經過其，能夠方便的發佈，分享nodejs的庫和源代碼。

Nodejs4.0引入了ES6語言的特性。

二、安裝

國內阿里雲鏡像

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

Linux:

https://npm.taobao.org/mirrors/node/latest-v8.x/node-v8.11.3-linux-x64.tar.xz

 

windows:

https://npm.taobao.org/mirrors/node/latest-v8.x/node-v8.11.3-x64.msi

 

默認路徑安裝：

 

三、開發

 

Visual studio code

https://code.visualstudio.com/Download

 

 

 

 

 

四、註釋

和c、Java同樣

//單行註釋

/*comment*/  多行註釋，在語句中間使用。

 

str = 'hello' + /*comment*/ 'student'

 

五、常量和變量

標識符

標識符必須是字母、下劃線、美圓符號和數字，但必須是字母、下劃線、美圓符號開頭。，不能是數字開頭。

標識符區分大小寫。

 

 

聲明

var  a聲明   a值爲undefined   聲明全局變量

let  b 聲明   let  塊變量，局部變量。

const  c常量聲明時候必須賦值。後期不容許更改。明確知道一個標識符定之後不在膝蓋，聲明的時候使用const常量，減小被修改的風險。

能給常量就不用變量。

變量和常量聲明和初始化的過程當中是能夠分開的。

var a

let b

console.log(a,b)

 

a = 1

b = 'a string'

console.log(a,b)

 

//const c   //不能定義，由於const定義時候必須賦值,以後不能夠再次進行更改

const c = 100

console.log(c)

 

var y //只是複製，y的值爲undefined

var x = 1 //規範的聲明並初始化，聲明全局或局部變量

 

function hello()

{

    var a    //只是聲明，a爲undefined，做用域是在函數中

    a = 100   //賦值 

}

//console.log(2,a)   //拋出錯誤，變量a未定義

 

//a = 200   //不能提高做用域

//var a = 200;hello();   //var提高做用域

//console.log(3,a)

 

 

六、數據類型

序號	名稱	說明
1	number	數值型
2	boolean	布爾型，true和False
3	String	字符串
4	Null	只有一個null值
5	Undefined	變量聲明未賦值的
6	Symbol	Es6新引入的類型
7	object類型	以上基本類型的複合類型，容器

ES是動態弱語言，弱類型語言，雖然先聲明瞭變量，可是變量能夠從新賦值任何類型。

//string

console.log('----string-------')

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

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

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

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

 

//number

console.log('----number----')

console.log(a = null + 1,typeof(a))

console.log(a = undefined + 1,typeof(a))   //undefined沒有辦法轉成對應的數字，只是顯示男，not a number

console.log(a = true + 8,typeof(a))

console.log(a = false + 8,typeof(a))

 

//boolean

console.log('----bool----')

console.log(a = null + true,typeof(a))

console.log(a = null + false,typeof(a))

console.log(a = undefined + true,typeof(a))   //undefined沒有辦法轉成對應的數字

console.log(a = undefined + false,typeof(a))  //undefined,不能轉成對應的數字

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

console.log(a = undefined & true,typeof(a))

 

//短路

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

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

console.log(a = false && 'abc',typeof(a))

console.log(a = true && 'abc',typeof(a))

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

 

//null

console.log(a = null + undefined,typeof(a))

 

----string-------

3abc string

nullabc string

undefinedabc string

trueabc string

----number----

1 'number'

NaN 'number'

9 'number'

8 'number'

----bool----

1 'number'

0 'number'

NaN 'number'

NaN 'number'

0 'number'

0 'number'

null 'object'

false 'boolean'

false 'boolean'

abc string

 string

NaN 'number'

 

 

類型運算：

String：與str相加所有轉化爲str類型。

Number：與number相加所有轉化爲number

Boolean類型：轉爲話number類型

 

 

 

弱類型，不須要強制類型轉換，會隱士的類型轉換。

 

總結：

遇到字符串，加號就是拼接字符串。

若是沒有遇到字符串，加號就是把其餘的全部的類型都當作數字處理。

Undefined特殊，由於他沒有定義值，因此是一個特殊的數字nan.

若是運算符是邏輯運算符，短路符，返回的就是短路時候的類型，沒有隱士轉換，

 

儘可能使用顯示的轉換。

七、字符串

將一個值利用單引號或者雙引號引發來就是字符串。

Es6提供了反引號定義一個字符串，能夠支持多行，還能夠支持插值。

字符串：插值。使用反引號$符號進行插值，賦值即定義。

 

let a = 'abc'

let b = 'ced'

let c = `line1

line2

line3

`

console.log(c)

 

let name = 'tom',age = 19

console.log(`hi name is ${name},age${age}`)

 

line1

line2

line3

 

hi name is tom,age19

 

 

 

 

八、轉義字符

名稱	說明
\0	Null字節
\b	退格符
\f	換頁符
\n	換行符
\r	回車符
\t	Tab製表符
\v	垂直製表符
\’	單引號
\」	雙引號
\	反斜槓符（\）
\XXX	由從0到377最多三位八進制數XXX，例如\251是版權符號的八進制序列
\xXX	由從00和FF的兩位十六進制數字XX表示的Latin-1字符。\ x A9是版權符號的十六進制序列
\uXXXX	由思惟十六進制數字XXXX的Unicode字符，例如，\u 00A9是版權符號的Unicode序列。見Unicode escape sequences（Unicode轉義字符）
\u{XXXXX}	Unicode代碼點（code point）轉義字符，例如\u{2F804}至關於Unicode轉義字符\uD87E\uDc04的簡寫。

 

九、字符串操做方法

let a = 'abcdefgh'

console.log(a.charAt(2))    //索引查找字符串

console.log(a[2])        //索引查找字符串

console.log(a.toUpperCase())  // 大寫

console.log(a.concat('.com'))   //拼接字符串

console.log(a.slice(3))      //  切片

console.log(a.slice(3,6))    //

console.log(a.slice(-2,-1))   //負索引切片

console.log(a.slice(-2))    //負索引切片

 

c

c

ABCDEFGH

abcdefgh.com

defgh

def

g

gh

 

let url = 'www.google.com'

console.log(url.split('.'))   //以什麼進行切割

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

console.log(url.substring(7,10))  // 返回子串，從何處開始，到什麼爲止

 

[ 'www', 'google', 'com' ]

gl

gle

 

 

let url1 = 'www.google.com'

console.log(url1.indexOf('com'))      //   查找字符串所在的索引

console.log(url1.replace('.com','.cn'))   //替換

console.log(url1.indexOf('gle',3))    //   向右偏移3

 

url2 = '\tmg edu \r\n'

console.log(url2.trim())       //去除兩端的空白字符串

 

11

www.google.cn

7

mg edu

 

 

 

 

 

十、數值型number

在js中，數據均爲雙精度浮點型範圍只能在- +（2^53-1）之間，整型不例外。

數字類型還有三種符號值：+infinity（正無窮）  -infinity（負無窮）和nan（not-a-number非數字）  

二進制0b。

八進制0o   

十六進制0x

指數表示1E3（1000），2e-2（0.02）

 

常量屬性：

 

 

數字的方法;

方法	描述
Number.parseFloat()	把字符串參數解析成浮點數，和全局方法parseFloat()做用一致
Number.parseInt()	把字符串解析成特定基數對應的整型數字，和全局方法parseInt()做用一致
Number.isFinite()	判斷傳遞的值是否爲有限的數字
Number.isInteger()	判斷傳遞的值是否爲整數
Number.isNaN()	判斷傳遞的值是否爲NaN

 

內置數學對象：Math

有絕對值，對數、指數運算、三角函數運算、最大值、最小值、隨機數、開方等運算函數。

 

console.log(Math.PI)    //3.14 PI值

console.log(Math.abs(-1))   //絕對值

console.log(Math.log2(16))   // 開方

console.log(Math.sqrt(2))    //平方根

console.log(Math.random())    //隨機數

 

十一、運算符

1）算數運算符

+ - * / %

 

console.log(1/2)   //0.5

console.log(1/0)  //Infinity

console.log(5%3)   //2

console.log(parseInt(1/2))     //  0  向下取整

console.log(parseInt(3/2))     // 1   向下取整

 

console.log(Math.floor(3/2))   // 1   向下取整

console.log(Math.ceil(3/2))    // 2   向下取整

console.log(Math.round(3/2))   //  2  四捨五入

console.log(Math.round(1/2))   //  1  四捨五入

 

++和—

單目運算符，表示變量自增，自減

I++ 先用i，用完以後在加1

++I i先自增，在使用i

let i = 0

let a = i++

console.log(a,i)   //0   1

console.log(a,i++)   // 0   1

a = ++ i

console.log(a,i)    // 3  3

 

 

單目運算符是優先級高於雙目運算符。

 

 7

i = 0;

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

console.log(a);        //  1   1   2    3  7

 

2）比較運算符

 

不作隱士的類型轉換寫的是===。

不作兩個等等號。嚴格相等使用三個等號。

 

console.log(100  > '200') //  false

console.log(100 > 'a')   //false

console.log(300 == '300')  //true

console.log(300 === '300')  //false

3）邏輯運算符

&&,||,!  與或非

 

4）位運算

& |  ^ ~<< >>位與，位或，異或，取反，左移，右移。

5）三元運算符

條件表達式?真值：假值

console.log(('3' > 30)?'真':'假')

 

 

 

 

6）逗號操做符

Js運行多個表達式寫在一塊兒

 

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

console.log(a)   // 9

console.log(c)    // f

7）其餘

名稱	說明
Instanceof	判斷是否屬於指定類型
Typeof	判斷類型字符串
Delete	Delete操做符，刪除對象
In	判斷指定的屬性在對象內，則返回true

console.log('a' instanceof String)  // false

console.log(1 instanceof Number)    // false

a = new String('b')                

console.log(a instanceof String)  // true

console.log(new Number(1) instanceof Number) // true

console.log(a instanceof Object) // true

 

Instance必須明確使用的類型定義變量。沒有 new方法的類型的都不是初始的類型。能夠用於繼承關係的判斷。

Typeof就是返回對象的類型字符串。

 

Delete刪除對象、屬性、數組元素

 

 

 

 

8）運算符優先級

運算符由高到低。

 

 

var trees = new Array（）；

 

逗號運算符優先級最低，比賦值語句還低。

9）表達式（生產器）

function* inc()

{

    let i = 0;

    let j = 2;

    while(true){

        yield i++

        if (!j--)return  100;

    }

}

let gen = inc()

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

console.log(gen.next());

 

 

{ value: 0, done: false }

{ value: 1, done: false }

{ value: 2, done: false }

{ value: 100, done: true }

{ value: undefined, done: true }

{ value: undefined, done: true }

{ value: undefined, done: true }

{ value: undefined, done: true }

{ value: undefined, done: true }

{ value: undefined, done: true }

 

每次調用next()方法返回一個對象，這個對象包含兩個屬性：value和done，value屬性表示本次yield表達式的返回值，done屬性爲布爾值，done是False表示後續還有yield語句執行，若是執行完成或者return後，done爲true。

 

 

3、js語法

一、語句塊

function hello(){

    let a = 1;

    var b = 2;

    c =3

}

if (1)

{

    let d = 4;

    var e = 5;

    f = 6

    if (true){

        console.log(d)

        console.log(e)

        console.log(f)

        console.log('------')

        g = 10

        var h = 11

    }

}

 

console.log(e)

console.log(f)

console.log(g)

console.log(h)

 

4

5

6

------

5

6

10

11

 

 

大括號中都是一個做用域。

Let定義的外部不能訪問，只能是內部才能訪問。Var塊做用域，外部能夠見到，普通定義外部也可見。

二、條件分支

if (cond1){

 

}

else if(cond2){

 

}

else if (cond3){

 

}

else{

   

}

 

條件False等效

 False

Undefined

Null

0

NaN

空字符串（」」）

三、switch..case分支語句

switch (expression){

    case label_1

        statements_1

        [break;]

 

    case label_2

        statements_2

        [break;]

    default:

        statements_def

        [break;]

}

 

 

let x = 5

switch (x){

    case 0:

        console.log('zero')

        break;

    case 1:

        console.log('one')

    case 2:

        console.log('two')

    case 3:

        console.log('three')

        break;

    case 4:

        console.log('four')

    default:

        console.log('other')

        break;

}

 

Switch…case語句均可以協程多分支結構。

 

四、for循環

//for ([initialExpression];[condition];[increamentExpression])

//{

  //  statement

//}

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

    console.log(i)

}

console.log('---')

 

五、while循環和do….while循環

While (condition)

         Statement

條件知足，進入循環，條件爲真，繼續循環

do

         statement

while (condition);

先進入循環，而後判斷，爲真就繼續循環。

let x = 10;

while(x--){

    console.log(x);

}

 

do{

    console.log(x);

 

}while(x++<10)

 

 

打印九九乘法表：

for (let x = 1;x<10;x++)

{   

    line = '';

    for(let y = 1;y<=x;y++)

        line += `${x}*${y}=${x*y}`;

    console.log(line)

}

 

 

五、for…in 循環

對象操做語句for…in用來遍歷對象的屬性

for (variable in object){

statements}

let arr =[10,20,30,40 ]

console.log(arr[2])   //30

for (let x in arr)

  console.log(x)

 

for (let index in arr)

console.log(`${index}:${arr[index]}`);

 

for (let i=0;i<arr.length;i++)

console.log(arr[i]);

 

let obj = {

  a:1,

  b:'abc',

  c:true

};

console.log(obj.a)

console.log(obj['b'])

console.log(obj.d)

console.log('++++++')

 

 

for (let x in obj)

console.log(x)  //屬性名

 

for (let key in obj)  //返回數組的index

console.log(`${key}:${obj[key]}`);

 

30

0

1

2

3

0:10

1:20

2:30

3:40

10

20

30

40

1

abc

undefined

++++++

a

b

c

a:1

b:abc

c:true

 

for in 循環返回的是索引或者key，須要簡介訪問到值。

數組反正返回的是索引，c風格for循環操做簡單。

六、for..of循環

Es6的新語法

let arr = [1,2,3,4,5]

let obj = {

  a;1,

  b:'abc',

  c:true

}

 

for (let i of arr){  //返回數組的元素

  console.log(i)

}

 

for (let i of obj){  //異常，不能夠迭代

  console.log(i)

}

 

For….of不能是迭代對象。

緣由是of後面必須是一個迭代器（typeerror）

break 、continue

break結束當前循環

continue中斷當前煦暖，直接進入下一次循環。

七、for迭代的差異

function sum(arr){

  for (let x in arr){

    console.log(x,typeof(x),arr[x]);

  }

  for (let x of arr){

    console.log(x,typeof(x));

  }

  for (let x = 0;x<arr.length;x++){

    console.log(x,typeof(x),arr[x])

  }

}

 

X退出的時候仍是會加一或減一。

 

4、函數及做用域

一、函數表達式

function //函數名（參數列表）{

    //函數體；

    return //返回值；

}

 

function add(x,y){

    return x + y

}

 

console.log(add(3,5))

 

 

匿名函數表達式

const add = function(x,y){

    return x + y;

};

console.log(add(4,5))

 

有名字的函數表達式

const add1 = function fn(x,y){

    return x + y;

};

console.log(add1(3,4))

有名字的函數表達式，名字只能內部使用，外部不可見

 

const add2 = function _add(n){

    if (n === 1) return n;

    return n+ _add(--n)

};

console.log(add2(5))

 

 

函數、匿名函數、函數表達式的差別

函數和匿名函數，本質上是同樣的，都是函數對象，不過函數都有本身的標識符，函數名，匿名函數須要的是藉助其餘的標識符而已。

區別在於，函數會聲明提高，函數表達式不會。

 

 

console.log(add(3,4))

 

function add(x,y){     //聲明提高

    return x + y;

};

 

console.log(sub(4,5))   //會報出異常的，提示sub未定義

const sub = function(x,y){

    return x + y;

};

 

 

 

定義函數的形式：function表達式。（有名字和匿名的），有名字的內部使用等。

 

聲明先作，調用後作。

 

生成器：

const counter = (function *(){

    count = 1

    while(1)

        yield count ++;

})();

 

console.log(counter.next())

 

 

 

 

二、高階函數

高階函數：函數做爲參數或者返回一個函數。

const counter = function(){

    let c = 0;

    return function(){

        return c++

    };

};

const c = counter()

console.log(c())

console.log(c())

 

 

 

map函數的實現

const map = function(arr,fn){

    newarr = []

    for (i in arr){

        newarr[i] = fn(arr[i])

    }

    return newarr

};

console.log(map([1,2,3,4],function(x){

    return ++x

}));

 

 

 

 

三、箭頭函數

 

const map1 = function(arr,fn){

    newarr = []

    for (i in arr){

        newarr[i] = fn(arr[i])

    }

    return newarr

}

 

console.log(map([1,2,3,4],x =>++x))

 

 

 

// console.log(map1([1,2,3,4],x =>++x))

// console.log(map1([1,2,3,4],x=>{return ++x}))

console.log(map1([1,2,3,4],(x)=>{return ++x}))

 

 

箭頭函數就是匿名函數定義。 

去掉關鍵字function。

一個參數的時候能夠省掉括號。無參和多參數的時候必須保留括號。多個參數使用逗號分隔。

有大括號的時候必須有return。

定義是定義的形式。調用必須加括號，由於有優先級的問題，因此調用前面的利用括號抱起來。

 

箭頭函數的返回值：

若是函數體部分有多行，就須要使用{},若是有返回值使用關鍵字return。

若是隻有一行語句，能夠同時省略大括號和return。

只要有return語句，就不能省略大括號，有return必須有大括號。

只有一條非return語句，加上大括號，函數就是沒有返回值了。

 

Map函數：

function map(arr,fn){

    newarr1 = []

    for (i in arr)

        newarr1[i] = fn(arr[i])

    return newarr1

};  

 

console.log(map([1,2,3,4],function(x){

    return ++x;

}));

四、參數

傳參是按照位置對應的，沒有關鍵字傳參這個屬性。寫的像的話只是賦值語句。

傳參的是隻是表達式的值。

 

數組不解構的話當作一個來進行，解構利用…

 

缺省值能夠進行定義的。位置傳參的，缺省值日後寫

//位置傳參

const add = (x,y)=> x+y;

console.log(add(4,5));

//缺省值

const add1 = (x,y=6)=>x+y;

console.log(add1(4))

//非關鍵字傳參，沒有關鍵字傳參，只是表達式

const add2 = (x,y)=>x+y;

console.log(add2(z=1,c=2))

//缺省值不能放在前，不然就是轉換爲3和undefined相加，加過爲NaN

const add3 = (x=1,y)=>x+y;

console.log(add3(3))    //NaN

 

 

五、可變參數

（1）args

 

const sum = function(...args){

    let resule = 0;

    for (i in args){

        resule += args[i]

    };

    return resule

};

console.log(sum(2,3,4))

 

 

可變參數使用…args.

（2）arguments對象

const sum = function(...args){

    let resule = 0;

    console.log(arguments)

    for (i in args){

        resule += args[i]

    };

    return resule

};

console.log(sum(2,3,4))

 

 

{ '0': 2, '1': 3, '2': 4 }

全部的參數會保存到一個k，v，鍵值對的字典裏面。

（3）參數解構

const add = function (x,y){

    return x+y

}

console.log(add(...[100,200,300,400,500]))   //參數解構，不須要參數一一對應的。

 

參數解構，不須要和須要的參數一一對應。

六、返回值

Return的返回值：返回的一般是幾個參數，返回的是最後一個參數的值。逗號表達式的。

const add1 = (x,y)=>{return x,y}

console.log(add1(1,2))

表達式的值：

逗號表達式，最後一個的值。

返回 的都只是一個單值。

a = (x = 5,y=6,true);

console.log(a)

 

b = (x=1,y=4,'abc');

console.log(b)

 

function c() {

    return x= 1,y=2,'abc',false;

}

 

console.log(c());

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

七、做用域

Function函數定義，是獨立的做用域，內部定義的變量外部不能夠見到。

 

 

//函數做用域

function c(){

    a = 1

    var b = 2

    let c1 = 3

};

c();

console.log(a)

//console.log(b)   //  函數中var定義變量沒有方法突破，外界見不到

//console.log(c1)  //   let定義的外界見不到

 

//塊做用域

if (1){

    d = 4

    var e = 5

    let f = 6

}

console.log(d)

console.log(e)       //var 塊中定義的纔會外界能夠見到。

// console.log(f)      //let定義外界始終見不到

var b = 2能夠提高聲明，能夠突破非函數的塊做用域。

a = 1 隱士聲明不能進行提高聲明，

let a=3不能提高聲明。

嚴格模式：使用」use strict」語句放到函數的首行，或者js腳本首行。

 

function show(i,args){

    console.log(i,args)

};

x = 100;

function fn(){

    let z = 200;

    {

        var a = 300;

        show(1,x)

        t = 'free'

        let p = 400;   

    }

    var y = 500

    show(2,z)

    show(3,x)

    show(4,a)

    show(5,t)

    //show(5.5,p) //異常，let出不來上一個語句塊

    {

        show(6,y);

        show(7,a)

        show(8,t)

        {

            show(9,a)

            show(10,t)

            show(11,z)

        }

    }

}

 

fn()

 // show(12,y)   //異常，出不了函數的y

show(13,t)

 

 // show(14,a)   //異常，a不能出函數的

 

show(15,z)   //變量聲明提高，聲明瞭z，可是還沒賦值

var z = 10;

 

 

5、js對象模型

基於原型的面嚮對象語言，而不是基於類的面嚮對象語言。

基於對象事件。

Js是基於原型的語言，只有原型對象的概念，原型對象就是一個模板，新的對象從這個對象模板構建從而獲取最初的屬性，任何對象在運行時候能夠動態的增長屬性。任何一個對象均可以做爲另外一個對象的原型，後者就能夠共享前者的屬性。

 

 

 

 

 

一、定義類

var obj = {

 

}

 

var obj1 = new Object();

var obj2 = new Object;

 

 

建立的時候必須使用new方法。

function定義的時候 大駝峯。

 

字面聲明方式。

 

二、es6以前---構造器

function Point(x,y){

    this.x = x

    this.y = y

    this.show = ()=>console.log(1,this,this.x,this.y)

};

 

console.log(Point)

p1 = new Point(4,5)

console.log(2,p1)

 

function Point3D(x,y,z){

    Point.call(this,x,y);

    this.z = z

    console.log(3,'Point 3d')

};

console.log(4,Point3D)

p2 = new Point3D(3,4,5)

console.log(5,p2)

p2.show();

 

 

[Function: Point]

2 Point { x: 4, y: 5, show: [Function] }

4 [Function: Point3D]

3 'Point 3d'

5 Point3D { x: 3, y: 4, show: [Function], z: 5 }

1 Point3D { x: 3, y: 4, show: [Function], z: 5 } 3 4

 

 

（1）定義一個函數（構造器）對象，函數名首字母大寫。

（2）This指代是當前實例的自己。定義屬性。

（3）使用new和構造器建立一個通用對象。New操做符會將新的對象的this值傳遞給point3d構造器函數，函數爲這個對象建立z屬性。

 

若是不使用new方法，就是普通的函數調用，this不表明實例。

 

 

三、es6中的class

（1）class

Es6開始，提供了關鍵字class，建立對象更加簡單、清晰。

（1）利用關鍵字class，建立的本質上仍是一個函數，是特殊的函數。

（2）一個類只能擁有一個名爲constructor的構造器方法，若是沒有顯示定義一個構造方法，，就會默認添加一個constructor方法。

（3）繼承使用extends關鍵字

（4）一個構造器可使用super關鍵字來調用父類的構造函數。

（5）類沒有私有屬性。

 

class Point{

    constructor(x,y){

        this.x = x

        this.y = y

    }

    show(){

        console.log(this,this.x,this.y)

    }

}

let p1 = new Point(10,11)

p1.show()

 

class Point3D extends Point{

    constructor(x,y,z){

        super(x,y);

        this.z = z

    }

}

let p2 = new Point3D(4,5,6)

p2.show()

 

Point { x: 10, y: 11 } 10 11

Point3D { x: 4, y: 5, z: 6 } 4 5

 

從新寫show方法；

class Point{

    constructor(x,y){

        this.x = x

        this.y = y

    }

    show(){

        console.log(this,this.x,this.y)

    }

}

p1 = new Point(1,2)

console.log(p1)

class Point3D extends Point{

    constructor(x,y,z){

        super(x,y)

        this.z= z

       

    }

    show(){

        console.log(this ,this.x,this.y,this.z)

    }

}

 

p2 = new Point3D(3,4,5)

console.log(p2)

 

子類中直接重寫父類的方法便可，若是須要使用父類的方法，使用super.method()的方式調用。

 

使用箭頭函數修改：

class Point{

    constructor(x,y){

        this.x = x

        this.y = y

        this.show = ()=>console.log('point')

    }

}

//繼承關係

class Point3D extends Point{

    constructor (x,y,z){

        super(x,y,z)

        this.z = z

        this.show=()=>console.log('point3d')

    }

}

 

let p2 = new Point3D(3,4,5);

p2.show()

 

 

point3d

 

子類覆蓋，最終顯示的結果是point

class Point{

    constructor(x,y){

        this.x = x

        this.y = y

        this.show =()=>

            console.log('point')

    }

}

 

class Point3D extends Point{

    constructor(x,y,z){

        super(x,y)

        this.z = z

        //this.show=()=>console.log('Point3d')   

    }

     show(){

        console.log('point3d')

     }

}

 

優先使用實例的方法，show方法，使用this的方法。

class Point{

    constructor(x,y){

        this.x = x

        this.y = y

        //this.show =()=>

          //  console.log('point')

    }

    show(){

        console.log(this,this.x,this.y)

    }

}

 

class Point3D extends Point{

    constructor(x,y,z){

        super(x,y)

        this.z = z

        this.show=()=>console.log('Point3d')   

    }

     //show(){

       // console.log('point3d')

     //}

}

 

let p1 = new Point3D(2,3,4)

console.log(p1)

p1.show()

 

 

 

 

屬性優先，必定先用屬性。優先使用子類的屬性。

 

總結：若是子類和父類使用同一種方式進行定義，子類覆蓋父類的。

若是父類使用的屬性，子類使用的是方法，那麼就是採用父類的屬性。

若是子類使用的屬性，父類是方法，那麼優先使用的是子類的屬性方法。。

 

 

最終總結，屬性優先。。同一類定義的，子類優先

 

 

靜態屬性：

靜態方法沒有很好的支持的。

 

（2）靜態方法：

在方法名前面加上static，就是靜態方法了。

 

class Add{

    constructor(x,y){

        this.x = x

        this.y = y

    }

    static show(){

        console.log(this.x)  //this是Add   不是Add的實例

    }

}

 

a = new Add(2,3)

console.log(a)

 //a.show()    實例不能直接訪問靜態方法

a.constructor.show()  //實例能夠經過constructor構造器方法訪問靜態方法。

 

 

靜態方法總結：實例不能直接訪問靜態方法，實例必須經過constructor方法訪問靜態方法。

靜態成員必須使用類來定義的。

實例是本身的。

 

四、this的坑

var shcool = {

    name : 'abc',

    getNameFunc: function(){

        console.log(1,this.name)

        console.log(2,this)

        return function(){

            console.log(3,this === global);

            return this.name

        }

    }

};

console.log(4,shcool.getNameFunc()());

 

this是全局的global的，因此第三行是true。

第四行，This是global的，所喲下面的return this.name沒有name屬性。

函數調用的時候調用的方式不用，this的對象就是不一樣的。

 

 

函數執行的時候，會開啓新的執行上下文環境executioncontext。

建立this屬性。

（1）myfunction(1,2,3)普通的函數調用，this指向的是全局對象，全局對象是nodejs的global或者瀏覽器的window。

（2）myObject.myFunction(1,2,3),對象的方法調用方式，this指向包含該方法的對象。

（3）call和apply方法的調用，都要看第一個參數是誰。

 

解決this的問題。

1）顯式傳入

 

var shcool1 = {

    name : 'cde',

    getNameFunc1 : function(){

        console.log(this.name)

        console.log(this);

        return function(that){

            console.log(this === global);

            return that.name;

        }

    }

}

 

console.log(shcool1.getNameFunc1()(shcool1))

 

cde

{ name: 'cde', getNameFunc1: [Function: getNameFunc1] }

true

cde

 

 

利用關鍵字that   傳入對象。主動傳入對象，避開了this的問題

2）引入call、apply方法。

var shcool2 = {

    name : 'asd',

    getNameFunc2:function(){

        console.log(this.name)

        console.log(this);

        return function(){

            console.log(this === global);

            return this.name

        }

    }

}

 

console.log(shcool2.getNameFunc2().call(shcool2));

 

 

asd

{ name: 'asd', getNameFunc2: [Function: getNameFunc2] }

false

asd

 

call方法和apply都是函數對象的方法，第一參數都是傳入對象引入的。

Apply傳其餘參數須要數組。

Call傳其餘參數須要使用可變參數收集。

 

3）bind方法

var school3 = {

    name: 'asdd',

    getNameFunc3:function(){

        console.log(1,this.name)

        console.log(2,this)

        return function(){

            console.log(3,this === global);

            return this.name;

        }

    }

};

 

// console.log(school3.getNameFunc3().bind(school3));

 

var func = school3.getNameFunc3()

console.log(4,func)

 

var bindfunc = func.bind(school3)

console.log(5,bindfunc)

console.log(6,bindfunc())

 

 

1 'asdd'

2 { name: 'asdd', getNameFunc3: [Function: getNameFunc3] }

4 [Function]

5 [Function: bound ]

3 false

6 'asdd'

Apply、call方法，參數不一樣，調用時候傳入this。

。bind方法是爲函數綁定this，調用時候直接調用

 

4）es6引入的箭頭函數定義

 

 

var school = {

    name :'ass',

    getNameFunc:function(){

        console.log(this)

        console.log(this.name)

        return ()=>{

            console.log(this === global);

            return this.name

        }

    }

};

console.log(school.getNameFunc()())

 

{ name: 'ass', getNameFunc: [Function: getNameFunc] }

ass

false

ass

 

 

class school{

    constructor(){

        this.name = 'abcd';

    }

    getNameFunc(){

        console.log(this.name)

        console.log(this);

        return ()=>{

            console.log(this === global);

            return this.name

        }

    }

};

 

console.log(new school().getNameFunc()())

 

abcd

school { name: 'abcd' }

false

abcd

 

 

綁定以後返回一個新的函數。

 

全局對象。

全局global，

瀏覽器中叫作window

解決this語法的利用bind。

 

 

 

 

五、高階對象、高階類、或稱爲Mixin模式

Mixin，混合模式，不用繼承就能夠複用的技術，主要仍是爲了解決多重繼承的問題，多繼承的路徑是個大問題。

 

Js是基於對象的，類和對象都是對象模板。

混合Mixin，指的四將一個對象的所有或者部分拷貝到另外一個對象上去，其實就是屬性了。

能夠將多個類或對象混合成一個類對象。

 

指的是將一個對象的所有或者部分拷貝到另外一個對象上去。

 

 

 

 

 

 

返回的是定義的類。

 

 

class Serialization{

    constructor(){

        console.log('serialization construtor---');

        if (typeof(this.stringify) !== 'function'){

            throw new ReferenceError('should define stringify')

        }

    }

}

 

class Point extends Serialization{

    constructor(x,y){

        console.log('Point constructor');

        super()

        this.x = x

        this.y = y

    }

 

    stringify(){

        return  `<point x=${this.x},y=${this.y}>`

    }

}

class Point3d extends Point{

    constructor(x,y,z){

        super(x,y);

        this.z = z

    }

 

    stringify(){

        return `<point x=${this.x},y=${this.y},z=${this.z}>`

    }

}

 

p = new Point(4,5)

console.log(p.stringify())

p3d = new Point3d(7,8,9)

console.log(p3d.stringify())

 

Point constructor

serialization construtor---

<point x=4,y=5>

Point constructor

serialization construtor---

<point x=7,y=8,z=9>

 

高階對象實現，將類的繼承構建成爲箭頭函數

//普通繼承

class A extends Object{};

console.log(A)

 

//匿名類

const A1 = class{

    constructor(x){

        this.x = x;  

    }

}

console.log(A1)

console.log(new A1(100).x)

 

//匿名繼承

const B = class extends Object{

    constructor(){

        super()

        console.log('B constorse')

    }

};

console.log(B)

b = new B()

console.log(b)

 

 

[Function: A]

[Function: A1]

100

[Function: B]

B constorse

B {}

 

 

Point3d調用父類serialization，此類而後調用繼承point類。

儘可能少的改變原有代碼的方式加強注入函數的功能。Extends繼承，就是Mixin類，混入的類型。

React框架大量使用了Mixin類。

 

const x = (Sup) =>{

    return class extends Sup{

        constructor(){

            super();

            console.log('c constructor')

        }

    }

};

 

const c = Sup =>class extends Sup{

    constructor(){

        super();

        console.log('c constorce')

    }

};

 

cls = c(A)

console.log(cls)

a = new cls();

console.log(a);

 

 

const Serialization = Sup => class extends Sup{

    constructor(...args){

        console.log('serialization constructor--')

        super(...args);

        if (typeof(this.stringify)!=='function'){

            throw new ReferenceError('should define stringify')

        }

    }

}

 

class Point{

    constructor(x,y){

        console.log('point constrouct')

        this.x =x

        this.y =y

    }

}

 

class Point3d extends Serialization(Point){

    constructor(x,y,z){

   

            super(x,y)

            this.x = x

        }

 

   

    stringify(){

        return `<point3d ${this.x}.${this.y}>`

    }

}

 

let p3d = new Point3d(1,2,3)

console.log(p3d.stringify())

 

 

serialization constructor--

point constrouct

<point3d 1.2>

Serialization(point)其實是匿名函數的調用，返回一個新的類型，point3d繼承來自這個新的匿名函數類型，加強了功能。

React框架大量使用了Mixin技術。

6、異常

一、拋出異常

使用throw關鍵字拋出異常。

使用throw關鍵字能夠拋出任意對象的異常

 

 

二、捕獲

try…catch語句捕獲異常

try….catch…finally ，語句捕獲異常，finally保證最終必定執行。

try{

    throw 1;

}catch (error){

    console.log(error.constructor.name);

}finally{

    console.log('end')

}

 

 

 

三、模塊化

（1）簡介

Js主要是在前端的瀏覽器中使用，js文件下載緩存到客戶端，在瀏覽器中執行。

簡單的表單的本地驗證，漂浮廣告。

服務器端使用ASP、JSP等動態網頁技術，將東外生成數據嵌入一個HTML模板中，裏面夾雜着js後使用<script>標籤，返回給瀏覽器端。Js只是簡單的函數和語句的組合。

 

 

2005年後，google大量使用ajax技術，能夠一步請求服務器端數據，前端交互的巨大變化，

前端功能須要愈來愈多，代碼多，js文件的增多。全局變量污染，函數名衝突，沒法表達腳本之間的依賴關係，用腳本文件前後加載實現的，須要模塊化的出現。

 

 

2008年v8引擎，2009年nodejs，支持服務器端JS編程，沒有模塊化是不能夠的。

以後產生了commonjs規範，

Common規範，使用全局 require函數導入模塊，使用exports導出變量。

 

AMD（asynchronous module definition）異步模塊定義：使用異步方式加載模塊，模塊的加載不影響他後面語句的執行，全部依賴此模塊的語句，都須要定義在一個回調函數裏面，回調函數中使用模塊的變量和函數，模塊加載完成後，回調函數纔會執行，就能夠安全的使用模塊的資源，就是AMD/requires。AMD雖然是異步，可是會預先加載和執行。

 

CMD（common module definition），使用seajs，做者是淘寶前端玉伯，兼容幷包解決了requirejs的問題。Cmd推崇as lazy as possible，儘量的懶加載。

 

（2）ES6模塊化

Import語句，導入另外一個模塊導出的綁定。

Export語句，從模塊中導入函數、對象、值，供其餘模塊import導入引用。

 

（3）導出

創建模塊的目錄src，此目錄下創建mode.js,  內容是導入和導入模塊的代買

 

export default function a(){   //導出缺省的

    console.log('a is t1')

};

 

a();

 

//導出函數

Export function foo(){

    Console.log(‘foo function’);

}

 

//導出常量

Export const consta = ‘aaa’

 

 

（4）導入

import a from './t1-1'

a();

 

vs code能夠很好的語法支持，可是運行環境和v8引擎，不能很好的支持模塊化語法。

 

四、編譯器

轉譯從一種語言代碼轉換到另外一語言代碼，固然也能夠從高版本轉譯到低版本的支持語句。

因爲js存在不一樣的版本，不一樣瀏覽器兼容問題，使用transpiler轉譯工具解決。

 

Babel

開發中比較新的es6的語法，經過轉移器指定Wie特定的某些版本代碼。

官網：http://babeljs.io/

 

function* inc()

{

    let i = 0;

    let j = 2;

    while(true){

        yield i++

        if (!j--)return  100;

    }

}

let gen = inc()

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

console.log(gen.next());

 

 

轉化結果：

"use strict";

 

var _marked = /*#__PURE__*/regeneratorRuntime.mark(inc);

 

function inc() {

    var i, j;

    return regeneratorRuntime.wrap(function inc$(_context) {

        while (1) {

            switch (_context.prev = _context.next) {

                case 0:

                    i = 0;

                    j = 2;

 

                case 2:

                    if (!true) {

                        _context.next = 9;

                        break;

                    }

 

                    _context.next = 5;

                    return i++;

 

                case 5:

                    if (j--) {

                        _context.next = 7;

                        break;

                    }

 

                    return _context.abrupt("return", 100);

 

                case 7:

                    _context.next = 2;

                    break;

 

                case 9:

                case "end":

                    return _context.stop();

            }

        }

    }, _marked, this);

}

var gen = inc();

for (var i = 0; i < 10; i++) {

    console.log(gen.next());

}

 

缺省必須寫在外頭，函數和類。

 

五、預設

有presets，預設的一些

 

 

六、轉義安裝配置****

1）新建文件夾src 和lib

將導入和導出文件放入src文件中。

 

 

目錄下打開shell  敲入命令npm init 生成package.json文件。

 

 

 

2）設置鏡像

.npmrc文件

 

echo "registry=https://registry.npm.taobao.org" > .npmrc

 

3）安裝

項目根目錄下。

$ npm install babel-core babel-cli  --save-dev

 

安裝完成後，會在項目根目錄下出現node_moudles

4）修改package.json文件

  "name": "trans",

  "version": "1.0.0",

  "description": "trans test",

  "main": "index.js",

  "directories": {

    "lib": "lib"

  },

  "scripts": {

    "build": "babel src -d lib"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-cli": "^6.26.0",

    "babel-core": "^6.26.3"

  }

}

替換爲這樣的。

 

"build": "babel src -d lib"   的意思是從src目錄轉義後輸出到lib目錄。

七、準備目錄

項目根目錄下建立src和lib目錄。

 

Src是源碼目錄。

Lib是目標目錄

 

八、配置babel和安裝依賴

touch .babelrc  建立此文件，內容以下  .babelrc沒有後綴

 

{

「presets」:["env"]

}

 

Env是當前環境自動選擇。

 

安裝依賴

npm install babel-preset-env  -save-dev

 

 

九、準備js文件

export default function a(){

    console.log('a is t1.a()')

};

 

export function b(){

    console.log('t1.b()')

};

 

export  let c = 100;

export  var d = 200;

export const e = 300;

 

 

import a from './mod'

a();

 

在項目根目錄下：

$ npm run build

 

> trans@1.0.0 build C:\Users\WCL\Documents\trans    //

> babel src -d lib                          //

 

src\index.js -> lib\index.js       //

src\mod.js -> lib\mod.js           //

 

兩個文件被轉譯。

運行文件：

$ node lib/index.js

a is t1.a()

使用babel轉譯工具轉譯js很是流行。

能夠提升開發效率，兼容性交給轉移器處理。

 

lib 下的index轉譯後的文件格式：

'use strict';

 

var _mod = require('./mod');

 

var _mod2 = _interopRequireDefault(_mod);

 

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

 

(0, _mod2.default)();

 

Mod的文件；

'use strict';

 

Object.defineProperty(exports, "__esModule", {

    value: true

});

exports.default = a;

exports.b = b;

 

// function a(){

//     console.log('test')

// }

 

// export default

function a() {

    console.log('a is t1.a()');

};

 

function b() {

    console.log('t1.b()');

};

 

var c = exports.c = 100;

var d = exports.d = 200;

var e = exports.e = 300;

 

十、導入導出

導出文件代碼所有在src下的mod.js文件，導入文件都在index.js文件下

 

export default function a(){

    console.log('a is t1')

};

//缺省導出，匿名函數

export default function(){

    console.log('default export function')

}

 

a();

//缺省導入

import defaultFunc from './mod'

defaultFunc();

 

缺省導入的時候，能夠本身從新命名，不須要和缺省導出 的時候一致。

缺省導入，不須要在import後使用花括號。

 

 

 

 

/**

 * 導出舉例

 */

//缺省導出類

export default class{

    constructor(x){

        this.x = x;

    }

    show(){

        console.log(this.x)

    }

}

 

//命名導出函數

export function foo(){

    console.log('regular foo()')

}

 

//函數定義

function bar(){

    console.log('regular bar()')

}

 

//變量常量定義

let x= 100;

var b = 200;

const z=300;

 

export {bar,x ,y,z};

 

/**

 * 導入

 */

 

import defaluts,{foo,bar,x,y,z as CONST_c}from './mod'

foo();

bar();

console.log(x);

console.log(y);

console.log(CONST_c);

new defaluts(100).show();

 

導入全部的導出，會使用一個新的名詞空間，使用名詞空間能夠避免衝突。

 

Import * as newmod from ‘./mod’;

Newmod.foo();

Newmod.bar();

New newmod.default(200).show();

 

 

7、解構

Js的參數解構參考文檔; https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

一、列表解構

var a = [1,2,3,4,5,6]

var b = [...a,7,8,9,0]

console.log(b)

 

 

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ]

 

 

 

二、參數解構

//參數

function f(x,y,z){

    console.log(x+y+z)

}

var args = [1,2,3,4]

f(...args);

 

結果爲6，按照位置一一對應參數，多了的參數不用管，少的參數直接爲undefined。

三、數組

解構的時候也是利用數組進行接數值。

//數組解構

 

const arr = [1,2,3]

let [x,y,z] = arr

console.log(x,y,z)

//丟棄元素

const [,b,] = arr

console.log(b)

//少於數組元素

const[c,d] = arr

console.log(c,d)

 

//多餘數組元素

const[e,f,g,h] = arr

console.log(e,f,g,h)

 

//可變變量

const[i,...args] = arr

console.log(i)

console.log(args)    //可變的參數args收集多個，利用的數數組

 

//支持默認參數

const[k=20,l=34,,,p=222] = arr

console.log(k,l,p)       //沒有的話默認使用默認參數，有的話優先使用數組的元素

 

 

數組，可變參數的收集就是數組。

可變參數不能給缺省值。

能夠丟棄，參數能夠多，能夠少，少的所有使用undefined。

 

 

 

 

四、對象解構

 

 

const obj = {

    a:100,

    b:200,

    c:300

};

 

//let {x,y,z} = obj;

//console.log(x,y,z) //undefined undefined undefined  名字要與之對應的。

 

let {a,b,c} = obj

console.log(a,b,c)    //名字是key的名字， 100，200,300

 

//let {a:x,b:y,c:z} = obj  //設置別名，

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

//console.log(x,y,z)    //利用別名打印出消息

 

//缺省值

let {a:x,b:y,c:z='abc'} = obj

console.log(x,y,z)

 

 

結構的時候，提供對象的屬性名（key），能夠根據屬性名找到對應的值， 沒有找到對應的值使用缺省值，沒有缺省值的話就是undefined，也能夠採用別名的方式，把key改爲別名，經過別名進行訪問屬性的值。

 

 

別名：

 

 

 

Obj解構。

 

五、複雜結構

（1）嵌套的數組：

const arr = [1,[2,3],4]

const [a,[b,c],d] = arr

console.log(a,b,c,d)    //1 2 3 4

 

const [e,f] = arr

console.log(e,f)  //嵌套的能夠接一個數組，做爲外層的一個元素。

                    //1 [ 2, 3 ]

let [g,h,i,j=19] = arr

console.log(g,h,i,j)    //1 [ 2, 3 ] 4 19

 

var [k,...l] = arr

console.log(k,l)   //1 [ [ 2, 3 ], 4 ]

 

 

（2）對象

 

var atim = {

    title:'secation',

    tranliat:[

        {

        local:'def',

        local_tart:[],

        last_dict:'2222222',

        url:'/def/ac/asd/ffff',

        titile:'java'

        }

    ],

    url:'wwwww.xxxxxx.com'

}

 

// let {titile,tranliat,url} = atim

// console.log(titile,tranliat,url)

 

let{titile,tranliat:[{local}],url} = atim

console.log(local)

 

 

 

仍是利用屬性名（key）查詢所對應的值。

 

 

六、數組的操做

方法	描述
Push（…items）	尾部增長多個元素
Pop（）	移除最後一個元素，並返回
Map	引入處理函數中來處理數組中的每個元素，返回新的數組
Filter	引入處理函數處理數組中的每個元素，此處理函數返回true的元素保留，不然該元素被過濾掉了，保留的元素構成新的數組返回。
Foreach	迭代全部元素，無返回值

 

 

 

const arr = [1,2,3,4,5,6]

arr.push(6,7,8,9,0)

console.log(arr)

arr.pop()

console.log(arr)

const newarr = arr.map(x=>x*x)

console.log(newarr)

let newarr1 = arr.filter(x=>x%2==0)

console.log(newarr1)

let newarr2 = arr.forEach(x=>x+1)

console.log(newarr2)  //沒有新的返回值

 

 

練習題：

 

s = Math.sqrt(10)

const arr = [1,2,3,4,5]

//console.log(arr.filter(x=>x%2==0 && x>3).map(x=>x*x))

//console.log(arr.filter(x=>x>s && x%2==0).map(x=>x*x))

let newarr = []

arr.forEach(x=>{

    if (x>s && x%2==0) newarr.push(x*x)

})

console.log(newarr)

map返回每次都會返回一個新的值。

filter過濾解決，返回一個新的。

foreach迭代元素，沒有任何返回值，返回新的結果是採用新的數組。

 

 

數據算數的問題：能過濾先過濾，先過濾在進行計算。

 

 

 

 

 

 

 

 

 

七、對象操做

Object靜態方法	描述信息
Object.keys(obj)	Es5開始，返回全部的key
Object.values(obj)	返回全部值
Object.entries(obj)	返回全部值
Object.assign(target,…sources)	使用多個source對象，來填充target對象，返回target對象

 

const obj = {

    a:100,

    b:200,

    c:300

};

console.log(Object.keys(obj));

console.log(Object.values(obj)) 

console.log(Object.entries(obj))  //二元數組

 

 

var atim = {

    title:'secation',

    tranliat:[

        {

        local:'def',

        local_tart:[],

        last_dict:'2222222',

        url:'/def/ac/asd/ffff',

        titile:'java'

        }

    ],

    url:'wwwww.xxxxxx.com'

}

var copy = Object.assign(

    {},atim,{

       name:'xxxxxx',url:'www.xxxx.com'

    },{tranliat:null}

)

 

console.log(copy)

 

{ title: 'secation',

  tranliat: null,

  url: 'www.xxxx.com',

  name: 'xxxxxx' }

 

 

屬性和值的動態增長和替換等，返回新的。

 

 

8、promise

一、概念

Promise對象用於一個異步操做的最終完成（包括成功和失敗，）即結果值的表示。

處理異步請求，之因此叫作promise，就是承諾，若是成功怎麼處理，失敗怎麼處理。

 

 

語法格式：

new promise（

//executor函數

function（resolve，reject）{….}）;

（1）executor

是一個帶有resolve和reject兩個參數的函數，

Executor函數在promise構造函數執行同步執行，被傳遞resolve和reject函數（execu函數在promise構造函數返回前被調用）

Executor內部一般會執行一些異步操做，一旦成功，能夠調用resolve函數將promise狀態改爲fulfilled即完成，或者在發生錯誤的時候將其狀態改成rejected失敗

若是在executor函數中拋出一個錯誤，那麼該promise狀態爲rejected，executo函數的返回值被忽略。

Executor中，resolve或者reject函數只能執行一個。

（2）promise狀態

Pending初始狀態，不是成功和失敗的狀態

Fulfilled意味成功

Rejected，意味着失敗了。

 

（3）promise.then（onfulfilled，Onrejected）

參數是兩個函數，根據promise的狀態來調節不一樣的函數，fulfilled走的是onfulfiled,reject走的Onrejected。Then得返回值是一個新的promise對象，調用任何一個參數後，其返回值會被新的promise對象來resolve向後傳遞，

 

 

 

 

var myPromise = new Promise((resolve,reject)=>{

    resolve('ok')

    console.log('======')

    reject('no')  //不會執行到

})

 

console.log(myPromise);

 

myPromise.then(

    (value)=>console.log(1,myPromise,value),

    (reason)=>console.log(2,myPromise,reason)

)

 

======

Promise { 'ok' }

1 Promise { 'ok' } 'ok'

 

 

（4）catch（onrejected）

爲當前promise對象添加一個拒絕回調，返回一個新的promise對象，onrejected函數調用其返回值會被新的promise對象用來resolve。

var myPromise = new Promise((resolve,reject)=>{

    resolve('ok')

    console.log('======')

    reject('no')

})

 

console.log(myPromise);

 

//鏈式處理

myPromise.then(

    /**

    成功就會顯示結果

     */

    (value)=>console.log(1,myPromise,value),

    /**

     * 失敗就顯示緣由

     */

    (reason)=>console.log(2,myPromise,reason)

).then(

    function(v){

        console.log(2.5,v);

        return Promise.reject(v+'++++++')

    }

).catch(reason=>{

    console.log(3,reason)

    return Promise.resolve(reason)

})

 

（5）異步調用實例

function runAsync(){

    return new Promise(function(resolve,reject){

        setTimeout(function(){

            console.log('do sth...')

            resolve('ok...')

        },3000);

    })

}

 

runAsync().then(value=>{

    console.log(value)

    return Promise.reject(value+'*')

}).catch(reason=>{

    console.log(reason)

    return Promise.resolve(reason+'*')

}).then(value=>{

    console.log(value)

    console.log('end')

 

})

console.log('----fin-----')

 

 

----fin-----

do sth...

ok...

ok...*

ok...**

end

 

不會阻塞執行，按照順序執行，順序執行後按照要求進行調度處理。

 

 

嚴格模式：定義常量時候必須使用var這些等。