ES6初步学习
来源:互联网 发布:javascript初级教程 编辑:程序博客网 时间:2024/04/30 08:05
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
本文参考过其他文章,进行学习
1 0
- ES6初步学习
- ES6 初步学习
- 初步探究ES6之生成器
- 初步探究ES6之解构
- ES6学习
- ES6学习
- ES6学习
- ES6学习
- es6学习
- es6学习
- es6学习
- es6开发:ES6学习笔记
- ES6 的初步了解(一)
- 初步探究ES6之箭头函数
- 初步探究ES6之Symbol类型
- 初步探究ES6之Proxy代理
- 初步探究ES6之class类
- 初步探究ES6之module模块化
- 如何查看端口被占用情况
- hdu 2511 汉诺塔 X
- reactjs--实现switch按钮组件(并监听状态)
- 为Python添加环境变量
- 互联网创业其实就这24种商业模式
- ES6初步学习
- (三)freemarker模板开发 续
- C++中的namespace
- cocos2d 知识和技巧
- SPOOL
- 电路结构的触发器中,哪种触发器能构成移位寄存器?
- uboot 命令分析(一) — bootm
- 系统级别分享
- JQuery EasyUi之界面设计——通用的JavaScript(二)