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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
网上应用的一个不错common.js脚本
Aug 08 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
js实现简单数字变动效果
Nov 06 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
微信小程序实现录音功能
Nov 22 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php中cookie的使用方法
2014/03/29 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python实现按行切分文本文件的方法
2016/04/18 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python中反射和描述器总结
2018/09/23 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
超级实用的8个Python列表技巧
2020/08/24 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
介绍一下linux的文件权限
2014/07/20 面试题
幼师自我鉴定范文
2013/10/01 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
Nginx进程调度问题详解
2021/09/25 Servers