关于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或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...
随机推荐
- InteliJ Shortcuts
Open your browser with documentation for the element at the editor's caret Press Shift+F1 (View | Ex ...
- 简单Java类与XML之间的转换
需要的jar包:xmlpull_1_0_5.jar,xstream-1.4.1.jar) 1.工具类XstreamUtil package com.learn.util; import com.tho ...
- Idea开发环境中搭建Maven并且使用Maven打包部署程序
1.配置Maven的环境变量 a.首先我们去maven官网下载Maven程序,解压到安装目录,如图所示: b.配置M2_HOME的环境变量,然后将该变量添加到Path中 备注:必须要有JAVA_HOM ...
- jQuery弹出窗口浏览图片
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
- ajax大全
简介 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 传统的web应用简单的操作需要加载全局 ...
- nth-child和:nth-of-type的区别
:nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的.也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele: ...
- 如何使用CSS绘制一个响应式的矩形
背景: 最近因为需要用到绘制类似九宫格的需求,所以研究了一下响应式矩形的实现方案. 有如下几种方案: 使用js来设置元素的高度 使用vw单位 div {width: 50vw; height: 50 ...
- css判断不同分辨率显示不同宽度布局实现自适应宽度
一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...
- Android开发1:基本UI界面设计——布局和组件
前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...