ECMAScript6 ES6 ES2015新语法总结
1、let定义变量:不能重复定义、作用域
2、const:定义常量
3、解构赋值:let [a,b,c] = [1,2,3];// a=1 b=2 c=3
4、箭头函数:
function fn(a,b){
return a + b;
}
//等价于
let fn = (a,b) => {
return a + b;
}
//且等价于(若函数中只有一条return语句时)
let fn = (a,b) => a + b;
//若函数只有一个参数a
let fn = a => a + b;
5、数组新方法:
map映射:
let arr = [18,26,60,58,95,84];
let arr2 = arr.map(item => item>=60);/*[false, false, true, false, true, true]*/
6、promise的用法: 对于异步回调方法, 如果异步过多, 并且后面的异步要依赖前面异步的执行结果, 那多会有多层嵌套, 代码维护比较复杂, promise就是专门为了解决这种场景。实例如下:
promseTest:function(){
let p = new Promise(function(resolve,reject){
setTimeout(function(){
console.log("第一个异步执行完成");
resolve('第一个异步结果');
},2000);
});
return p;
},
promseTest1:function(){
let p = new Promise(function(resolve,reject){
setTimeout(function(){
console.log("第二个异步执行完成");
resolve('第二个异步结果');
},2000);
});
return p;
},
onLoad: function (options) {
let _this = this;
this.promseTest().then(function(data){
console.log(data);//第一个异步结果
return _this.promseTest1();//返回另外一个异步方法,在下一个then中执行
}).then(function(data){
console.log(data);//第二个异步结果
});
},
7、 Set 数据类型: 类似数组, 成员不重复
let set = new Set([1,2,2,3,4]); //1 2 3 4
set.add(5); set.has(1); set.delete(1);
console.log(set.size); //4
//数组去重
let set = new Set([1,2,2,3,4]); //数组转Set(自动去重)
let arrUnique = Array.form(set); //Set转数组
或 let arrUnique = [...new Set([1,2,2,3,4])]; //数组一步去重
//set集合操作
let a = new Set([1,2,3]);
let a = new Set([4,3,2]);
//Set求并集
let unique = new Set([...a,...b]); //Set(4) {1, 2, 3, 4}
//Set求交集
let com = new Set([...a].filter(x => b.has(x))); //Set(2) {2, 3}
//Set求差集
let diff = new Set([...a].filter(x => !b.has(x))); //Set(1) {1} a相对于了的差集
8、 Map 可以使用任何数据类型做为key的object
const m = new Map();
const o = {p:'hello world'};
m.set(o,"content");
console.log(m);
//数组定义map
const map = new Map([
['name', '张三'],
['title', 'Author']
]);
//相关属性
m.size; m.get('a'); m.set('a','a'); m.has('a'); m.delete('a'); m.clear();
let arr = [...map]; //Mmap 转数组 //也可以转object json
ECMAScript6 ES6 ES2015新语法总结的更多相关文章
- 总结常见的ES6新语法特性
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
- 总结常见的ES6新语法特性。
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
- ES6 | ES6新语法 在编码实践中的应用
本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的.易于阅读和维护的代码. 多家公司和组织已经公开了它们的风格规范,本文的内容主要参考了 ...
- 如何在webpack开发中利用vue框架使用ES6中提供的新语法
在webpack中开发,会遇到一大推问题,特别是babel6升级到babel7,要跟新一大推插件,而对于安装babel的功能就是在webpack开发中,vue中能够是用ES6的新特性: 例如ES6中的 ...
- ECMAscript6(ES6)新特性语法总结(一)
ES6/ES2015,,在ES5的基础上扩展了很多新的功能,在使用的时候要慎重,因为有一部分js代码在部分浏览器是不兼容的,但是所有写在服务器端的代码基本上都支持ES6的写法. 新特性: 一.开启严格 ...
- ES6新语法
ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联合会)的第39号技术专家委 ...
- ES6新语法的介绍
对于ES6新语法,阮一峰有一篇文章介绍的挺详细 http://es6.ruanyifeng.com/#docs/destructuring
- ES6新语法之let关键字;有别于传统关键字var的使用
ES6新语法于2015年发布:而我这个前端小白在17年才接触到.惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好.不过既然人家ES6已经出来了,还是要跟上技术的潮 ...
- ES6的新特性(19)——Module 的语法
Module 的语法 概述 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的re ...
随机推荐
- JS for in / foreach / for of 超简单对照解释
for in 可以遍历数组/对象/字符串/enumerable对象,得到的是索引,遍历对象时可以写这样 obj[index] 代表对象当前的属性foreach 只能遍历数组,不能遍历字符串.对象for ...
- CSS3 基础学习
CSS基础学习 当前进度[P78] 参考资料 视频链接:https://www.bilibili.com/video/BV14J4114768 菜鸟教程:https://www.runoob.com/ ...
- 4. 利用MySQL Shell安装部署MGR集群 | 深入浅出MGR
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 目录 1. 安装准备 2. 利用MySQL Shell构建MGR集群 3. MySQL Shell接管现存的MGR集群 4 ...
- vue中vuex实现持久化的几种方法
前提:大家都知道vuex真的数据共享是不持久的,例如登录后一刷新,state中存的token就会消失,导致你需要再次进行登录操作 在这给大家列出几种解决方案: 第一种(也是一些项目中常使用的):使用缓 ...
- mybatis 08: 返回主键值的insert操作 + 利用UUID获取字符串(了解)
返回主键值的insert操作 应用背景 图示说明 在上述业务背景下,涉及两张数据表的关联操作:用户表 + 用户积分表 传统操作:在对用户表执行完插入语句后,再次查询该用户的uid,将该uid作为外键, ...
- java-引用数组、继承、super关键字
1.引用类型数组: 1) Cell[] cells = new Cell[4]; cells[0] = new Cell(2,5); cells[1] = new Cell(2,6); cel ...
- 微服务性能分析|Pyroscope 集合 Spring Cloud Pig 的实践分享
随着微服务体系在生产环境落地,也会伴随着一些问题出现,比如流量过大造成某个微服务应用程序的性能瓶颈.CPU利用率高.或内存泄漏等问题.要找到问题的根本原因,我们通常都会通过日志.进程再结合代码去判断根 ...
- jQuery 判断父节点下是否有子节点
查找父节点下是否有子节点有两个情况:(1)查找的是父元素的所有后代节点:(2)仅查找父元素的第一代子节点. <div id="app"> <div> < ...
- jsp获取下拉框组件的值
jsp获取下拉框组件的值 1.首先,写一个带有下拉框的前台页 1 <%@ page language="java" contentType="text/html; ...
- 1.1_selenium+Python自动化测试大纲