关于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或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...
随机推荐
- VBA初试——合并
今天遇到一个任务,要把excel中的相同行合并:没有找到直接的办法(vlookup大概能做),试了试VBA挺好用 数据结构 第一.二列是描述字段,第二列元素唯一:第三到第八列是标志位 任务 合并描述字 ...
- Mac下如何查看Tomcat的版本?
Tomcat提供了一个查询自身版本号的方法,要查询Tomcat的版本号,必须知道Tomcat所在的准确目录. 例如: 所用的Tomcat所在的目录下的bin文件夹的完整路径为:/Library/Tom ...
- [转]看部电影,透透彻彻理解IoC(你没有理由再迷惑!)
之前对依赖注入的概念一直感到模糊,直到看了这篇文章:http://www.iteye.com/topic/1122835 引述: IoC(控制反转:Inverse of Control)是Spring ...
- mvc view 中 js 不反应
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery基础_4
dom对象就是jquery对象的数组组成部分jquery对象和dom对象的转化jquery对象-->dom对象$()[下标]dom对象-->jquery对象$(dom对象) jquery框 ...
- Html + Css思维导图
最近整理的一份Html和Css的思维导图,共享给初学者使用. 各个知识点的详细案例介绍,后期会分阶段依次发布,希望对大家学习html和css有帮助. 如果对文中的知识点有异议,欢迎随时拍砖! 后期也回 ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q138-Q140)
Question 138 You are designing a SharePoint 2010 application that will deploy a Web Part assembly. ...
- TabLayout和ViewPager简单实现页卡的滑动
首先需要在当前的module中的build Gradle的 dependencies中加入以下句子 compile 'com.android.support:design:23.0.1' 因为我们用到 ...
- 压缩Sqlite数据文件大小,解决数据删除后占用空间不变的问题
最近有一网站使用Sqlite数据库作为数据临时性的缓存,对多片区进行划分 Sqlite数据库文件,每天大概新增近1万的数据量,起初效率有明显的提高,但历经一个多月后数据库文件从几K也上升到了近160M ...
- 基于Windows 10平台的PM2.5检测器制作
本篇文章详细讲解了如何利用SDS011激光式PM2.5传感器.HC-06蓝牙模块和Windows 10设备完成一个简单的PM2.5检测器及其应用程序的开发.该检测器使用蓝牙完成数据输出,方便设备连接, ...