es6从入门到精通 ES6新特性 es6精讲 必须掌握的es6实用特性

let const 命令,跟var的区别

1、var 的作用域是分全局和函数作用域两种,也叫全局变量和局部变量;
2、let 和const作用域都是块级作用域,简单说就是仅在大括号内有效;
3、const 就是constant 的缩写,代表恒定的值,指常量,一般不能改变;
4、如果先打印log某个值,然后再定义,对于var是可以打印出结果,但是let是取不到的(undefined);
具体代码:

			//var 和let的作用域
			var a = 1;
			if(true){
				let b = 2; 
				console.log('a:'+a);//a:1
				console.log('b:'+b);//b:2
			}
			console.log('a:'+a);//a:1
			console.log('b:'+b);//b is not defined
			//const常量的使用,什么情况下可以修改?
			//1、不可修改的情况:常量属于一个值、字符串或者数字;
			const LOVE_Y = false;
			console.log(LOVE_Y); //false
			LOVE_Y = true;
			console.log(LOVE_Y) //Uncaught TypeError: Assignment to constant variable.
			//2、可修改的情况,常量属于一个对象或者数组时;
			const arr = [1,2];
			const obj = {
				a:10,
				b:20
			}
			console.log(arr);//[1, 2]
			console.log(obj);//{a: 10, b: 20}
			arr[0] = 3;
			obj.a = 38;
			console.log(arr);//修改数组后的值:[3, 2]
			console.log(obj);//修改对象后的值:{a: 38, b: 20}
			//var 和let 提前打印结果
			console.log(a);//undefined
			var a;			
			console.log(b);//Cannot access 'b' before initialization
			let b;

变量解构赋值

通常在es5时,我们定义变量都是一个个,挨个定义,但是es6经过改进,大大提高了代码的效率,一次性赋值多个变量,自动匹配,使简洁更高效:

			//一次性赋值多个变量,自动匹配
			let [a,b,c] = [1,2,3];
			console.log(a);//1
			console.log(b);//2
			console.log(c);//3
			//如果中间某些值不需要定义,可以用逗号隔开
			let [a, ,c] = [1, ,3];
			console.log(a);//1
			console.log(c);//3
			//为某个变量设置默认值,变量名=default
			let [a=8, ,c] = [, ,3];
			console.log(a);//8
			console.log(c);//3
			//将变量赋予另一个变量
			let obj = {a:6, c:3}
			let {a:A,c} = obj;
			console.log(c);//3
			console.log(A);//6
			console.log(a);//a is not defined
			//给一个变量赋予多个值,用 ...
			let [a,...z] = [1,2,3,4,50,100];
			console.log(a);//1
			console.log(z);//[2, 3, 4, 50, 100]
			//将变量赋值字符串
			let [a,b,c] = 'shi';
			console.log(a);//s
			console.log(b);//h
			console.log(c);//i

新增字符串方法

新增常用字符串方法:includes 、startsWith 、endsWith 、
1、其中includes()类似于es5中的index of(),用于查找某个字符串,index of(),返回-1或者其他值,
includes()则返回true or false;
2、startsWith ()测试字符串是否以什么开头;
3、endsWith() 测试字符串是否以什么结尾;
4、repeat(number),复制多少遍;

		console.log('Yo.cnt'.includes('Y'));//true
		console.log('Yo.cnt'.startsWith('Y'));//true
		console.log('Yo.cnt'.endsWith('t'));//true
		console.log('Yo.cnt '.repeat(3));//Yo.cnt Yo.cnt Yo.cnt 

模板字符串

es6可以在``反引号中写多行字符串(保留断行和空格),还可以用${name}的方式引用参数,模板中仍然可以嵌套模板,多层嵌套,具体代码:

			let title = '亲爱哒,热爱大';
			let article = 
			`
				<div>
					<h3>${title+
						`
							<span>新剧</span>
						`
					}</h3>
					<p>这是最近非常火的一部青春剧</p>
				</div>
			`;
			console.log(article);//具体打印结果,自己试试吧,是一个html格式的
在这里插入代码片

symbol类型

es5中的基本数据类型有:undefined、Null 、number、Boolean 、string 、object,es6中又增加了一个symbol类型,symbol。Symbol是由ES6规范引入的一项新特性,它的功能类似于一种标识唯一性的ID。通常情况下,我们可以通过调用Symbol()函数来创建一个Symbol实例(每个Symbol实例都是唯一的),也可以在调用Symbol()函数时传入一个可选的字符串参数,相当于给你创建的Symbol实例一个描述信息:

			let a = Symbol();
			let b = Symbol("这里写描述信息");
			let c = Symbol();
			console.log(a === c);//false

proxy代理

ES6原生提供了Proxy构造函数,用来生成Proxy实例。
var proxy = new Proxy(target, handler);
Proxy对象的所有用法,都是上面的这种形式。不同的只是handle参数的写法。其中new Proxy用来生成Proxy实例,target是表示所要拦截的对象,handle是用来定制拦截行为的对象。
1、get() get方法用于拦截某个属性的读取操作,可以接收三个参数,依次为目标对象,属性名和Proxy实例本身(操作行为是针对的对象),其中最后一个参数可选。
2、set方法用来拦截某个属性的赋值操作,可以接受4个参数,依次为目标对象,属性名,属性值和Proxy实例本身,其中最后一个参数可选。假设Person对象有个age属性,该属性是一个不大于200的整数,那么可以使用Proxy来保证age的属性值符合要求。

			//get方法
			var user = new Proxy({},{
				get: function(obj,prop){
					switch (prop){
						case 'fullName':
							return obj.firstName+' '+obj.lastName;
						case 'fullName2':
							return (obj.firstName+' '+obj.lastName+' ').repeat(2)
						default:
							break;
					}
				}
			});
			user.firstName = 'Alice';
			user.lastName = 'Adward';
			console.log('user.fullName:'+user.fullName);//user.fullName:Alice Adward
			console.log('user.fullName2:'+user.fullName2);//user.fullName2:Alice Adward Alice Adward
			//set方法
			let validator = {
			  set: function(obj, prop, value) {
			    if (prop === 'age') {
			      if (!Number.isInteger(value)) {
			        throw new TypeError('输入的年龄不是数字类型');
			      }
			      if (value > 200) {
			        throw new RangeError('年龄不能大于200');
			      }
			    }			
			    // 对于满足条件的 age 属性以及其他属性,直接保存
			    obj[prop] = value;
			  }
			};			
			let person = new Proxy({}, validator);			
			person.age = 100;			
			person.age // 100
			person.age = 'young' // 报错
			person.age = 300 // 报错

set方法

set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目。

			let arr = [1,2,3,3];
			console.log(arr);// [1, 2, 3, 3]
			let s = new Set(arr);
			console.log(s);//Set(3) {1, 2, 3}
			console.log(s.size);//3,这里的size和数组的length一样
			s.add(4);//添加值
			console.log(s);//Set(3) {1, 2, 3,4}
			s.delete(2);//删除值
			console.log(s);//Set(3) {1,3,4}
			console.log(s.has(5));//false  测试是否包含某个值
			s.clear(); //将数据清空
			console.log(s);//Set(0) {}
			

其实ES6还有很多功能可能没有介绍到,以后不断学习,再来更新,欢迎补充!

猜你喜欢

转载自blog.csdn.net/Taurus_0811/article/details/97246774