ES6常用API
ES6常用API
1、let
let关键字，用来声明变量，它的用法类似于var。
1、let不允许重复声明变量；
var a = 1;
var a = 2;
console.log(a);//2
var b = 3;
let b = 4;
console.log(b);//Identifier 'b' has already been declared
2、 不会添加到window对象下
let b = 4;
console.log(window.b);//undefined
3、let声明变量仅在块级作用域内有效；
if(12){
// var a = 12;
let a = 34;
}
console.log(a);//a is not defined
for(var i=0;i<5;i++){
console.log(i);//0 1 2 3 4
}
console.log(i);// 5
for(let i=0;i<5;i++){
console.log(i);//0 1 2 3 4
}
console.log(i);// i is not defined
4、不能通过let声明和形参相同的变量；
function fn(a,b){
// var a=1;
let a=1;
}
fn(2,3);//Identifier 'a' has already been declared
5、let声明变量不会提升；
console.log(a);//undefined
var a = 11;
console.log(b);//报错，Cannot access 'b' before initialization
let b = 22;
注意：let声明的变量一定要在声明之后使用，否则报错。
6、暂时性死区
var a = 2;
function test(){
console.log(a);//报错，Cannot access 'b' before initialization
let a = 4;
}
test();
应用
var lis = document.querySelectorAll('.list li');
for(var i=0;i2、const
const和let以上的特性一样
const声明常量
let b=2;
b=4;
console.log(b);//4
const a = 123;
a = 456;// 报错,Assignment to constant variable.
const与let类似，但是，const常量一旦声明，常量将不能重新赋值！
let x;
const y;// 报错,Missing initializer in const declaration
意味着，const一旦声明，就必须立即初始化，不能留到以后赋值！
在工作中，通常为了和变量区分， 声明常量使用大写
const USER_NAME = '张三丰';
const声明的常量不能改变嘛？
不能，常量的内存地址不能改变
本质：const实际上保证的，并不是值不能改变，而是指向的那个内存地址不能改变。
const USER = {
name: 'xm',
age: 24
}
USER.age = 25;
USER = {// 报错,Assignment to constant variable.
name: 'xm',
age: 25
}
console.log(USER.age);
3、箭头函数
语法：(形参)=>{函数体}
function fn(a,b){}
setTimeout(()=>{});
fun()=>{};// 报错, Malformed arrow function parameter list
let fun = ()=>{};
fun();
什么时候可以简写：
1.只有一个形参时，参数的小括号可以省略
[1,2].forEach(item=>{
console.log(item);
});
2.当函数体只有一句代码，或只有返回值时，函数体的{}也可以省略
let fn = _ => _ ; //等同于fn = (_)=>{return _}
console.log(fn(111));
箭头函数需要注意的地方：
1.关于 this 指向问题，箭头函数中没有自己的 this
箭头函数中的this指向外层函数的this
setTimeout(function(){
console.log(this);//window
},1000);
box.onclick = function(){
console.log(this);//box
// setTimeout(function(){
// console.log(this);//window
// },1000);
setTimeout(()=>{
console.log(this);//box
},1000);
}
let test = (a,b)=>a+b;
2.箭头函数内部的 this 不能改变指向
let obj = {a:123};
setTimeout(function(){
console.log(this);
}.bind(obj),1000);//{a:123}
setTimeout(()=>{
console.log(this);
}.bind(obj),1000);//报错，missing ) after argument list
3.箭头函数内部没有arguments对象。更不能通过arguments对象访问传入参数。
let fn1 =(a,b)=>{
console.log(arguments[0]);//报错，arguments is not defined
};
fn1(2,3);
4.不能作为构造函数使用，不能使用new调用
let fn1 = function(){};
function fn2(){};
new fn1();
new fn2();
let fn3 = ()=>{};
new fn3();//fn3 is not a constructor
注意：
1、如果没有参数要有小括号
2、如果有一个参数可以不用小括号
3、如果有多个参数必须加小括号
4、如果仅有一条语句，并且返回该内容，（ES5中的return），可以不写return
5、如果有多条语句，必须加{}将内容括起来，否则将会认为是函数外语句，并且如果return就必须加return语句。
6、箭头函数的this指向是原代码块的this指向，不受其他执行影响。
3、template string(（字符串模板）
1、ES6中字符串模板使用反引号 ` 表示，字符串模板中可以解析变量和函数，使用 ${ } 解析
// let showHtml = ''+tit1+''+tit2+''+con1+''+con2+'';
let showHtml = ''+
''+tit1+''+
''+tit2+''+
''+
''+
'内容1'+
'内容2'+
'';
let test = (a,b)=>a+b;
let str = `
${tit1}
${tit2}
${con1}
${con2}
${test(3,5)}
`;
// show.innerHTML = str;
// let name = '小明';
// let age = 24;
// function fn(a,b,c){
// console.log(a);
// console.log(b);
// console.log(c);
// }
// fn `大家好，我叫${name}，今年${age}岁`;
// fn `大家好，我叫，今年岁`;
// 函数后面跟字符串模板，函数内部第一个参数一定是数组