本文實(shí)例講述了ES6基礎(chǔ)之字符串和函數(shù)的拓展。分享給大家供大家參考，具體如下：

字符串的拓展

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

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

• includes()：返回布爾值，表示源字符串中是否包含參數(shù)字符串。
• startsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的頭部。
• endsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的尾部。

3.新增 repeat() 方法， 該方法返回一個(gè)新字符串，不是對(duì)原字符串操作，表示將原字符串重復(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è)新字符串，不是對(duì)原字符串操作，傳入兩個(gè)參數(shù)，第一個(gè)參數(shù)用來(lái)指定字符串的最小長(zhǎng)度，第二個(gè)參數(shù)是用來(lái)補(bǔ)全的字符串（缺省的話(huà)默認(rèn)空格補(bǔ)全）。（ps：如果原字符串的長(zhǎng)度，等于或大于指定的最小長(zhǎng)度，則返回原字符串）；

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

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

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

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

6.標(biāo)簽?zāi)０澹茨０遄址o跟在一個(gè)函數(shù)名后面，該函數(shù)將被調(diào)用來(lái)處理這個(gè)模板字符串，這中方式被稱(chēng)為“標(biāo)簽?zāi)０濉保皹?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ù)組的成員是模板字符串中那些沒(méi)有變量替換的部分，其他參數(shù)，都是模板字符串各個(gè)變量被替換后的值；

8.再來(lái)一個(gè)例子，看看標(biāo)簽?zāi)０宓氖褂梅椒ǎ?/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>，通過(guò)以上梳理，可以將各個(gè)參數(shù)按照原來(lái)的位置拼合回去，最終得到輸出為<code>"The total is 30 (31.5 with tax)"</code>

ps：在使用標(biāo)簽?zāi)０宓臅r(shí)候，要注意參數(shù)的位置，可根據(jù)自己實(shí)際的需求進(jìn)行修改，返回正確的結(jié)果；

函數(shù)的拓展

1.ES6 允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值，即直接寫(xiě)在參數(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本身沒(méi)有定義，所以指向外層的全局變量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ù)，這種寫(xiě)法相比較 ES5 定義 function 看起來(lái)簡(jiǎn)潔得多；

var func = x => x 
//等同于
var func = function func(x) {
  return x;
};

7.如果箭頭函數(shù)沒(méi)有參數(shù)或者有多個(gè)參數(shù)的話(huà)，則需要加上()來(lái)進(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ù)的代碼塊部分多于一條語(yǔ)句，就要使用大括號(hào)將它們括起來(lái)，并且使用return語(yǔ)句返回;

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

9.如果箭頭函數(shù)直接返回一個(gè)對(duì)象，必須在對(duì)象外面加上括號(hào);

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

10.箭頭函數(shù)使用時(shí)必須注意以下幾個(gè)問(wèn)題：

函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象；

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)該指向全局對(duì)象window，這時(shí)應(yīng)該輸出21。但是，箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時(shí)所在的對(duì)象（本例是{id: 42}），所以輸出的是42。

• 箭頭函數(shù)不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤；
• 不可以使用arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用 rest 參數(shù)代替
• 不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論