zoukankan      html  css  js  c++  java
  • ES6

    1. 常量和变量声明的改变

      在es6中,变量名的定义不再使用var,而是用let,常量依然是用const。

      新的变量声明就意味着变量的声明格式有了改变,let声明的变量的作用域是在块级作用域中 {};

      变量提升对于var来说是不会报错的,但是对于let声明的变量会报错,它会提示你你所打印的变量没有定义

    console.log(i);     //02.html:15 Uncaught ReferenceError: i is not defined at 02.html:15
    let i = 10;  
    

      var声明的变量,你如果重复声明的话,后面的会把前面的覆盖,而let声明的变量不允许重复声明。

      常量的定义,只能一次定义,就不能对常量进行修改,而且在定义的时候就必须进行初始化,否则会报错。

    2. 字符串的拼接

      在es6以前,字符串的拼接只能通过"+"的形式进行拼接,在es6中可以通过反引号(``)拼接,其中的变量可以用${},将变量放在${}的花括号中

    str += "<ul> 
    	<li> " + uname + "</li> 
    	<li>nan</li> 
    	<li>18</li> 
    	<li>150123456878</li> 
    	<li>xxx@xxx.com</li> 
    </ul>"
    div.innerHTML = str;
    
    //es6
    str += `<ul> 
    	<li>${uname}</li> 
    	<li>nan</li> 
    	<li>18</li> 
    	<li>150123456878</li> 
    	<li>xxx@xxx.com</li> 
    </ul>`
    div.innerHTML = str;
    

    3. 扩展运算符(...)

      对于扩展运算符(...),我们只需记住一点:对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中

      说白了,就是复制,用数组来举例

    var arr = [1,2,3,4,5,1,2];
    var arr4 = [...arr];
    arr4.push(6)
    console.log(arr);     //1,2,3,4,5,1,2
    console.log(arr4)     //1,2,3,4,5,1,2,6
    

    4. 解构赋值

      解构赋值是赋值运算符的扩展。

      是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。

      在解构中,有下面两部分参与:

      解构的源,解构赋值表达式的右边部分。
      解构的目标,解构赋值表达式的左边部分。
      简单的说,按照解构的源的格式进行赋值就没有问题了。
    let [a,b,c] = [1,2,3];
    console.log(a,b,c);  //1,2,3
    	
    let [a,[b,[c],d],e] = ["mercy",[5,["hello"],"world"],9];
    console.log(a,b,c,d,e);    //mercy 5 hello world 9
    
    let [a,[b,[e],d],c] = ["mercy",[5,["hello"],"world"],9];
    console.log(a,b,c,d,e);    //mercy 5 9 world hello
    

    5. 箭头函数

      函数可以写成函数声明或者函数表达式的样子,但是箭头函数仅对函数表达式有效。

      在es6以前,函数的格式是这样的:

      function 函数名(参数1,参数2,...){

        ......

      }

    function ajax(url,success,errr){
    	var xhl = new XMLHttpRequest();
    	xhl.open(url,"GET",true);
    	xhl.send(null);
    	xhl.onload = function(){
    		if (xhl.readyState ==4 && xhl.status == 200){
    			success(xhl.responseText);
    		}else{
    			errr(xhl.readyState);
    		}
    	}
    }
    

      现在的函数格式:

      let 函数名 = (参数1,参数2,...)=> {

        ......

      }

      而且,箭头函数不能使用arguments。

    let add = () => {
    	console.log(arguments)
    }
    add(1,2,3,4,5);       //Uncaught ReferenceError: arguments is not defined
    

    6. promise对象

      promise就是一个对象,它是用来处理异步数据的。

      异步数据分为前台和node所带来的,前台的主要是ajax,node主要有读文件,写文件,文件流等等。

      promise的状态有三种,分别是pending(等待,处理中),resolve(成功,完成),rejected(失败,拒绝);

      promise状态的改变只有两种:

       1.  pending -> resolve

       2.  pending -> rejected

       而且这两种状态的改变是单向的,只能从等待到成功或者等待到失败,不能成功到失败,成功到等待,失败到等待。

      下面是一个关于promise的小实例:

    var pro = new Promise(function(resolve,reject){
    	resolve(123);     //这个是成功的,我要把成功后的数据123传递出去,resolve和reject两者只能存在一个
    	// reject(456)
    })
    
    
    pro.then(function(val){      //then方法执行完成以后又返回了一个promise对象
    			//这个是成功的回调
    	console.log("成功了,接收到的数据为:" + val);
    	return val + 1;
    },function(err){
    	//这个是失败的回调
    	console.log(err);
    }).then(function(val){
    	console.log(val)
    },function(err){})
    

      成功的promise里面可以传递一个成功的promise对象:

    var p1 = Promise.resolve(10);
    var p2 = Promise.resolve(p1);    //成功的promise里面可以传递一个成功的promise对象
    p2.then(function(data){
    	console.log(data);            //10
    })

    7. Generator函数

      Generator 有两个区分于普通函数的部分:

       一是在 function 后面,函数名之前有个 * ;

       函数内部有 yield 表达式。

      其中 * 用来表示函数为 Generator 函数;yield 用来定义函数内部的状态,yield相当于console.log,输出后面的值。

    //generator是一个函数,可以将它看做状态机
    function* fun(){
    	yield "hello";
    	yield "ES6";
    	yield "hello";
    	yield "mercy";
    }
    var fn = fun();
    //1
    console.log(fn.next());         //{value: "hello", done: false}
    console.log(fn.next());         //{value: "ES6", done: false}
     console.log(fn.next());         //{value: "hello", done: false}
    console.log(fn.next());         //{value: "mercy", done: false}
     console.log(fn.next());         //{value: undefined, done: true}     done表示已经讲整个generator函数遍历完成
    
    //2
    for (var a of fn){
    	console.log(a);
    }
    //1和2两者只能有一个存在,如果1存在的话,2就不会执行,也不会报错
    

      

  • 相关阅读:
    [Day01] Python基础
    Python数据结构与循环语句
    elementui级联下拉框怎么设置可选择任意一级选项以及设置后前面会出现1个单选按钮去掉单选按钮的方法和选好后下拉面板不自动收起的问题
    解决ElementUI中的Cascader 级联选择器高度过高的问题
    git切换分支提示:you need to resolve your current index first
    提交本地代码到git远程仓库时误操作让git代码覆盖了本地代码,找回本地代码的解决方法
    elementui在表格/下来列表等展示数据的区显示加载中
    vueshop
    elementui表单验证无效的解决方法
    elementui滑块开启和关闭状态动态绑定
  • 原文地址:https://www.cnblogs.com/mercy-up/p/10477629.html
Copyright © 2011-2022 走看看