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

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

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

目 录CONTENT

文章目录

ECMAScript6知识点1

2024-05-11 星期六 / 0 评论 / 0 点赞 / 82 阅读 / 6711 字

参考资料 微软中文javascript文档 阮一峰老师的ECMAScript 6入门 infoq 深入浅出ES6 ECMAScript 2015 简易教程 张鑫旭老师的blog,相关链接放在相应的位置

参考资料

微软中文javascript文档

阮一峰老师的 ECMAScript 6入门

infoq 深入浅出ES6

ECMAScript 2015 简易教程

张鑫旭老师的blog,相关链接放在相应的位置

一.变量

1.1 let

let 类似java的变量声明方式,严格模式,

let特性:
            1、不允许重复声明
            2、没有预解析。
            3、块级作用域

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

1.不允许重复声明

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

类比java代码 

//类比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;

 3、块级作用域

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 = '

广告 广告

评论区