web前端学习知识--字符串和函数的拓展

要想成为一名高级WEB前端工程师，那么就必须把专业知识给吃透了。WEB前端整个学习体系何其庞大，需要我们一直保持学习状态，今天笔者就为大家带来一些干货，希望能对大家有所帮助，一起来看看， web前端学习知识--字符串和函数的拓展吧!

字符串的拓展

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 实际上是 ["The total is "," ("," with tax)"] , 函数内部 arguments 的值是 { "0" : ["The total is "," ("," with tax)"] , "1" : 30 , "2" : 31.5 }，通过以上梳理，可以将各个参数按照原来的位置拼合回去，最终得到输出为"The total is 30 (31.5 with tax)"

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。

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

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

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