ECMAScript6知识点2

摘要: 接上篇ECMAScript6知识点1

1.函数

1.1 参数默认值

注意这个默认参数必须是尾参数，否则会有匹配的问题。

function fn(a,b=2){
return {a,b};
// 定义默认值的参数必须是尾参数，因为定义默认值之后该参数可忽略。
}
console.log(fn(1,3));

1.2 rest参数列表

同默认值一样是尾参数。

function fn(a,b,c,...rest){
console.log(rest);
// 用于获取函数的多余参数
// 注意：rest后边不能再有其他参数，否则会报错。
}
fn(1,2,3,4,5,6,7)

1.3 扩展运算符

扩展运算符也是要有遍历接口的。是rest的逆运算

/*
扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。

*/
var arr = [1,2,3,4,5,6,7];
console.log(Math.max.apply(null,arr));
Math.max(1,2,3,4,5,6,7)
console.log(Math.max(...arr))

var str = 'miaov';
var arr = [...str];
console.log(arr);

1.4箭头函数

不能代替真正的函数

/*
箭头函数：
用来作为回调函数使用。

1、函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。
2、不可以当作构造函数，不可以使用new命令，否则会抛出一个错误。
3、该函数体内不存在arguments。

*/

// var f = a => a+1;
var f = (a=1) => a+1; //配合默认值使用
console.log(f());

// var f = (a,b) => a+b;

//console.log(f(1,2));

// var obj = {
// 	f:(a,b) => a+b;
// }
// obj.f();
// arr.sort(function(){

// })
// arr.sort((a,b)=> a-b)

2.数据结构

1 set

类似java的set

提供了size，add，has，clear[清除所有成员]

/*
set:
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set是一个构造函数，可以传入一个数组初始化默认值。
set.size
Set的实例的成员个数（数组的长度）
set.add(value)
为Set的实例添加值
set.delete(value)
删除Set实例的值
set.has(value)
判断传入的参数是否为set的成员
set.clear()
清除set中所有成员

*/
var set = new Set([1,2,3,3,4,5,5]);
//console.log(set.size);

// set.add(6);
// set.delete(6);
// console.log(set.has(6));
//set.clear();
//console.log(set)

1.1 weekset

// Weakset
/*
WeakSet（list）
WeakSet结构与Set类似，也是不重复的值的集合。
WeakSet是一个构造函数，可以传入一个类数组初始化默认值。
WeakSet的成员只能是对象，而不能是其他类型的值
WeakSet中的对象都是弱引用，即垃圾回收机制不考虑	WeakSet对该对象的引用
WeakSet是不可遍历的
ws.add(value)
为WeakSet的实例添加值
ws.delete(value)
删除WeakSet实例的值
ws.has(value)
判断传入的参数是否为set的成员

2.map

参照如下，key不能重复，不然会被替换掉。

注意，下面的例子中map的key可以是一个obj

"use strict"
var obj = {
name:'leo'
}
/*
Map()
ES6提供了map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
Map也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
例如：
[[key1,value1],[key2,value2]]

map.size

返回成员总数
map.get(key)
通过key获取value
map.set(key,value)
为Map的实例添加新键值对
map.has(key)
查找key值是否存在。
map.delete(key)
删除对应键值对
map.clear()
清除所有成员

*/
var map = new Map([['name','leo'],['age',39],['age',40],[obj,23]]);
// map.set('sex','男的')
//console.log(map.size);
//console.log(map.get(obj))
//var arr = [...map];

//console.log(arr);
// map.forEach(function(value,attr){
// 	console.log(arguments);
// })

// for(var key of map.keys()){
// 	console.log(key)
// }
// for(var value of map.values()){
// 	console.log(value)
// }

// for(var [key,value] of map.entries()){
// 	console.log(key,value)
// }
/*
WeakMap()
WeakMap结构与Map结构基本类似，唯一的区别是它只接受对象作为键名（null除外），不接受原始类型的值作为键名，而且键名所指向的对象，不计入垃圾回收机制。
WeakMap没有遍历方法
wm.get(key)
通过key获取value
wm.set(key,value)
为WeakMap的实例添加新键值对
wm.has(key)
查找key值是否存在。
wm.delete(key)
删除对应键值对

*/

3.如何将map，set转为array

使用扩展运算符

var arr = [...map];

4.如何遍历

使用foreach遍历。

let obj ={name:'tt'};
var map = new Map([['name','leo'],['age',39],['age',40],[obj,23]]);
map.forEach((value,attr)=>{
console.log(value,attr);
})

注意点

map，set都是 一个类数组结构，所以遍历map.entries()的时候使用的是[key,value]的解构形式，而不是对象的{key,value}的形式

2.遍历接口

for of 变量，该变量实现了遍历接口,for of会调用里面的方法。实现循环。

1.Symbol

新的数据类型,表示独一无二的id，通过symbol函数生成，可以直接调用 Symbol() 不要用new

然后要部署遍历接口，返回一个对象（包含一个next方法，返回{value:XX,done:true}）

var obj = {
a:1,
b:2,
c:3
};

// for( var value of obj){
// 	console.log(value);
// }

/*
Symbol
ES6引入了一种新的原始数据类型Symbol，表示独一无二的ID。它通过Symbol函数生成。

*/
// var s1 = Symbol('test');
// var s2 = Symbol('test');
// console.log(s1 == s2);
//console.log(typeof s1);

