阴影中的曙光

[旧]ES6

2018.03.31 / 技术相关 / 点击 267 / 回复 0 / 旧站搬运, JavaScript

先上文档地址:ES6入门

Babel

配置Babel,首先安装Babel,再建立项目文件夹,根目录下创建.babelre文件,基础配置:

{
    "presets": [
        "es2015",
        "react",
        "stage-2"
    ],
    "plugins": []
}

再用终端在文件夹下初始化npm,创建package.json:


npm init

然后运行:

sudo  npm install babel-preset-env --save-dev

babel配置完成,现在还需要手动转换,自动转换要设置监听

转换命令:

babel ./ssa.js --out-dir ./dist

可以写入package.json

{
    "name": "es6_practice",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "babel ./*.js --out-dir ./dist"
    },
    "author": "dawn",
    "license": "ISC",
    "devDependencies": {
        "babel-preset-es2015": "^6.24.1"
    }
}

之后运行即可完成转换

npm run build

ES6语法

  • let:块级作用域!!!没有变量提升!!!不用多BB跟C语言一毛一样
  • const:常量

默认值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

变量解构

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});




$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

箭头函数

   // ES5
    var selected = allJobs.filter(function (job) {
      return job.isSelected();
    });
    // ES6
    var selected = allJobs.filter(job => job.isSelected());

简化版的匿名函数
箭头前是参数列表,箭头后为返回值表达式.

模块化

核心关键字: export import
export 用于在独立文件中向外部抛数据

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

无法通过export直接向外部抛一个数值,应对向外抛接口

// 报错
export 1;

// 报错
var m = 1;
export m;
// 正确写法一
export var m = 1;

// 正确写法二
var m = 1;
export {m};

// 正确写法三
var n = 1;
export {n as m};

函数

函数的默认参数

function makeRequest(url, timeout = 2000, callback = function(){}){
// url必须传入
}

非原始值传参

function getVaule(){
    return 5;
}
function add(first,second = getVaule()){
    return first+second;
}
add(1,1)  ==>2
add(1) ===>6
如果不传入第二个参数就调用getVaule()

不定参数

fuction pick(object, ...keys){
    let result = Object.create(null);
    for (let i=0,len = key.length; i< len;i++){
        result[keys[i]] = object[keys[i]];
    }
    
}