先上文档地址: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]];
}
}
8012年了啊,你咋还在学ES6啊( 'ω')
- 用let进行变量声明的时候会出现临时死区，同C没啥好说的
字符串(以下方法均为字符串方法)
codePointAt();返回字符串对应编码单元上的码位。
charCodeAt();返回字符串对应编码单元上的一个编码单元。
normalize();对参数字符串进行Unicode标准化。
repeat();传入一个数字N，返回字符串N次循环拼接成的字符串。
includes();如果在字符串中检测到指定文本则返回true。
startsWith();如果在字符串的起始位置检测到指定文本则返回true。
endsWith();如果在字符串的结束部分检测到指定文本则返回true。
上边三个方法都可以接受第二个参数用以指定起始位置的偏移量或结束位置的偏移量。
函数
- ES6中可以通过在函数声明的时候function(a = 10,b = ‘sss’)这样的形式进行默认参数设置
- 用于创造对象的临时构造函数 var add = new function (“first”,”second ”,”return first+second”);
- ES6中函数有两个内部方法[[Call]]和[[Construct]],当通过new关键字调用函数时执行的是[[Construct]]其负责创建一个实例对象，然后执行函数体并且把this绑定到实例上。直接调用函数则使用[[Call]]函数直接执行函数体。函数内可以通过new.target来判断函数被以何种方式调用，其值为new操作目标则为构造调用，为undefined则为常规调用
- 箭头函数没有this，super，arguments，new.target，的绑定所以上下文与其父级属性相同
- ES6进行了尾调用优化，需满足：调用函数不是闭包。return语句在函数末尾。尾调用结果作为函数值返回。
对象
- 通过setPortotypeof()改变对象的原型参数。
- 通过Super()获取对象原型的上下文
- 收回之前 Object.definProperty()没卵用的话，在ES6中使此函数可以修改Symbol.hasInstence 等不可写属性(第三个参数传入value:function(v)return false;)以达到一些目的
- 去重集合set(),默认强引用，WeakSet()弱引用
- 属性名不会被强转的键值对集合
迭代器和生成器
- 迭代器传参
function *createIterator(){
console.log('000');
let one = yield 1;
console.log('1111');
let second = yield one + 2;
console.log('222');
yield second +3;
}
let text = createIterator();
console.log(text.next());
console.log(text.next(4));
console.log(text.next(5));
console.log(text.next());
//结果:
000
{ value: 1, done: false }
1111
{ value: 6, done: false }
222
{ value: 8, done: false }
{ value: undefined, done: true }
迭代器的执行顺序为第N此执行会调取第N-1次yield语句的执行结果，并执行N-1个yield行到第N个yield行间的代码，输出结果为yield右侧语句结果。
而在调用next()函数时传递的参数用于代替N-1次yield的返回值，即N-1个yield和其右侧部分的代码。
