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 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
ES6正则的扩展实例详解
Apr 25 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
如何在vue中使用jointjs过程解析
May 29 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
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
javascript String 对象
2008/04/25 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python对一个数向上取整的实例方法
2020/06/18 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
十佳文明家庭事迹
2014/05/25 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL