一、变量
1. LET
我们都习惯用var 来声明变量,现在还可以用let来声明变量,两者的主要区别是作用域:var声明的变量作用域为包围它的函数,而let声明的变量作用域仅在它所在的块中。(在ES5中是没有块的概念的)。
1 2 3 4 | if ( true ){
let a=1;
}
console.log(a); //undifined
|
这样使代码更加干净,减少滞留的变量,再如我们经常用的数组遍历:
1 2 3 4 | 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可以声明一个值得只读引用,必须直接给一个变量赋值,如果尝试该变量或者没有立即给变量赋值,都将报错:
1 2 3 | const MY_CONSTENT=1;
MY_CONSTENT=2; //error
const MY_CONSTENT; //error
|
注意对象的属性或数组成员还是可以改变的
1 2 | const MY_OBJECT={some:1};
MY_OBJECT.some= 'body' ;
|
3.箭头函数
箭头函数使得JS代码更加简洁。下面将箭头函数和ES5版本的函数写法:
1 2 3 4 5 6 7 8 | //箭头函数
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声明被隐式加入。带有零或者多个参数时必须使用括号:
1 2 3 4 5 | //no arguments
books.map(()=>1); //[1,1]
//Mutiple arguments
[1,2].map((n,index)=>n*index); //[0,2]
|
如果需要写更多的逻辑或更多的空格,可以把函数表达式放在({})块中:
1 2 3 4 | let result=[1,2,3,4,5].map(n=>{
n=n%3;
retutn n;
})
|
箭头函数不单是为了输入更少的字符,它们的表现也和一般的函数不同。它的继承了当前上下文的this和arguments,这就意味着你可以避免写var that=this这样的代码,也不需要把函数绑定到正确的上下文了:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //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()方法来解决的问题的复杂度,并达到同样的效果:
1 2 3 | ‘my string’.startsWith( 'my' ); //true
‘my string’.endsWith( 'my' ); //false
‘my string’.includes( 'str' ); //true
|
添加了另一个方法,用于创建重复字符串:
1 | ‘my’.repeat(3); //'my my my'
|
2. 模板字符串
模板字符串提供提供一个简洁的方式来实现字符串插值,它基于美元符号和花括号${...},模板字符串置于引号之中:
1 2 3 4 5 6 7 8 9 10 11 12 | //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仅仅是便于字符串的拼接,实际上,模板字符串还可以用于多行字符串(空格也是字符串的一部分):
1 2 3 4 5 6 7 8 9 10 | let x= '1...
2...
3 lines long!' ;
//ES5
var x= '1...' +
'2...' +
'3 lines long!' ;
var x="1...2...3 lines long!';
|