ES6语法糖集锦
sublime3安装Es6插件
javascriptNext,然后安装即可
JavaScriptNext - ES6 Syntax()高亮插件
-----------------------------------------------------------------
let、const命令 与var声明
let块级作用域
let不允许在代码块内重复声明一个变量
function aa(){
let a=3
{
let a=5 //子作用域
}
}
使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象;
使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升;
使用const声明的是常量,在后面出现的代码中不能再修改该常量的值。
-----------------------------------------------------------------
数组结构:
let [a,b,c,d] = ["aa","bb","23","44"]
对象解构
函数参数解构
-----------------------------------------------------------------
Symbol(值类型数据,唯一的)
let a = 3
let b = 3
alert(a=b) //true
-------------------
let a = Symbol(3)
let b = Symbol(3)
alert(a=b)//false
-----------------------------------------------------------------
Set
var set = new Set([1,2,3,4,5,2,8,4])//自动合并了重复值
for(var key in set){
console.log(key) //1,2,3,4,5,8
}
---------------------------------
let arr = [1,2,3,4,2,86,4]
arr.map(function(item){
set add(elem) //添加元素
})
map---->Es5语法
-----------------------------------------------------------------
WeakSet(与Set类似唯一区别就是成员只能是对象)
var weakset = new WeakSet();
-----------------------------------------------------------------
Map遍历 键可以是各种类型
let obj1 = {};
let obj2 = {};
let obj = new Object();
obj[obj1] = 33;
obj[obj2] = 66;
for(let key in obj){
console.log(key) //只循环出一个object
}
---------------------------------------
var mapData = new Map();
var obj1 = {};
var obj2 = {};
mapData.set(obj1,"22") //添加新元素
mapData.set(obj2,"22") //添加新元素
console.log(mapData.get("obj1")) //获取键
console.log(mapData.has("obj1")) //判断是否含有键
console.log(mapData.delete("obj1")) //删除键
mapData.clear() //清空
-----------------------------------------------------------------
WeakMap不可遍历没有size属性
var wm = new WeakMap();
var obj = new Object();
console.log(wm.get(obj)) //undefined
console.log(wm.has(obj)) //false
-----------------------------------------------------------------
Itrator遍历器
let arr = ["bob","pop","wow"];
let op = arr[Symbol.iterator]();
console.log(op.next());
console.log([...arr]) //依旧是数组
-----------------------------------------------------------------
Generator函数;
1.function的关键字和函数名称之间有个*号
2.函数体内可以用yield语句
3.函数调用后不会立即执行,返回的是一个遍历器对象;
function Es.(){
function *aa(){
yield"中国";
yield"美工";
yield"技术";
return "end";
}
let a = aa();
console.log(a.netx());
}
-----------------------------------------------------------------
Promise对象
三种状态:Pending(等待)、resolve(成功)、reject(失败)
异步操作解决方案,比原有的回调函数等方式更为合理
该对象改变状态只有两种可能Pending转变为resolve,Pending转变为reject;
function aa(){
function bb(){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log(123456)
},1000)
})
}
}
-----------------------------------------------------------------
async函数:(ES7)
await Promise.reject("出错了") //抛出例外,直接到例外处理处
var asyncFun = async function(){
var a1 = await function(){
setTimeout(function(){
console.log(111)
},3000)
}();
var a2 = await function(){
setTimeout(function(){
console.log(222)
},1000)
}();
console.log("执行完毕")
}
asyncFun();//先打印222再打印111;
---------------------------------
let asyncFun1 = async function(){
console.log("aaa")
return "第一个"
}
let asyncFun2 = async function(data){
console.log("bbb"+data)
return "第二个"
}
asyncFun1().then(asyncFun2).then(function(data){
console.log("这是最后执行"+data)
})
-----------------------------------------------------------------
箭头函数:(省去function关键字内部没有prototype和构造器constructor,不支持new操作,this指向会改变)
Es5写法
function a(a=6){
return a*a
}
Es6写法
let fn = (a=6)=>a*a;
console.log(fn(9));//81
Es5函数内部this不会改变,异步操作this也会改变如(async和setTimeout)
-----------------------------------------------------------------
class类(方法没有重载也就是说不可以覆盖)
class Person{
constructor(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
getName(){
console.log(this.name)
}
}
let person = new Person("bob",18,"男");
person.getName();
ES6语法糖集锦的更多相关文章
- ES6 语法糖
重新认识ES6中的语法糖:https://segmentfault.com/a/1190000010159725
- es6语法糖
ES6为一些已有的功能提供了非破坏性更新,这类新语法能做的事情其实用ES5也可以做,只是会稍微复杂一些,称之为语法糖. 对象属性的简洁表示法 声明的对象中包含若干属性,其属性值由变量表示,且变量名和属 ...
- 常用处理数据用法es6 语法糖总结
一 循环(数组 ,集合) 1 forEach-----------可以遍历得到vaue和index const arr = ['red', 'green', 'blue'];arr.forEa ...
- ES6深入浅出-3 三个点运算 & 新版字符串-1.函数与对象的语法糖
主要讲的内容 时间充裕的话就讲,模板字面量 默认参数值 首先讲es6之前,我们是怎么做的.例如我们要写一个求和的函数, 请两个参数的和,但是如果有的人就是穿一个参数呢? 那么b没有传值,b的值是多少呢 ...
- ES6语法的新特性
ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也 ...
- 详解es6 class语法糖中constructor方法和super的作用
大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中 ...
- ES6之对象的语法糖
本文介绍下ES6中对象的一些拓展功能. 这三个语法糖在实际的项目开发中经常会见到.
- ES6 class 语法糖不能直接定义原型上的属性
今天注意到两个东西: 1.为了模拟面向对象,JavaScript的class语法糖屏蔽了原型的概念 class A{ a = 1 // 注意!!这里定义的不是在prototype上的属性,而是给实 ...
- 把JavaScript代码改成ES6语法不完全指南
目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...
随机推荐
- qemu -net tap配置上网
1 该选项的用途 让qemu所在的宿主机器的tap网络接口和qemu的vlan n连接起来,从而进一步配置宿主机后,可以让qemu里面的操作系统可以通过vlan n里面的网卡上网. 2 真个系统的架构 ...
- Form content types
Forms in HTML documents https://www.w3.org/TR/html401/interact/forms.html#h-17.13.4 17.13.4 Form con ...
- 什么是 XML Schema?
XML Schema 的作用是定义 XML 文档的合法构建模块,类似 DTD. XML Schema: 定义可出现在文档中的元素 定义可出现在文档中的属性 定义哪个元素是子元素 定义子元素的次序 定义 ...
- spark安装和登陆配置
1.下载安装包: http://www.igniterealtime.org/downloads/index.jsp 2.点击安装后打开登陆界面: 2.点击“高级”,设置相关配置: 3.点击“登陆”后 ...
- 洛谷 P1082 同余方程 —— exgcd
题目:https://www.luogu.org/problemnew/show/P1082 用 exgcd 即可. 代码如下: #include<iostream> #include&l ...
- hdu4352(数位DP + LIS(nlogn))
题目描述: 给定一个区间中,将区间的每一个数看成一个字符串,求这个区间内每个字符串的最大上升 子序列等于k的个数. 可以采用nlogn的LIS(用一个C数组记录长度为i的最大上升子序列的结尾最小值), ...
- Logistic回归 线性回归(转)
来源: http://www.cnblogs.com/jerrylead 1 摘要 本报告是在学习斯坦福大学机器学习课程前四节加上配套的讲义后的总结与认识.前四节主要讲述了回归问题,回归属于有监督学习 ...
- A+B Problem——经典中的经典
A+B Problem,这道题,吸收了天地的精华,是当之无愧的经典中的经典中的经典.自古以来OIer都会经过它的历练(这不是白说吗?),下面就有我herobrine来讲讲这道题的各种做法. 好吧,同志 ...
- 又一篇Centos7下的asp.net core部署教程
历程2个多月的学习,我终于从PHP转.Net开发了. 从壹开始前后端分离[ .NETCore2.1 +Vue 2 +AOP+DI]框架 感谢老张的博客,我对asp.net core入门主要就是靠他的博 ...
- Mysql根据数据库的时间字段到点更新另外的状态。
转载:https://blog.csdn.net/xingfuzhijianxia/article/details/53727820 需求如下: 添加一条提醒,被提醒人在提醒时间未到达的时候收不到此提 ...