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 World
say('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。

  • 箭头函数不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误;

  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替

  • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,521评论 0 8
  • 字符的 Unicode 表示法 codePointAt() String.fromCodePoint() 字符串的...
    卞卞村长L阅读 747评论 0 0
  • 我不喜欢黑暗,暗夜里,总有使你灵魂发抖的脏东西; 我不喜欢黑暗,暗夜里,总有能撕扯你身躯的真场景;...
    蓝钟阅读 314评论 0 0
  • 弘丹参考的是钱穆的《论语新解》以及傅佩荣的《人能弘道-傅佩荣谈论语》,绿窗幽梦参考的是朱熹的《四书章句集注》,由弘...
    弘丹阅读 639评论 0 4
  • “天若不爱酒,酒星不在天。地若不爱酒,地应无酒泉。天地既爱酒,爱酒不愧天。已闻清比圣,复道浊如贤。圣贤既已饮,何必...
    懒洋洋小姐姐阅读 496评论 9 9