关于ES6新增的东西

Posted 2020-08-21 Jason齐齐

查询浏览器对ES6的支持情况https://kangax.github.io/compat-table/es6/

Chrome、MS Edge、Firefox、Safari、Node和其它很多环境都已经嵌入程序以支持 javascript ES6 的大部分功能。

一、变量和变量的作用域
ES5：
定义变量用 var=5；
使用var来定义变量会使变量泄露到其他的代码块，并且使用var来定义变量会产生预解析，即变量的声明提前了，但是变量的初始化并没有提前，如果想使用var来声明变量，一定要在函数的顶部声明；

ES6：
定义变量加入了 let const

1》使用let来定义变量
let 会将变量提升到块顶部（而非像ES5是函数顶部）。
但是在变量声明前引用变量会造成错误。
let 是块作用域的，不可以在声明前使用。
块开始到变量生的区域：temporal dead zone；

2》const
如果不希望变量的值在发生改变，使用const声明变量。

总结：使用let和const代替var，尽量使用const来定义变量，如果变量在后续代码中需要更改变化，则使用let来声明

二、封闭空间
ES5：
(function(参数){})(传参);
ES5中封闭空间避免了污染全局环境

ES6：
为了避免污染全局环境污染不必再使用封闭空间，在局部环境中使用let来定义变量就解决了所有问题

    {
        let  a=5;
    }
    alert(a);  //undefined

三、字符串和变量的拼接
1》单行字符串和变量的拼接
ES5：
字符串和变量的拼接：变量不加\'\'，字符串加\'\'，字符串和变量的拼接使用+

        eg：  
        var name=jason;
        var age=18;
        alert(\'His name is\'+name+\',He is\'+age);

ES6:
字符串和变量的拼接，在拼接的整个作用域内加``(就是键盘1前面那个键的反引号)，变量和字符串都不再加\'\'，变量使用${变量名}；
eg：

        const name=jason;
        const age=18;
        alert(`His name is ${name},He is ${age}`);

2》多行字符串
在进行DOM操作的时候免不了需要进行多行字符串的操作
ES5:
eg：

            var oLi=\'<li>n\'+
                        <div>我是ES5</div>n\'+
                        \'<p>这是我的拼接</p>n\'+
                    \'</li>\';

ES6:

        eg:
            const oLi=`<li>
                         <div>我是ES6</div>
                         <p>这是我的拼接</p>
                       </li>`

四、解构赋值
1》数组的操作
ES5：

            var arr=[1,2,3,4,5];
            var s=arr[0];
            var n=arr[4];
            alert(s,n);//1,5

ES6：

            const arr=[1,2,3,4,5];
            const [s,,,,n]=arr;
            alert(s,n);

2》值的对调：例如冒泡排序中的数组的值的对调
ES5：

            function BubbleSort(arr){
                for(var i=0;i<arr.length;i++){
                    for(var j=0;j<arr.length-1;j++){
                        if(arr[j]>arr[j+1]){
                            var tmp=arr[j];
                            arr[j]=arr[j+1];
                            arr[j+1]=tmp
                        }
                    }
                }
                return arr;
            }

ES6:

             function BubbleSort(arr){
                for(var i=0;i<arr.length;i++){
                    for(var j=0;j<arr.length-1;j++){
                        if(arr[j]>arr[j+1]){
                            [arr[j],arr[j+1]]=[arr[j+1],arr[j]];
                        }
                    }
                }
                return arr;
            }

3》查找返回值(包含多个值的时候)；
ES5:

            function obj() {
              var left=1, right=2, top=3, bottom=4;
              return { left: left, right: right, top: top, bottom: bottom };
            }
            var data = obj();
            var left = data.left;
            var bottom = data.bottom;
            console.log(left, bottom); // 1 4

ES6:

            function obj(){
                const left=1, right=2, top=3, bottom=4;
                return    {left,right,top,bottom};
            }
            const {left,bottom}=obj();
            console.log(left, bottom); // 1 4

还有
ES5：

            function settings() {
              return { display: { color: \'red\' }, keyboard: { layout: \'querty\'} };
            }
            var tmp = settings();
            var displayColor = tmp.display.color;
            var keyboardLayout = tmp.keyboard.layout;
            console.log(displayColor, keyboardLayout); // red querty

ES6：

            function settings() {
              return { display: { color: \'red\' }, keyboard: { layout: \'querty\'} };
            }
            const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();
            console.log(displayColor, keyboardLayout); // red querty

五、类和面向对象
在 JavaScript 中，每个对象都有原型对象。所有 JavaScript 对象都从原型上继承方法和属性。
ES5中，属性放在构造函数（constructor）里，方法放在原型(prototype)上;
ES6中引入了类（class）来代替构造函数（constructor）；
1》面向对象：ES6中引入了类（class）
ES5:

            function Person(name,age){
                this.name=name;
                this.age=age;
            }

            Person.prototype.showName=function(){
                return this.name;
            }

            var P1 = new Person(\'jason\',\'18\');
            alert(P1.showName());//jason

ES6:

            class Person {
              constructor(name) {
                this.name = name;
              }
              showName() {
                return this.name;
              }
            }
            const P1 = new Person(\'jason\');
            alert(P1.showName()); //jason

2》继承：提供了新的关键字 extends 和 super
ES5：

            function Person (name,age){
                this.name = name;
                this.age = age;
            }
            Person.prototype.showName = function(){
                return this.name;
            };
            Person.prototype.showAge = function(){
                return this.age;
            };
            
            function Worker (name,age,job){
                //属性继承
                Person.call(this,name,age);
                //Person.apply(this,arguments);
                this.job = job;
            }
            //方法继承
            Worker.prototype = new Person();
            Worker.prototype.constructor = Worker;
            Worker.prototype.showJob = function(){
                return this.job;
            };
            // 
            var w1 = new Worker(\'jason\',18,\'要饭的\');
            alert(w1.showJob());//要饭的

ES6：

            class Person {
                constructor(name,age) {
                  this.name = name;
                  this.age=age;
                }
                showName() {
                  return this.name;
                }
                showAge(){
                  return this.age;
                }
            }
            class Worker extends Person {
                  constructor(name,age,job){
                      super(name,age);
                      this.job=job;
                  }
                  showJob(){
                      return this.job;
                  }
            }
            const W1 = new Worker(\'jason\',18,\'要饭的\');
            alert(W1.showJob()); // 要饭的

 

转载请注明‘转载于Jason齐齐的博客http://www.cnblogs.com/jasonwang2y60/’