ES6新增语法(let)

1、let

 ES6中新增的用于声明变量的关键字。

 let 声明的变量只在所处于的块级有效。

 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的。

 1. 防止循环变量变成全局变量。

 2. 不存在变量提升

 3. 暂时性死区

    if(true){
        let  a=10;
    }
    console.log(a);   //  a is not defined
  //防止循环变量变成全局变量
  for(var i=0;i<2;i++){
  }
  console.log(i); // i=2(只有i=2时,不满足for循环条件,即执行下面语句),如果 for循环中使用 let 那么输入i就会报错: i is not defined
  //let不存在变量提升
  console.log(a); //a is not defined
  let a = 10;
  //暂时性死区
  var num = 10;
  if(true){
    console.log(num);
    let num = 20; //只要在块级区域声明了变量let,那么这个块级区域就被let所绑定,所以在块级里面使用的 num 跟外面定义的全局变量 num 没有关系
  }

2、const

 作用:声明常量,常量就是值(内存地址)不能变化的量

 1.const关键字

  1.具有块级作用域

  2. 声明常量必须赋初始值

  3. 变量赋值后,值不能修改(两种情况)

   1. 基本数据类型:一旦赋值,值就不能修改(比如:数值,字符串)

   2. 复杂数据类型:不能赋值,但是可以修改 数据结构内部的值(比如:数组,对象)

   const PI = 3.14;
  // PI = 100;会报错(声明常量时丢失了初始值)
  const arr =[100,200];
  arr[0]=123; //可以修改数组内元素的值,如果重新赋值是不允许的
  arr=[1,2]; //会报错 因为 arr 重新赋值,改变了内存地址

3、let、const、var的区别

 1. 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。

 2. 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。

 3. 使用 const 声明的常量,在后面出现的代码中不能再修改该常量的值。

 如果声明的值不需要变化,就用const,这样JavaScript 解析引擎不用时时监控值的变化,所以效率比 let 高。

  

 4、解构赋值(方便从数组和对象中提取值)

 解构:分解数据结构;赋值:指的是为变量赋值。

 ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。

 如果变量没有对应的值,那么变量的值则是 undefined

 1. 数组解构:

  数组解构允许我们按照一一对应的关系从数组中提取值,然后将值赋值给变量。

  let[a,b,c]=[1,2,3];

  console.log(a); // 1

  console.log(b); // 2

  console.log(c); // 3

 2. 对象解构:

  实际上是属性匹配,对象解构允许我们使用变量的名字匹配对象的属性,匹配成功将对象属性的值赋值给变量。

  写法一:(变量和对象中的属性名一致)

  let {name,age,sex} = {name:"andy",age:18,sex:"女"};

  console.log(name);  // ‘andy'

  console.log(age);  //18

  写法二:(变量名字和对象中属性名字不一致)

  let{name:myName,age:myAge}={name:"andy",age:18};  //myName,myAge 属于别名

  console.log(myName); // 'andy'

  console.log(myAge);  //18

5、箭头函数

 ES6中新定义函数的方式

 1. 语法:

  () => { }

   ():放置形参

   { }:函数体

  const fn = () => { }   // 通常把函数赋值给一个变量(常量),使用时,直接调用变量(常量)名

 2. 箭头函数中,如果函数体中只有一句代码,并且代码的执行结果就是函数的返回值,函数体大括号可以省略,return也可以省略。

  const sum = (n1,n2) => n1+n2; 

  console.log(sum(1,2));  // 3

 3. 形参只有一个,可以省略小括号

  function  fn( num ){

    return num;

  }

  const  fn = num => num;

 4. 箭头函数不绑定 this ,箭头函数没有自己的 this 关键字,

  如果在箭头函数中使用 this,this关键字将指向箭头函数定义作用域中的 this。

  function fn(){
    console.log(this); //this指的是obj
    return () =>{
      console.log(this); // 因为箭头函数不绑定this,箭头函数中的this指向函数定义位置中的this,所以this指向obj
    }
  }
  const obj ={name:'andy'};
  const resFn = fn.call(obj); // 使用call方法,把fn的this指向obj对象
  resFn(); //调用的是fn中的匿名函数

箭头函数面试题

var age = 100;
var obj = {
 age:20,
 say:() => {
   alert(this.age); //100;
 }
}
obj.say();
关键点:obj是对象,没有作用域,say方法实际被定义在全局作用域下,say方法中的this指向是window,所以弹出就是window下面的age

 5. 剩余参数

  剩余参数语法允许我们将一个不定数量的参数表示为一个数组

  function sum(first,...args){

    console.log(first);  // 10

    console.log(args);  // [20,30]

  }

  sum(10,20,30);

 6. 剩余参数和解构函数配合使用

  let  [s1,...s2] = ['lisi','wangwu','zhangsan'];

  console.log(s1);  //' lisi '

  console.log(s2);  //['wangwu','zhangsan']

猜你喜欢

转载自www.cnblogs.com/qtbb/p/11829034.html
今日推荐