关于ES6新增的东西
查询浏览器对ES6的支持情况https://kangax.github.io/compat-table/es6/
Chrome、MS Edge、Firefox、Safari、Node和其它很多环境都已经嵌入程序以支持 JavaScript ES6 的大部分功能。
一、变量和变量的作用域
ES5:
定义变量用 var=5;
使用var来定义变量会使变量泄露到其他的代码块,并且使用var来定义变量会产生预解析,即变量的声明提前了,但是变量的初始化并没有提前,如果想使用var来声明变量,一定要在函数的顶部声明;
ES6:
定义变量加入了 let const
1》使用let来定义变量
let 会将变量提升到块顶部(而非像ES5是函数顶部)。
但是在变量声明前引用变量会造成错误。
let 是块作用域的,不可以在声明前使用。
块开始到变量生的区域:temporal dead zone;
2》const
如果不希望变量的值在发生改变,使用const声明变量。
总结:使用let和const代替var,尽量使用const来定义变量,如果变量在后续代码中需要更改变化,则使用let来声明
二、封闭空间
ES5:
(function(参数){})(传参);
ES5中封闭空间避免了污染全局环境
ES6:
为了避免污染全局环境污染不必再使用封闭空间,在局部环境中使用let来定义变量就解决了所有问题
- {
- let a=;
- }
- alert(a); //undefined
三、字符串和变量的拼接
1》单行字符串和变量的拼接
ES5:
字符串和变量的拼接:变量不加'',字符串加'',字符串和变量的拼接使用+
- eg:
- var name=jason;
- var age=;
- alert('His name is'+name+',He is'+age);
ES6:
字符串和变量的拼接,在拼接的整个作用域内加``(就是键盘1前面那个键的反引号),变量和字符串都不再加'',变量使用${变量名};
eg:
- const name=jason;
- const age=;
- alert(`His name is ${name},He is ${age}`);
2》多行字符串
在进行DOM操作的时候免不了需要进行多行字符串的操作
ES5:
eg:
- var oLi='<li>n'+
- <div>我是ES5</div>n'+
- '<p>这是我的拼接</p>n'+
- '</li>';
ES6:
- eg:
- const oLi=`<li>
- <div>我是ES6</div>
- <p>这是我的拼接</p>
- </li>`
四、解构赋值
1》数组的操作
ES5:
- var arr=[,,,,];
- var s=arr[];
- var n=arr[];
- alert(s,n);//1,5
ES6:
- const arr=[,,,,];
- const [s,,,,n]=arr;
- alert(s,n);
2》值的对调:例如冒泡排序中的数组的值的对调
ES5:
- function BubbleSort(arr){
- for(var i=;i<arr.length;i++){
- for(var j=;j<arr.length-;j++){
- if(arr[j]>arr[j+]){
- var tmp=arr[j];
- arr[j]=arr[j+];
- arr[j+]=tmp
- }
- }
- }
- return arr;
- }
ES6:
- function BubbleSort(arr){
- for(var i=;i<arr.length;i++){
- for(var j=;j<arr.length-;j++){
- if(arr[j]>arr[j+]){
- [arr[j],arr[j+]]=[arr[j+],arr[j]];
- }
- }
- }
- return arr;
- }
3》查找返回值(包含多个值的时候);
ES5:
- function obj() {
- var left=, right=, top=, bottom=;
- return { left: left, right: right, top: top, bottom: bottom };
- }
- var data = obj();
- var left = data.left;
- var bottom = data.bottom;
- console.log(left, bottom); // 1 4
ES6:
- function obj(){
- const left=, right=, top=, bottom=;
- return {left,right,top,bottom};
- }
- const {left,bottom}=obj();
- console.log(left, bottom); // 1 4
还有
ES5:
- function settings() {
- return { display: { color: 'red' }, keyboard: { layout: 'querty'} };
- }
- var tmp = settings();
- var displayColor = tmp.display.color;
- var keyboardLayout = tmp.keyboard.layout;
- console.log(displayColor, keyboardLayout); // red querty
ES6:
- function settings() {
- return { display: { color: 'red' }, keyboard: { layout: 'querty'} };
- }
- const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();
- console.log(displayColor, keyboardLayout); // red querty
五、类和面向对象
在 JavaScript 中,每个对象都有原型对象。所有 JavaScript 对象都从原型上继承方法和属性。
ES5中,属性放在构造函数(constructor)里,方法放在原型(prototype)上;
ES6中引入了类(class)来代替构造函数(constructor);
1》面向对象:ES6中引入了类(class)
ES5:
- function Person(name,age){
- this.name=name;
- this.age=age;
- }
- Person.prototype.showName=function(){
- return this.name;
- }
- var P1 = new Person('jason','');
- alert(P1.showName());//jason
ES6:
- class Person {
- constructor(name) {
- this.name = name;
- }
- showName() {
- return this.name;
- }
- }
- const P1 = new Person('jason');
- alert(P1.showName()); //jason
2》继承:提供了新的关键字 extends 和 super
ES5:
- function Person (name,age){
- this.name = name;
- this.age = age;
- }
- Person.prototype.showName = function(){
- return this.name;
- };
- Person.prototype.showAge = function(){
- return this.age;
- };
- function Worker (name,age,job){
- //属性继承
- Person.call(this,name,age);
- //Person.apply(this,arguments);
- this.job = job;
- }
- //方法继承
- Worker.prototype = new Person();
- Worker.prototype.constructor = Worker;
- Worker.prototype.showJob = function(){
- return this.job;
- };
- //
- var w1 = new Worker('jason',,'要饭的');
- alert(w1.showJob());//要饭的
ES6:
- class Person {
- constructor(name,age) {
- this.name = name;
- this.age=age;
- }
- showName() {
- return this.name;
- }
- showAge(){
- return this.age;
- }
- }
- class Worker extends Person {
- constructor(name,age,job){
- super(name,age);
- this.job=job;
- }
- showJob(){
- return this.job;
- }
- }
- const W1 = new Worker('jason',,'要饭的');
- alert(W1.showJob()); // 要饭的
转载请注明‘转载于Jason齐齐的博客http://www.cnblogs.com/jasonwang2y60/’
关于ES6新增的东西的更多相关文章
- 关于ES6新增的东西(二)
六.原生Promise 就是一个对象,用来传递异步操作的数据(消息) pending(等待.处理中)-> Resolve(完成.fullFilled) -> Rejected(拒绝.失败) ...
- ES6 新增的一些东西
一.常量 不允许重复定义 const a='HELLO' const a='world'//报错Uncaught SyntaxError: Identifier 'a' has already bee ...
- ES6新增的 Set 和 WeakSet 是什么玩意?在此揭晓
现在的章节内容会更加的紧密,如果大家看不懂可以先去看以前的文章,当然看了的忘了,也可以去看一下,这样学习后面的内容才会更加容易. 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以 ...
- es6新增
首先要说let,他是只在代码块中执行的变量,例如: { let a = 10; var b = 1;}console.log(a);//definedconsole.log(b);//1 ...
- ECMAScript简介以及es6新增语法
ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
- ES6新增的常用数组方法(forEach,map,filter,every,some)
ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...
- ES6新增对象方法的访问描述符:get(只读)、set(只写)
Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...
- 浅谈ES6新增数据类型:Symbol
面试中喜闻乐见的问题就是问我们的ES6新增了哪些个新特性 这篇文章一起学习一下新增的数据类型:Symbol JS的原始数据类型:6种Boolean,String,Undefined,NULL,Numb ...
- ES6新增的数据类型Map和Set。
Javascript的默认对象表示方式 {} ,即一组键值对. 但是Javascript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...
随机推荐
- 用Kotlin改写PHP程序是什么样的体验
学Kotlin其实要看:http://kotlinlang.org/docs/kotlin-docs.pdf 在线版是不完整的!!!少了一些章节,会有点难看懂后面的文档. 我选择了WordPress里 ...
- 在window下配置laravel开发环境
1.由于有一点php基础,所以非常想更进一步,就选择据说在国外最流行的php框架来学习了,laravel框架,官网上介绍是为艺术而生,从知乎和一些论坛上看到,laravel学起来并不简单,首先配置问题 ...
- entityframework学习笔记--002-database first
1.实体框架紧紧地和Visual Studio集成在一起,为了在你的应用程序中使用实体框架,我们增加一个ADO.NET实体数据框架到你的项目.方法如下: 右键你的项目,然后选择 ➤New Item(新 ...
- 十二种获取Spring的上下文环境ApplicationContext的方法
转载:https://my.oschina.net/u/2391658/blog/729414
- python字符串连接的N种方式
python中有很多字符串连接方式,今天在写代码,顺便总结一下: 最原始的字符串连接方式:str1 + str2 python 新字符串连接语法:str1, str2 奇怪的字符串方式:str1 st ...
- [ASP.NET Core] Getting Started
前言 本篇文章介绍如何快速建立一个ASP.NET Core应用程序,为自己留个纪录也希望能帮助到有需要的开发人员. ASP.NET Core官网 环境 建立一个ASP.NET Core应用程序,首先要 ...
- jQuery拉开关闭帷幕
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/7.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- 用原生javascript实现在页面动态显示时间
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>js ...
- View and Data API 现在支持IE11了
By Daniel Du After a long time waiting, IE11 finally supports WebGL, which enables us viewing our 3D ...
- [Android]从Launcher开始启动App流程源码分析
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5017056.html 从Launcher开始启动App流程源码 ...