我的es6总结

JerryWangSAP 发布于2019-08-29 12:57 / 2154人阅读

摘要：补充普通方法是实例化出来的对象，静态方法属于类，亦可以被继承。类的基本定义生成实例构造函数。默认值小王的时候自动执行构造函数。构造函数和实例继承继承上一级，可以调用父类的构造函数。

一. es6编译环境搭建 1 . 初始化 npm 创建package.json文件

    npm init

2. 安装webpack

    cnpm install webpack -D

3. 安装babel相关包来编译es6 语法

    cnpm install babel-loader babel-core babel-preset-es2015 -D

二、写webpack.config.js配置文件，配置编译es6 1. loader相关配置

        module.exports = {
            entry:"./entry.js",
            output:{
                filename:"./bundle.js"
            },
            module:{
                loaders:[
                    {
                        test:/.js$/,
                        loader:"babel-loader",
                        exclude:/node_modules/
                    }
                ]
            }
        }

2. 创建.babelrc配置文件

        {
            "presets": ["es2015"]
        }

三、es6的遍厉和...替代anguments 1 遍厉对象和替代anguments

{
     function test3(...arg){
         for(let v of arg){
             console.log("rest",v);
         }
     }
     test3(1,2,3,4,5,"a");
 }

2. es6的遍厉对象，Object.entries

 {
     let test ={x:1,y:456};
          for(let [key,value] of Object.entries(test)){
              console.log([key,value]);
          }
 }

四、类的继承class。 补充：普通方法是实例化出来的对象，静态方法属于类，亦可以被继承。 1.类的基本定义生成实例

{
    class Person{
        //构造函数。
        constructor(name = "laozhou"){ //默认值：laozhou
            this.name = name;
        }
    }
    let p1 = new Person("小王"); //new的时候自动执行构造函数。
    console.log("构造函数和实例",p1);
}

2.继承

extends 继承
super   上一级，可以调用父类的构造函数。
{
    class Father {
        constructor(name="侯瑞强",sex="男") {
            this.name = name;
            this.sex = sex;
        }
    }
    class Child extends Father {
        constructor(name="child",sex) { //把父类的本事拿了过来。
            super(name,sex);     //调用父类的构造函数。super必须在第一行，否则报错。
            this.age = 10;
        }
    }
    console.log("子类覆盖父类属性的实例",new Child());
}

3.静态属性

{
    class Person {
        constructor(name="默认") {
            this.name = name;
        }
    }
    //静态属性的定义，是直接给类下的属性赋值，该属性就是静态属性,类名点什么直接定义
    Person.type = "text"; //type就是静态属性。
    console.log(Person.type);
}

五、模块化 1.导出exprot,导入import 导出

export default{
    a:1,
    b:2,
    say(){
        console.log("i can say");
    }
}

导入

import Model2 from "./module2.js";
console.log(Model2);

六、尾调用

一个函数执行，执行到最后的时候调用了另一个函数。
function go(callback){
    console.log(1231313);
    console.log("vvv");
    callback && callback();
}
function tail(){
    console.log(123131313);
}
go(tail);

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112264.html

我的es6总结

摘要：补充普通方法是实例化出来的对象，静态方法属于类，亦可以被继承。类的基本定义生成实例构造函数。默认值小王的时候自动执行构造函数。构造函数和实例继承继承上一级，可以调用父类的构造函数。一. es6编译环境搭建 1 . 初始化 npm 创建package.json文件 npm init 2. 安装webpack cnpm install webpack -D 3. 安...

maybe_009 2019-08-20 18:06 评论0 收藏0
我的es6总结

摘要：补充普通方法是实例化出来的对象，静态方法属于类，亦可以被继承。类的基本定义生成实例构造函数。默认值小王的时候自动执行构造函数。构造函数和实例继承继承上一级，可以调用父类的构造函数。一. es6编译环境搭建 1 . 初始化 npm 创建package.json文件 npm init 2. 安装webpack cnpm install webpack -D 3. 安...

104828720 2019-08-01 17:11 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
前端模块化——技术选型

摘要：前言前端模块化，主要是解决两个问题命名空间冲突，文件依赖管理。目前解决的方法是模块化命名空间各个模块的命名空间独立。模块化构建工具，等是用来组织前端模块的构建工具加载器。前言前端模块化，主要是解决两个问题——命名空间冲突，文件依赖管理。坑___命名空间冲突我自己测试好的代码和大家合并后怎么起冲突了？页面脚本的变量或函数覆盖了公有脚本的。坑___文件依赖管理明明项目需...

Doyle 2019-08-20 11:10 评论0 收藏0
ES6—字符串模板引擎（4）

摘要：字符串模板引擎中的字符串缺乏多行字符串字符串格式化转义等特性。字符串中嵌入变量模板字面量看上去仅仅是普通字符串的升级版，但二者之间真正的区别在于模板字面量的变量占位符。黑子在上面的代码中，就是模板标签。字符串模板引擎 ES5中的字符串缺乏多行字符串、字符串格式化、HTML转义等特性。而ES6通过模板字面量的方式进行了填补，模板字面量试着跳出JS已有的字符串体系，通过一些全新的方法来...

cnio 2019-08-23 17:17 评论0 收藏0