ECMAScript6知识点1

时间 2019-11-13

标签 ecmascript6 ecmascript 知识栏目 JavaScript 繁體版

原文原文链接

参考资料

微软中文javascript文档javascript

阮一峰老师的 ECMAScript 6入门css

infoq 深刻浅出ES6html

ECMAScript 2015 简易教程java

张鑫旭老师的blog，相关连接放在相应的位置es6

一.变量

1.1 let

let 相似java的变量声明方式，严格模式，chrome

let特性：
           一、不容许重复声明
           二、没有预解析。
           三、块级做用域数组

一对{}包括的区域称为代码块
块级做用域指一个变量或者函数只在该区域才起做用。
从块的开始到声明这段的区域暂存死区浏览器

1.不容许重复声明闭包

let a = 1;
let a =3; //Uncaught SyntaxError: Identifier 'a' has already been declared

类比java代码 wordpress

//类比java的变量声明
int a = 1;
int a = 2;//重复声明

2.没有预解析。[暂存死区]

console.log(a);//error Uncaught ReferenceError: a is not defined
	let a = 1;

类比java

//类比java的变量在使用前须要先声明
public static void main(String[] args) {
		System.out.println(a);//a cannot be resolved to a variable
		int a =1;
	}

对比var

console.log(a);// 由于有与解析的存在，a这里就为undefined，不会报错。
var a = 1;

三、块级做用域

let声明的做用域是在{}里面，而var是在函数做用域内，

{
		let i = 1;//利用let 声明的i  在外部没法引用
	}
	console.log(i);	// Uncaught ReferenceError: i is not defined

对比var

{
		var i = 1;
	}
	console.log(i);	//利用var 声明的i  在外部仍是能够引用到。

利用let声明的变量就能够不用考虑for循环的外部引用问题了。

let：

var tt = [1,2,3];
	for (let i = 0; i < tt.length; i++) {
		tt[i]
	};
	console.log(i);	//ReferenceError: i is not defined;i 只是在 for的{}区域内有效，

对比var

var tt = [1,2,3];
	for (var i = 0; i < tt.length; i++) {
		tt[i]
	};
	console.log(i);	//利用var 声明的i  在外部仍是能够引用到。

例子：1.定时器

for (var i = 0; i < 10; i++) {
			setTimeout(function  () {
				console.log(i); //闭包的问题，打印结果都为10，简单的理解，
								//i声明后没有马上被使用，而是通过了一段时间后才使用。
								//因此for循环跑完了。i值固定了。
			})
		};

若是须要每次的i打印的不同，就让i马上被使用，

使用var的方式，能够使用匿名函数自执行的方式

for (var i = 0; i < 100; i++) {
			(function  (i) {
				setTimeout(function  () {
					console.log(i); //函数马上执行了。i被使用了。因此每次的i的值都是不同的
				})
			})(i)
		};

若是使用let的方式的话

for (let i = 0; i < 10; i++) {
			setTimeout(function  () {
				console.log(i); //let是强类型:对比java，与闭包就没多大关系了。
			})
		};

例子：2选项卡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div {
		display: none;
	}
	.show{
		display:block;
	}
	.active {
		background-color: yellow;
	}
	</style>
</head>
<body>
	<input type="button" value="btn1" class="active">
	<input type="button" value="btn2">
	<input type="button" value="btn3">
	<div class="show">div1</div>
	<div>div2</div>
	<div>div3</div>
	<script type="text/javascript">
		var tabs = document.getElementsByTagName('input');
		var divs = document.getElementsByTagName('div');
		for(let i =0, len = tabs.length;i<len;i++){
			tabs[i].onclick = function  () {
				for (let i = 0; i < tabs.length; i++) {// 这里使用了和外面同样的let声明方式也没有关系，
				//由于let是强类型的&&块级做用域
					tabs[i].className="";
					divs[i].className="";
				}
				this.className="active";
				divs[i].className="show";
			}
		}
		
		
	</script>
