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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
vuex进阶知识点巩固
May 20 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 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
第五章 php数组操作
2011/12/30 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
基于PHP文件操作的详解
2013/06/05 PHP
PHP常用处理静态操作类
2015/04/03 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
this关键字的作用
2016/01/30 面试题
车间主任岗位职责
2014/03/16 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
科学发展观演讲稿
2014/09/11 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
客户答谢会致辞
2015/07/30 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang