ES6,ES7重点介绍
1. 字符串模板
<!--旧版拼接字符串-->
var str = '我是时间:'+new Date();
<!--新版拼接字符串-->
let str = `我是时间${new Date()}`;
2. 对象简写
<!--旧版对象写法-->
var name = "liming";
var age = 20;
var person = {name:name, age:age};
<!--新版对象写法-->
let name = "liming";
let age = 20;
let person = {name, age};
3. 箭头函数
<!--旧版定时器写法-->
setTimeout(function(res){
alert(res)
},50)
采用箭头函数后的写法
setTimeout((res) => {
alert(res)
})
4. 模块化
export 导出模块
import 导入模块
5. 解构
<!--解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值-->
let arr = ['string', 2, 3];
//传统方式
let a = arr[0],
b = arr[1],
c = arr[2];
//解构赋值,是不是简洁很多?
let [a, b, c] = arr;
console.log(a);<!--string-->
console.log(b);<!--2-->
console.log(c);<!--3-->
<!--嵌套数组解构:-->
let arr = [[1, 2, [3, 4]], 5, 6];
let [[d, e, [f, g]], h, i] = arr;
console.log(d);<!--1-->
console.log(f);<!--3-->
console.log(i);<!--6-->
<!--函数传参解构:-->
var arr = ['string', 2, 3]
function fn1([a, b, c]) {
console.log(a);
console.log(b);
console.log(c);
}
fn1(arr);
<!--string-->
<!--2-->
<!--3-->
<!--还有好多结构方法... 这里就不详细说了-->
6. Promise
<!--为了优化异步的回调地域,也便于复用和阅读,支持链式调用-->
new Promise((resolve,reject) => {
<!--这里写逻辑来判断走resolve(走的then分支)或者reject(走的catch分支,抛出异常)-->
})
.then((res) =>{})
.catch((err) =>{})
<!--es7还添加了一个async await语法糖,来解决回调地域-->
async await 讲解
<!--这里是新加的一些最常用字符串方法-->
1. includes
<!--查看是否包含字符串,直接返回布尔值,类似于indexOf().-->
<!--includes()比indexOf()的优势在于,indexOf()的返回结果不是布尔值,须与-1对比,不够直观。-->
let s = 'Hello world!';
s.includes('o') // true
2. repeat()
<!--可能在mvc框架中经常看到这个方法-->
<!--表示重复多少次。-->
<!--如果参数是正小数,会取整。-->
<!--如果参数是负数,会报错。-->
<!--如果参数是0,会得到空串。-->
<!--如果参数是字符串、布尔型或其他类型,会先换算成整数-->
<!--这里是最新添加的一些数组方法-->
1.最常见的循环
<!--forEach()
有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组.-->
let array = [1, 2, 3, 4];
array.forEach((item, index, arr) => {
console.log(item);
});
<!--map()-->
<!--map()的参数和forEach()是一样的-->
<!--map()不会改变原数组,-->
let array = [1, 2, 3, 4 ,5];
let temp = array.map((item, index, arr) => {
return item + 1;
});
<!--如果map循环里不return一个值的话,效果跟forEach()完全一样;-->
<!--如果map循环里return值的话会返回经过处理的新数组-->
<!--下面可以看到批量处理数据是非常方便快捷的-->
let array = [{name:'liming'},{name:'zhangsan'},{name:'wangwu'}]
let newArray = array.map((item, index, arr) => {
return {'姓名':`${item.name}***`}
})
console.log(newArray);<!-- [{'姓名':'liming***'},{'姓名':'zhangsan***'},{'姓名':'wangwu***'}]-->
<!--some()-->
<!--遍历数组的每一项, 然后根据循环体内的条件去判断, 只要有一个是true, 就会停止循环.-->
<!--应用场景比如判断学生成绩有没有不及格的,有的话循环停止,节省时间-->
let array = [100, 25, 35, 98, 67];
array.some((item, index, arr) => {
return item < 60 ;
});
<!--到第二次即能判断出来结果,循环两次即结束-->
2.filter
<!--类似于map-->
let array = [1, 2, 3, 4, 5];
let temp = array.filter((item, index, arr) => {
return item > 3;
});
console.log(temp);
console.log(array);
3.reduce
<!--reduce(),这个东西用的好的话可以省很多事,这个为一个累加器,类似于之前封装的回调函数,不明白的话看看下面写法就懂了-->
<!--它有4个参数, 按顺序分别是 上一次的值, 当前的值, 当前值的索引, 数组-->
let array = [1, 2, 3, 4, 5];
let total = array.reduce((a, b) => {
return a + b;
});
console.log(total); <!-- 15 -->
4. 还有类似于array.keys(),array.values()等就不多说了
ES6,ES7重点介绍的更多相关文章
- webpack 兼容低版本浏览器,转换ES6 ES7语法
ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...
- 消息队列介绍、RabbitMQ&Redis的重点介绍与简单应用
消息队列介绍.RabbitMQ&Redis的重点介绍与简单应用 消息队列介绍.RabbitMQ.Redis 一.什么是消息队列 这个概念我们百度Google能查到一大堆文章,所以我就通俗的讲下 ...
- node mysql es6/es7改造
本文js代码采取了ES6/ES7的写法,而不是commonJs的写法.支持一波JS的新语法.node版本的mysql驱动,通过npm i mysql安装.官网地址:https://github.com ...
- jmockit使用总结-MockUp重点介绍
公司对开发人员的单元测试要求比较高,要求分支覆盖率.行覆盖率等要达到60%以上等等.项目中已经集成了jmockit这个功能强大的mock框架,学会使用这个框架势在必行.从第一次写一点不会,到完全可以应 ...
- es7重点笔记
1,函数绑定运算符,用来取代call,apply,bind调用,写法:并排的双冒号(::),左边是对象,右边是函数 foo :: bar; // 等同于bar.bind(foo); 双冒号返回的还是原 ...
- es6,es7,es8
概述 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMAScript-262. ECMAScript 标 ...
- es6/es7/es8常用新特性总结(超实用)
本文标题有误导性,因为我其实想写node8的新特性,说实话一下子从node v1.x跳跃到node 8.x+ 真有点受宠若惊的感觉.一直觉得node 数组. 对象.序列等的处理没有python方便,因 ...
- .NET:“事务、并发、并发问题、事务隔离级别、锁”小议,重点介绍:“事务隔离级别"如何影响 “锁”?
备注 我们知道事务的重要性,我们同样知道系统会出现并发,而且,一直在准求高并发,但是多数新手(包括我自己)经常忽略并发问题(更新丢失.脏读.不可重复读.幻读),如何应对并发问题呢?和线程并发控制一样, ...
- JavaScript ES6新特性介绍
介绍 ES6:ECMScript6 首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言: JavaScript ...
随机推荐
- DOM修改元素的方法总结
今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式).修改内容的方法----3种:elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段:elem.textCo ...
- 【Leetcode 堆、快速选择、Top-K问题 BFPRT】有序矩阵中第K小的元素(378)
题目 给定一个 n x n 矩阵,其中每行和每列元素均按升序排序,找到矩阵中第k小的元素. 请注意,它是排序后的第k小元素,而不是第k个元素. 示例: matrix = [ [ 1, 5, 9], [ ...
- DAY1-作业
Python-day1-------> 本节内容: Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据 ...
- pl/sql基础知识—pl/sql块介绍
n 介绍 块(block)是pl/sql的基本成型单元,编写pl/sql程序实际上就是编写pl/sql块.要完成相对简单的应用功能,可能只需要编写一个pl/sql块:但是如果要想实现复杂的功能,可能 ...
- QT 引用之前项目模板导致计算速度严重下降
最近做RRT规划算法,在新建工程中测试时,每一个周期大概花费20MS,但是当我把算法移植到之前写的工程模板中时,计算效率相当低,变为500毫秒.期初是以为代码有问题,然后就逐句查找,发现代码并没有问题 ...
- Linux终端常用命令(一)
基本操作 展示全部的环境变量 export 搜索可执行文件.源文件 whereis ls 在环境变量中搜索可执行文件,并打印完整路径 which ls 展示用户命令,系统调用.库函数等 whatis ...
- ACM:树的变换,依据表达式建立表达式树
题目:输入一个表达式.建立一个表达式树. 分析:找到最后计算的运算符(它是整棵表达式树的根),然后递归处理! 在代码中.仅仅有当p==0的时候.才考虑这个运算符,由于括号中的运 ...
- 通过反射 修改访问和修改属性的值 Day25
package com.sxt.field; /* * 通过反射拿到属性值 * 修改public属性值 * 修改private属性值 * 缺点:可读性差:代码复杂 * 优点:灵活:可以访问修改priv ...
- Java SDUT-2562_相似三角形
相似三角形 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 给出两个三角形的三条边,判断是否相似. Input 多组数据 ...
- 巨蟒python全栈开发-第11阶段 ansible_project7
今日大纲 1.发布详情页面 2.前端页面获取分支信息 3.前端界面获取commit信息与tag信息 4.获取线上最新版本 5.发布之实现nginx下线 6.发布之实现server发布 7.前端页面按钮 ...