{"action":"created","issue":{"url":"https://api.github.com/repos/eyasliu/blog/issues/16","repository_url":"https://api.github.com/repos/eyasliu/blog","labels_url":"https://api.github.com/repos/eyasliu/blog/issues/16/labels{/name}","comments_url":"https://api.github.com/repos/eyasliu/blog/issues/16/comments","events_url":"https://api.github.com/repos/eyasliu/blog/issues/16/events","html_url":"https://github.com/eyasliu/blog/issues/16","id":166296094,"number":16,"title":"ES6 基础语法","user":{"login":"eyasliu","id":4774683,"avatar_url":"https://avatars.githubusercontent.com/u/4774683?v=3","gravatar_id":"","url":"https://api.github.com/users/eyasliu","html_url":"https://github.com/eyasliu","followers_url":"https://api.github.com/users/eyasliu/followers","following_url":"https://api.github.com/users/eyasliu/following{/other_user}","gists_url":"https://api.github.com/users/eyasliu/gists{/gist_id}","starred_url":"https://api.github.com/users/eyasliu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/eyasliu/subscriptions","organizations_url":"https://api.github.com/users/eyasliu/orgs","repos_url":"https://api.github.com/users/eyasliu/repos","events_url":"https://api.github.com/users/eyasliu/events{/privacy}","received_events_url":"https://api.github.com/users/eyasliu/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/eyasliu/blog/labels/%E5%89%8D%E7%AB%AF","name":"前端","color":"128A0C"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-07-19T10:16:53Z","updated_at":"2016-09-29T01:54:55Z","closed_at":null,"body":"参考文献： http://es6.ruanyifeng.com/\r\n\r\n# babel\r\n\r\nECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。目前浏览器已实现大部分的ES6特性，但是为了兼容性我们需要使用工具babel编译为es5代码。才能让应用正常运行\r\n\r\n在浏览器可以使用 chrome 插件 [`Scratch Js`](https://chrome.google.com/webstore/detail/scratch-js/alploljligeomonipppgaahpkenfnfkn) 尝试编写es6，并查看编译后的代码\r\n\r\n或者到 babel 在线编译尝试 https://babeljs.io/repl/\r\n\r\n# let && const\r\n\r\nvar 声明的变量在整个当前作用域有效，let 和 const声明的变量在代码块有效（块级作用域），cont 声明的变量为常量，不能重新赋值\r\n\r\n```js\r\nfor(var i = 0; i < 10; i++){}\r\nconsole.log(i) // 10\r\n\r\nfor(let i = 0; i < 10; i++){}\r\nconsole.log(i) // error: i is not defined\r\n```\r\n\r\n\r\n# 解构赋值\r\n\r\n按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构\r\n\r\n```js\r\nlet [a, b, c] = [1, 2, 3]; // a,b,c\r\n\r\nlet { bar, foo } = { foo: \"aaa\", bar: \"bbb\" }; // foo, bar\r\nlet { bar: x, foo: y } = { foo: \"aaa\", bar: \"bbb\" }; // x, y\r\n```\r\n\r\n# 对象扩展\r\n\r\n### 定义对象\r\n\r\n```js\r\n// 直接写入变量和函数，作为对象的属性和方法\r\nvar foo = 'bar';\r\nvar baz = {foo};\r\nbaz // {foo: \"bar\"}\r\n\r\n// 对象中的函数\r\nvar obj = {\r\n  foo(){\r\n    reutrn 'hello'\r\n  }\r\n}\r\n```\r\n\r\n### 属性名表达式\r\n\r\n```js\r\nvar key = 'foo';\r\nvar obj = {\r\n  [key]: true,\r\n  ['b' + 'ar']： 123\r\n}\r\nobj // {foo: true, bar: 123}\r\n```\r\n\r\n### 扩展运算符\r\n\r\nES7有一个提案，将Rest解构赋值/扩展运算符（...）引入对象。Babel转码器已经支持这项功能。可以理解为属性展开\r\n\r\n```js\r\nlet { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };\r\nx // 1\r\ny // 2\r\nz // { a: 3, b: 4 }\r\n\r\nlet a = {...z} // 克隆对象\r\na // { a: 3, b: 4 }\r\n\r\nlet arr = [1,2,3,4,5]\r\nlet arr2 = [6,7,8]\r\nlet oarr1 = [...arr] // 数组克隆\r\nlet oarr2 = [...arr, ...arr2] // 合并数组\r\noarr1 // [1,2,3,4,5]\r\noarr2 // [1,2,3,4,5]\r\n\r\n[...'hello'] // ['h', 'e', 'l', 'l', 'o']\r\n\r\n// function\r\nfunction foo(...args){\r\n  args // [...arguments]\r\n}\r\nfoo(1,2,3) // args = [1,2,3]\r\n\r\n```\r\n\r\n\r\n# 函数扩展\r\n\r\n## 函数参数默认值\r\n\r\n```js\r\n// 基本用法\r\nfunction foo(x = 10, y = true, z = {bar: 'str'}){\r\n  return [x, y, z];\r\n}\r\nfoo() // [10, true, {bar: 'str'}]\r\n\r\n// 结合解构赋值\r\nfunction foo({x = 10} = {}, y){\r\n  return [x, y];\r\n}\r\nfoo() // [10, undefined]\r\nfoo({x: 100}, false) // [100, false]\r\n```\r\n\r\n## 函数length属性\r\n\r\n返回没有设置默认值的参数个数\r\n\r\n```js\r\n(function (a, b, c = 5) {}).length // 2\r\n```\r\n\r\n## 箭头函数\r\n\r\nES6允许使用“箭头”（=>）定义函数。\r\n\r\n```js\r\nvar f = x => x; // 相当于 var f = function(x){return x;}\r\nvar b = (x, y) => ({x, y})\r\n```\r\n\r\n注意事项\r\n\r\n - 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，并且this不可改变\r\n - 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误\r\n - 不可以使用arguments对象，该对象在函数体内不存在\r\n - 不可以使用yield命令，因此箭头函数不能用作Generator函数\r\n\r\n\r\n## 函数绑定\r\n\r\n函数绑定运算符是并排的两个双冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。\r\n\r\n```js\r\nfunction bar(){\r\n  //\r\n}\r\nvar foo = {}\r\nfoo::bar // 等同于 bar.bind(foo)\r\n```\r\n\r\n\r\n# Class\r\n\r\nES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。\r\n\r\n```js\r\n//定义类\r\nclass Point {\r\n  constructor() {}\r\n  toString(){}\r\n  render(){}\r\n}\r\n// 等价于\r\nfunction Point(){}\r\nPoint.prototype.toSring = function(){}\r\nPoint.prototype.render = function(){}\r\n\r\n// 类表达式\r\nconst Point = class Temp{} // 类的名字为 Point，Temp只会在类的内部使用，Temp可省略\r\n\r\n\r\n```\r\n\r\n - constructor 是类的默认方法，用 new 调用时执行的方法\r\n - 只能使用 new 实例化类\r\n - 有name属性, Point.name -> 'Point'\r\n - 不存在变量提升\r\n\r\n## Class 继承\r\n\r\n继承使用 `extends` 关键字\r\n\r\n```js\r\nclass ColorPoint extends Point{\r\n  constructor(){\r\n    super() // 调用父类的构造函数，如果有constructor，必须调用，如果没有constructor，后台自动调用\r\n  }\r\n}\r\n```\r\n\r\n - 只要是有prototype属性的函数，就能被继承\r\n - 如果继承 null，相当于继承 Function\r\n - super 代表父类构造函数，也可作为对象调用，可访问父类实例的方法和属性\r\n\r\n## 取值与存值\r\n\r\n```js\r\nclass Point {\r\n  constructor(){}\r\n  get prop(){}\r\n  set prop(){}\r\n}\r\nlet p = new Point\r\np.prop = 123 // 执行 set prop\r\np.prop // 执行 get prop\r\n```\r\n\r\n## 静态属性和方法\r\n\r\n类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”\r\n\r\n```js\r\nclass Foo {\r\n  static classMethod() {\r\n    return 'hello';\r\n  }\r\n  static defaultProps = {}\r\n}\r\n\r\nFoo.classMethod() // 'hello'\r\n\r\nvar foo = new Foo();\r\nfoo.classMethod()\r\n// TypeError: undefined is not a function\r\n```\r\n\r\n# Module\r\n\r\njavascript 模块体系，模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能\r\n\r\n## export 导出\r\n\r\n一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。\r\n\r\n```js\r\n// profile.js\r\nexport var firstName = 'Michael';\r\nexport var lastName = 'Jackson';\r\nexport var year = 1958;\r\nexport function getFullName(){}\r\nexport default {firstName, lastName, year} // 默认模块\r\nexport * from 'lodash'; // 模块继承，导出lodash模块的所有方法\r\n```\r\n\r\n\r\n## import 导入\r\n\r\n使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。\r\n\r\n```js\r\n// main.js\r\n\r\nimport {firstName, lastName} from './profile';\r\nimport {firstName as fn, lastName as ln} from './profile'; // 重命名\r\nimport Profile from './profile';\r\nimport Profile as p from './profile';\r\n\r\n```\r\n\r\n\r\n - import 有变量提升"},"comment":{"url":"https://api.github.com/repos/eyasliu/blog/issues/comments/250350621","html_url":"https://github.com/eyasliu/blog/issues/16#issuecomment-250350621","issue_url":"https://api.github.com/repos/eyasliu/blog/issues/16","id":250350621,"user":{"login":"steven-JC","id":5388900,"avatar_url":"https://avatars.githubusercontent.com/u/5388900?v=3","gravatar_id":"","url":"https://api.github.com/users/steven-JC","html_url":"https://github.com/steven-JC","followers_url":"https://api.github.com/users/steven-JC/followers","following_url":"https://api.github.com/users/steven-JC/following{/other_user}","gists_url":"https://api.github.com/users/steven-JC/gists{/gist_id}","starred_url":"https://api.github.com/users/steven-JC/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/steven-JC/subscriptions","organizations_url":"https://api.github.com/users/steven-JC/orgs","repos_url":"https://api.github.com/users/steven-JC/repos","events_url":"https://api.github.com/users/steven-JC/events{/privacy}","received_events_url":"https://api.github.com/users/steven-JC/received_events","type":"User","site_admin":false},"created_at":"2016-09-29T01:54:55Z","updated_at":"2016-09-29T01:54:55Z","body":"Hello，还记得我吗？前同事，现在在哪高就啊"}}
{"actor":{"display_login":"steven-JC"}}