1.函数 1.1 参数默认值 注意这个默认参数必须是尾参数,否则会有匹配的问题。 function fn(a,b=2){return {a,b};// 定义默认值的参数必须是尾参数,因为定义默认值之后
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);