乐趣区

es6的入门学习1

jiezi
  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] ]
退出移动版