您好,登錄后才能下訂單哦!
小編給大家分享一下ES6基礎(chǔ)中字符串和函數(shù)的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
字符串的拓展
1.ES6為字符串添加了遍歷器接口,因此可以使用for...of循環(huán)遍歷字符串
2.字符串新增的 includes()、startsWith()、endsWidth() 三個(gè)方法用于判斷某一字符串是否包含于另一字符串
includes():返回布爾值,表示源字符串中是否包含參數(shù)字符串。
startsWith():返回布爾值,表示參數(shù)字符串是否在源字符串的頭部。
endsWith():返回布爾值,表示參數(shù)字符串是否在源字符串的尾部。
3.新增 repeat() 方法, 該方法返回一個(gè)新字符串,不是對原字符串操作,表示將原字符串重復(fù)n次。
let str = 'abc'; str.repeat(3) //abcabcabc str //abc
ps:該方法參數(shù)為正整數(shù),如果為負(fù)數(shù)會(huì)報(bào)錯(cuò),小數(shù)向下取整;
4.新增 padStart(),padEnd() 方法,用于補(bǔ)全字符串,該方法返回一個(gè)新字符串,不是對原字符串操作,傳入兩個(gè)參數(shù),第一個(gè)參數(shù)用來指定字符串的最小長度,第二個(gè)參數(shù)是用來補(bǔ)全的字符串(缺省的話默認(rèn)空格補(bǔ)全)。(ps:如果原字符串的長度,等于或大于指定的最小長度,則返回原字符串);
let str = 'abc'; str.padStart(2, 'abc') // 'abc' str.padEnd(2, 'abc') // 'abc'
5.模板字符串··(esc下面的那個(gè)按鍵),可以擺脫傳統(tǒng)的字符串拼接的模式,直接將變量(表達(dá)式,對象的引用,函數(shù)等)寫在模板字符串中輸出
let str = 'world'; let html = `hello ${str}`; html //hello wrold
ps:所有模板字符串的空格和換行,都是被保留的,可以使用trim方法消除換行。
6.標(biāo)簽?zāi)0?,即模板字符串緊跟在一個(gè)函數(shù)名后面,該函數(shù)將被調(diào)用來處理這個(gè)模板字符串,這中方式被稱為“標(biāo)簽?zāi)0濉?,“?biāo)簽”指的就是函數(shù),緊跟在后面的模板字符串就是它的參數(shù)
console.log `123` // 等同于 console.log (123)
7.如果模板字符里面有變量,會(huì)將模板字符串先處理成多個(gè)參數(shù),再調(diào)用函數(shù);
var a = 5; var b = 10; function tag(s, v1, v2) { console.log(s) console.log(v1); console.log(v2); } tag`Hello ${ a + b } world ${ a * b }`; //['Hello','world',''] //15 //50
可以看出,tag函數(shù)第一個(gè)參數(shù)是一個(gè)數(shù)組,數(shù)組的成員是模板字符串中那些沒有變量替換的部分,其他參數(shù),都是模板字符串各個(gè)變量被替換后的值;
8.再來一個(gè)例子,看看標(biāo)簽?zāi)0宓氖褂梅椒ǎ?/p>
var total = 30; var msg = passthru`The total is ${total} (${total*1.05} with tax)`; function passthru(literals) { var result = ''; var i = 0; while (i < literals.length) { result += literals[i++]; if (i < arguments.length) { result += arguments[i]; } } return result; }
上述例子中,參數(shù) literals 實(shí)際上是 <code> ["The total is "," ("," with tax)"] </code> , 函數(shù)內(nèi)部 arguments 的值是 <code>{ "0" : ["The total is "," ("," with tax)"] , "1" : 30 , "2" : 31.5 }</code>,通過以上梳理,可以將各個(gè)參數(shù)按照原來的位置拼合回去,最終得到輸出為<code>"The total is 30 (31.5 with tax)"</code>
ps:在使用標(biāo)簽?zāi)0宓臅r(shí)候,要注意參數(shù)的位置,可根據(jù)自己實(shí)際的需求進(jìn)行修改,返回正確的結(jié)果;
函數(shù)的拓展
1.ES6 允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值,即直接寫在參數(shù)定義的后面,一目了然,十分實(shí)用
function say( x , y = 'World') { console.log( x , y); } say('Hello') // Hello World say('Hello','Kite') //Hello Kite
2.函數(shù)參數(shù)默認(rèn)已經(jīng)聲明,不能再用 let 或者 const 聲明,而且不能有同名參數(shù)
3.一旦設(shè)置了參數(shù)的默認(rèn)值,函數(shù)進(jìn)行聲明初始化時(shí),參數(shù)會(huì)形成一個(gè)單獨(dú)的作用域(context)。等到初始化結(jié)束,這個(gè)作用域就會(huì)消失;
var x = 1; function f(x, y = x) { console.log(y); } f(2) // 2
上面例子中,參數(shù)y的默認(rèn)值等于變量x。調(diào)用函數(shù)f時(shí),參數(shù)形成一個(gè)單獨(dú)的作用域。在這個(gè)作用域里面,默認(rèn)值變量x指向第一個(gè)參數(shù)x,而不是全局變量x,所以輸出是2;
let x = 1; function f( y = x ) { let x = 2; console.log(y); } f() // 1
上面例子中,函數(shù)f調(diào)用時(shí),參數(shù)y=x形成一個(gè)單獨(dú)的作用域。這個(gè)作用域里面,變量x本身沒有定義,所以指向外層的全局變量x。函數(shù)調(diào)用時(shí),函數(shù)體內(nèi)部的局部變量x影響不到默認(rèn)值變量x;
4.函數(shù)聲明時(shí),可以將某個(gè)參數(shù)默認(rèn)值設(shè)為undefined,表明這個(gè)參數(shù)是可以省略的;
5.rest 參數(shù)(形式為...變量名),用于獲取函數(shù)的多余參數(shù),該變量是一個(gè)數(shù)組,用于將多余的參數(shù)放入該數(shù)組中。(rest 參數(shù)之后不能再有其他參數(shù),它只能是函數(shù)的最后一個(gè)參數(shù),否則會(huì)報(bào)錯(cuò))
function func(...params){ console.log(params) } func(1,2,3) // [1,2,3] function func( x , ...params){ console.log(params) } func(1,2,3) // [2,3]
6.箭頭函數(shù)(=>),ES6 允許使用“箭頭”(=>)定義函數(shù),這種寫法相比較 ES5 定義 function 看起來簡潔得多;
var func = x => x //等同于 var func = function func(x) { return x; };
7.如果箭頭函數(shù)沒有參數(shù)或者有多個(gè)參數(shù)的話,則需要加上()來進(jìn)行聲明;
var func = () => 'Hello World'; //等同于 var func = function func() { return 'Hello World'; }; var func = ( x , y ) => x + y //等同于 var func = function func(x, y) { return x + y; };
8.如果箭頭函數(shù)的代碼塊部分多于一條語句,就要使用大括號(hào)將它們括起來,并且使用return語句返回;
var func = ( x , y ) => { return x + y; }
9.如果箭頭函數(shù)直接返回一個(gè)對象,必須在對象外面加上括號(hào);
var func = ( x , y ) => ({ x : x , y : y })
10.箭頭函數(shù)使用時(shí)必須注意以下幾個(gè)問題:
函數(shù)體內(nèi)的this對象,就是定義時(shí)所在的對象,而不是使用時(shí)所在的對象;
function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); //42
上面代碼中,setTimeout的參數(shù)是一個(gè)箭頭函數(shù),這個(gè)箭頭函數(shù)的定義生效是在foo函數(shù)生成時(shí),而它的真正執(zhí)行要等到100毫秒后。如果是普通函數(shù),執(zhí)行時(shí)this應(yīng)該指向全局對象window,這時(shí)應(yīng)該輸出21。但是,箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時(shí)所在的對象(本例是{id: 42}),所以輸出的是42。
箭頭函數(shù)不可以當(dāng)作構(gòu)造函數(shù),也就是說,不可以使用new命令,否則會(huì)拋出一個(gè)錯(cuò)誤;
不可以使用arguments對象,該對象在函數(shù)體內(nèi)不存在。如果要用,可以用 rest 參數(shù)代替
不可以使用yield命令,因此箭頭函數(shù)不能用作 Generator 函數(shù)。
以上是“ES6基礎(chǔ)中字符串和函數(shù)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。