</body>
</html>

1.2 const

const 声明常量，相似java的static final，用法也相似

好比声明了变量的话，const强调变量的引用不能再修改，而不是说变量的引用里面的值不能被修改

const a = {
		name:"test",
		age:1
	};
	a.name="test2";//修改常量的引用的内部的值是能够的。
	console.log(a.name,a.age);

1.3 变量的解构赋值

ES6容许按照必定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

1.3.1 数组的解构赋值

let ori = [1,2,[3,4]];
		let [a,b,[c]] = ori;//数组是按照顺序一个个赋值的。注意，这里到3，没有到4.
		console.log(a,b,c);

若是模式不对，就会报错。

let ori = [1,2,[3,4]];
		let [a,b,d,[c]] = ori;//这里d没法匹配原来的模式串。因此报错了。
		console.log(a,b,c);

1.3.2 对象的解构

let oriObj ={
			foo:function  () {
				
			},
			o:{name:"oo",age:1},
			arr:[1,2,3],
			str:'sss'
		}
		let {foo,o} = oriObj;//对象的结构赋值使用的是key去对应。更多的内容参考阮一峰老师的es6
		console.log(foo,o);

注意模式匹配，如上面的例子，若是咱们想匹配name的值，对比上面的例子，要使用下面的写法，注意对象的解构赋值，要注意模式串的匹配。还有嵌套匹配的时候模式不是变量。

let oriObj ={
			foo:function  () {
				return "tt";
			},
			o:{name:"oo",age:1},
			arr:[1,2,3],
			str:'sss'
		}
		let {foo,o:{name}} = oriObj;//参考阮一峰老师的es6讲解，这里o是一个模式不是一个变量，因此o是不能赋值的。
		console.log(foo,name);

二.字符串

2.字符串扩展

2.1 codePointAt

var s = '𠮷';
		console.log(s.length);//特殊字符须要用4个字节[2个字符]去存储
		s.charCodeAt(0);
		s.charCodeAt(1);
        console.log(s.codePointAt(0));//找码点值。
        console.log(s.codePointAt(1));

2.2 fromCodePoint

这是一个静态方法【String.xxx】。返回码点对应的值。

好比上面的码点值。

var s = '𠮷';
		//console.log(s.length);//特殊字符须要用4个字节[2个字符]去存储
		//s.charCodeAt(0);
		console.log(s.codePointAt(1));
		console.log(String.fromCodePoint(s.codePointAt(1)));

2.3 at

这个方法在有些浏览器下面不支持

xxxStr.at();//返回对应位置的字符

2.4 repeat

字符串重复

str.repeat(2);//字符串重复

2.5 模板字符串

let name = "hello";
		let age = 2;
		console.log(`您的名字是${name},您的年纪是${age}`);

2.6 unicode表示法

超过\u0000到\uFFFF的字符将码点放入{}也能够显示出来。

console.log('\u0061');
		console.log('\u{20BB7}');//超出部分使用{}填入码点也能够显示
		console.log('\u{41}\u{42}\u{43}')

2.7 includes

参数格式：

1.要查找的字符串，2.起始位置

结果：boolean

var tt = "hello kitty";
		console.log(tt.includes("he",0));

2.8 startsWith && endsWith

参数格式：

1.要查找的字符串，2.起始位置

结果：boolean

三数值

3 数值扩展

3.1 数值表示法：二进制和八进制

二进制表示使用0b，八进制使用0o;

console.log(0b1111);
		console.log(0o711);

3.2 trunc

去除小数点

Math.trunc(1.234)

3.3 sign

判断正负，最重要的是判断0主要是正0仍是负0；

3.4 hypot

返回全部参数的平方和的平方根，勾股定理

四数组

4 数组扩展

4.1 from

Array.from，将类数组转为真正的数组

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<script type="text/javascript">
		var divs = document.getElementsByTagName('div');
		var eles = [].slice.call(divs);//使用原生的处理方式
		console.log(eles);
		let eles2 = Array.from(divs);//类数组转为真正的数组
		console.log(eles2);


	</script>
	