Object.prototype[Symbol.iterator] = function(){ //部署遍历接口，返回对象(包含next方法)
var keys = Object.keys(this);
var _self = this;
var index = 0;
return {
next(){
if(index < keys.length){
return {value:_self[keys[index++]],done:false};
}else{
return {value:undefined,done:true};
}
}
};
}
for(var value of obj){
console.log(value);
}

3.Generator

方法名称就是 function* xx(){}

方法体内yield 关键字[类似return]，就是方法调用的时候第一次跑这个方法，yield出来之后，第二次再跑就直接从上次的yield状态中继续跑。

注意 调用这个方法xx()返回的是一个遍历接口，然后我们要调用的是返回值的.next()方法。

function* fn(b){

// var a = yield 1; //返回的参数，就是比如第一次调用的时候 然会1，然后再调用的时候，参数就会放入a里面了。

// console.log(a);
// yield 2;
for(var i=0;i<10;i++){
yield i;
}
}
var f = fn(b);
console.log(f.next());
console.log(f.next(true));
console.log(f.next());

4.Promise

异步操作，promise接口

var p1 = new promise(function(resolve,reject){});

然后 p1.then.

var p1 = new Promise(function(resolve,reject){

setTimeout(function(){
resolve();
}, 400)

// var xhr = new XMLHttpRequest();
// xhr.open('get','1.php',false);
// xhr.onreadystatechange = function(){
// 	if("成功"){
// 		resolve(a);
// 	}else{
// 		reject();
// 	}
// }
// xhr.send();
})
p1.then(function(a){  //第一个函数对应的是resolve
console.log('成功')
console.log(b);
},function(){//第二个函数对应的是reject
console.log('失败')
}).catch(function(e){
console.log(e);
});
/*
什么是promise
ES6的Promise对象是一个构造函数，用来生成Promise实例。下面是Promise对象的基本用法。
所谓Promise对象，就是代表了未来某个将要发生的事件（通常是一个异步操作）。它的好处在于，有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数
Promise
new Promise(function(resolve,reject){})
返回Promise实例对象。
then
promise.then(resolve,reject)
返回promise

*/

promise.all&race

遍历各个子项all参数的子项，然后根据各个状态的返回值，确定最终的返回值。

"use strict"
/*
Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。。
参数要求拥有iterator接口，并且每一项都是promise实例
var p = Promise.all([p1,p2,p3])
p的状态由p1、p2、p3决定，分成两种情况。
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Promise.race
与Promise.all方法类似将多个promise包装成一个新的promise实例
但是其中有一项的状态发生改变新的实例的状态就会随着改变。

var p = Promise.race([p1,p2,p3])
p的状态由p1、p2、p3决定，分成两种情况。

1、只要p1、p2、p3中一个的状态变成fulfilled，p的状态就变成fulfilled
2、只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
*/
var p1 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve();
console.log('p1')
}, 20)
});
var p2 = new Promise(function(resolve,reject){
setTimeout(function(){
reject();
console.log('p2')
}, 400)
});
var p3 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve();
console.log('p3')
}, 1000)
});

var p4 = Promise.all([p1,p2,p3]);
p4.then(function(){
console.log('成功');
}, function(){
console.log('失败');
})

5.class

constructor构造函数。

继承，extends，super。

"use strict"
class Cat{
constructor(name){
this.name = name;
}

getName(){
return this.name;
}
}

// var Cat = function(name){
// 	this.name = name;
// }
// Cat.prototype.getName = function(){
// 	return this.name;
// }
/*
在constructor方法内，super指代父类的constructor方法；在其他方法内，super指代父类的同名方法。

*/
class Momo extends Cat{
constructor(name,color){
super(name);  //指向父亲的构造器。如果多个参数，可以使用...rest的方式处理。
this.color = color;
}
showColor(){
return this.color;
}
}
var c1 = new Cat('leo');
var m1 = new Momo('momo','yellow');

// console.log(m1.getName());
console.log(m1.showColor());
//console.log(c1.getName())

6.module

<!--
什么是module
es6所提供的模块化
export命令
export命令用于用户自定义模块，规定对外接口
语法
export var name = 'leo';
export {name1,name2}
import命令
import命令用于输入其他模块提供的接口
语法
import {nam1,name2} from '文件路径';
输入的名称必须与输出的相同

as关键字
为输入的变量换一个新的名字
import { name as n } from '路径';
整体输入模块
import * as 变量名 from '路径';
module 变量名 from '路径';
输入的模块定义在变量名上
export default
输出匿名函数
语法：
export default function(){};
在输入的时候可以使用任何名字指向该匿名函数
例如：
import name from '路径'；

模块的继承
export * from '模块路径';

输出模块中所有方法和属性

export { a as b} from '模块路径';

将模块中的a变量转为b输出

-->

7.补缺补漏

reduce方法 和 reduceRight方法

/**
* javascript 中的reduce方法 和 reduceRight方法
* 这两个方法是ECMAScript5中新增的方法
* 都接受两个参数：第一个是用来迭代的数组的函数，这个函数有四个参数分别是，前一个值，当前值，项的索引，数组对象。然而这个函数的任何值都会作为第一个参数自动传给下一项。第二个是作为第一个函数中第一个参数的初始值
*
* reduceRight 和 reduce一样，只是他是从右向左进行迭代的
* 支持的浏览器有，IE9+，Firefox3+，Safari4+，Opera 10.5+，chrome
*/
var nums = [1,2,3,4,5,6,7];

var sum = nums.reduce(function(prev, cur, index, array) {
alert(prev + '------' + cur);
return prev + cur;
},8);
alert(sum);