ES6新特性之变量和字符串用法示例


Posted in Javascript onApril 01, 2017

本文实例讲述了ES6新特性之变量和字符串用法。分享给大家供大家参考,具体如下:

一、变量

1. LET

我们都习惯用var 来声明变量,现在还可以用let来声明变量,两者的主要区别是作用域:var声明的变量作用域为包围它的函数,而let声明的变量作用域仅在它所在的块中。(在ES5中是没有块的概念的)。

if(true){
  let a=1;
}
console.log(a);//undifined

这样使代码更加干净,减少滞留的变量,再如我们经常用的数组遍历:

for(let i=0;i<lists.length;i++){
  //do somthing with lists[i]
}
console.log(i)l//undifined

通常情况下,我们在同一作用域里使用变量J来完成另一个遍历,但是现在有了let,可以安全的再一次声明i变量,因为它只在被声明的块中有效。

2.CONST

const也是用于声明块作用域变量的方法,使用const可以声明一个值得只读引用,必须直接给一个变量赋值,如果尝试该变量或者没有立即给变量赋值,都将报错:

const MY_CONSTENT=1;
MY_CONSTENT=2;//error
const MY_CONSTENT;//error

注意对象的属性或数组成员还是可以改变的

const MY_OBJECT={some:1};
MY_OBJECT.some='body';

3.箭头函数

箭头函数使得JS代码更加简洁。下面将箭头函数和ES5版本的函数写法:

//箭头函数
let books=[{"title":"X","price":20},{"title":"Y","price":40}];
let titles=books.map(item=>item.title);
//ES5函数
var titles=books.map(function(item){
  return item.title;
});

观察箭头函数的语法,会发现其中并没有出现function关键字,只保留零或多个参数、“胖箭头”(“=>”)和函数表达式,return声明被隐式加入。带有零或者多个参数时必须使用括号:

//no arguments
books.map(()=>1);//[1,1]
//Mutiple arguments
[1,2].map((n,index)=>n*index);//[0,2]

如果需要写更多的逻辑或更多的空格,可以把函数表达式放在({})块中:

let result=[1,2,3,4,5].map(n=>{
  n=n%3;
  retutn n;
})

箭头函数不单是为了输入更少的字符,它们的表现也和一般的函数不同。它的继承了当前上下文的this和arguments,这就意味着你可以避免写var that=this这样的代码,也不需要把函数绑定到正确的上下文了:

//ES6
let books={
  title'X',
  sellers:['A','B'],
  printSellers(){
    this.sellers.forEach(seller=>console.log(seller+'seller'+this.title))
  }
};
//ES5
var books={
  title='X',
  sellers:['A','B'],
  printSellers:function(){
   var that=this;
   this.sellers.forEach(function(seller){
     console.log(seller+'seller'+that.title)
   })
  }
};

二、字符串

1.方法

字符串String原型中增添了几个新方法,用于简化需要用indexOf()方法来解决的问题的复杂度,并达到同样的效果:

'my string'.startsWith('my');//true
'my string'.endsWith('my');//false
'my string'.includes('str');//true

添加了另一个方法,用于创建重复字符串:

'my'.repeat(3);//'my my my'

2. 模板字符串

模板字符串提供提供一个简洁的方式来实现字符串插值,它基于美元符号和花括号${...},模板字符串置于引号之中:

//ES6
let name='json',
  apples=5,
  pears=7,
  bananas=function(){return 3};
console.log('this is${name}');
console.log('he carries ${apples} apples,${pears} pears,and ${bananas()} bananas');
//ES5
console.log('he carries'+ ${apples}+' apples,'+${pears}+' pears,and '+${bananas()}+' bananas');

以上形式对比ES5仅仅是便于字符串的拼接,实际上,模板字符串还可以用于多行字符串(空格也是字符串的一部分):

let x='1...
  2...
  3 lines long!';
//ES5
var x='1...'+
  '2...'+
  '3 lines long!';
var x="1...2...3 lines long!';

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

Javascript 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
js实现多图左右切换功能
Aug 04 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
node thread.sleep实现示例
Jun 20 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
ES5学习教程之Array对象
Apr 01 #Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 #Javascript
js实现音频控制进度条功能
Apr 01 #Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 #Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 #Javascript
原生JS实现九宫格抽奖效果
Apr 01 #Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 #Javascript
You might like
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP发送短信代码分享
2015/08/11 PHP
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python Gitlab Api 使用方法
2019/08/28 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Python实现手绘图效果实例分享
2020/07/22 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
python re模块和正则表达式
2021/03/24 Python
学生周末回家住宿长期请假条
2014/02/15 职场文书
社团活动总结怎么写
2014/06/30 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
放弃继承权公证书
2015/01/23 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python