es6的入门学习1

  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] ]
    

你可能感兴趣的:(es6)