ES6新特性详解-优快云博客

let

定义变量；遇到代码块就是一个域

	if (true) {
		let a = 1;
		console.log("a:" + a); // a:1
	}
	console.log("a:" + a); // a is not defined

const

定义常量
常量定义通常使用大写
赋值后不能改变

	const A = 1;
	A = 2; // Assignment to constant variable.

必须有初始值

	const A; // Missing initializer in const declaration

常量的值如果是一个对象对象的值是可以改变的，指向的对象不能改变

	let user = {name: 'Jon', age: 10}
	const A = user;
	console.log("user:",user); // {name: "Jon", age: 10}
	user.age = 14;
	console.log("user:",user); // {name: "Jon", age: 14}

变量的解构赋值

数组

直接赋值

	let [a, b, c] = [1, 2, 3]; // a=1 b=2 c=3

含有二级

	let [a, [b, c]] = [1, [2, 3]]; // a=1 b=2 c=3

间隔赋值(跳着赋值)

	let [a, , c] = [1, 2, 3]; // a=1 c=3

一个变量多个值

 let [a, ...c] = [1, 2, 3]; // a=1; c= [2,3]

指定默认值

	let [a, b='default',c='default'] = [1, 2]; // a=1 b=2 c='default'

null

	let [a, b, c] = [1, 2]; // a=1 b=2 c=undefined
	let [a, b, c] = [1, 2, null]; // a=1 b=2 c=null

对象

定义的变量必须与对象中的key值相同

	let obj = {
		a: 1,
		b: 2
	};
	let {a, b} = obj; // a=1; b=2
	let {c, b} = obj; // c=undefined; b=2

变量的对象更名

	let {a:A, b} = obj; // A=1 b=2   a=a is not defined

变量修改为对象中的值

	let a = 0;
	({a, b} = obj); // a=1 b=2  {}会使浏览器认为代码块 加上()告诉浏览器这是一个语句，解构语句

复杂对象

	let obj = {
		arr: [
			'Jon',
			{
				a: 1
			}
		]
	}
	let {arr:[g,{a}]} = obj; // g='Jon' a=1

变量更名及赋默认值

	let {a:A=1, b=2} = {a: 10}; // A=10 b=2

js自带对象

	let {floor, pow} = Math;
	let a = 1.9;
	console.log("floor(a):", floor(a)); // floor(a): 1
	console.log("pow(2, 3):", pow(2, 3)); // pow(2, 3):8 2的三次方

其他

自带的属性

	let {length} = "Yo.";
	console.log("length:" + length); // length:3

解构字符串

	let [a, b, c] = 'Yo.';
	console.log("a:" + a + ", b:" + b + ", c:" + c) // a:Y, b:o, c:.

函数传参解构

	var arr = [1, 2];
	function test([a, b]) {
		console.log("a:" + a);
		console.log("b:" + b);
	}
	test(arr); // 传值时直接将arr的值分别赋给a, b
	// 数组定义的顺序必须一致，若传值的参数不确定先后，可用对象代替，参数名与对象的key值相同
	var obj = {b: 2, a: 1};
	function test({a, b}) {
		console.log("a:" + a);
		console.log("b:" + b);
	}
	test(obj); // a:1 b:2
	// 为空时使用默认值
	var obj = {b: 2};
	function test({a = 10, b}) {
		console.log("a:" + a);
		console.log("b:" + b);
	}
	test(obj); // a:10 b:2

新增字符串方法

includes() 包含

	// 以前的写法
	console.log('Yo'.indexOf('Y') !== -1); // true
	// ES6 新增includes
	console.log('Yo'.includes('Y')); // true

startsWith() 开头

	console.log('Yo'.startsWith('Y')); // true 以Y开头

endsWith() 结束

	console.log('Yo'.startsWith('o')); // true 以o结束

repeat() 重复几次

	console.log('Yo '.repeat(3)); // Yo Yo Yo 重复3次

模板字符串

使用反引号``

	let title = '模板测试标题';
	let tpl1 = '<div>'+
	'<span>' + title + '</span>'
	'<div>';

	let tpl2 = `
	<div>
		<span>${title + `
			<span> ${124} 2019</span>
		`}</span>
	</div>
	`;

	console.log("tpl1:",tpl1); // tpl1: <div><span>模板测试标题</span>
	/* 打印结果
	tpl1: <div><span>模板测试标题</span>
	 */
	console.log("tpl2:",tpl2);
	/* 打印结果
	tpl2: 
	<div>
		<span>模板测试标题
			<span> 124 2019</span>
		</span>
	</div>
	*/

Symbol类型

以前的数据类型：undefined null Boolean String Number Object
最大的用处是用作对象的属性名称,不被修改
Symbol 每创建一个值都是不一样的

	let a = Symbol('this is Symbol'); // 参数用于描述 参数写不写无影响
	let b = Symbol();
	console.log(a === b); // false
	
	// 下游不能重写上游的属性
	// file1.js
	let name = Symbol();
	{
		var person = {};
		person[name] = 'File1';
		console.log('person[name]:',person[name]) // person[name]: File1
	}
	
	// file2.js
	{
		let name = Symbol();
		person[name] = 'File2';
		console.log('person[name]:',person[name]) // person[name]: File2
	}
	console.log('person[name]:',person[name]) //person[name]: File1

Proxy 代理操作对象

	// 第一个参数是对象 第二个参数是操作对象的方法
	var user = new Proxy({},{
		get: function(obj, prop){
			switch(prop) {
				case 'full_name':
					return obj.fname + ' ' + obj.lname;
				case 'age':
					return obj.age;
			}
		},
		set: function(obj, prop, value) {
			return obj[prop] = value
		}
	})

	user.fname = 'Bob';
	user.lname = 'Wood';
	console.log("user.full_name:",user.full_name); // user.full_name: Bob Wood
	console.log("user.age:",user.age) // user.age: undefined

	user.age = 12;
	console.log("user.age:",user.age) // user.age: 12

Set 数据结构

保证值唯一

	var s = new Set([1, 2, 3, 3]);
	console.log("s.size:",s.size); // s.size: 3
	console.log("s:",s); // s: Set {1, 2, 3}
	s.add(4);
	console.log("s:",s); // s: Set {1, 2, 3, 4}
	s.delete(2);
	console.log("s:",s); // s: Set {1, 3, 4}
	console.log("s.has(5):",s.has(5)); // s.has(5): false
	console.log("s.has(3):",s.has(3)); // s.has(3): true
	s.clear();
	console.log("s:",s); // s: Set {}