国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

新手開發中常用ES6基礎知識總結

Paul_King / 2245人閱讀

摘要:感覺對我這種沒實習沒工作的新手,雖然一些高級的功能暫時用不上,但是一些基礎的知識還是為平時的開發提供了巨大的便利。學習告一段落,現在結合平時的開發,總結一些常用的知識。日常開發中,塊級作用域中使用的變量,盡量使用或者聲明。使用時,進行合并。

很早之前就學過TypeScript和ES6,后來做項目的時候零零散散用了些。這幾天又系統地把ES6的知識看了一遍。感覺對我這種沒實習沒工作的新手,雖然一些高級的功能暫時用不上,但是一些基礎的知識還是為平時的開發提供了巨大的便利。ES6學習告一段落,現在結合平時的開發,總結一些常用的知識。

let與const及其相關 塊級作用域

ES6新增了塊級作用域,總結一句話大致就是:大括號{}包起來的代碼塊基本山都可以當做塊級作用域。

常見的有

直接使用{}包起來:

 {
var a = 4
 }

函數體大括號,if-else大括號,for循環大括號,switch大括號,try-catch大括號等。
需要注意的是,for循環,每一次循環時的{}都是一個獨立的塊級作用域。

for(let i=0; a < 5; i++){
   let j = i
}

上面代碼循環了五次,實際上有五個獨立的j

日常開發中,我們就可以利用這個特性,來創建塊級作用域了。

塊級作用域變量letconst

使用letconst聲明的變量只在當前塊級作用域生效,出了這個代碼塊,就無法訪問。

 {
   let a = 5
 }
console.log(a) //  Uncaught ReferenceError: a is not defined

日常開發中,塊級作用域中使用的變量,盡量使用let或者const聲明。

需要注意的問題:

letconst變量一定要先聲明,再使用,避免出錯。不要試圖利用變量提升的特性。

const聲明變量時,一定要初始化,否則會報錯。let建議也在聲明時初始化。

const聲明的變量一旦初始化,以后就不可以在進行賦值操作,但可以對其引用的對象進行更改。

const noChangeMe;    // Uncaught SyntaxError: Missing initializer in const declaration
const noChangeMe = [1,2,4]
noChangeMe = [2, 3]    // Uncaught TypeError: Assignment to constant variable
noChangeMe[100] = 100        // everything is OK

letconst聲明的變量不能再重復聲明。
雖然var可以無限次重復聲明,但是并不適用于這兩個新的聲明方式。

let a = 1
let a = 2        // Identifier "a" has already been declared

不要用window.xxx去調用letconst聲明的變量
ES6規定,letconstclass聲明的全局變量,不屬于頂層對象的屬性。

String 使用反引號"`"

使用``將字符串包起來,可以解決下面的問題:

字符串不能換行,如果換行只能使用+

字符串中的引號如果和最外層相同,需要進行轉義

字符串中插入變量,需要用+
以前這樣的寫法:

var name = "world"
var str = "小明說:"hello, " + name + """ // 小明說:"hello, world"

現在可以方便的寫作:

var name = "world"
str str = `小明說:"hello, ${name}"`

總的來說,有三個好處:

不怕字符串中出現的引號;

不怕換行,反引號包起來的字符串可以隨便換行;

使用${}將變量或表達式包起來直接放在字符串中,不用寫很多+

遍歷字符串

使用for...of代替for循環:

var string = "string"
for(var i of string) {
    console.log(i)
}
includes(),startsWidth(),endsWidth()

不用使用indexOf()判斷字符串中是否包含某個值了,使用includes():

var string = "string"
    string.includes("i", 0)            // true

includes第二個參數表示查找的起始索引。
還可以使用startsWidth()endsWidth()判斷字符串是否以某些字符開始或結尾。

函數 參數的默認值

方便地設置函數參數的默認值

function print( a = 2 ){
    console.log(a)
}
print()    //2
擴展運算符...獲取其余參數

可以使用...加上變量名保存其他參數全部數量。
當只知道函數的前幾個具體參數,不確定之后會有多少個參數傳入時,可以使用...把其他傳入的參數保存到一個數組中。

function print(value1, value2, ...values){
    console.log(values.join("--"))
}
print(1, 2, "參數3")        // 參數3
print(1, 2, "參數3", "參數4", "參數5")    // print(1, 2, "參數3", "參數4", "參數5")
使用箭頭函數

使用箭頭函數有兩個好處:

代碼更加簡潔

靜態綁定this
箭頭函數中,this指向的是定義箭頭函數的對象中的this

var name = "outer"
var obj = {
name: "inner",
func: () => {
    console.log(this.name)
}
}
var obj2 = {
name: "inner",
func: function() {
    console.log(this.name)
}
}
obj.func() // "outer"
obj2.func()    // "inner"

第一個使用了箭頭函數,由于箭頭函數的this與其所在環境中的this相同,也就是與obj的this相同,而obj處于全局環境的活動對象中,this指向全局對象,這里指window,所以輸出outer

注意:obj對象的this與它的屬性中的this不一樣。

第二個使用了尋常函數,作為obj2的一個屬性,func方法中的this指向了所在的對象。輸出inner

數組 使用Array.from()把類數組對象轉為數組

一般來說,含有length屬性的對象就可以當作類數組對象。平時獲取多個DOM對象后,不能使用數組中的很多方法。我們可以使用Array.from方便的轉換為數組,。

var divs = Array.from(document.querySelectorAll("div"))
divs.forEach((value, index) => {})
使用fill()初始化數組

