再不学ES6 就out 了

ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范;新增的好用的语法规范。

为什么要学习ES6呢?

1: 以前的javaScript:
   1.1: 变量提升特性,  增加了程序运行的不可预测性。
   1.2: 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码。

2: 声明变量使用let var const 来声明变量:

   使用let 声明的变量: 变量值只可以在大括号中访问,  大括号外部是访问不到的, ES6中新增了用于声明变量的关键字。 

  let 声明的变量只存在于块级块级作用域。  块级作用域实际就是大括号产生作用域。
  在大括号里, let 声明的变量才具有块级作用域,  使用var 声明的变量不具备块级作用域。 

  let 的好处:  防止循环, 变量变成全局变量。 
  不存在变量提升,  只能先声明再使用。
  暂时性死区,也就是说在块级作用域中变量会被整体绑定在整个块级区域,不再受外部代码影响,虽然两个变量 
  名相同但是里面的变量跟外面的变量是没有关系的。

3: 案例:

  a是没有定义的, 也就是说外边是不可以访问得到的。
  if(true) {
    let a = 10;
  }
  console.log(a);   // a 是没有定义的, 也就是说在外边是不可以访问到a的。

4: let 声明变量,  没有变量提升, 所以不能这样先使用后声明。
   console.log(a);   // a is not defined;   a 是未定义的。
   let a = 20;   // 使用let 关键字声明变量, 必须先声明, 后赋值。

5: 大括号里边的temp 变量不会受外部的tem 变量的影响。
   var temp = 123;
   if(true) {
      temp = 'abc';   // 会报错, 报变量没有定义。
      let tmp; 
   }
    


const 声明变量,  作用: 用于声明常量, 常量就是值, (内存地址) 不能变化的量。
特点:  具有块级作用域  ----- (在大括号里边);

声明常量时必须赋初始值。  常量赋值后,  值是可以改变。 比如简单数据类型,  数值, 字符串不能改变; f复杂数据类型时,  不能重新赋值,  也就是常量里边对应的内存地址不存在, 不可以更改,  但是可以修改数据结构中的值, 比如数组和对象。  里边的数据是可以更改的。

const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
ary['a', 'b']   //  是正确的
ary['a', 'b']   //  但是这种错误, 是不可以重新赋值的。

6: 声明变量的总结:  使用var 声明的变量, 其作用域为该语句坐在的函数内, 且存在变量提升现象。 -- 函数。  
  使用let 声明的变量,  其作用域为为该语句所在块级内, 不存在变量提升  --- 块级作用域 (值可以更改)

7: 使用const 声明的是常量, 在后边出现的代码中不能在修改常量的值。 ---- 块级作用域  值不可以改变。

8:  函数的定义, 派值, 存储的数据不需要变化,  数学公式中不变的值, const 比 let 高。

9:  解构赋值

   很容易从数组和对象中取值, 从Es6 中允许从数组中提取值, 按照对应的位置,   对应量赋值。 对象也可以实现解构赋值。

10:  数组解构的基本形式是:  
     形式一: 变量与数组的值个数相相同
     等号左边代表的是解构不是代表数据是变量;  与数组的值是一一对应的关系。
     let ary = [1, 2, 3];
     let [a, b, c] = ary;
     console.log(a);   // 1
     console.log(b);   // 2 
     console.log(c);   // 3


    形式二: 变量与数组中值的个数不相同,  不对等的值是 underfined的
    let ary = [1, 2, 3];
    let [a, b, c, d, e, f] = ary;

    // d, e 的值是underfinded,   没有对应的值就是underfined;  
    形式二:  变量二:  变量与数组的值的个数不相同,  不对等值就是underfined

11:  对象的解构:
     实际上是属性的匹配, 如果匹配成功就将对应的值赋值给变量。
      
     let person = {name: '章三', age: 20};
     let {name, age} = person;  // 左边相当于解构
     console.log(myName);   // 章三
     console.log(myAge);    // 20

     写法二: 变量的名字和对象里边的属性名不一样。
     myName 和 myAge 属于别名;  属性名匹配h就是将name值赋值给myNamem 和 myAge;


12:  let person = {name: '章三', age: 20};
    
     let {name: myName, age: myAge} = person;
     
     console.log(myName);   // 章三
     console.log(myAge);    // 20

13:  箭头函数: ()=> {};    const fn = ()=> {};

     调用函数 fn();
     通常给定一个函数,  函数名字就是变量的名字, 调用函数就是调用变量的名字就可以了。 常量fn的值,  就是等于箭头函数。

特点: 函数只有一句代码,  且代码的执行解构解构就是返回值,  可以省略大括号 const sum = (num1, num2)=> num1 + num2 的值给 sum

2: 如果形参只有一个,  可以省略小括号。  const fn = v=> v;  返回值是将v 的值返回给fn, 输入就直接调用。

3: Array 的扩展运算符:
   
   扩展运算符 可以将整个数组或者对象转化为逗号分隔的参数序列
   let ary = [1, 2, 3];
   console.log(...ary);   // 1 2 3 
     
4: 扩展运算符可以将数组或者对象转化为逗号分割参数序列。

   let ary = [1, 2, 3];  
   cconsole.log(...ary);   // 1  2  3

5: 扩展运算符可以用于数组合并
   let ary1 = [1, 2, 3];
   let ary2 = [4, 5, 6];
   let ary3 = [7, 8, 9];

   // 方法二: 
   let ary1 = [1, 2, 3];
   let ary2 = [4, 5, 6];
   let arr1.push(...ary2)     // 可以将多个参数arr1 数组中





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值