ES6新增常见特性
一:声明属性let const
var let const 区别
1.var声明变量会发生变量提升,let、const不会发生变量提升
2.var允许重复声明变量,let不可以
3.const声明变量不可以被改变
二:字符串模板
用反引号创建字符串,其中可用${'变量'}
console.log(`your name is ${name}`);
三:解构赋值对数组和对象的优化
四:箭头函数
与普通函数的区别
1、书写上用=>代替了function
2、普通函数的this指向window 而ES6箭头函数里面的this指向定义时的那个对象 而不是运行时的那个对象
//普通函数
var test = function(x){
return x+2;
}
使用箭头函数:
var test = x=>x+2;
五:新增了class
ES6中添加了对类的支持,引入了class关键字
以前编写一个构造函数(类)
function Pad(color){
this.color = color;
}
现在的写法跟Java更接近了
class Iphone{
constructor(color, size){
this.color = color;
this.size = size;
}
playgame(){
//.............
}
toString(){
return `这台手机的颜色是${this.color} 屏幕大小是${this.size}`;
}
}
我们定义了一个类,名字叫Iphone
通过类生成一个实例:
var iphone = new Iphone("白色", 5);
其中constructor被称之为构造方法,在我们new 一个对象的时候,自动被调用
不过本质上,JS依然使用了原型来实现,也就是说,这不过是一个新的写法而已 跟以前的构造函数没有区别。
要注意的是,使用了class来定义类,必须先定义再使用
六:ES6中的set方法
一般用于数组去重
var arr = [1,2,3,3,4,5];
var newarr = new Array.from(set arr)
console.log(new arr)//[1,2,3,4,5]
七:promise用来解决异步问题
1、什么是promise?
异步操作的同步代码
2、promise的基本使用
通过new promise创建一个promise对象,里面有一个参数,参数是一个回调函数,回调函数中有2个参数,resolve,reject resolve()当
异步执行成功的时候调用的方法,reject()当异步失败的时候调用的方法。
除此之外promise有一个then方法,当成功的时候执行第一个回调函数,当失败的时候执行第二个回调函数。第二个回调函数也可以通过
promise对象.catch调用
3、Promise.all():当所有的异步代码都执行完毕以后才会执行.then中的操作
4、Promise.race():只要有一个promise执行完毕后就会执行.then操作
如何实现多个异步同步执行
var p1 = new Promise(function(resolve,reject){
setTimeout(function(){
console.log('1');
resolve()
},3000)
})
function p2(){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log("2");
resolve();
},2000)
})
}
function p3(){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log("3");
resolve();
},1000)
})
}
function p4(){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log("4");
resolve();
},500)
})
}
p1.then(function(){
return p2()
})
.then(function(){
return p3();
})
.then(function(){
return p4();
})
八:ES6新增的Set、Map方法
set:
set是ES6提供的一种新的数据结构,类似于数组,但是成员的值是唯一的没有重复的,接受的参数是一个数组方法有:
add():添加
delete():删除
size:长度
has():查找
clear:清除所有
map:
map类似于对象,也是键值对的集合, 但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键方法有:
set():设置
get():获取
delete():删除
has():查找
clear():清除所有
九:for ...of...
for of 和for in区别
for in 可以用来遍历数组,但是会有以下几个问题
1.index索引为字符串型数字,不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性,例如下面例子上的原型方法method和name属性都会被遍历出来
Array.prototype.method = function(){
console.log(this.length)
}
var myArray = [1,2,3,4,5]
myArray.name = "数组"
for (var key in myArray) {
console.log(key)
}
输出结果:
如果我们不想要method和name呢,这样的话我们可以使用ES6的for of
十:symbol函数
Symbol函数会生成一个唯一的值
可以理解为Symbol类型跟字符串是接近的
但每次生成唯一的值,也就是每次都不相等,至于它等于多少,并不重要
ES6新增常见特性的更多相关文章
- ES6新增特性
ES6: ECMA 第六次改版 块级作用域: 凡是被{ }包裹住的代码都是块级作用域,除了对象 特点:会造成一个暂时性死区 新增声明变量的两种方式: let: a. ...
- ES6常用新特性
https://segmentfault.com/a/1190000011976770?share_user=1030000010776722 该文章为转载文章!仅个人喜好收藏文章! 1.前言 前几天 ...
- ES6的新特性(8)——数组的扩展
数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...
- ES6 && ECMAScript2015 新特性
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES201 ...
- 浅谈ES6新增数据类型:Symbol
面试中喜闻乐见的问题就是问我们的ES6新增了哪些个新特性 这篇文章一起学习一下新增的数据类型:Symbol JS的原始数据类型:6种Boolean,String,Undefined,NULL,Numb ...
- ES6常用七大特性
ES6可谓是对JS语言的一个颠覆性改变,增加了Module改善JS一直被诟病的模块化.Promise解决异步函数的回调地狱.Class的面相对象编程... 在学习ES6的过程中,大家或多或少都有看过阮 ...
- ES6的新特性(13)——Symbol
Symbol 概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突. ...
- ES6的新特性(9)——对象的扩展
对象的扩展 属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // {f ...
- ES6的新特性(2)——let 与 const 增强变量声明
let 与 const 增强变量声明 ES6 新增了let命令,用来声明局部变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 先看个var的常见 ...
随机推荐
- 记基于docker+gunicorn部署sanic项目遇到的很多很多坑
前言: 最近有个项目需要上线,是python中sanic网络异步框架写的,并且要求使用docker+nginx来部署项目实现负载均衡,于是乎百度了sanic项目部署,基本上都是基于docker+gun ...
- Freemarker提供了3种加载模板目录的方法
Freemarker提供了3种加载模板目录的方法 原创 2016年08月24日 14:50:13 标签: freemarker / Configuration 8197 Freemarker提供了3种 ...
- 《Head First 设计模式》笔记
第一章 策略模式 00设计原则:找出应用中可能需要变化之处,把它们独立出来,不要和那些不需要变化的代码放在一起. 把会变化的部分取出并封装起来,好让其它部分不会受到影响.结果如何?代码变化引起的不经意 ...
- 《Tomcat和JVM的性能调优你真的学会了吗?》总结篇
Tomcat性能调优: 找到Tomcat根目录下的conf目录,修改server.xml文件的内容.对于这部分的调优,我所了解到的就是无非设置一下Tomcat服务器的最大并发数和Tomcat初始化时创 ...
- alter add命令用来增加表的字段
alter add命令格式:alter table 表名 add字段 类型 其他; 例如,在表MyClass中添加了一个字段passtest,类型为int(4),默认值为0: mysql> al ...
- unity_小功能实现(碰撞检测)
1.触发器Trigger:勾选IsTrigger属性 //当player刚进入触发区域的时刻发生触发检测,比如在靠近门的某个区域门一直处于开着状态 void OnTriggerEnter(Collid ...
- React之react-redux
react-redux相关概念及设计思想介绍 1.react-redux 将所有组件分为两大类 UI组件(负责UI的呈现) 和 容器组件(负责管理数据和逻辑). 2.UI组件特点 只负责UI的呈现,不 ...
- 从强转 byte 说起
折腾的心,颤抖的手,只因在 main 函数中执行了一次 int 强转 byte 的操作,输出结果太出所料,于是入坑,钻研良久,遂有此篇. 我们都知道,Java中有8中基本数据类型,每种类型都有取值范围 ...
- ZAO 换脸不安全?用 python 轻松实现 AI
最近两天一款名为 「ZAO」 的 App 刷爆了朋友圈,它的主打功能是 AI 换脸,宣称「只需一张照片,就能出演天下好戏」 : 现实中不能实现当明星的梦,在这个 App 里你可以,想演谁演谁.新鲜.好 ...
- JavaScript 数据结构与算法之美 - 归并排序、快速排序、希尔排序、堆排序
1. 前言 算法为王. 想学好前端,先练好内功,只有内功深厚者,前端之路才会走得更远. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScript ,旨在入门数据结构与算 ...