ES6初步学习
2016-10-11 09:08
106 查看
ES6初步学习
在ES5里只有全局作用域和函数作用域的区分,会造成一些定义的内容被覆盖掉 就像for循环定义事件这种情况会出现
var name="output"; var a=2; if(a>1){ var name="input"; console.log(name); } console.log(name);
ES6 let/const
let 起到了一个块级作用域的作用,再出了所在{}后在使用let所定义的东西就会失效
let name="output"; let a=2; if(a>1){ let name="input"; console.log(name); } console.log(name); 利用let可以解决循环取值的问题 for(let i=0;i<6;i++){ document.getElementsByTagName("li")[i].onclick=function(){ console.log(i); } } console.log(i);//报错——因为出了块级作用域,所以就不管用了。
const 用来定义的变量不可更改
const i=5; i="s"; console.log(i); const有一个很好的应用场景,就是当我们引用第三方库的时声明的变量,用const来声明可以避免未来不小心重命名而导致出现bug:
ES6中还引入了类的概念,这样面向对象的实现变得也更加容易了
class 创建一个类
class Animal{ constructor(){//构造函数 this.type="amimal" } says(say){ console.log(this.type+ "says" +say); } } let animal=new Animal(); animal.says('hello'); class Cat extends Animal{//extends 关键字代表继承, constructor(){ super();//!子类创建必有!super指代父类的实例(this对象) ,因为子类没有自己的this对象,二是继承父类的this.——不调用则会显示 this is not defined 。 this.type="cat"; } } let cat=new Cat(); cat.says("!miao!miao");
function函数运用
函数作为最常用的在这里被简化为 箭头函数 =>
var a=function(one){ return one++; }//ES5 let b=one=>{one++}; 当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制, 实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。
destructuring解构赋值
自动解析数组或对象中的值,比如若一个函数返回多个值,常规是返回一个
/*__ES5__*/ var send="pen"; var receive="paper"; var thing={send:send,receive:receive}; console.log(thing);//Object {send: "pen", receive: "paper"} /*____ES6____*/ let senda="pen"; let receivea="paper"; let Thing={senda,receivea}; console.log(Thing)//Object {send: "pen", receive: ""paper"}效果一样,但是却减少了代码量。
default 默认值
传统指定默认参数的方式 function sayHello(name){ var name=name||'dude'; console.log('hello'+name); }
字符串模板
字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}
运用ES6的默认参数 function saysHello2(name='dude'){ console.log('hello $ {name}'); } sayHello();//Hello dude sayHello('wayou');//Hello wayou sayHello2();//Hello dude sayHello2('wayou');//Hello wayou
本文参考过其他文章,进行学习
相关文章推荐
- ES6 初步学习
- Mocha ES6学习记录 - 1 - 环境配置和初步执行测试
- 大型机学习之初步了解-大型机的现状与前景
- JAVA多线程学习初步经典实例
- PHP学习第一节----for循环的应用及对date函数的初步使用
- XML学习笔记---初步探索XML(转)
- Struts初步知识-JSP实例学习教程
- 初步学习HTML-标记
- httpClient学习的初步认识
- c#通过Graphics处理图片以及画图(初步学习1)
- 设计模式学习(六)结构型模式初步了解
- 多线程学习初步
- 初步学习petshop
- 09月12日学习杂记(MYSQL初步2)
- 网站制作初步 第二步部分 学习HTML语言
- 初步学习Swing
- 多线程学习初步
- 初步学习petshop
- 大型机学习之初步了解-什么是大型机
- Struts初步知识-JSP实例学习教程