ES6新特性总结
一、let const
var有缺陷:有块级作用域、能重复定义、无法限制修改。所以出来了let和const.
有块级作用域,不能重复定义
const不能修改,必须定义的时候赋值
二、解构赋值
1.左右两边结构必须一样
let [a,b]=[1,2]//对
let {c,d}=[1,2]//错
2.右边必须是个合法东西
let {a,b}={1,2}//错
3.声明和赋值不能分开
//错
let [a,b]
[a,b]=[1,2]
三、字符串扩展
1.字符串模板
let name='lizhao';
console.log(`我的名字是${name}`)//我的名字是lizhao
2.startsWith、end With
四、数组扩展
1.map 映射 一个对一个
let arr=[40,56,78,90,98];
let arr2=arr.map(item=>item<60?'不合格':'合格');
console.log(arr2);//["不合格", "不合格", "合格", "合格", "合格"]
2.reduce 汇总 一堆出来一个,index从1开始,最初始:temp=arr[0],item=arr[1],index=1。
let arr=[1,2,3,4,5,9];
let result=arr.reduce((tmp,item,index)=>{
if(index==arr.length-1){
return (tmp+item)/arr.length
}else{
return tmp+item
}
});
console.log(result);//4
3.filter 过滤器 只保留值为true的
let arr=[40,56,78,90,98];
let arr2=arr.filter(item=>item<60);
console.log(arr2);//[40, 56]
4.forEach 遍历
let arr=[40,56,78,90,98];
arr.forEach((item,index)=>{
console.log('第'+index+'个元素值为'+item)
});
//第0个元素值为40
//第1个元素值为56
//第2个元素值为78
//第3个元素值为90
//第4个元素值为98
五、函数扩展
1.默认参数
let fn=(name='lizhao')=>{
console.log(`我的名字是${name}`)//我的名字是lizhao
}
fn();
2.箭头函数
参数只有一个,()可以省
函数只有一个语句且是return ,{}可以省
保持this作用域
3.展开运算符
作用1:展开数组
let fn=(name1,name2)=>{
console.log(name1,name2)//lizhao shoushou
}
let arr=['lizhao','shoushou']
fn(...arr);
作用2:收集剩余参数(...必须是最后一个参数)
//收集剩余参数
let fn=(name1,name2,...arr)=>{
//展开数组
console.log(name1,name2,...arr)//lizhao shoushou zhangsan lisi
}
fn('lizhao','shoushou','zhangsan','lisi');
六、对象扩展
1.Object.keys()、Object.values()、Object.entries()
let obj={name:'lizhao',age:'11'}
console.log(Object.keys(obj))//["name", "age"]
console.log(Object.values(obj))//["lizhao", "11"]
console.log(Object.entries(obj))//[Array(2), Array(2)]
2.计算属性
let attr='name';
let obj={
[attr]:'lizhao'
}
console.log(obj)//{name: "lizhao"}
3.对象方法简写
key和value一样时,可以简写,方法可以简写
let obj={
name,
fn(){
...
}
}
七、类的语法糖
1.class关键字、构造器和类分开类
2.class里直接加方法
3.继承
//以前写类的方式不太好:User是构造器也是类;方法拆分到了外边
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.showName = function () {
console.log(this.name);
}
User.prototype.showAge = function () {
console.log(this.age);
}
var u1 = new User('李赵', 18)
u1.showName();
u1.showAge();
//ES6有了class关键字;使构造器和类分开类;方法不再写到类外边
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
showName() {
console.log(this.name)
}
showAge() {
console.log(this.age)
}
}
//以前继承,特别麻烦
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.showName = function () {
console.log(this.name);
}
User.prototype.showAge = function () {
console.log(this.age)
}
function VipUser(name, age, level) {
User.call(this, name, age);
this.level = level;
}
VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;
VipUser.prototype.showLevel = function () {
console.log(this.level)
}
var v1 = new VipUser('李赵vip', 18, '2')
v1.showName();
v1.showLevel();
//继承可以用extends
class VipUser extends User {
constructor(name, age, level) {
super(name, age);
this.level = level;
}
showLevel() {
console.log(this.level)
}
}
var v1 = new VipUser('李赵vip', 18, '2')
v1.showName();
v1.showLevel();
八、模块化
import ,import{},export,export default
//全部暴露,as后是别名
import * as mod from '/module'
//结构赋值
import {val1,val1} as mod from '/module'
//暴露默认接口
import val3 from '/module'
promise 解决异步
//1.创建Promise对象
let p=new Promise(function(resolve,reject){
$.ajax({
url:'data/1.txt',
dataType:'json',
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
});
//2.使用
//其实第一个参数就是resolve,第二个参数就是reject
p.then((res)=>{
console.log('成功了'+res)
},(err)=>{
console.log('失败了')
})
let p1=new Promise(function(resolve,reject){
$.ajax({
url:'data/1.txt',
dataType:'json',
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
}); let p2=new Promise(function(resolve,reject){
$.ajax({
url:'data/2.txt',
dataType:'json',
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
}); let p3=new Promise(function(resolve,reject){
$.ajax({
url:'data/3.txt',
dataType:'json',
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
}); Promise.all([p1,p2,p3]).then(arr=>{
let [r1,r2,r3]=arr;
console.log(r1);
console.log(r2);
console.log(r3);
},err(err)=>{
console.log('错了')
})
generator生成器
踹一脚走一下
function *show(){
alert('a')
yield;
alert('b')
}
let obj=show();
obj.next();//a
yield可以传参,也有返回值。
传参:
- 第一次next表示启动generator,不能传参,当希望给第一个next传参时候,可以通过给generator函数传参,从而让参数传进来;
- c的值并不是yield执行后的返回值,而是下次yield的的传参;
function *show(a,b){
console.log(a,b)//12,5
let c=yield;
console.log(c)//
}
let obj=show(12,5);
let res1=obj.next();
//参数写第二个next里
let res2=obj.next(888);
返回值
function *show(a,b){
alert('a')
yield 12;
alert('b')
return 5
}
let obj=show();
//第一阶段返回12
let res1=obj.next();//{value:12,down:false}
let res1=obj.next();//{value:5,down:true}如果后边没有yield,down的值就是ture
一般使用递归函数执行生成器里所有的步骤
function next() {
let { value, done } = gen.next();//启动
if (!done) //直到迭代完成
next()
}
next()
promise本质:等待异步操作结束
generator本质:无感的处理异步操作
async本质:官方runner
runner(function *(){
xxx
let 结果1=yield 异步操作;
xxx
let 结果2=yield 异步操作;
})
async (()=>{
alert('欢迎')
let arr=await $.ajax({url:'data/1.txt',datatype:'json'});
alert('接受到第一个数据');
let arr=await $.ajax({url:'data/1.txt',datatype:'json'});
alert('接受到第二个数据');
})();
ES6新特性总结的更多相关文章
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6新特性之模板字符串
ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串 http://www.infoq.c ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- ES6新特性:Proxy代理器
ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- 轻松学会ES6新特性之生成器
生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
随机推荐
- Unity通过世界坐标系转换到界面坐标位置
public static Vector2 WorldToCanvasPoint(Canvas canvas, Vector3 worldPos) { Vector2 pos; RectTransfo ...
- pytorch-googleNet
googleNet网络结构 输入网络: 由4个分支网络构成 第一分支: 由1x1的卷积构成 第二分支: 由1x1的卷积,3x3的卷积构成 第三分支: 由1x1的卷积, 5x5的卷积构成 第四分支: 由 ...
- 怎么让C#项目自动复制NuGet中的dll引用到输出目录?
1.从vs中关闭项目 2.用记事本打开csproj文件 3. 在<PropertyGroup> 和 </PropertyGroup>之间添加一行: <CopyLocal ...
- FullSync不支持中文文件名
FullSync,能实现多种方式.协议的目录同步软件,但不支持中文文件名.
- c语言数组类型默认值(c99)
#include <stdio.h> #include <stdlib.h> int main() { ] = {}; //每个值默认0 ; i < len; i ++) ...
- python中学习K-Means和图片压缩
python中学习K-Means和图片压缩 大家在学习python中,经常会使用到K-Means和图片压缩的,我们在此给大家分享一下K-Means和图片压缩的方法和原理,喜欢的朋友收藏一下吧. 通俗的 ...
- Java泛型(1):概述
通常而言,我们使用一种容器来存储一种类型的对象.而泛型的主要目的之一就是用来指定这个容器要持有什么类型的对象.因此,与其使用Object,我们可以暂时不指定类型. 看下面3个例子: (1) 我们有时候 ...
- —Entity Framework实例详解
Entity Framework Code First的默认行为是使用一系列约定将POCO类映射到表.然而,有时候,不能也不想遵循这些约定,那就需要重写它们.重写默认约定有两种方式:Data Anno ...
- 鸟哥私房菜基础篇:Linux 账号管理与 ACL 权限配置习题
猫宁!!! 参考:http://cn.linux.vbird.org/linux_basic/0410accountmanager.php 1-root 的 UID 与 GID 是多少?而基于这个理由 ...
- 【VS开发】CTabView多页卡界面
转载地址:http://blog.csdn.net/akof1314/article/details/5618454 目录(?)[-] Public Methods Protected Methods ...