最近,看了一些es6的相关知识点,有时候看完就忘记了,所以写下该博客,以此记录。
1、变量(let,const)
es6使用let定义变量,const定义常量。
变量可重复赋值,但常量重复赋值会报错(报错信息如下:Uncaught TypeError: Assignment to constant variable.)。
使用let,const定义的变量有块级作用域,使用var定义的变量没有块级作用域。
let是用来声明块级作用域,它所声明的变量,只是在let命令所在的那个代码块中有效。
const也是用来声明块级作用域,但它声明的是常量。就是一旦声明,常量的值就不能改变。
具体的例子:
使用var定义的变量:
<script type="text/javascript">
for(var i=0;i<10;i++){
console.log("i的值为"+i);
}
console.log(i);//10
</script>
使用let定义的变量:
<script type="text/javascript">
for(let i=0;i<10;i++){
console.log("i的值为"+i);
}
console.log(i);//Uncaught ReferenceError: i is not defined 因为let声明块级作用域
</script>
下面用一个例子来说明使用var和let(无块级作用域和有块级作用域的区别):点击每个li ,弹出相应的下标。
方式1:使用闭包的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--实现点击每个li,弹出相应的下标--> <!--用闭包形式--> <script> window.onload=function () { var oLi=document.getElementsByTagName("li"); for(var i=0;i<oLi.length;i++){ (function (i) { oLi[i].onclick=function () { alert(i); } })(i) } } </script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
方式2:使用块级作用域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--实现点击每个li,弹出相应的下标--> <!--用的是es6的let定义变量--> <script> window.onload=function () { var oLi=document.getElementsByTagName('li'); for(let i=0;i<oLi.length;i++){ oLi[i].onclick=function () { alert(i); } } } </script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
记录1:再看书的时候看到一个点,所以记录如下:(面试的时候有可能会问到哦)
for
循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
上面代码正确运行,输出了 3 次abc
。这表明函数内部的变量i
与循环变量i
不在同一个作用域,有各自单独的作用域。
记录2:说说let跟var的区别?
1、let命令不存在变量提升,如果在let前使用,会导致报错
2、暂时性死区,如果块区中存在let和const命令,就会形成封闭作用域
3、不允许重复声明,因此,不能在函数内部重新声明参数
2、箭头函数 (()=>{}的形式)
箭头函数的两个特点:
1、当只有一个参数的时候,()可以省略
2、当只有一个return的时候,{}可以省略
以上两点见以下例子:
例子1:当只有一个参数的时候,()可以省略
<script> let show=a=>{ alert(a); }; show(12); </script>
例子2:当只有一个return的时候,{}可以省略
<script> let sum=(a, b)=>a+b; alert(sum(12, 5)); </script>
箭头函数与普通函数的区别是什么?
1、this的指向不同(箭头函数没有自己的this,所以箭头函数内部的this,就是它外层代码块的this。)
2、箭头函数是匿名函数,不能作为构造函数,不能使用new
(eg:
<script type="text/javascript">
let FunctionConstructor = () => {console.log('lll');
}
let func = new FunctionConstructor();
</script>
如图:
)
3、箭头函数不能变量提升,必须先声明在调用。
4、不可以使用arguments
对象,该对象在函数体内不存在。如果要用,可以用Rest参数
代替。
5、不可以使用yield
命令,因此箭头函数不能用作Generator
函数。
3、class,extends,super
ES6中引入了“类”的概念,但是只是引用了类的写法,js其实还是没有类。它只是为了让对象原型的写法更加清晰,更像面向对象的写法。
例子1:对象原型的写法
<script type="text/javascript">
function obj() {
// body...
this.name="我叫xxx";
}
obj.prototype={
age:function () {
console.log('今年18岁');
}
}
var o=new obj();
console.log(o.name);
console.log(o.age());
</script>
例子2:使用class写法
<script type="text/javascript">
class obj1{
constructor(name1){
this.name1="test";
}
age1(){
console.log("今年10岁");
}
}
var o2=new obj1();
console.log(o2.name1);
console.log(o2.age1());
</script>
例子3:继承(extends,super)
<script type="text/javascript">
// 这是父类
class ObjFn{
constructor(){
this.name = '我是xxx'
}
age(){
console.log( this.name + ',今年18岁' );
}
}
// 这是子类
class SubClassFn extends ObjFn{
constructor(){
//子类没有自己的this,子类的this,是通过super方法继承父类的this对象得到的。
//这就是先得到了父类的this,
// 也就是父类的实例对象super();
this.eat = '就是能吃';
}
play(){
console.log('就是能玩');
}
}
let _subClassFn = new SubClassFn();
_subClassFn.age();
console.log( _subClassFn.eat )
_subClassFn.play();
</script>
4、函数
es6的函数新增两种语法:1、展开扩展--剩余参数,2、展开数组
具体例子如下:
1、展开数组--属于参数
<script> let arr=[12,5,8,9,22] show(...arr); function show(num1,num2,...args) { alert(num1); alert(num2); alert(args); alert(num1+num2); } </script>注意:...args只能放在最后,必须是最后一个参数。
2、展开数组
<script> let arr=[12, 5, 8]; //...arr => 12, 5, 8 function sum(a, b, c){ alert(a+b+c); //a对应12,b对应5,c对应8 } sum(...arr); </script>
5、解构赋值
解构赋值的关键是:
1、等号左边跟等号右边结构必须要一致(如:是数组就左右都是数组,是json就左右都是json)
2、声明和赋值必须在一句话中完成,不能分开。
例子1:等号左边跟等号右边结构必须要一致
正确:
let [a, b, c] = [1, 2, 3] console.log(a, b, c)
错误:
<!--错误:右边要是个正确的结构(东西)。现在的{12,5}说数组不是数组,说json又不是json--> <script> let {a, b} = {12, 5} console.log(a, b) </script>
例子2:声明和赋值必须在一句话中完成,不能分开
<!--错误:声明跟赋值要在一起,必须在一句话中完成--> <script> let [a, b]; [a, b] = [12, 5] console.log(a, b) </script>
6、数组
个人觉得数组还是很重要的。我主要总结map、reduce、filter、forEach这4个方法。
1、map是映射,比如对于分数,[30,60]=>[不及格,及格]映射结果类似这种。
2、reduce可以用来求和以及求平均
3、filter是过滤器
4、forEach可用来循环。
map例子:
<script> let arr=[12,5,60,89,100,99,33,55]; let res=arr.map(item=>item>=60?'及格':'不及格'); alert(res); </script>
reduce例子:
<script> let score = [19, 88, 99, 55, 33] let result = score.reduce((tmp, item, index) => { if (index < score.length - 1) { return tmp + item } else { return (tmp + item) / score.length } }) alert(score) alert(result) </script>
filter例子:
<!--能对3进行整除的展示,否则不显示--> <script> let arr = [12, 5, 8, 99, 27, 36] let result = arr.filter(item => item % 3 == 0) alert(result) </script>
forEach例子:
<script> let arr = [12, 5, 8, 99, 27, 36] let result = arr.forEach((item, index) => { alert(index + ":" + item) }) </script>
7、字符串
字符串新增了俩个方法:startsWith和endsWith;以及新增的字符串模板(`${变量}`)
例子1:
<script> let str='abcdef'; if(str.startsWith('a')){ alert('该字符串以字母a开头'); } if(str.endsWith('f')){ alert('该字符串以字母f结束'); } </script>
例子2:
<script> let a=12; alert('此处使用字符串模板来取值:'+`${a}`); </script>
8、Promise
我理解的Promise是以同步的方式进行异步的操作。
Promise包括的方法:
(1)Promise.prototype.then()可以接收两个函数,一个是处理成功后的函数(resolve),一个是处理错误结果的函数(reject)。
(2)Promise.prototype.catch()就是用来接收 报错信息的。
(3)Promise.all()就是用来循环处理数组、对象、集合。
(4)Promise.race()只要有哪个最先结果 就出最终的结果 。而不必等到所有的操作数都得出结果。
(5)Promise.resolve()处理成功后的函数
(6)Promise.reject()处理错误结果的函数
例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <script> function createPromise(url) { return new Promise(function (resolve,reject) { $.ajax({ url, dataType:'json', success(results){ resolve(results); }, error(err){ reject(err); } }) }) } Promise.all([ createPromise('data/arr.txt'), createPromise('data/num.txt') ]).then(results=>{ alert('成功了'); let [arr,num]=results; alert(arr); alert(num); },err=>{ alert('至少一个失败了'); }) </script> </head> <body> </body> </html>
9、generator和yield
generator函数: 三种形式都可以function *函数或者function* 函数()或者是function * 函数()。并且yield既可以传参又可以返回
例子1:yield传参
<script> function *show(num1,num2) { alert(`${num1},${num2}`); alert('a'); let c=yield alert('b'); alert(c); } let genObj=show(11,22); genObj.next(); genObj.next(12); </script>
例子2:yield返回
<script> function * show() { alert('a'); yield 12; alert('b'); return 11111; } let genObj=show(); let res1=genObj.next(); console.log(res1); let res2=genObj.next(); console.log(res2); </script>