本文实例讲述了 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 程序设计有所帮助。
来源: http://www.jb51.net/article/110168.htm