变量定义的新体式格局：let/ const
let 特征：
不许可反复声明
没有变量提拔（预剖析）
块级作用域（一对
{}包含的地区称为一个代码块，let声明的变量只在该代码块起作用）
例子1 ：简朴的打印数据
运用 var:
for(var i = 0; i<10 ; i++ ){
setTimeout(()=>console.log(i)) // 实行10次，全都打印 10
}运用 let:
for(let i = 0; i<10 ; i++ ){
setTimeout(()=>console.log(i)) // 实行10次，打印 0 - 9
}之前我们要完成如许的打印，必需运用闭包：
for(var i = 0; i<10;i++){
(function(j){
setTimeout(()=>console.log(j)) // 实行10次，打印 0 - 9
})(i)
}例子二：在网页中经常会有切换 tab ，展现对应的信息的需求，我们运用 var 来处置惩罚时，经常运用的自定义属性，来保存点击的索引。btns[i].index=i。用于找到对应的元素。：
html模板：
<style type="text/css">
div{display:none}
.show{display:block;}
.active{background:red;}
</style>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<div class="show">11111</div>
<div >22223</div>
<div >33333</div>js:
var btns = document.querySelectorAll('button')
var divs = document.querySelectorAll('div')
for (var i=0 ;i<btns.length;i++){
btns[i].index=i
btns[i].onclick=function(){
for(var j=0 ;j<btns.length;j++){
btns[j].className=''
divs[j].className=''
}
this.className='active'
divs[this.index].className='show'
}
}运用 let：
var btns = document.querySelectorAll('button')
var divs = document.querySelectorAll('div')
for (let i=0 ;i<btns.length;i++){
/*能够看到这里少了保存的索引的操纵*/
btns[i].onclick=function(){
for(let j=0 ;j<btns.length;j++){
btns[j].className=''
divs[j].className=''
}
this.className='active'
divs[i].className='show'
}
}const 除了具有上述 let 的特征外，另有本身的一个特征：定义以后的值，是牢固稳定不能被修正的。
值得注意的是下面这两种状况是不会报错的：
{
const a = {value:1}
a.value = 2
console.log(a) // {value:2}
const b = [1,2,3]
b.push(4)
console.log(b) // [1,2,3,4]
}解构赋值
ES6 许可依据肯定的情势，从数组和对象中提取值，如许就称为解构
数组：依据对应的递次解构
{
var arr = [[1,2,3],[4,5,6],[7,8,9]]
var [a,b,c] = arr
// a : [1,2,3]
// b : [4,5,6]
// c : [7,8,9]
// 用法1
var x = 1;
var y = 2;
[y,x] = [x,y]
console.log(x,y) // 2 1
}对象依据对应的称号一一对应举行剖析：
{
var obj={
get:function(){
return 'get'
},
value:1,
data:[1,2,3],
str:'string'
}
var {str,get,data} = obj
console.log(str) // string
console.log(get()) //get
console.log(data) // [1,2,3]
}模板字符串
模板字符串 是增强版的字符串，运用反引号（\`）作为标识 。能够看成一般字符串运用，也能够用来定义多行字符串（会保存换行）。也许在字符串中嵌入变量。
在模板字符串，须要援用变量运用 ${变量名} 的情势。在 {}能够举行运算，也能够援用对象属性。
{
var name = 'xiaoming'
var age = 19
var str = `my name is ${name} ,my age is ${age}`
console.log(str) //"my name is xiaoming ,my age is 19"
}扩大
Array.from(arrayLike[, mapFn[, thisArg]])
arrayLike: 想要转换成实在数组的类数组对象或可遍历对象。mapFn: 可选参数，如果指定了该参数，则末了天生的数组会经由该函数的加工处置惩罚后再返回。thisArg: 可选参数，实行 mapFn 函数时 this 的值。要领用于将两类对象转为真正的数组：相似数组的对象和可遍历的对象（包含 ES6 新增的数据结构 Set 和 Map ）
{
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps);
// 将可迭代对象（Set 对象）转换成数组
Array.from(new Set(["foo", window])); // ["foo", window]
// 运用 map 函数转换数组元素
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
// 将类数组对象（arguments）转换成数组
(function () {
var args = Array.from(arguments);
return args;
})(1, 2, 3); // [1, 2, 3]
}而在这之前，我们要转类数组对象，只能用如许的情势: [].slice.call(ps)
固然也许你基础不须要转，因为我们有 for of 了,只需有遍历接口的范例，它就能够举行遍历
（Set,String,Array,NodeList等等）
{
// NodeList对象
let ps = document.querySelectorAll('p');
for (let v of ps){
console.log(v)
}
//固然你能够一样须要下标： `arr.keys()`,`arr.values()`,`arr.entries()`
for (let [i,item] of ps.entries()){
console.log(i,item)
}
}Object.assign()：拷贝源对象本身的可罗列的属性到目的对象身上
{
var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
}值得注意的是， Object.assign()实行的是浅拷贝。如果源对象的属性值是一个指向对象的援用，它也只拷贝谁人援用值。
{
let a = { b: {c:4} , d: { e: {f:1}} }
let g = Object.assign({},a)
g.d.e = 32 // 设置 g.d.e 为 32
console.log(g) // {"b":{"c":4},"d":{"e":32}}
console.log(a) // {"b":{"c":4},"d":{"e":32}}
}如果你须要的不是兼并，而只是一般json对象的复制，发起运用 JSON.parse(JSON.stringify(a))，如许不会有上面的副作用发生。
函数参数默许值。定义默许值得参数必需是尾参数，因为函数形参定义默许值后该参数能够被疏忽
{
function fn(a,b=2){
return {a,b}
}
console.info(fn(1)) //{a: 1, b: 2}
}rest参数：用于猎取猎取函数的过剩参数。与参数默许值一样，必需为尾参数
{
function foo(a,b,...args){
console.info(args)
}
foo(1,2,3,4,5,6) // [3, 4, 5, 6]
}扩大运算符...：它比如 rest 参数的逆运算。能够将一个数组转为用逗号分开的参数序列。
{
// 更好的 apply 要领，比方我们在算最大值的时刻：
var arr = [1,2,3,4,5]
console.info(Math.max.apply(null,arr))
console.info(Math.max(...arr)) // 运用扩大运算符
console.info(Math.max(1,2,3,4,5)) // 终究都会被剖析成如许
// 固然还能如许用
var str = 'string'
var arr = [...str,4,5] // ["s", "t", "r", "i", "n", "g", 4, 5]
}箭头函数 Arrow Functions：箭头函数并非用来替换现有函数而涌现的，而且也没法替换。它是用来作为回调函数运用的，重要是为了简化回调函数的写法。
重要有三个特征：
箭头函数本身没有
this。函数内的this指向箭头函数 定义时地点的对象 ，而不是运用时地点的对象。箭头函数内部，不存在
arguments对象不能够看成组织函数，不能够运用
new指令。
简朴用法，简化回调：
{
// 我们都晓得数组的 sort 并非依据数值大小来排序的，须要排序时，要经由过程回调函数的情势来肯定排序体式格局
var arr = [7,8,9,10]
arr.sort() // [10, 7, 8, 9]
arr.sort(function(a,b){return a-b}) // [7, 8, 9, 10]
arr.sort((a,b)=> a - b ) // 箭头函数简化。当唯一一条语句时，有一个隐式的 return
}没有 arguments
{
var foo = (a,b,c)=>{
console.log(a,b,c)
console.log(arguments)
};
foo(1,2,3)
// 1 2 3
// Uncaught ReferenceError: arguments is not defined
}不要在对象的要领中运用箭头函数：
{
window.name='window';
var obj = {
name:'obj',
getName: function(){
console.log(this.name)
}
}
obj.getName() // obj
var getName = obj.getName
getName() // window， this 老是指向调用者
//-----------------
var obj = {
name:'obj',
getName: () =>{
console.log(this.name)
}
}
obj.getName() // window
/**
这里因为对象 a，并不能组成一个作用域。所以会再往上到达全局作用域，所以 this 指向 window..
*/
}