特色:写法更加优雅,更加像面像对象的编程,其思想和 ES5 是一致的。
箭头函数、this
ES6中可以使用 => 作为函数表达形式,极简风格,参数+ => +函数体。
var foo = function(){return 1;};
//等价于 let foo = () => 1;
let nums = [1,2,3,5,10];
let fives = [];
nums.forEach(v => {
if (v % 5 === 0) fives.push(v);
});
console.log(fives); //[5,10]
箭头函数中的 this 指的不是window,是对象本身。 在es5中默认this指向window
function aa(){
this.bb = 1;
setTimeout(() => {
this.bb++; //this指向aa
console.log(this.bb);
},500); }
aa(); //2
声明变量的关键字var、let、const
*ES6 推荐在函数中使用 let 定义变量
*const 用来声明一个常量 (值类似值不能改变,引用类型地址不能改变)
*let 和 const 只在最近的一个块中(花括号中)有效(块级作用域)
var a = 1;
{ let a = 2;
console.log(a); //2
}
console.log(a); //1
const A = [1,2];
A.push = 3;
console.log(A); //[1,2,3]
A = 10; //Error 这里地址改变了
class:// 在ES6中使用class 实现继承,子类必须在constructor方法中调用super方法,否则新建实例时会报错。 这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
ES6中增加了类的概念,其实ES5中已经可以实现类的功能了,只不过使用Class实现可以更加清晰,更像面向对象的写法。
class Animal {
constructor(){
console.log('我是一个动物');
}
}
class Person extends Animal {
constructor(){
super();
console.log('我是一个程序员');
}
}
let aa = new Person(); //我是一个动物 //我是一个程序员 继承了父类 先执行父类再执行子类
super关键字的理解
super不仅仅是一个关键字,还可以作为函数和对象。两种情况下,用法完全不同
函数:在子类继承父类中,super作为函数调用,只能写在子类的构造函数(constructor)里面,super代表的是父类的构造函数,
难点理解
第一种情况: super作为函数调用时,代表父类的构造函数。
函数执行时supre()代表的是子类,super()里面的this指向子类的实例对象this。
注意,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于
A.prototype.constructor.call(this)
作为函数时,super()只能用在子类的构造函数之中,用在其他地方就会报错。
第二种情况: super作为对象使用时,分为在普通方法中使用和在静态方法中使用,在普通方法中,指向父类的原型对象;在静态方法中,指向父类(就是static里面的方法)。
在普通方法找中使用:super指向父类的原型,即A.prototype,可以访问到(父类)原型上的方法和属性
ES6 规定,在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例。
ES6 规定,通过super调用父类的方法时,super会绑定子类的this。
上面代码中,super.print()虽然调用的是A.prototype.print(),但是A.prototype.print()会绑定子类B的this,导致输出的是2,而不是1。也就是说,实际上执行的是super.print.call(this)。
由于绑定子类的this,所以如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。
super作为对象,用在静态方法之中,这时super将指向父类,而不是父类的原型对象。
上面代码中,super.x赋值为3,这时等同于对this.x赋值为3。而当读取super.x的时候,读的是A.prototype.x,继承的是父类中有的格式,也就是this.x=1,没有super.x=1,所以返回undefined。
解构
解构赋值是ES6中推出的一种高效、简洁的赋值方法
Rest + Spread
//rest
spread
代码中的...y, 意思就是: 从我开始不管后面有多少参数,请帮我把它们组成数组给我后面的参数
对象字面量扩展
1.可以在对象字面量里面定义原型
2.定义方法可以不用function关键字
3.直接调用父类方法
模版字符串
ES6中提供了用反引号``来创建字符串,里面可包含${…}(模板占位符)等
在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串, 在es6出来之前,我们都通常用引号(''或"")和加号(+)来拼接字符串,麻烦不说而且还容易出错,
menuUl+="<li><i class='"+menudata[i].icon+"'></i><p onclick=\"click()\">"+ menudata[i].text +"</p></li>";
传统拼接字符串的缺点:
* 不能多行拼接
* 不能在拼接中插入变量
* 不能进行简单的运算
* 不能处理引号之间的嵌套问题(单套双或者双套单,不能单套单或双套双)
* 麻烦,拼接过多一稍微写错就报错或显示不出来。
模板字符串就是使用两个反撇号把任何变量以及字符串都包含起来。
特性:
1 模板字符串可以引入变量,就是在字符串中用${变量名}
⚠️ ${} 模板占位符 在字符串中,javascript将模板占位符里的值插入其中,如果值是数组或者对象,他会调用toString()方法转化为字符串。如果是函数,则会使用标签模板。
2 模板字符串可以进行简单的运算,通过${运算}
3 模板字符串可以进行嵌套,反撇号中再可用反撇号
4 模板字符串可以多行拼接,就是字符串可以换行
⚠️ 模板字符串中所有的空格、新行、缩进,都会原样输出在生成的字符串中
5 模板字符串主要就是简单方便,和其他的引号和加号都互不干扰,就那刚才的代码就可以这样写:
这样看起来就整洁,可维护。
es6 模板字符串的优点:
1 .可以多行拼接
2 .可以在拼接中插入变量
3 .可以进行简单的运算
4 .可以互相嵌套
5 .简单,方便,整洁
标签模板(了解即可)
在模板字符串开始的反撇号前附加一个额外的标签
对于标签模板,我基本上操作的很少,这是两个例子我是在mdn上看到的,掌握了要领,以后开发就方便了。
所谓的标签模板,就是添加额外的标签,这个标签其实就是一个函数方法的调用,这个方法es6没有实行,交给了开发者去编写操作,提高了拓展性。
就拿show说:
stringArr代表的就是一个数组,${}前后方的值,打印一下stringArr就可以得知。
在标签函数的第一个参数中,存在一个特殊的属性raw ,raw是es6的一个关于字符串的方法,我们可以通过它来访问模板字符串的原始字符串,而不经过特殊字符的替换。
使用String.raw() 方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。
根据方法里写法可知,标签模板就是遍历数组,将对应的已知的值stringArr和字符串模板values的值依次打印出来。
Iterators(迭代器)
ES6 中可以通过 Symbol.iterator ()给对象设置默认的遍历器,直到状态为true退出。也就是遍历结束
Generators
ES6中非常受关注的的一个功能,能够在函数中间暂停,一次或者多次,并且之后恢复执行,在它暂停的期间允许其他代码执行,并可以用其实现异步。
Run-Stop-Run…
generator能实现好多功能,如配合for…of使用,实现异步等等,我在这里就不多说了。
for…ofes6 && for…ines5
二者区别
1.for...in循环出的是key下标 ,for...of循环出的是value
2.for of 只能用于数组遍历,for in遍历数组还可以用于对象属性的遍历
总结
一、最原始的写法for循环。
二、forEach方法。
三、for...in循环。
for...in循环可以遍历数组的键名。
for...in循环有几个缺点。
数组的键名是数字,但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
for...in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
某些情况下,for...in循环会以任意顺序遍历键名
总之,for...in循环主要是为遍历对象而设计的,不适用于遍历数组。
四、for...of循环。
for...of循环相比上面几种做法,有一些显著的优点。
下面是一个使用 break 语句,跳出for...of循环的例子。
Map + Set + WeakMap + WeakSet
Set 对象是一组不重复的值,重复的值将被忽略,值类型可以是原始类型和引用类型
eakSet是一种弱引用,同理WeakMap
Proxies
Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作。
Symbols
Symbol 是一种新的数据类型,它的值是唯一的,不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符,不过你访问不到这个标识符.
Promises
ES6 对 Promise 有了原生的支持,一个 Promise 是一个等待被异步执行的对象,当它执行完成后,其状态会变成 resolved 或者 rejected
Promises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的 deferred 对象。当你发起一个异步请求,并绑定了.when(), .done()等事件处理程序时,其实就是在应用promise模式
总之,ES6还是有很多棒棒的语法,有利于精简代码,高效开发;只不过一些低级别浏览器不支持,可以用Babel等工具把ES6转化成ES5,但是有些语法还是不够完善;
- ES6的常见语法!!
let : 声明变量 不存在变量提前 拥有局部作用域 (只要有{}出现 则只在该{}范围内生效) (而var只在函数内会产生作用域范围) 不能重复声明 const : 声明常量(常量名从规范上来将 最 ...
- freemarker(FTL)常见语法大全
[转载]freemarker(FTL)常见语法大全 FreeMarker的插值有如下两种类型:1,通用插值${expr};2,数字格式化插值:#{expr}或#{expr;format} ${boo ...
- PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议/服务器、数据库、服务器web开发、PHP简介/常见语法、PHPheader()、 PHP_POST/GET数据获取和错误处理
C/S架构 Client/Server 指客户端,服务器 架构的意思 优点:性能性高:可将一部分的计算工作放在客户端上,服务器只需处理出局即可 洁面炫酷,可使用更多系统提供的效果 缺点:更新软件需 ...
- [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法
es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 ...
- word宏(macro) 之 注意事项,常见语法和学习地方
宏:计算机科学里的宏(Macro),是一种批量处理的称谓.一般说来,宏是一种规则或模式,或称语法替换 ,用于说明某一特定输入(通常是字符串)如何根据预定义的规则转换成对应的输出(通常也是字符串).这种 ...
- python全栈开发_day14_常见语法糖,递归和匿名函数
一:常见语法糖 1)三元函数(三目函数) a=1 if 3>2 else 2 print(a) #得到返回值:1 2)列表字典推导式 lis=[("a",1),(" ...
- IOS常见语法解惑
由于工作过程中经常需要查看IOS的Objective-C代码,遂把一些常见的.有疑问的OC语法列出,方便之后会看,提升效率. Objective-C中的@语法 @interface告诉编译器,我要声明 ...
- 超好用的Markdown编辑器Typora中的常见语法
目录 下载网址 安装 一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二.语法环境 三.单选 四.字体 五.分割符 六.列表 七.图片引入 八.表格 九.超链接 下载网址 正版中 ...
- es6的常用语法
最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...
随机推荐
- WebSocket-java实现
一.所需jar 二.创建websocket.jsp(注意此页面链接,需要链接到自己的服务) <%@ page language="java" import="jav ...
- Vue踩坑系列
前言 前端开发对于vue的使用已经越来越多,它的优点就不做介绍了, 本篇是我对vue使用过程中遇到的问题中做的一些总结,帮助大家踩坑.如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家!!! ...
- 执行docker run命令时报错Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)
一.解决办法: 修改host 二.步骤如下 2.1 安装dig工具 sudo apt-get install dnsutils -y (ubuntu下的安装方法) 2.2 找到registry-1. ...
- Win10怎样显示此电脑
1.在桌面空白处右击鼠标,在出现的选项框中选择“个性化”按钮: 2.在打开的页面中选择左侧的“主题”选项,在右侧选择“桌面图标设置”: 3.在弹出的小窗口中勾选“计算机”,点击“确定”,回到桌面即有此 ...
- HTML头信息标签和标题标签
<html> <!-- 头信息的作用 1. 可以设置网页的标题. 2. 可以通知浏览使用指定的码表解释html页面. --> <head> <meta htt ...
- numpy之数组属性与方法
# coding=utf-8import numpy as npimport random # nan是一个float类型 ,not a num不是一个数字;inf,infinite 无穷 # 轴的概 ...
- Java 中nextLine()方法没有执行直接跳过解决办法
使用Java的Scanner类nextLne()方法从显示器输入数据时,nextInt()后面的nextLine()直接跳过没有执行: 截图:第三个输入直接跳过 通过上网的查找我终于发现了问题出在哪里 ...
- C基础知识(4):指针--p=&a和*p=a的区别详解
对于*p,[p = &a]和[*p = a]的区别详解 (1) p=&a就是用a的地址对p赋值,&p不改变,变的是p (2) *p=a就是把p所指向的那一内存空间的值赋值为a, ...
- Ubuntu腾讯云主机安装分布式memcache服务器,C#中连接云主机进行存储的示例
Ubuntu腾讯云主机安装分布式memcache服务器,C#中连接云主机进行存储的示例(github代码:https://github.com/qq719862911/MemcacheTestDemo ...
- MATLAB实现OTSU
目录 1.OTSU算法原理简述: 2.MATLAB实现代码 @ 1.OTSU算法原理简述: 最大类间方差是由日本学者大津(Nobuyuki Otsu)于1979年提出,是一种自适应的阈值确定方法.算法 ...