ES6基礎之字符串和函數的拓展詳解

2024-05-06 16:54:24

字體：大中小

來源：轉載

供稿：網友

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

字符串的拓展

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

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

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

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

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

ps:該方法參數為正整數，如果為負數會報錯，小數向下取整；

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

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

5.模板字符串··（esc下面的那個按鍵），可以擺脫傳統的字符串拼接的模式，直接將變量（表達式，對象的引用，函數等）寫在模板字符串中輸出

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

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

6.標簽模板，即模板字符串緊跟在一個函數名后面，該函數將被調用來處理這個模板字符串，這中方式被稱為“標簽模板”，“標簽”指的就是函數，緊跟在后面的模板字符串就是它的參數

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

7.如果模板字符里面有變量，會將模板字符串先處理成多個參數，再調用函數;

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函數第一個參數是一個數組，數組的成員是模板字符串中那些沒有變量替換的部分，其他參數，都是模板字符串各個變量被替換后的值；

8.再來一個例子，看看標簽模板的使用方法：

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;}

上述例子中，參數 literals 實際上是 <code> ["The total is "," ("," with tax)"] </code> , 函數內部 arguments 的值是 <code>{ "0" : ["The total is "," ("," with tax)"] , "1" : 30 , "2" : 31.5 }</code>，通過以上梳理，可以將各個參數按照原來的位置拼合回去，最終得到輸出為<code>"The total is 30 (31.5 with tax)"</code>

ps：在使用標簽模板的時候，要注意參數的位置，可根據自己實際的需求進行修改，返回正確的結果；

函數的拓展

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

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

2.函數參數默認已經聲明，不能再用 let 或者 const 聲明，而且不能有同名參數

3.一旦設置了參數的默認值，函數進行聲明初始化時，參數會形成一個單獨的作用域（context）。等到初始化結束，這個作用域就會消失；

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

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

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

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

4.函數聲明時，可以將某個參數默認值設為undefined，表明這個參數是可以省略的；

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

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.箭頭函數（=>），ES6 允許使用“箭頭”（=>）定義函數，這種寫法相比較 ES5 定義 function 看起來簡潔得多；

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

7.如果箭頭函數沒有參數或者有多個參數的話，則需要加上()來進行聲明；

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.如果箭頭函數的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回;

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

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

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

10.箭頭函數使用時必須注意以下幾個問題：

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象；

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

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