想要以某個值初始化數組,需要遍歷。而使用fill()方法,就方便了很多。

var arr = new Array(100)  // 建立一個100元素的數組
arr.fill("初始值", 0, arr.length)

第一個參數是要填充的值,后面兩個與一般的數組方法一樣,起始索引和結束索引(不包括)。

使用includes方法

和字符串的includes方法一樣,看數組中是否有給定值。

對象 使用簡單的屬性表示和方法表示
var name = "John"
var a = {
    name: name,
    sayName: function(){ console.log(this.name) }
}

改寫為:

var name = "John"
var a = {
    name,
    sayName () { console.log(this.name) }
}
記得Object.is()這個方法

其與===的差別:

NaN === NaN // false
Object.is(NaN, NaN) // true

-0 === +0   //true
Object.is(+0, -0)        // false
Object.is(+0, 0)        / true
Object.is(-0, 0)        / false

可以這樣理解,遵循的原則: 是同一個東西就要相等。
NaNNaN就是一個東西,而-0帶了個負號,和0+0不一樣。0+0相同就像1+1相同一樣。

使用Object.assign()合并多個對象

Object.assign()是用來合并對象的。assign,譯作分配,指派。這個方法本意是將某些對象自己的屬性拷貝到目標對象上。它不回去復制繼承來的屬性。
比如可以在定義某個配置的時候,定義一個基礎配置,在定義兩個不同情況下的配置。使用時,進行合并。

var pathConfig = {
    path: "style/images"
}
var devConfig = {
    baseUrl: "http://localhost:8080/"
}
var buildConfig = {
    baseUrl: "https://192.128.0.2"
}
// 使用時,合并
var mode = "dev"
var config = Object.assign({}, pathConfig, mode === "dev" ? devConfig : buildConfig)

只是舉個例子。

Object.keys()Object.values()Object.entries

這三個方法返回對象自身的,可枚舉的,屬性名為字符串的屬性相關的東西,分別為:

Object.keys(): 屬性名組成的數組

Object.values(): 屬性值組成的數組

Object.entries: ["key", "value"]組成的數組。

var john = {
    name: "John",
    age: 12
}
Object.keys(john) //  ["name", "age"]
Object.values(john) //  ["John", 12]
Object.entries(john) // [["name", "John"], ["age", 12]]
常用...運算符

前面在函數的剩余參數處理中提到了...擴展運算符。總結了一下,感覺有兩個用法:

用來讀取數組或者對象的時候,是把數組或對象給擴展開;

用來給對象或者數組賦值的時候,自動給對象或數組添加屬性或元素。

用來讀取

讀取的時候就是把數組或者對象給擴展開來。

var a = [...[1,2,3], 4]        // 把數組的每一項都展出來
a  // [1, 2, 3, 4]
var obj = {
    name: "John",
    age: 12
}
var newObj  = {...obj, job: "teacher" }        // 把某個屬性展出來
newObj // {name: "John", age: 12, job: "teacher"}

所以可以很方便的用來擴展,合并數組或對象。

用作賦值

用作賦值的時候,是用作解構賦值,含義就是把等號右邊表達式的剩余屬性或數組項都放到...后面的變量里。

var a, restB
[a, ...restB] = [1, 3, 5]
a // 1
restB //    [3, 5]

var c, restD
{ name, ...restD } = {name: "John", age: 12, job: "teacher"}
name  //  "John"  是一個屬性的值
restD    //     { c, ...restD } = {name: "John", age: 12, job: "teacher"} 是一個對象

對于對象的解構賦值,會把對應不到的屬性全部放進...后面的變量對象中。

注意:因為是把剩下沒人要的屬性或者數組項都收下,所以...應該放在數組或者對象中的最后,且只能有一個。

本文首發于我的博客
如有錯誤,歡迎指出!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87194.html

相關文章

  • JavasScript重難點知識

    摘要:忍者級別的函數操作對于什么是匿名函數,這里就不做過多介紹了。我們需要知道的是,對于而言,匿名函數是一個很重要且具有邏輯性的特性。通常,匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸 遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加 這一次,徹底弄懂 JavaScript 執行機制 本文的目的就是要保證你徹底弄懂javascript的執行機制,如果...

    forsigner 評論0 收藏0
  • 前端相關大雜燴

    摘要:希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎,由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時,老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。 前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 評論0 收藏0
  • 基礎知識 - 收藏集 - 掘金

    摘要:本文是面向前端小白的,大手子可以跳過,寫的不好之處多多分鐘搞定常用基礎知識前端掘金基礎智商劃重點在實際開發中,已經非常普及了。 JavaScript字符串所有API全解密 - 掘金關于 我的博客:louis blog SF專欄:路易斯前端深度課 原文鏈接:JavaScript字符串所有API全解密 本文近 6k 字,讀完需 10 分鐘。 字符串作為基本的信息交流的橋梁,幾乎被所有的編程...

    wdzgege 評論0 收藏0
  • 前端資源系列(4)-前端學習資源分享&前端面試資源匯總

    摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...

    princekin 評論0 收藏0
  • 前端基礎入門

    摘要:手把手教你做個人火的時候,隨便一個都能賺的盆滿缽滿,但是,個人沒有服務端,沒有美工,似乎就不能開發了,真的是這樣的嗎秘密花園經典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程,全的簡直不要不要的了。 JavaScript 實現點擊按鈕復制指定區域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現點擊按鈕復制區域文本的功能,不需要依賴 flash。...

    shinezejian 評論0 收藏0

發表評論

0條評論

Paul_King

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<