侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130555 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

ECMAScript6知识点2

2024-05-10 星期五 / 0 评论 / 0 点赞 / 4 阅读 / 13044 字

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);  

 

广告 广告

评论区