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 相关文章推荐
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
jquery中post方法用法实例
Oct 21 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
javascript实现随机抽奖功能
Dec 30 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
深入理解React高阶组件
2017/09/28 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
教你安装python Django(图文)
2013/11/04 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
对python Tkinter Text的用法详解
2018/10/11 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
了解AppleTalk协议吗
2014/04/01 面试题
日语专业个人的求职信
2013/12/03 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
英语教师求职信范文
2015/03/20 职场文书
导师工作推荐信
2015/03/27 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python