es6的入门学习1

39次阅读

共计 3423 个字符,预计需要花费 9 分钟才能阅读完成。

  1. es6 的学习环境
    Linux nodejs
    1) vi hello.js
    2) node hello.js
  2. 模块化机制(CommonJS)
    1) 模块定义

     在任意一个 js 文件或目录都可以为一个模块
    在模块文件中,都有一个 module 对象表示当前模块
    id          
    filename    路径 + 文件名
    parent      父模块
    children    子模块
    paths       路径
    exports     模块向外暴露的接口 *

    2)模块引用

    require("")
    参数:1) 路径
            require("./module1")
            按照指定的路径加载所需的模块
        2)模块名称
            require("module1")
            按照 paths 中的路径依次寻找所需模块,直到找到为止 
  3. npm(nade package manager)

    $ npm init
        在当前目录下产生一个 package.json, 这个文件是当前模块的核心配置文件,记录模块的基本信息,依赖信息,脚本信息 
    $ npm install xxx --save
        本地安装 xxx 模块,默认将 xxx 安装到当前目录下的 node_modules 目录中,如果当前目录中没有 node_modules 会自动创建,--save 表示这个 xxxx 模块是一个产品依赖,维护在 package.json 中的 dependecies 属性
    $ npm install xxx -g
        全局安装 xxx 模块,默认会将 xxx 安装到 node 的安装目录中
            /opt/node-v10.14.2/lib/node_modules
            /opt/node-v10.14.2/bin
            /opt/node-v10.14.2/share
         效果:全局安装的模块可以在命令行中直接调用,一般用于命令行工具的安装,比如 cnpm,babel-cli,vue-cli,create-react-app 的安装 
  4. cnpm
    npm 淘宝镜像

    1) 安装
        $ npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    报错:EACCES: permission denied, access '/opt/node-v10.14.2/lib/node_modules/cnpm/node_modules/address'
    原因:当前用户是普通用户,但是全局安装需要将第三方依赖安装到 /opt/xxx,没有权限!解决方案:sudo npm 失败
        将
            /opt/node-v10.14.2/lib/node_modules
            /opt/node-v10.14.2/bin
            /opt/node-v10.14.2/share
        的拥有者变为当前用户(larry)$ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}            
    
        $ sudo chown -R xxx /opt/node-v10.14.2/{lib/node_modules,bin,share}        
    2) 使用
        使用方式与 cnpm 完全一致,只不过原先用 npm 现在用 cnpm
    
  5. babel

     介绍:将 es6 转换 es5,仅仅是语法上的转换,对于功能的增强则无法提供,需要添加 babel-polyfill,另外不支持模块化的合并,如果需要合并模块还需要 webpack 支持。1) 全局安装 babel-cli
        $ cnpm install babel-cli -g
        $ babel --version
            6.26.0 (babel-core 6.26.3)
    2) 在项目的根目录中安装 bebel 预设
        $ cnpm install babel-preset-es2015 --save-dev 
    3) 在项目的根目录中添加.babelrc 的配置文件
        {"presets":["es2015"]
        }
        
  6. 变量的声明
    1) var

     可以重复声明
    变量的声明会提升
    没有局部作用域
        for(var i=0;i<=100;i++){}
        console.log(i);

    2) let(声明一个变量)

     不可以重复声明
    变量的声明不会提升,也就是说在变量声明之前不能调用这个变量
    具有局部作用域 

    3)const(声明一个常量)

     不可以重复声明
    变量的声明不会提升,在变量声明之前不能调用
    具有局部作用域
    常量的值无法改变
    
  7. 解构
    1)对象解构

     从一个对象或这数组、字符串中 ** 匹配 ** 出来若干个值分别保存在不同的变量中
    let obj ={
        name:"jason",
        age:32,
        gender:"male"
    }
    let {name,age,gender} = obj;
    console.log(name,age,gender)  //jason 32 male
    
    
    let {address:{city}} = {
        realname:"jason",
        address:{
            province:"江西省",city:"南昌市"
        }
    }
    console.log(city);  // 南昌市
    
    默认值:function get({url,mrthod="get",data={},success}){console.log('url',url)
    console.log('method',method)
    console.log('data',data)
    console.log('success',success)
    }
    
    get({
        url:"http://xxxxxxx:6677",
        data:{id:1},
        success:function(){},
        method:"delete"
    })
    // 如果用户传了 method 则打印用户所传的值,为上传则以默认值 get 打印 

    2)数组的解构

    let [a,b,c,[d],e] = [1,2,3,[4,5],6,7];
    console.log(a,b,c,d,e)  //1 2 3 4  6

    3) 字符串解构

    let [a,b,c] = "hello";
    console.log(a,b,c);  //h e l
    let {length} = "hello";
    console.log(length);  //5
    console.log("hello".length)  //5
    
  8. 对象拓展
    1) 对象字面量的简写形式

    var age = 12;
    var obj = {
        name:"jason",
        age:age
    }
    简写 -->
    let name = "jason";
    let age = 12;
    let obj = {name,age}

    2) 对象 api 的拓展

    var o = new Object();
    o                   实例对象
    Object              o 的构造函数
    Object.prototype    o 的构造函数的原型,o 的原型对象
    o 可以调用 Object.prototype 中的方法,不能调用 Object 中的方法
    Object.prototype.toString
    Object.prototype.valueOf
    Object.prototype.prototypeOf
    Object.prototype.hasOwnProperty
    ...
    
    ES6 对 Object 这个构造函数进行了拓展
        1. Object.is(o1,o2)
            对比 o1 与 o2 是否相等,如果相等返回 true,类似于 ===
        2. Object.assign(target,o1,o2,...)
            Object.assign 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。3. Object.setPrototypeOf(obj,prototype) => obj.__proto__=prototype;
            与__proto__相同,用来设置一个对象的 prototype 对象,返回参数对象本身
        4. Object.getPrototypeOf (obj) => obj.__proto__
            用于读取一个对象的原型对象
        5. Object.keys()
            返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名
            var obj = {foo: 'bar', baz: 42};
            Object.keys(obj)  // ["foo", "baz"]
        6. Object.values()
            返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。var obj = {foo: 'bar', baz: 42};
            Object.values(obj)  // ["bar", 42]
         7. Object.entries()
            返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。var obj = {foo: 'bar', baz: 42};
            Object.entries(obj)  // [["foo", "bar"], ["baz", 42] ]
    

正文完
 0