ES6基础之字符串和函数的拓展详解


Posted in Javascript onAugust 22, 2019

本文实例讲述了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 函数。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
jquery等待效果示例
May 01 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
node实现爬虫的几种简易方式
Aug 22 #Javascript
vue router动态路由设置参数可选问题
Aug 21 #Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 #Javascript
js时间转换毫秒的实例代码
Aug 21 #Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 #Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 #Javascript
You might like
德生H-501的评价与改造
2021/03/02 无线电
php文件夹的创建与删除方法
2015/01/24 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
django批量导入xml数据
2016/10/16 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python更改已存在excel文件的方法
2018/05/03 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
解决Python安装cryptography报错问题
2020/09/03 Python
django中cookiecutter的使用教程
2020/12/03 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
优秀教师主要事迹
2014/02/01 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
教师党员承诺书2015
2015/01/21 职场文书
乐山大佛导游词
2015/02/02 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
python实现手机推送 代码也就10行左右
2022/04/12 Python
Python如何用re模块实现简易tokenizer
2022/05/02 Python