欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

es6常用知识点总结

程序员文章站 2022-03-30 15:02:50
...

经常会用到的es6的知识点

提到es6我们就来说说javascript,es6也是ES2015
  1. 1995:JavaScript诞生,它的初始名叫LiveScript。

  2. 1997:ECMAScript标准确立。

  3. 1999:ES3出现,与此同时IE5风靡一时。

  4. 2000–2005: XMLHttpRequest又名AJAX, 在Outlook Web Access (2000)、Oddpost (2002),Gmail (2004)和Google Maps (2005)大受重用。

  5. 2009: ES5出现,(就是我们大多数人现在使用的)例如foreach,Object.keys,Object.create和JSON标准。

  6. 2015:ES6/ECMAScript2015出现。 2015 年,负责制定 ECMAScript 规范草案的委员会 TC39 决定将定义新标准的制度改为一年一次

  7. 2016:ES7/ECMAScript2016出现。

  8. 2017:ES8/ECMAScript2017出现。


说到es6就会想到兼容,我给大家推荐两个链接大家可以去看看,还是很好的
https://kangax.github.io/compat-table/es6/
http://kangax.github.io/compat-table/es2016plus/

es6的使用方式
可以将es6的代码转成es5的代码,Babel Google traceur这是两个转码器,大家可以去试一下
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel

js中var、let、const的区别
var!!!!
var定义的变量可以修改,如果不初始化会输出undefined,不会报错
var分为两种:局部作用域和函数作用域
let!!!!
let是块级作用域,函数内部使用let定义后,对函数外部无影响。
let是块级作用域,跟var不同的是,let没有前置功能,不能重复声明
const!!!!
const定义的变量不可以修改,而且必须初始化。
const是常量,不可改变,一般大写,也是块级作用域。。。

es6模板字符串、增强的对象字面、解构赋值
es6模板字符串
模板字符串是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串。
  1. ``撇号

  2. 绑定变量

  3. 字符串支持多行

  4. ...扩展运算符


增强的对象字面
对象字面量的输出方式有两种:传统的‘。’,以及数组方式,只不过用数组方式输出时,方括号里面要用引号括起来
对象字面量的定义方式,可以轻松搞定函数大量参数需要一一对应输出的情况。他的对策就是给函数传入一个对象,而这个对象是用字面量的方式定义的,属性和值对应的方式可以一目了然他们的关系,因为函数只是一段代码,必须调用才能执行
  1. 字面量对象属性能够简写

  2. 字面量对象方法可以简写省去function关键字

  3. 对象属性 可以写 自动计算的属性

  4. 继承——port——


解构赋值
解构赋值可将数组的元素或对象的属性赋予给另一个变量,该变量的定义语法与数组字面量或对象字面量很相似。此语法非常简洁,相比于传统的属性访问方式,更加直观清晰。
事实上,用变量来描述并不恰当,因为你可以对任意深度的嵌套数组进行解构:
var [foo, [[bar], baz]] = [1, [[2], 3]];console.log(foo);// 1console.log(bar);// 2console.log(baz);// 3
可以在对应位留空来跳过被解构数组中的某些元素:
var [,,third] = ["foo", "bar", "baz"];console.log(third);// "baz"

es6的扩展运算符,箭头函数,函数参数
扩展运算符的几个作用
  1. 展开数组

  2. 数组的拷贝

  3. 数组的合并

  4. 展开函数的调用


箭头函数
//箭头函数 =>let jian = () => {console.log("Hello")}jian();//没有参数()=>{console.log("你好")};//有参数(name)=>{console.log(name);};//可以省略()let d = name=>{console.log(name);}d('jiang');//两个参数(name,age)=>{console.log(name,age);};//省略后的let c (a,b)=>a+b;(a,b)=>{console.log(a+b);console.log(c);

函数参数
函数参数分为三种
  1. 默认参数

  2. 扩展参数

  3. 剩余参数


Symbol
Symbol是ES6新增的一种值类型数据,表示一种绝不重复的值
let m = 1;let l = 1;console.log(m==l);//打印出truelet mm = Symbol();let ll = Symbol();console.log(mm==ll);//打印出flase
注意,这里 Symbol 前面不能使用 new 操作符。
如果要获取对象 symbol 属性,需要使用 Object.getOwnPropertySymbols(o)。

Set和WeakSet
ES6 新增 2种 数据结构(New data structures)类型, Set和Map
Set和WeakSet 数据结构是ES6新增。
它与数组非常相似,但是Set数据结构的成员都是唯一的。
特别说明:Set中只能添加一个NaN
// Setsvar s = new Set();s.add("hello").add("goodbye").add("hello");s.size === 2;s.has("hello") === true;// Weak Setsvar ws = new WeakSet();ws.add({ data: 42 });
类似于 WeakMap,WeakSet 对象可以让你在一个集合中保存对象的弱引用,在 WeakSet 中的对象只允许出现一次:
var ws = new WeakSet();var obj = {};var foo = {};ws.add(window);ws.add(obj);ws.has(window); // truews.has(foo);    // false, foo 没有添加成功ws.delete(window); // 从结合中删除 window 对象ws.has(window);    // false, window 对象已经被删除

Map和WeakMap
Map和WeakMap是ES6新增的数据结构 事实上每个对象都可以看作是一个 Map。 它们本质与对象一样,都是键值对的集合,但是他们与Object对象主要的不同是,键可以是各种类型的数值,而Object对象的键只能是字符串类型或者Symbol类型值 。Map和WeakMap是更为完善的Hash结构。
// Mapsvar m = new Map();m.set("hello", 42);m.set(s, 34);m.get(s) == 34;// Weak Mapsvar wm = new WeakMap();wm.set(s, { extra: 42 });wm.size === undefined
WeakMap数据结构 WeakMap结构与Map结构基本类似。 区别是它只接受对象作为键名,不接受其他类型的值作为键名。键名是对象的弱引用,当对象被回收后,WeakMap自动移除对应的键值对,WeakMap结构有助于防止内存泄漏。
var wm = new WeakMap(); var obj = new Object(); wm.set(obj,'对象1'); obj=null; wm.get(obj);    //undefined wm.has(obj);    //false
由于WeakMap对象不可遍历,所以没有size属性。

关键点:ES2015=ES6
最常用的ES6特性
ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。let则实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。
块级作用域与函数声明问题:
函数能不能在块级作用域之中声明,是一个相当令人混淆的问题。
ES6引入了块级作用域,明确允许在块级作用域之中声明函数。

注意:ES6规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this
5.ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
6.template string
我们要插入大段的html内容到文档中时,传统的写法非常麻烦,所以之前我们通常会引用一些模板工具库

以上就是es6常用知识点总结的详细内容,更多请关注其它相关文章!