es6 极速入门

es6箭头函数

es6推出了箭头函数，用来简化定义匿名函数；

基本语法：

1 2 3 4 5 6 7

let func1=function(){     console.log('普通无参匿名函数'); } func1(); let func2=()=>console.log('箭头函数'); func2();

执行效果一样：

let func2=()=>console.log('箭头函数');

这个括号是方法参数，里面可以写形参；=>后面的内容是方法体；

假如有一个参数的时候，这么写：

let func3=(c)=>console.log('箭头函数,一个参数');

func3('参数一');

当然一个参数的时候，括号可以省略（我个人习惯，还是不省略，不然看着别扭）

let func4=c=>console.log('箭头函数,一个参数，括号可以省略');

func4('参数一');

// 两个或者两个以上参数情况 (括号不能省略)

let func5=(a,b)=>console.log(a,b);

func5(1,2);

// 箭头函数，只有一条语句，可以省略大括号{}

let func6=()=>{

console.log('箭头函数，只有一条语句，可以省略大括号{}');

}

func6();

// 函数体，多条语句，要用大括号{}

let func7=(a,b)=>{

let c=a+b;

return c;

}

console.log(func7(1,2));

// 特殊情况 假如不加花括号，表达式返回最终结果；

let func8=(a,b)=>a+b

console.log(func8(1,4));

// 重要特性 箭头函数没有this,所以this是定义的时候，外部所在的对象是它的this。不是调用的时候的this；

let name='marry';

let obj={

name:'jack',

age:20,

/*getName:()=>{

console.log(this.name)

}*/

getName:function(){

   /* document.getElementById('btn').οnclick=()=>{

console.log(this)

}*/

console.log(this.name)

},

getName2:function(){

document.getElementById('btn').οnclick=function(){

console.log(this)

}

console.log(this.name)

}

};

obj.getName();

obj.getName2();

es6提供了三点运算符，用作于可变参数；

1 2 3 4 5 6 7

function foo(...value){     console.log(value);     value.forEach(function(item,index){         console.log(item,index);     }); } foo(1,4);

还可以用于数组的内容拼接：

1 2 3 4

let arr1=[1,2]; let arr2=[2,3,4,5]; arr1=[1,...arr2,6]; console.log(arr1)

es6 Symbol类型

es5中对象的属性名是都是字符串，容易造成重名；es6引入Symbol数据类型（已有Number 、 String 、 Boolean 、 Objec t、 null 和 undefined 类型）；

特性：

// 创建symbol属性值

let sb=Symbol();

console.log(sb);

console.log(typeof(sb))

// 每个定义的symbol都是唯一的

let sb2=Symbol();

console.log(sb==sb2); // 返回false

Symbol实际使用

// 定义一个对象

let symbol=Symbol('address'); // 可以加参数 指定属性名

let obj={name:'jack',age:10};

// 假如我们要向对象里额外加个属性

// obj.address='南京路' // 以前的写法，不过假如属性很多的时候，可能会出现属性重复

obj[symbol]='南京路' // 这样能保证属性不重复

console.log(obj)

因为Symbol具有唯一性，所以我们可以做Symbol定义常量

const System_key=Symbol('114aaa');

console.log(System_key);

Symbol.for()

// Symbol.for() 全局搜索指定key的Symbol，找到的话，就返回该Symbol，找不到，就新建一个

console.log(Symbol("foo") === Symbol("foo"));      // false

console.log(Symbol.for("bar") === Symbol.for("bar"));     // true

Symbol.keyFor()

// Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。

let fooKey = Symbol.for("bar1");

console.log(Symbol.keyFor(fooKey)); // 返回bar1

es6 Promise 对象

es6 Promise 对象是异步编程的一种解决方案。（再javascript世界里，是单线程顺序执行的）

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

我们先搞个异步实例来体验下；

 // 执行成功调用resolve  执行失败调用reject

let promise=new Promise((resolve,reject)=>{

console.log('promise初始化状态：pending')   // 同步执行

setTimeout(()=>{

console.log('开启定时器，模拟异步操作')

//resolve('异步返回，执行成功') // promise状态为 fulfilled

reject('异步返回，执行失败') // promise状态为 rejected

},1000)

})

console.log('代码继续执行')

promise

.then((data)=>{  // 第一个回调 成功resolve

console.log(data)

},(data)=>{   // 第二个回调 失败reject

console.log(data)

}

)

执行效果：

我们再看一个ajax请求用上Promise，代码看起来更规整

以前写ajax请求 用原生的，很凌乱，就算用jquery ajax 回调方法那块也是多层嵌套，写业务逻辑也是很凌乱；

Promise 可以解决这种凌乱问题，让异步请求更加规整；维护方便；

先搞个模拟json:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

{   "ret": true,   "data": {     "studentList": [{       "id": "0001",       "name": "Jack"     },{       "id": "0002",       "name": "Marry"     },{       "id": "0003",       "name": "Sunndy"     },{       "id": "0004",       "name": "Lini"     }]   } }

代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// 执行成功调用resolve  执行失败调用reject let promise=new Promise((resolve,reject)=>{     console.log('promise初始化状态：pending')   // 同步执行     $.get('./data.json',{},function(result){         console.log('ajax异步操作');         if(result.ret){             console.log('执行成功')             resolve(result.data);         }else{             console.log('执行失败')             reject(result.data);         }     },'json'); }) console.log('代码继续执行') promise     .then((data)=>{  // 第一个回调 成功resolve         console.log(data)     },(data)=>{   // 第二个回调 失败reject         console.log(data)     } )