</body>
</html>

直接转换字符串

console.log(Array.from("string"));

4.2 of

Array.of，将一组参数，转为数组

var arr = Array.of(1,2,3,4,5);

这个方法解决new Array(5)，这里5是一个长度的问题。

4.3 find

找出第一个符合条件的数组元素【返回元素自己】
       参数：
           一、回调函数
           二、回调函数内this的指向
       遍历整个数组，遍历过程当中调用回调函数，若是回调函数的返回值为true，则返回当前正在遍历的元素。
       若是全部元素都不符合条件则返回undefined

var arr = [1,2,3,4,6];
	var n = arr.find(function(value,index){
        console.log(arguments);//这里有三个参数。
		return value > 4;
	})
	console.log(n);

4.4 findIndex

找出第一个符合条件的数组元素的位置
       参数：
           一、回调函数
           二、回调函数内this的指向
       遍历整个数组，遍历过程当中调用回调函数，若是回调函数的返回值为true，则返回该数组元素的位置。
       若是全部元素都不符合条件则返回-1

4.5 fill

arr.fill()
       用来填充数组
       参数:
               一、填充的内容
               二、起始位置
               三、结束位置

var arr = [1,2,3,4,5];

	arr.fill(6,2,4);//填充6，从2位到第4位[1, 2, 6, 6, 5]

	console.log(arr);

	arr.length = 10;
	arr.fill(0);//将数组填充相同的元素
	console.log(arr);

4.6 for of 循环遍历

能够用在实现了遍历接口的变量上，字符串和数组默认是实现了遍历iterator接口了。

vs for in[遍历对象]

var arr = [1,2,3,4,6];
	for(let item of arr){
		console.log(item);//遍历数组
	}
	var str = 'miaov';
	for(let item of str){
		console.log(item);//遍历字符串
	}
	var obj = {
		a:1,
		b:2,
		c:3
	};
	for(var value of obj){
		console.log(value); //error，对象默认没有实现遍历iterator接口
	}

4.7 keys() && values()&&entries()

默认是values，因此不用写也能够。

keys()获得key集合

var arr = [1,2,3,4,6];
	for(let key of arr.keys()){
		console.log(key);//返回数组下标 index
		
	}

entries键值对

var arr = [1,2,3,4,6];
	for(let [key,value] of arr.entries()){//利用解构赋值的方式，这里不能使用{key,value}的写法。
		console.log(key,value);
	}

4.8数组推导

数组推导
ES6提供简洁写法，容许直接经过现有数组生成新数组，这被称为数组推导（array comprehension）。

注意下面的写法，[xx表达式，不能写{}];

var arr = [1,2,3,4,5];
	var arr2 = [for (value of arr) if(value %2 ==0) value*2 ];

	console.log(arr2);

4.9 有用的连接

ES5中新增的Array方法详细说明

五对象

5.1对象的简洁声明

1.函数返回对象

function  fn(x,y) {
		return {x,y};//相似结构赋值的语法
	}

	var tt = fn(1,2);

2.对象的简洁表示法

下面的声明方式相似java的写法了。对比java除了不用声明返回值和做用域等

var obj = {
		name:"momo",
		showName(){  //对象内部声明函数
			return this.name;
		}
	}
	
	console.log(obj.showName());

3.属性名表达式

将表达式放在[]，做为对象的key

var sex = '男';
	var person = {
		name:'momo',
		[sex]:false, //sex是外部变量
		['get'+'name'](){
			return this.name;
		}
	};

	console.log(person.getname());
	console.log(person[sex])

5.2 对象的扩展

1. is

/*
		Object.is()判断传入的参数是不是相等的

	*/
	console.log(0 === -0)
	console.log(Object.is(0,-0))
	console.log(Object.is(NaN,NaN))

2.assign

相似jq的extends方法了。

