ES6新特性-----变量和字符串

1、变量

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)
     })
   }
};

 

2、字符串

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!';