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每次Title显示不同的名言
Sep 25 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
浅析JavaScript动画
Jun 10 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
深入理解Python3 内置函数大全
2017/11/23 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
python爬虫 requests-html的使用
2020/11/30 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
优秀党员主要事迹
2014/01/19 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
资料员岗位职责范本
2015/04/13 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
python playwright之元素定位示例详解
2022/07/23 Python