特色:写法更加优雅,更加像面像对象的编程,其思想和 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出来之前,我们都通常用引号(''或"")和加号(+)来拼接字符串,麻烦不说而且还容易出错,
 
  1. 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循环相比上面几种做法,有一些显著的优点。
 
  • 有着同for...in一样的简洁语法,但是没有for...in那些缺点。
  • 不同于forEach方法,它可以与break、continue和return配合使用。
  • 提供了遍历所有数据结构的统一操作接口。
下面是一个使用 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基本常见语法的更多相关文章

  1. ES6的常见语法!!

    let : 声明变量 不存在变量提前 拥有局部作用域 (只要有{}出现 则只在该{}范围内生效) (而var只在函数内会产生作用域范围) 不能重复声明 const : 声明常量(常量名从规范上来将 最 ...

  2. freemarker(FTL)常见语法大全

    [转载]freemarker(FTL)常见语法大全 FreeMarker的插值有如下两种类型:1,通用插值${expr};2,数字格式化插值:#{expr}或#{expr;format}  ${boo ...

  3. PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议/服务器、数据库、服务器web开发、PHP简介/常见语法、PHPheader()、 PHP_POST/GET数据获取和错误处理

    C/S架构 Client/Server 指客户端,服务器 架构的意思 优点:性能性高:可将一部分的计算工作放在客户端上,服务器只需处理出局即可   洁面炫酷,可使用更多系统提供的效果 缺点:更新软件需 ...

  4. [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法

    es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 ...

  5. word宏(macro) 之 注意事项,常见语法和学习地方

    宏:计算机科学里的宏(Macro),是一种批量处理的称谓.一般说来,宏是一种规则或模式,或称语法替换 ,用于说明某一特定输入(通常是字符串)如何根据预定义的规则转换成对应的输出(通常也是字符串).这种 ...

  6. python全栈开发_day14_常见语法糖,递归和匿名函数

    一:常见语法糖 1)三元函数(三目函数) a=1 if 3>2 else 2 print(a) #得到返回值:1 2)列表字典推导式 lis=[("a",1),(" ...

  7. IOS常见语法解惑

    由于工作过程中经常需要查看IOS的Objective-C代码,遂把一些常见的.有疑问的OC语法列出,方便之后会看,提升效率. Objective-C中的@语法 @interface告诉编译器,我要声明 ...

  8. 超好用的Markdown编辑器Typora中的常见语法

    目录 下载网址 安装 一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二.语法环境 三.单选 四.字体 五.分割符 六.列表 七.图片引入 八.表格 九.超链接 下载网址 正版中 ...

  9. es6的常用语法

    最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...

随机推荐

  1. mysql使用命令行执行存储过程

    编写存储过程sql 以给brand表添加phone字段为例: DROP PROCEDURE IF EXISTS UpdateColum; CREATE PROCEDURE UpdateColum() ...

  2. Android新项目GBSS:第1篇 搭建开发环境

    最近接手一个Android新项目,之前也没做过这方面的开发,算是边学边干,这两天看了一下Android开发的书,大致入门了一点,今天把所需要的软件都下了下来,准备开工,先列一下开发环境: 所有的软件都 ...

  3. 在发布ASP.NET网站的时候,出现state server错误

    错误信息如下: 在发布ASP.NET网站的时候,出现state server错误: Server Error in '/' Application. ------------------------- ...

  4. Cinder AZ 与 Nova AZ 的同步问题

    问题 今天处理了一个 Boot from volume 失败的问题,错误日志给出了明确的原因:The instance and volume are not in the same AZ. Build ...

  5. php文件上传系统

    一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...

  6. spring boot系列(三)spring boot 配置spring data jpa

    数据库使用MySQL,ORM使用spring data jpa 1 因此需要再pom.xml文件中添加相应jar包.如下: <!-- 引入jap --> <dependency> ...

  7. Winform非UI线程更新UI界面的各种方法小结

    我们知道只有UI线程才能更新UI界面,其他线程访问UI控件被认为是非法的.但是我们在进行异步操作时,经常需要将异步执行的进度报告给用户,让用户知道任务的进度,不至于让用户误认为程序“死掉了”,特别是对 ...

  8. Linux下python安装升级详细步骤 | Python2 升级 Python3 转载

    Linux下python升级步骤  Python2 ->Python3 多数情况下,系统自动的Python版本是2.x 或者yum直接安装的也是2.x 但是,现在多数情况下建议使用3.x 那么如 ...

  9. keys随机生成

    随机keys生成 const fs=require('fs'); const KEY_LEN=1024; const KEY_COUNT=2048; const CHARS='abcdefghijkl ...

  10. xgboost的使用

    1.首先导入包 import xgboost as xgb 2.使用以下的函数实现交叉验证训练xgboost. bst_cvl = xgb.cv(xgb_params, dtrain, num_boo ...