简介：

深入理解ES6：前端开发者必备的新特性

随着JavaScript的不断发展，ES6（ECMAScript 2015）为前端开发者带来了众多强大且简洁的语法和功能改进。ES6不仅增强了代码的可读性和可维护性，还引入了大量提高开发效率的特性。

在这篇文章中，我们将逐一深入解析ES6中的高频特性，帮助开发者更好地理解和运用这些功能，提升代码质量和开发体验。通过实用的代码示例和最佳实践，这篇文章将带你快速掌握这些新特性，助力你在面试中脱颖而出，并在实际项目中编写出更高效、简洁和易维护的代码。

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
 

 

a74ef21883054d2eb760ebf8bd0848c5.png

 

ES6新特性详细介绍说明：

变量声明：const和let：

ES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部），而let不会将声明变量提前；

let表示声明变量，而const表示声明常量，两者都为块级作用域；const声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了。

注意：let关键词声明的变量不具备变量提升的特性

const和let声明只在最高进的一个块中（花括号内）有效

const在声明时必须被赋值

 

箭头函数：

箭头函数是函数的一种简写形式，使用括号包裹参数，跟随一个=>，紧接着是函数体

箭头函数最直观的三个特点：

不需要function关键字来创造

省略return关键字

修复了this指向

 

类和继承：

class和extend是一种语法糖，也是基于原型继承实现的

class和super calls，实例化，静态方法和构造函数

    //class声明类 内部直接是属性和方法 不用,分隔。 constructor
        class Person{
            constructor(name, age){
                this.name = name;//实例属性
                this.age = age;
                console.log(name,age)
            }
            sayhi(name){
                //使用ES6新特性字符串模块,注意外层包裹符号是``反引号来创建字符串,内部变量使用${}
                console.log(`this name is ${this.name}`);
                //以往的写法
                console.log('my age is '+this.age)
            }
        }

        class Programmer extends Person{
            constructor(name,age){
                //直接调用父类结构器进行初始化
                super(name,age)
            }
            program(){
                console.log("I'm coding...")
            }
        }
        let zs = new Person("张三",18);
        zs.sayhi();
        let ls = new Programmer("李四",20);
        ls.sayhi();
        ls.program();

字符串模板：

