Js高级-ES6

一.let
作用：同var一样用来声明变量
特点
在块级作用域内有效
不能重复声明
变量提升
全局变量提升：会创建一个变量对象（script）用来收集全局作用域下let定义的变量
局部变量提升：会将var let定义的变量全部放到当前函数的变量对象中
同var的变量提升的区别：let提升的变量在为赋值之前不允许被使用
应用
循环遍历加监听
使用let取代var是趋势

二.const关键字
作用：定义一个常量
特点：不能修改，其他特点同let
应用：保存不用改变的数据

三.解构赋值
理解：从对象或数组中提取数据，并赋值给变量（多个）
对象的解构赋值
let {n，a} = {n：“tom” ， a：12}
数组的解构赋值
let {a ，b} = {1 ，2}
用途：给多个形参赋值

四.模板字符串
作用：简化字符串的拼接
写法：模板字符串必须使用`` 包含，变化部分用 ${xxxx}定义

  let obj = {
   username: 'kobe', age: 43};
  let str = '我的名字是： ' + obj.username + '， 我的年龄是： ' + obj.age;
  console.log(str);
  console.log('---------------模板字符串拼接--------------------');
  let str1 = `我的名字是 ${
     obj.username}, 我的年龄是 ${
     obj.age}`
  console.log(str1);

五.对象的简写方式
同名属性可以省略–>key和value一样的时候
省略函数的function，冒号

   let username = 'kobe';
   let age = 43;
   console.log('---------------- 对象的常规书写方式---------------------');
 
   let obj = {
   
     username: username,
     age: age,
     showName: function () {
   
       console.log(this.username);
    }
 }
   console.log(obj);
   obj.showName();
 
   console.log('---------------- 对象的简写方式---------------------');
   let obj = {
   
     username,  // 同名的属性可省略 ---> key 和value一样的时候
     age,
     showName() {
    // 省略函数的function，冒号
       console.log(this.username);
    }
  }
 
   console.log(obj);
   obj.showName();

六.箭头函数
语法：

let fun = 形参 => 函数体

重点：函数体

只有一条语句或者表达式的时候，{ }可以省略
当多条语句时候，{ }不能省略
当{ }省略的时候，会自动return当前语句或者表达式的执行结果

特点：

this： 箭头函数没有自己this，不是调用的时候决定的，而是定义的时候决定的

理解：

定义的时候看外部是否有函数，如果没有函数，this指向window
如果有外部函数，this同外部函数的this指向是同一个对象
箭头函数不能用作构造函数

  console.log('------------- 箭头函数 - 没有形参  -----------------');
  // 当箭头函数没有形参的时候 () 不能省略
  let fun = () => console.log('fun()');
  fun();
 
  console.log('------------- 箭头函数 - 有一个形参  -----------------');
  // 当箭头函数只有一个形参的时候，() 可以省略，也可以不省略
  let fun1 = a => console.log('只有一个形参的时候', a);
  fun1(123);
 
  console.log('------------- 箭头函数 - 有多个形参  -----------------');
  // 当箭头函数有多个形参的时候， ()不能省略
  let fun2 = (a, b) => console.log('有多个形参的时候', a, b);
  fun2(1,2);
 
 
  console.log('------------- 箭头函数 - 函数体只有一条语句的时候  -----------------');
  // 当箭头函数的函数体只有一条语句的时候{}可以省略， 当{}省略的时候会自动 return 当前语句或者表达式的结果, 当{}不省略的时候，需要手动指定返回的结果, 否则默认执行 return value: undefined;
  let fun3 = () => console.log('函数体只有一条语句的时候'); 
  console.log(fun3());// 语句的返回结果，undefined
  let fun3 = () => 123 
  console.log(fun3());//表达式的返回结果，123
 
  console.log('------------- 箭头函数 - 函数体有多条语句的时候  -----------------');
  // 当箭头函数的函数体有多条语句的时候，{}不能省略， 当{}不省略的时候，需要手动指定返回的结果， 否则默认执行 return value: undefined;
  let fun4 = () => {
   
    let a = 1;
    console.log('函数体有多条语句的时候', a);
    // return a;-->1
  }
   
  console.log(fun4());//undefined

七.点点点运算符
1 …运算符去拆包指定的数组

  //把arr2数组插入到arr里面1和6中间
  let arr = [1, 6];
  let arr2 = [2,3,4,5];
   
  let arr3 = [1, ...arr2, 6];
  console.log(arr3); // [1, 2, 3, 4, 5, 6]

2 …运算符去拆包不能直接去遍历对象

  let obj2 = {
   name: 'kobe', age: 43};
  console