ES6重点

ES6 重要内容

1. let const

   let //声明变量
      //标识符:字母下划线($)首字母不能为数字,严格区分大小写,且不能使用关键字
   let //声明特点
       //1.不允许重复声明
       //2.块级作用域
   	if(true){
           let a = 200;
          console.log(a);
      }
      console.log(a);
     	//3.不存在变量提升
   	console.log(a);
   	let a =90;
   	//4.不影响作用域链
   	function main() {
           let a = 30;
           function fn() {
               console.log(a);
           }
           fn();
       }
   
   
       main();
   

   //const 用来声明一个常量(值不变)
   	const A = 100;
   	console.log(A);
   //0.格式
   //1.声明的时候一定要赋初始值
   	const A;
   	console.log(A) //未赋值会报错
   //2.常量的名称一般为『大写』 潜规则
   	const a =100;
   	console.log(a);//小写也能打印
   //3.不能修改常量的值
   	const A = 100;
   	A = 200;
   	console.log(A)//修改变量会报错
   //4.不允许重复声明
   	const A = 300;
   	console.log(A);//重复声明也报错
   //5.块级作用域
   	if(true){
           const B = 500;
           console.log(B);//正常打印
       }
   	console.log(B)//全局未定义
   //6.关于数组和对象的元素的修改(数组和对象存储的是地址值)
   	//push 添加尾部
   	const ARR = [1,2,3,4];
   	ARR.push(5);
   	console.log(ARR);
   
   	var obj ={
           name:'fengfeng';
           age:18
       }
       obj.name = 'haifeng';
   	console.log(obj);
   

2. 解构赋值

   //数组的解构赋值
   let arr = ['haifeng','zhiyuan','zhangyan','manman'];
   //普通做法
   //    let hai = arr[0];
   //    let zhi = arr[1];
   //    let yan = arr[2];
   //    let man = arr[3];
   	let [hai,zhi,yan,man]=arr;
   	let [hai,zhi,yan,man]=		['haifeng','zhiyuan','zhangyan','manman'];
   	console.log(hai,zhi,yan,man);
   

   //对象的解构赋值
   	var laoliu = {
       	name:'zhiyuan',
       	age:40,
       	sing:function(){
         	  console.log('会开车');
       	}
   	}
   let{name,age,sing}=laoliu;
   console.log(name,age,sing);
   sing();
   
   //复杂形式
   	var laoliu = {
      	 	name:'zhiyuan',
       	age:40,
       	hobby:['抽烟','喝酒','烫头'],
       	sing:function(){
           	console.log('会开车');
       	}
   	}
   //采用复杂形式,hobby就不能使用了
   	let [name,age,hobby:[chou,he,tang],sing]=laoliu;
   	console.log(chou,he,tang);
   

3. 箭头函数

   //ES6 允许使用[箭头](=>)定义函数.
   	function main(a,b,c){
      	 var res = a + b + c;
       	return res;
   	}
   //1.声明格式
   //  let 函数名 = (形参列表) =>{函数体}
   	let main = (a,b,c) => {
      		 var res = a + b + c;
      	 	return res;
   	}
   //2.函数调用
   var r = main(1,2,3);
   console.log(r);
   
   //特点
   //   1.this的值是静态的
   //   箭头函数中的this是外层作用域下的值
   	var main =()=>{
       	console.log(this);
   	}
   	main();
   
   //   2.不能作为构造函数使用
   //new main();
   
   //   3.不能使用 arguments
   	function fn(a,b,c){
           console.log(arguments);
       }
   	fn(1,2,3);
   
   //	let fn2 = (a,b,c)=>{
   //        console.log(arguments);
   //    }
   //    fn2(2,3,4)
   
   //伪数组:只能使用索引和长度
   //数组:可以使用索引,长度,push等方法
   
   //    4.箭头函数简写
   // 	    1.不写小括号,当形参有且只有一个的时候
   		let pow = item =>{
               return item * item;
           }
           console.log(pow(5))
   //		2.不写大括号,当代码体只有一条语句的时候,并且语句的执行结果为函数返回值的(如果不写大括号的话,return也不能写)
   		let pow = item => item * item;
   		console.log(pow(10))
   

   ​

4. rest 参数 function fn(…args){}

   //rest 参数是用来代替 arguments
   	function sum(...args){
           console.log(arguments)//伪数组
           console.log(args);//数组
           
           var r = a + b + c;
           return r;
       }
   	sum(1,2,3);
   

5. 扩展运算符 …

   //1.数组的合并 
   	var arr1 = [1,2];
   	var arr2 = [8,9];
   
   	var newArr = [...arr1,...arr2];
   	console.log(newArr);
   
   //2.数组的克隆
    	var arr = [5,6,7];
   	var newArr = [...arr];
   	console.log(newArr);
   
   //3.将伪数组转为真正的数组
   //	<div></div>
   //	<div></div>
   //	<div></div>
   	var divs = documents.querselectorAll('div');
   	var arr =[...divs];
   	console.log(arr);
   

6. 类 class A extends B{}

   //声明
   	class Phone{
           	//设置属性
           	name = '手机';
   			//构造函数 设置属性
   			//构造器
   			constructor(brand,price){
                   this.brand = brand;
                   this.price = price;
               }
   		//构造函数原型上的方法
   		call(someone){
               	console.log('给'+someone+'打电话');
           	}
       	}
           //实例对象
           let huawei = new Phone('华为',3000);
   		console.log(huawei);
   		huawei.call('老刘');
   

   //静态属性和方法
   	class Phone{
           //声明静态属性
           static name = '手机';
   		static change = function(){
               console.log('改变');
           }
       }
       //log看不到
       console.dir(Phone)
   

   // class A extends B{}
   	 //定义父类
       class Phone{
           //添加属性，用过构造器
           constructor(brand,price){
               this.brand = brand;
               this.price = price;
           }
           //添加原型上的方法
           call(){
               console.log('打电话');
           }
           sendMessage(){
               console.log('发短信');
           }
       }
   
       //设置子类  class SmartPhone extends Phone
       class SmartPhone extends Phone{
           //设置属性
           constructor(brand,price,screen,pixel){
               //继承父类的属性 super()
               super(brand,price); //Phone.call(this,brand,price);
               //设置子类自己的属性
               this.screen = screen;
               this.pixel = pixel;
           }
           //子类原型上的方法
           //es6 会自动拿到父类原型上的方法
           playGame(){
               console.log('打游戏');
           }
       }
   
       //实例对象
       let huawei = new SmartPhone('华为',6000,'7inch','3000w');
       console.log(huawei);
   
       huawei.call();
       huawei.sendMessage();
       huawei.playGame();
   

   //class的get(获取)和set(设置)
   	//构造函数
   	class Phone{
           //获取价格
           get price(value){
               this.monay=value;
               console.log('价格是'+value);
           }
       }
   	//构造函数中 this 指向 实例对象
   	//实例对象
   	let huawei = new Phone();
   	
   	//修改手机的价格
   	huawei.price = 6000;
   	console.log(huawei);
   

ss Phone{
//获取价格
get price(value){
this.monay=value;
console.log(‘价格是’+value);
}
}
//构造函数中 this 指向 实例对象
//实例对象
let huawei = new Phone();

//修改手机的价格
huawei.price = 6000;
console.log(huawei);