ES6基礎(chǔ)中字符串和函數(shù)的示例分析

小編給大家分享一下ES6基礎(chǔ)中字符串和函數(shù)的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

創(chuàng)新互聯(lián)公司主營河口網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),河口h5小程序開發(fā)搭建,河口網(wǎng)站營銷推廣歡迎河口等地區(qū)企業(yè)咨詢

字符串的拓展

1.ES6為字符串添加了遍歷器接口,因此可以使用for...of循環(huán)遍歷字符串

2.字符串新增的 includes()、startsWith()、endsWidth() 三個方法用于判斷某一字符串是否包含于另一字符串

  • includes():返回布爾值,表示源字符串中是否包含參數(shù)字符串。

  • startsWith():返回布爾值,表示參數(shù)字符串是否在源字符串的頭部。

  • endsWith():返回布爾值,表示參數(shù)字符串是否在源字符串的尾部。

3.新增 repeat() 方法, 該方法返回一個新字符串,不是對原字符串操作,表示將原字符串重復(fù)n次。

let str = 'abc';
str.repeat(3) //abcabcabc 
str //abc

ps:該方法參數(shù)為正整數(shù),如果為負數(shù)會報錯,小數(shù)向下取整;

4.新增 padStart(),padEnd() 方法,用于補全字符串,該方法返回一個新字符串,不是對原字符串操作,傳入兩個參數(shù),第一個參數(shù)用來指定字符串的最小長度,第二個參數(shù)是用來補全的字符串(缺省的話默認空格補全)。(ps:如果原字符串的長度,等于或大于指定的最小長度,則返回原字符串);

let str = 'abc';
str.padStart(2, 'abc') // 'abc'
str.padEnd(2, 'abc') // 'abc'

5.模板字符串··(esc下面的那個按鍵),可以擺脫傳統(tǒng)的字符串拼接的模式,直接將變量(表達式,對象的引用,函數(shù)等)寫在模板字符串中輸出

let str = 'world';
let html = `hello ${str}`;
html //hello wrold

ps:所有模板字符串的空格和換行,都是被保留的,可以使用trim方法消除換行。

6.標簽?zāi)0澹茨0遄址o跟在一個函數(shù)名后面,該函數(shù)將被調(diào)用來處理這個模板字符串,這中方式被稱為“標簽?zāi)0濉?,“標簽”指的就是函?shù),緊跟在后面的模板字符串就是它的參數(shù)

console.log `123`
// 等同于
console.log (123)

7.如果模板字符里面有變量,會將模板字符串先處理成多個參數(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ù)第一個參數(shù)是一個數(shù)組,數(shù)組的成員是模板字符串中那些沒有變量替換的部分,其他參數(shù),都是模板字符串各個變量被替換后的值;

8.再來一個例子,看看標簽?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 實際上是 <code> ["The total is "," ("," with tax)"] </code> , 函數(shù)內(nèi)部 arguments 的值是 <code>{ "0" : ["The total is "," ("," with tax)"] , "1" : 30 , "2" : 31.5 }</code>,通過以上梳理,可以將各個參數(shù)按照原來的位置拼合回去,最終得到輸出為<code>"The total is 30 (31.5 with tax)"</code>

ps:在使用標簽?zāi)0宓臅r候,要注意參數(shù)的位置,可根據(jù)自己實際的需求進行修改,返回正確的結(jié)果;

函數(shù)的拓展

1.ES6 允許為函數(shù)的參數(shù)設(shè)置默認值,即直接寫在參數(shù)定義的后面,一目了然,十分實用

function say( x , y = 'World') {
  console.log( x , y);
}
say('Hello') // Hello World
say('Hello','Kite') //Hello Kite

2.函數(shù)參數(shù)默認已經(jīng)聲明,不能再用 let 或者 const 聲明,而且不能有同名參數(shù)

3.一旦設(shè)置了參數(shù)的默認值,函數(shù)進行聲明初始化時,參數(shù)會形成一個單獨的作用域(context)。等到初始化結(jié)束,這個作用域就會消失;

var x = 1;
function f(x, y = x) {
 console.log(y);
}
f(2) // 2

上面例子中,參數(shù)y的默認值等于變量x。調(diào)用函數(shù)f時,參數(shù)形成一個單獨的作用域。在這個作用域里面,默認值變量x指向第一個參數(shù)x,而不是全局變量x,所以輸出是2;

let x = 1;
function f( y = x ) {
 let x = 2;
 console.log(y);
}
f() // 1

上面例子中,函數(shù)f調(diào)用時,參數(shù)y=x形成一個單獨的作用域。這個作用域里面,變量x本身沒有定義,所以指向外層的全局變量x。函數(shù)調(diào)用時,函數(shù)體內(nèi)部的局部變量x影響不到默認值變量x;

4.函數(shù)聲明時,可以將某個參數(shù)默認值設(shè)為undefined,表明這個參數(shù)是可以省略的;

5.rest 參數(shù)(形式為...變量名),用于獲取函數(shù)的多余參數(shù),該變量是一個數(shù)組,用于將多余的參數(shù)放入該數(shù)組中。(rest 參數(shù)之后不能再有其他參數(shù),它只能是函數(shù)的最后一個參數(shù),否則會報錯)

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ù)或者有多個參數(shù)的話,則需要加上()來進行聲明;

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ù)的代碼塊部分多于一條語句,就要使用大括號將它們括起來,并且使用return語句返回;

var func = ( x , y ) => { return x + y; }

9.如果箭頭函數(shù)直接返回一個對象,必須在對象外面加上括號;

var func = ( x , y ) => ({ x : x , y : y })

10.箭頭函數(shù)使用時必須注意以下幾個問題:

函數(shù)體內(nèi)的this對象,就是定義時所在的對象,而不是使用時所在的對象;

function foo() {
 setTimeout(() => {
  console.log('id:', this.id);
 }, 100);
}
var id = 21;
foo.call({ id: 42 }); //42

上面代碼中,setTimeout的參數(shù)是一個箭頭函數(shù),這個箭頭函數(shù)的定義生效是在foo函數(shù)生成時,而它的真正執(zhí)行要等到100毫秒后。如果是普通函數(shù),執(zhí)行時this應(yīng)該指向全局對象window,這時應(yīng)該輸出21。但是,箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時所在的對象(本例是{id: 42}),所以輸出的是42。

  • 箭頭函數(shù)不可以當(dāng)作構(gòu)造函數(shù),也就是說,不可以使用new命令,否則會拋出一個錯誤;

  • 不可以使用arguments對象,該對象在函數(shù)體內(nèi)不存在。如果要用,可以用 rest 參數(shù)代替

  • 不可以使用yield命令,因此箭頭函數(shù)不能用作 Generator 函數(shù)。

以上是“ES6基礎(chǔ)中字符串和函數(shù)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!

名稱欄目:ES6基礎(chǔ)中字符串和函數(shù)的示例分析
本文來源:http://muchs.cn/article34/pgoope.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護、做網(wǎng)站、品牌網(wǎng)站設(shè)計、網(wǎng)站導(dǎo)航、微信小程序、網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

微信小程序開發(fā)