十三、ES6语法

一、ES6变量

1、let

变量名称不能重复

// var语法中下面写法正确，如果使用let定义变量会报错
var int = 100;
var int = 200;

不能预解释/预解析

• 预解释只会解释var和function两个关键词声明的变量

• 不会预解释let、const声明的变量

• 提前调用var声明的变量，执行结果是undefined

• 提前调用let声明的变量，执行结果是报错

变量的作用域

• 使用 let 定义的变量，如果是在 { } 中定义的

• 那么只能在 { } 中调用这个变量，不能在 { } 外调用这个变量

• 如果要使用变量，在外面定义，在作用域内赋值

2、const

• 变量名称不能重复

• 不能预解释/预解析

• 变量的作用域（同let）

• const 声明的变量，不允许修改存储的数值

  • 声明的一般称为常量 ，也就是存储数据数值不能修改的变量

  • const 一般用于存储引用数据类型，存储的是引用数据类型的内存地址

  • 只要不改变内存地址，可以修改引用数据类型中存储的数据数值

二、箭头函数

• 在匿名函数中使用=>代替关键词function

• 箭头定义在 () 和 {} 之间

• 箭头函数主要作用是改变函数中的this指向，为了配合构造函数语法

// 普通的匿名函数
var fun = function(){};

// 箭头函数声明的匿名函数
var fun = () => {}

// 如果只有一个形参要定义,可以不写()
var fun = function(e){}
var fun = (e) => {}
var fun = e => {}

// {}中如果只有一行执行程序,可以不写{}
var fun = function(){console.log();}
var fun = () => { console.log(); }
var fun = () => console.log();

// 只有一个参数,并且只有一行代码,()、{}都可以不写
var fun = function(e){console.log(e);}
var fun = e => { console.log(e); }
var fun = e => console.log(e);

1、函数中的this指向

• this只存在于函数，构造函数中

• this的作用：替换替代this指向的对象

• 普通函数中的this指向window

// 1、function声明的函数this指向是window
function fun1() {
  console.log(this);
}
fun1();
window.fun1();

// 2、匿名函数的this指向是window
var fun2 = function () {
  console.log(this);
}
fun2();
window.fun2();

this指向绑定事件的标签对象

oDiv.onclick = function(){
  console.log(this);
}

this指向window

// this指向是window  
arr.forEach(function(){console.log(this)});

// this指向是window  
setInterval( function(){
  console.log(this);
}, 1000);

// this指向是window  
setTimeout( function(){
  console.log(this);
}, 1000);

window：是BOM操作的顶级对象

箭头函数中的this指向

• 如果父级程序是一个函数，函数也是有this的，那么箭头函数的this，就是父级函数的this

• 如果父级程序不是函数，例如对象、数组等，没有this指向，箭头函数的this指向是window顶级对象

// function声明的对象中的函数，this指向对象本身
const obj = {
  name:'张三',
  age:18,
  fun:function(){
    console.log(this);
  }
}

• 对象中的函数使用箭头函数声明，this指向window

const obj = {
  name:'张三',
  age:18,
  fun: () => {
    console.log(this);
  }
}

2、对象和数组的this指向

对象

const obj2 = {
  fun2:()=>{console.log(this)}
}

• 箭头函数fun2，this指向应该是父级程序的this指向

• 父级程序是obj，obj是对象，没有this指向

• 所以fun2指向window

数组

const arr = [()=>{console.log(this)}];

• 数组中子级箭头函数，this指向是父级程序数组的this指向

• 数组没有this指向，指向window

3、改变this指向

改变函数的this指向，箭头函数是不能改变this指向的

const obj1 = {
  name: '张三',
  fun: function (a, b, c, d, e) {
    console.log(a, b, c, d, e);
    console.log(this);
  }
}

const obj2 = {
  name: '李四',
}

call()

• 调用函数时使用，在调用函数名称后，添加.call()

• 调用函数的()中，应该赋值实参

• 第一个实参是，改变的this指向对象

• 之后的参数是原始函数本身应该具有的函数实参

obj1.fun.call(obj2,100,200,300,400,500);

apply()

• 调用函数时使用，在调用函数名称后，添加.apply()

• 调用函数的()中，应该赋值实参

• 第一个实参是，改变的this指向对象

• 第二个实参必须是数组形式，数组中的数据单元，是原始函数调用是应该输入的实参

obj1.fun.apply(obj2, [100,200,300,400,500] );

bind()

• 生成返回一个新的函数

• 新的函数，程序等都与原始函数相同，只是this指向不同

• bind与apply和call的最大的区别是：bind不会立即调用，而是返回一个新函数，称为绑定函数

// 如果在执行bind时,没有输入实参,在调用时就必须要输入实参
const f = obj1.fun.bind(obj2);
f(1,2,3,4,5);

// 如果在执行bind时输入了实参,那么就会执行输入的实参
// 调用时再输入数据无效
const f = obj1.fun.bind(obj2, 1, 2, 3, 4, 5);
f(100, 200, 300, 400, 500);

三、立即执行函数

• 在定义函数的同时，马上执行函数（只执行一次）

• 执行完函数之后，就会立即释放内存中存储的函数

// 第二个()的作用就是作为一个整体,立即执行封装的函数
(function fun2() { console.log(456) })()

四、展开合并运算符

• 展开合并运算符，实际上都是一样的运算符

• 只是不同情况下，执行不同功能

• 运算符 ... 三个点

语法

• (...形参)=>{}

  • 以数组的形式，将所有的实参，存储在形参中

// arg 形参中以数组的形式存储实参 a,b,c
var fun2 = ( ...arg )=>{
  console.log(arg) ;
}
fun2('a','b','c');

• (形参1,形参2, ...形参3)=>{}

  • 形参1中存储实参1，形参2中存储实参2，其他实参都以数组的形式存储在形参3中

// 第一个形参,str1,应该存储实参1 a
// 第二个形参,str2,应该存储实参2 b
// 其他所有的实参,都以数组的形式,存储在arg中
var fun3 = ( str1 , str2 ,...arg )=>{
  console.log(str1, str2, arg) ;
}
fun3('a','b','c','d','e','f',1,2,3,4,5,);

五、解构语法

1、数组的解构

将数组的数据单元，解构出来，一一赋值给对应的变量存储

const arr1 = ['北京','上海','广州','重庆','天津'];
let [str1,str2,str3,str4,str5] = arr1;
console.log(str1,str2,str3,str4,str5);

const arr2 = ['北京','上海',['朝阳区','丰台区','大兴区']];

// s3存储的是数组['朝阳区','丰台区','大兴区']，可以继续解构
let [s1,s2,s3] = arr2;

// 每一个变量,存储的是每一个数据单元
let [s1,s2,[s3,s4,s5]] = arr2;

2、对象的解构

把对象中，属性（键名/键）存储的属性值（键值/值）解构出来，赋值给变量存储

语法

• 变量名称与键名必须相同

const obj = { name:'张三',age:18,sex:'男' };

// 通过键名获取数组中的数据,存储在名称相同的变量名称中
let { name , age , sex } = obj;

console.log( name, age, sex ); // 张三 18 男

• 添加别名

// 也就是以别名作为变量名称,存储在对象中,对应键名的数据
let {name: n, age: a, sex: s} = obj;

console.log(n, a, s); // 张三 18 男

• 对象中存储对象或者数组

const obj2 = {name: '张三', o: {age:18,sex:'男'}};
let { name:n2 , o : o2 } = obj2;
let { name:n2 , o : { age: a2, sex: s2} } = obj3;