ES6中允许使用反引号` 来创建字符串，此方法创建的字符串里面可以包含由${ }包裹的变量

    // 产生一个随机数
    var num = Math.random();
    // 将这个数字输出到console
    console.log(`输出随机数${num}`);

增强的对象字面量：

对象字面量被增强了，写法更加简洁与玲姐，同时在定义对象的时候能够做的事情更多了。具体表现在：

  1. 可以在对象子里面量里面定义原型
  2. 定义方法可以不用function关键词
  3. 直接调用父类方法
    var human = {
        breathe(){
            console.log('breathing...');
        }
    };
    var worker = {
        __proto__:human, //设置此对象的原型为human,想党羽继承human
        company:'freelancer',
        work(){
            console.log("working..")
        }
    }
    human.breathe();
    //调用继承来的breathe方法
    worker.breathe();

解构：

自动解析数组或对象中的值。若一个函数要函数要返回多个值，常规的做法是返回一个对象，将每个值作为这个对象的属性返回。在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值得变量中。

  var [x,y] = getVal(), //函数返回值解析
        [name, ,age] = ["zs","male","secrect"]; //数组解析
    function getVal(){
        return [1,2];
    }
    console.log(`x:${x},y:${y}`); //x:1,y:2
    console.log(`name:${name},age:${age}`); //name:zs,age:secrect

ES6的解构赋值中使用别名

    const obj = { number: 100 }
    const { number } = obj
    //使用别名
    const { number: otherNumber } = obj
    console.log(otherNumber)   // 100 

参数默认值，不定参数，拓展参数：

默认参数值：

可以在定义函数的时候指定参数的默认值，而不用像以前那样通过逻辑或操作符来达到目的了。

    //传统方式设置默认方式
    function sayHello(name){
        var name = name||'dude';
        console.log("Hello "+name);
    }
    sayHello(); //Hello dude
    sayHello("wayou"); //Hello wayou

    
    //ES6的默认参数
    function sayHello2(name = "dude"){
        console.log("Hello "+name)
    }
    sayHello2(); //Hello dude
    sayHello2("wayou"); //Hello wayou

不定参数（拓展符）：

不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖，在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中，...x代表了所有传入add函数的参数。

   //将所有参数想加的函数
    function add(...x){
        return x.reduce((m,n)=>m+n);
    }
    //传递任意个数的参数
    console.log(add(1,2,3)); //输出:6
    console.log(add(1,2,3,4,5)); //输出:15

reduce（）：

reduce（）方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce（）可以作为一个高阶函数，用于函数的compose

注意：reduce（）对于空数组是不会执行回调函数的

拓展符：

将一个数组转为用逗号分隔的参数序列。（若数组为空不产生任何效果）

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

 

拓展参数：

拓展参数则是另一种形式的语法糖，它允许传递数组或类数组直接作为函数的参数而不用通过apply。

    var people = ['zs','john','sherlock'];
    //sayHello函数来接收三个单独的参数
    function sayHello(people1,people2,people3){
        console.log(`Hello ${people1},${people2},${people3}`)
    }
    //以前的方式,如果需要传递数组当参数,我们需要使用函数apply方法
    sayHello.apply(null,people); //Hello zs,john,sherlock
    sayHello(...people); //Hello zs,john,sherlock

for of值遍历：

for in循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环他提供的不是序号而是值

    var someArray = ['a','b','c'];
    for(v of someArray){
        console.log(v); //a,b,c
    }

模块：

在ES6标准中，Javascript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS和AMD模式。

将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入方式可以在其他地方使用。

    //单独的js文件,如:point.js
    module "point" {
        export class Point {
            constructor (x,y){
                publice x = x;
                publice y = y;
            }
        }
    }

    //在需要引用模块的js文件内
    //声明引用的模块
    module point from './point.js';
    //这里可以看出,尽管声明了引用的模块,还是可以通过指定需要的部分进行导入
    import Point from "point"
    var origin = new Ponit(0,0);
    console.log(origin)

Map、Set和WeakMap、WeakSet

这些是新加的集合类型，提供了更加方便的获取属性值的方法，不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的还是当前对象的。同时，在进行属性值添加与获取时有专门的get、set方法。

//Sets
    var s = new Set();
    s.add("hello").add("goodbye").add("hello");
    s.size === 2;
    s.has("hello")===true;
    //Maps
    var m = new Map();
    m.set("hello",42);
    m.set(s,34);
    m.get(s) === 34;

我们会把对象作为一个对象的键来存放属性值，普通集合类型比如简单对象会阻止垃圾回收器对这些作为属性键存在的对象回收，偶造成内存泄露的危险。而weakMap，weakSet则更加安全些，这些作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉，具体还看下面的例子。

    //weak Maps
    var wm = new WeakMap();
    wm.set(s,{eatra:42});
    wm.size === undefined;

    //weak Sets
    var ws = new WeakSet();
    ws.add({data:42}); //因为添加到ws的这个临时对象没有其他变量引用它,所以ws不会保存它的值,也就是说这次添加其实没有意思

Proxies

proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的跟踪能力，同时咋数据绑定方面也很有用处。

    //定义被侦听的目标对象
    var engineer = {name:"Join",salary:50};
    //定义处理程序
    var interceptor = {
        set:function(receiver,property,value){
            console.log(property,"is changed to",value);
            receiver[property] = value;
        }
    }
    //创建代理以进行侦听
    engineer = new Proxy(engineer,interceptor);
    //做一些改动来触发代理
    engineer.salary = 60; //控制台输出:salary is changed to 60

上面代码，我们已经添加了注释，这里进一步解释。对于处理程序，是在被侦听的对象身上发生了相应事件之后，处理程序里面的方法会被调用，上面例子中我们设置了set的处理函数，表明。如果我们侦听对象的属性被更改，也就是被set了，那这个处理程序就会被调用，同时通过参数能够的值是哪个属性被更改，更改为什么值

symbols

symbols是一种基本类型，像数字、字符串还有布尔一样。它不是一个对象。symbols通过调用symbol函数产生，接收一个可选的名字参数，该函数返回的symbol是唯一的。之后就可以用这个返回值作为对象的键了。symbol还可以用来创建私有属性，外部无法直接访问偶symbol作为键的属性值。

    var MyClass = (function() {
        // module scoped symbol
        var key = Symbol("key");
        function MyClass(privateData) {
            this[key] = privateData;
        }
        MyClass.prototype = {
            doStuff: function() {
                this[key]
            }
        };
        return MyClass;
    })();
    var c = new MyClass("hello")
    console.log(c["key"] === undefined); //true,无法访问该属性,因为是私有的

Math、Number、String、Object的新API

对Math、Number、String还有Object等添加了许多新的API。

Promises

Promise是处理异步操作的一种模式，之前在很多三方库中有实现，比如JQuery的deferred对象。当你发起一个异步请求，并绑定了.when()/.done()等事件处理程序时,其实就是在应用promise模式。

    //创建Promise
    var promise = new Promise(function(resolve,reject){
        //进行一些异步或耗时操作
        if(/*如果成功*/){
            resolve("stuff worked")
        }else{
            reject(Error("It broke"));
        }
    });
    //绑定处理程序
    promise.then(function(result){
        //promise成功的话会执行这里
        console.log(result); //"stuff worked"
    },function(err){
        //promise处理失败会执行这里
        console.log(err); //Error:"It broke"
    });

 

 

 

 

结语

🔥如果文章对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下小老弟，蟹蟹大咖们~ 

 

# 前端 # es6 # javascript # 面试
Logo
西安城市开发者社区

欢迎加入西安开发者社区！我们致力于为西安地区的开发者提供学习、合作和成长的机会。参与我们的活动，与专家分享最新技术趋势，解决挑战，探索创新。加入我们，共同打造技术社区！

更多推荐

cover

猫头虎分享：鸿蒙生态带给开发者的全新机遇！轻松实现按需加载与多端适配，开发效率翻倍

avatar 西安城市开发者社区
cover

显示器不亮？解决“显示器不支持当前的输入时序，请将输入时序更改为 1920x1080, 60Hz”的终极指南

avatar 西安城市开发者社区
cover

如何解决ffmpeg安装报错ERROR: You have requested merging of multiple formats but ffmpeg is not installed

avatar 西安城市开发者社区