常常会用到的es6的知识点

2024年4月25日 157次阅读 来源: 姜筱妍

常常会用到的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/comp…
http://kangax.github.io/compa…
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);
// 1
console.log(bar);
// 2
console.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);//打印出true

let 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
// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Weak Sets
var 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); // true
ws.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构造。
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var 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属性。
    原文作者：姜筱妍
    原文地址: https://segmentfault.com/a/1190000010207132
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