ES6语法和应用

Posted 2021-06-27 结构化思维wz

ES6语法和应用

一、认识ES6

ECMA是标准，js是实现。

ECMAScript简称ES。

意义：

• 对语法的改进，功能的增加
• 各种框架都在用

let 与 const

let

• 为什么新增let声明变量的关键字？？

  var 不好用

  • 1.var 可以重复声明
  • 2.var无法限制修改
  • 3.var 没有块级作用域

• 闭包主要为了解决什么问题？？

  主要解决var没有块级作用域，只能用function做闭包处理。

  <script>
   //var的缺点们
          //重复声明
          var a=10;
          a =20 ;
          alert(a);
          //弹窗为20
      //没有块级作用域:{},for循环{}，if(){}
      {
          var a =10;
          alert(a);
      }
      console.log(a);
      //都能打印出来10
      // 以前的解决方案：闭包
      // 只有在function函数里有作用域
  
  </script>
  

var已经pass，所以我们使用let

• 不允许在一个作用域中重复声明
• 有块级作用域
• let声明变量不存在变量提升（先声明再使用）

const

注意：不可以分开赋值。只能声明同时赋值

const不是变量的值不能改变，是指向的内存地址不能改变

例如我们存对象或数组的时候：

  const obj ={name:'wz',age:20,sex:'男'};
  obj.name='xiao liu';
  console.log(obj);

这种复合类型的在堆中保存，在栈中只有堆中的一个obj的首地址！

箭头函数和this 指向

以前的函数

  function fun(x){
    return x*x;
  }
  const fun =function (x){
    return x*x;
  }

箭头函数的用法：

1. function 换成 => 放在参数和函数体中间

   const fun = 参数 =>{方法体};
   

2. 如果没有参数，或有多个参数需要使用()来定义参数列表

    const fun = () =>{
        console.log('hello');
    };
   

3. 如果只有一个参数，可以不用（）

    const fun = x =>{
        console.log(x)
    }
     console.log(fun(100));
   

4. 如果函数体中只有一条语句，可以不用{} ，也就不用写return

    const fun = x => x*x;
     console.log(fun(100));
   

箭头函数的好处

作为回调函数非常方便！

例子：排序

let arr = [1,5,56,23,78,22];
  let narr = arr.sort((a,b)=> a-b);
  console.log(narr);

细节

1.如果返回一个对象的时候为了防止省略的{}被误用，需要加一个（）

  const fun =(id,name) =>({
      id:id,
      name:name
  })
  console.log(fun(5,"wangze"));

2.箭头函数中没有构造器

this的指向

set 、map集合

Map：与java类似

set：无需不重复集合

class

仿照了java 的class ，构造器不同