了解一些ECMAScript 6

ECMAScript 6的新特性: class模块,箭头函数;
让浏览器现在就使用ES6的新功能的工具:  Babel , Jspm, webpack;
可以使用Google的Traceur在线转换工具),将ES6代码编译为ES5。
# 安装
npm install -g traceur
# 运行ES6文件
traceur /path/to/es6
# 将ES6文件转为ES5文件
traceur --script /path/to/es6 --out /path/to/es5

/* rest运算符(...),可以向函数传入任意数目的参数 */

function add(...array){
	let sum = 0;
	for(var item of array){
		sum += item;
	}
	return sum;
}

console.log(add(1,2,3,4,5,5,4,3,2,1));

/* 创造一个push方法 */
function mypush(array, ...items){
	items.forEach(function(item){
		array.push(item);
	});
	return array;
}
var nameList = ['zhangsan','lisi'];
console.log('nameList : ' + nameList);
mypush(nameList, 'wangwu', 'maliu');

console.log('nameList : ' + nameList.toString());


/* 将数组转化成一个参数序列 */

var numbers = [188, 192, 187, 167, 155, 132, 201, 222];
var maxNumber = Math.max(...numbers);

console.log('maxNumber is : ' + maxNumber);

/* Set数据结构 */
	
	let a = 10,i;
	/* Set数据结构 类似于js数组,但成员都是唯一的,没有重复的值 */
	var s = new Set();
	/* Set数据不会添加重复的值 */
	[2,3,4,5,5,6,1,2].map(x=> s.add(x)); 
	console.log('s.size: ' + s.size);
	for(i of s)(console.log(i));
	s.add(6).add(7); /* 可以链式操作 */
	console.log('s.size:(added) ' + s.size);
	s.delete(6);
	console.log('s.size:(deleted) ' + s.size);
	for(i of s)(console.log(i));
	/* set的方法除了size, add(value), delete(value)还有 has(value)和clear() */
	if(s.has(1)){
		s.clear();
		console.log('s.size:(clear) ' + s.size);
	}
   var s = new Set();
	/* Set数据不会添加重复的值 */
	[2,3,4,5,5,6,1,2].map(x=> s.add(x)); 


   /*  Set结构的四个遍历方法 
	   -keys() 返回键名的遍历器 
	   -values() 返回键值的遍历器 
	   -entries() 返回一个键值对遍历器 
	   -forEach() 使用对调函数遍历每个成员
   		Set 数据结构只有键值没有键名所以keys和values两个方法表现一致
    */

   console.log('keys:');
   for(let item of s.keys()){
   		console.log(item);
   }

   console.log('values:');
   for(let item of s.values()){
   		console.log(item);
   }
   console.log('entries:');
   for(let item of s.entries()){
   		console.log(item);
   }

   console.log('forEach 回调:');
   s.forEach(function(item){
   	console.log(item);
   });


   /* 扩展运算符  ... */

   console.log('... 扩展运算符');
   let arry = [...s];
   console.log("arry : " + arry.toString());

   /* 数组去重 */
   console.log('数组去重');
   let arrayA = [2,'3',3,'2',213,55,1,523,65,7,1,56,7,'3'];
   let arrayB = [...new Set(arrayA)];
   console.log("arrayA: " + arrayA);
   console.log('arrayB: ' + arrayB);



   /* 数组的map fliter方法也可以用给Set */
   console.log('使用map和filter');
   let SetA = new Set([1,23,0,3,54,1,3,12,23,453,12,345,5].map(x => x + 2));
   console.log('SetA :' + [...SetA]);


   let SetB = new Set([...SetA].filter(x => x >10));
   console.log('SetB :' + [...SetB]);


   /* 并集, 交集, 差集 */
   let setC1 = new Set([1,2,3,4]);
   let setC2 = new Set([2,4,6,8]);

   console.log('并集:' + [...new Set([...setC1, ...setC2])]);

   console.log('交集:' + [...new Set([...setC1].filter(x => setC2.has(x)))]);

   console.log('差集:' + [...new Set([...setC1].filter(x => !setC2.has(x)))]);

	/* Map数据结构 */
	let m  = new Map();
	/* 键可以是 number, string object function undefined */
	/* string */
	m.set("key",  "value");
	/* number */
	m.set(121212,"phone number");
	/* undefined */
	m.set(undefined, 5443);
	/* object */
	var o = {p: "hello!"};
	m.set(o, "kitty");

	function add(a,b){return a+b;}

	m.set(add, "addfunc");
	console.info('m.size: ' + m.size);
	console.info('m.get(key): ' + m.get('key'));
	console.info(m.has(add) ? "m has key" : "m has no key");
	/* 遍历 */
	m.forEach(function(ms){
		console.log(ms);
	});
	m.delete(121212);
	console.info('m.size: ' + m.size);

	m.forEach(function(ms){
		console.log(ms);
	});

	/* 和Set类似,Map的方法还有has(key),delete(key),clear() */

	console.log('============================遍历Map============================');
	for(let a of m.keys()){
		console.log('keys = ' + a);
	}

	for(let a of m.values()){
		console.log('values = ' + a);
	}

	for(let a of m.entries()){
		console.log('entries = ' + a[0], a[1]);
	}
	/* 通过操作符...显示转化成为数组,就可以使用数组的方法 */
	console.log('=========================数组===============================');
	console.log('to Array Keys():');
	console.log([...m.keys()]);	
	console.log('to Array values():');
	console.log([...m.values()]);	
	console.log('to Array entries():');
	console.log([...m.entries()]);	

	/* 使用数组迭代的方法 */
	let map = new Map().set(1,'A').set(2,'B').set(3,'C');
	let map2 = new Map([...map].filter(([k,v]) => k < 2));
	console.log([...map2.entries()]);
	let map3 = new Map([...map].map(([k,v]) => [k + 2,'_' + v]));
	console.log([...map3.entries()]);


 console.log('======================类型转换=============================');
	/* map转化成数组 */
	let array = [...map3];

	console.log('array:' + array.toString());

	/* Map转化成对象 */
	function strMapToObj (strMap) {
		 let obj = Object.create(null);
		 for(let [k,v] of strMap){
		 	obj[k] = v;
		 }
		 return obj;
	}
	let convertMap = new Map().set('yes', true).set('no', false);
	// console.log("obj : " + strMapToObj(convertMap));

	/* map转化为json */
	function strMapToJson(strMap){
		return JSON.stringify(strMapToObj(strMap));
	}

	let result = strMapToJson(convertMap);
	console.log('json: ' + result);

	/* 对象转化成map */
	function ObjToMap(obj){
		let map = new Map();
		for(let a of Object.keys(obj)){
			map.set(a, obj[a]);
		}
		return map;
	}

	let map5 = ObjToMap({name : 'alice', age : 25});
	console.log([...map5.entries()]);


	/* Json转化成map */
	function JsonToMap(jsonStr){
		return ObjToMap(JSON.parse(jsonStr));
	}
	let map6 = JsonToMap('{"name":"alice", "age":23}');  /* 所有键名都是字符串 */
	console.log([...map6.entries()]);



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值