Es6：ECMAScript6的标准规范

Es6：ECMAScript6的标准规范

前端回顾：HTML5、CSS3、JavaScirpt、jQuery、bootstrap（css框架）、vue、axios。

ECMAScript是标准规范、JavaScript是实现，类似js的还有JScript、ActionScript等。

JavaScript语言属于ES3.0版本。

ES版本：ES1、ES2、ES3、ES5、ES6

(2)定义变量拓展：let和const

定义变量命令：var、let、const（开发中let常用）

let说明：定义变量在所在的代码块内有效（作用域在所在的代码块内）

//如下代码，打印b，只能显示出花括号里（代码块儿内）的b的值，最后一句会报错 
<script>
		{
           let b = 2;
           document.write(b);  
       }
       document.write(b);
</script>

const说明：只读的常量、一旦声明就不能更改

注意：后端修饰常量的是：final

//如下代码：由于const修饰常量，所以“c = 6”会报错，无法打印
<script>
       {
           const c = 5;
    		c = 6；
           document.write(c);
       }      
</script>

(3)变量的解构赋值

解构定义：从**数组和对象**中提取值、对变量进行赋值、这被称为解构。

①数组解构：元素是按照【顺序排列】的，变量的取值由它的【位置】决定

<script>
       // 数组解构
       let[a,b,c] = [1,2,3];
       document.write(a + b + c);
      
	   let[x,,z] = [1,2,3];
       document.write(x + z);
</script>

②对象解构：【变量必须与属性同名】、跟顺序无关、变量名不能重。

 <script>
       // 对象解构
      //变量必须与属性同名
    	 let person = {name:"张三",age:30};

       let{age, name} = {name:'张三',age:30};
       document.write(name + age);
</script>

(4)字符串的扩展

<script>
    	//字符串遍历字符
       for (let c of 'abc') {
           document.write(c);
       }
       
       let s = 'abcde';
       document.write(s.startsWith('ab'));//判断以某个字符串开头（返回的布尔值）
       document.write(s.endsWith('de'));//判断以某个字符串结尾（返回的布尔值）
       document.write(s.includes('cd'));//是否包含某个字符串（返回的布尔值）
</script>

(5)数值的扩展

 <script>
      // 字符串转换为数字
       let a = Number.parseInt('12.34');//字符串转换为整数
       document.write(a);//打印结果是12

       let b = Number.parseFloat('56.7abc8');//字符串转换为小数
       document.write(b);//打印的b的结果是56.7（碰到非数字的自动停止转换）
       
       // 判断方法
       document.write(Number.isInteger(3.4));//判断是否是整数（返回布尔值）
</script>

(6)函数的扩展

参数扩展：ES6允许函数的参数设置默认值。

  //如下代码：m1方法中传入两个参数2和3，这个时候打印出来的a和b就是2和3
<button onclick="m1(2,3);">按钮1</button>
   <script>  
    function m1(a=0, b=0){
        document.write(a);
        document.write(b);
    }   
</script>

 //如下代码：m1方法中没有传入参数，函数的参数设置默认值a=7, b=8，这个时候打印出来的a和b就是7和8
<button onclick="m1();">按钮1</button>
   <script>  
    function m1(a=7, b=8){
        document.write(a);
        document.write(b);
    }   
</script>

参数：引入rest参数、用于函数的多余参数。主要解决的是参数个数问题。

 <button onclick="m2(1,2,3,4,5);">按钮2</button>
 
  function m2(...value) {
        let s = 0;
        for (let t of value) {
            s += t;
        }
        document.write(s);
    }

箭头函数

 	//传统函数写法 
	function m3(e,f) {
        return e + f;
        }

	//箭头函数写法
	// 函数名 参数列表 箭头 方法体
    let m3 = (e, f) => { return e + f;}
    alert(m3(5,5));

(7)数组的扩展

 <script>
       // 参数序列(数组遍历)
       document.write(...[1,2,3]);
       
       // 能够将一组值转换为数组
       let arr = Array.of('张三','李四','王五');
       document.write(arr[0]);
</script>

(8)对象的扩展

 <script>
       let a = '张三';
       let b = {name:a};
       document.write(b.name);
       
       let c = {a};
       document.write(c.a);
       
       function m() {
           let x = 1;
           let y = 10;
           //传统写法：
           return {x:1, y:10};
           
           //ES6写法：
           return {x, y};
       }
       document.write(m().x + m().y);
 </script>

(9)Set数据结构和Map数据结构

前端有3个数据结构可用：Array数组、Set数据结构、Map数据结构

<script>
    // Set数据结构(不重复)
    let arr = new Set([1,2,2,2,3,4,4,5,5]);
    document.write(arr.size);    
    for (let t of arr) {
        document.write(t);
    }

    // Map数据结构（键值对）
    let brr = new Map();
    brr.set('k1','v1');
    brr.set('k2','v1');
    document.write(brr.get('k1'));//取值
    document.write(brr.has('k1'));//判断有没有key值
    brr.delete('k1');//根据key值删除value
</script>

(10)面向对象部分-类(做框架可能做到，了解)

 <script>
     //js语言创建一个新的类
       class Person {
          
           //constructor：构造方法关键字
           constructor(name, age) {
             this.name = name;
             this.age = age;
           }
           
           toString() {
               return this.name + this.age;
           }
           
       }
    	//根据类来创建对象
       let person = new Person('张三', 30);
       document.write(person);
</script>

(11)面向对象部分-继承（了解）

 <script>
       class Person{
           constructor(name){
               this.name = name;
           }
           toString(){
               return this.name;
           }
       }
       class Member extends Person {
           constructor(name, age) {
               super(name);//继承父类的name
               this.age = age;
           }
           toString(){
               return super.toString() + this.age;
           }
       }
       let m = new Member('李四',40);
       document.write(m);
 </script>