/*
		Object.assign(target [,source1 ... sourceN])
		将source对象的可枚举属性赋值到target对象上。
		注意：若是目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

	*/
	var obj1 = {};
	var obj2 = {
		name:'zMouse'
	};
	var obj3 = {
		name:'duoduo',
		age:34
	}
	Object.assign(obj1,obj2,obj3);

	console.log(obj1);

3.getPrototypeOf && setPrototypeOf

/*
		Object.getPrototypeOf(object)
		用来获取一个对象的prototype对象
		 Object.setPrototypeOf(object,prototype)
		用来设置一个对象的prototype对象
	*/

	var Cat = function(name){
		this.name = name;
	};
	Cat.prototype.showname = function(){
		return this.name;
	};
	var Person = function(){

	};
	Person.prototype.dadoudou = function(){

	};
	var c1 = new Cat('momo');
	//console.log(Object.getPrototypeOf(c1))

	// Object.setPrototypeOf(c1,Person.prototype);//这里塞值塞的是原型对象，不然会

	// console.log(Object.getPrototypeOf(c1))

4 _proto_

读取和设置当前对象的prototype对象

须要参考相关资料

var obj = {
   _proto_:super
}

5 proxy

参数：1，须要被代理的对象，2.设置对象

设置对象须要有一个get，set方法。以下所示。

proxy简单的说就是obj的一个替身，对代理的访问和设置会触发get&set方法。

get & set 都要有return，不过set的return只是为了避免让报错而已。若是要在set里面给代理塞值，就要使用

obj[attr] = value;

var obj = {
		a:1,
		b:2
	};

	var p1 = new Proxy(obj,{
		get(obj,attr){//当属性被访问的时候触发
			// console.log(obj,attr)


			return obj[attr];
		},	
		set(obj,attr,value){//当属性值修改时触发。
			//console.log(obj,attr,value)
			if(value < 100){
				obj[attr] = value;
			}
			
			return 2; 
		}
	})
	//console.log(p1.a)
	p1.a = 1000;

	console.log(p1.a)

6.observe

vs proxy

observer，两个参数，第一个，就是被观察对象。第二个就是回调。第三个，add，update...[触发类型]

unobserve，解绑。

当obj改变的时候会调用，不监控访问，

这个方法在未来的版本会移除【'Object.observe' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/6147094632988672 for more details.】

var obj = {
		a:1,
		b:2
	};
	function fn(a){
		console.log(a);
	}
	Object.observe(obj,fn); //观察obj，fn回调。
	obj.a = 3;
	 console.log(obj.a)
	Object.unobserve(obj,fn)
	obj.a = 4;

7.Reflect.ownKeys(obj)

返回全部类型的键名

vs Object.keys() 用法相同。

var obj = {
		a:1,
		b:2
	};
//console.log(Object.keys(obj)) //遍历接口
	//console.log(Reflect.ownKeys(obj))

ECMAScript6知识点1

参考资料

一.变量

1.1 let

1.2 const

1.3 变量的解构赋值

1.3.1 数组的解构赋值

1.3.2 对象的解构

二.字符串

2.字符串扩展

2.1 codePointAt

2.2 fromCodePoint

2.3 at

2.4 repeat

2.5 模板字符串

2.6 unicode表示法

2.7 includes

2.8 startsWith && endsWith

三 数值

3 数值扩展

3.1 数值表示法：二进制和八进制

3.2 trunc

3.3 sign

3.4 hypot

四 数组

4 数组扩展

4.1 from

4.2 of

4.3 find

4.4 findIndex

4.5 fill

4.6 for of 循环遍历

4.7 keys() && values()&&entries()

4.8数组推导

4.9 有用的连接

五 对象

5.1对象的简洁声明

1.函数返回对象

2.对象的简洁表示法

3.属性名表达式

5.2 对象的扩展

1. is

2.assign

3.getPrototypeOf && setPrototypeOf

4 _proto_

5 proxy

6.observe

7.Reflect.ownKeys(obj)

三数值

四数组

五对象