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 调试器简介
Feb 21 Javascript
js 日期转换成中文格式的函数
Jul 07 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
React key值的作用和使用详解
Aug 23 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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 PDO函数库详解
2010/04/27 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
python实时监控logstash日志代码
2020/04/27 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
全陪导游欢迎词
2014/01/17 职场文书
殡葬服务心得体会
2014/09/11 职场文书
2015年公司新年寄语
2014/12/08 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
小学副班长竞选稿
2015/11/21 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python