详细的教程请阅读：http://es6.ruanyifeng.com/
前期基础：Javascript、 HTML、CSS
Ecma Script 6基础
===
> ECMAScript 6(标准官方名称是 ECMAScript 2015) 是 ECMAScript 的下一代标准。
[TOC]
详细的教程请阅读：http://es6.ruanyifeng.com/
前期基础：Javascript、 HTML、CSS
# 变量声明const和let
尽管关于let,const,var的特殊用法有很多，但是我们只关注基本部分。在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升。
例如:
```js
function fn() {
if(bool) {
var name = 'Jack'
} else {
console.log(name)
}
}
```
以上的代码实际上是：
```javascript
function fn() {
var name // 变量提升
if(bool) {
name = 'Jack'
} else {
//此处访问name 值为undefined
console.log(name)
}
//此处访问name 值为undefined
}
```
所以不用关心bool是否为true or false。实际上，无论如何name都会被创建声明。这种语法规则会带来很多的歧义。
ES6中，我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。通俗的讲，{}大括号内的代码块即为let 和 const的作用域。
let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
```javascript
function fn() {
if(bool) {
//let的作用域，限定在这个语句块中
let name = 'Jack'
} else {
//超越了name的定义域
//name 在此处访问不到
console.log(name)
}
}
```
const定义常量，顾名思义，就是不能改变的量，对常量修改会报错。 程序中不需要修改的值，或者不允许修改的值尽可能定义为常量，这样可以减少程序语义上的错误。例如：
```javascript
const name = 'Jack'
name = 'Tom' //再次赋值此时会报错
```
# 模板字符串
模板字符串可以用于基本的字符串格式化，将表达式嵌入字符串中进行拼接。ES6反引号(``)直接搞定,模板字符串用${}来界定变量。
```javascript
const name = 'Jack'
let message=`Hello, ${name}.`;
console.log(message);//输出：Hello, Jack.
```
# 默认参数和箭头函数
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
箭头函数最直观的三个特点。 1. 不需要function关键字来创建函数 2. 省略return关键字 3. 继承当前上下文的 this 关键字
```javascript
//例如：
[1,2,3].map( x => x + 1 )
//等同于：
[1,2,3].map((function(x){
return x + 1
}).bind(this))
```
当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；
```javascript
var fn=name=>{
//这里的name是函数fn的参数，不过我们不建议这样简写，不容易读懂代码
}
//等价的写法
var fn=(name)=>{
//...
}
//对于多个参数，必须要加上括号，如果缺少()或者{}就会报错
const people = (name, age=22) => {
let message=`name:${name},age:${age}`;
return message;
}
function people(name,age=22){
let message=`name:${name},age:${age}`;
return message;
}
const people = function(name, age=22){
let message=`name:${name},age:${age}`;
return message;
}
let tom=people('Tom'); //这里年龄使用默认的参数值22
//返回：name:Tom,age:22
let jack=people('Jack',18);
//返回：name:Jack,age:18
```
# for...of语句
for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.
for...of语法是为各种collection对象专门定制的，并不适用于所有的object.它会以这种方式迭代出任何拥有[Symbol.iterator] 属性的collection对象的每个元素。
```javascript
//variable:每一次迭代,不同属性的属性值会被赋值给该变量.
//object:一个可迭代对象.
for (variable of object) {
statement
}
```
遍历 Array:
```
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30
```
如果你不修改语句块中的变量 , 也可以使用 const 代替 let。注意不要用var，会导致变量提升副作用。
```
let iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30
遍历Map:
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
遍历 Set:
let iterable = new Set([1, 1, 2, 2, 3, 3]);
//集合是不包含重复元素的
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3
```
# for...of与for...in的区别
for...in循环会遍历一个object所有的可枚举属性。
for...of语法是为各种collection对象专门定制的，并不适用于所有的object.它会以这种方式迭代出任何拥有[Symbol.iterator] 属性的collection对象的每个元素。
下面的例子演示了for...of 循环和 for...in 循环的区别。for...in 遍历（当前对象及其原型上的）每一个属性名称,而 for...of遍历（当前对象上的）每一个属性值:
```
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
let iterable = [3, 5, 7];
iterable.foo = "hello";
for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}
```
# 拓展的对象功能
ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的，ES6允许简写。
```
function people(name, age) {
return {
name: name,
age: age
};
}
```
Es6可以简写，这种简写在react-native编程中非常常见。
```
function people(name, age) {
return {
name,
age
};
}
```
ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：
```
const people = {
name: 'lux',
getName: function() {
console.log(this.name)
}
}
```
ES6通过省略冒号与 function 关键字，将这个语法变得更简洁
```
const people = {
name: 'lux',
getName () {
console.log(this.name)
}
}
```
ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}
```
const obj = Object.assign({}, objA, objB)
```
例子：
```
let objA ={x:1,y:2};
let objB ={x:2,z:3};
const obj=Object.assign({},objA,objB);
//此时的obj={x:2,y:2,z:3}
```
# 解构
数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程。
解构能让我们从对象或者数组里取出数据存为变量:
```
//对象
const people = {
name: 'lux',
age: 20,
sex:’男’,
}
const { name, age } = people
console.log(`${name} --- ${age}`)
```
等价写法
```
name= people.name;
age=people.age;
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'
等价写法
let first=color[0];
let second=color[1]
```
# Spread Operator 展开运算符
ES6中另外一个好玩的特性就是Spread Operator 也是三个点...。
组装对象或者数组
```
//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//对象
const alpha = { fist: 'a', second: 'b'}
const alphabets = { ...alpha, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"}
```
有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项
```
//数组
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//对象
const user = {
username: 'lux',
gender: 'female',
age: 19,
address: 'peking'
}
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"}
```
对于 Object 而言，还可以用于组合成新的 Object，如果有重复的属性名，右边覆盖左边。
```
const first = {
a: 1,
b: 2,
c: 6,
}
const second = {
c: 3,
d: 4
}
const total = { ...first, ...second }
//注意后面的属性会覆盖前面的重名属性
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
```
等价写法
```
total =Object.assign({},first,second)
```
# import 和 export
```
import导入模块、export导出模块
// module "my-module.js"
export function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { foo };
```
在其它脚本 (cf. import)，我们可以这样使用：
```
import { cube, foo } from 'my-module.js';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
```
# 默认导出
如果我们只想导出一个简单的值或者想在模块中保留一个候选值，就可以使用默认导出：
```
// module "my-module.js"
export default function cube(x) {
return x * x * x;
}
```
然后，在另一个脚本中，默认的导出值就可以被简单直接的导入：
```
// module "my-module.js"
import cube from 'my-module';
console.log(cube(3)); // 27
//全部导入
import people from './example'
//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())
//导入部分
import {name, age} from './example'
// 导出默认, 有且只有一个默认
export default App
```
以前有人问我，导入的时候有没有大括号的区别是什么。下面是我在工作中的总结：
1.当用export default people导出时，就用 import people 导入（不带大括号）
2.一个文件里，有且只能有一个export default。但可以有多个export。
3.当用export name 时，就用import { name }导入（记得带上大括号）
4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }
5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- iView
- iView快速入门
- 课程讲座
- 环境配置
- 第3周 Javascript快速入门