资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/经常会用到的es6的知识点

经常会用到的es6的知识点

asce1885 / 2607人阅读

摘要：经常会用到的的知识点提到我们就来说说，也是诞生，它的初始名叫。又名，在，和大受重用。年，负责制定规范草案的委员会决定将定义新标准的制度改为一年一次出现。它们在规范的先前版本中被称为模板字符串。它与数组非常相似，但是数据结构的成员都是唯一的。

经常会用到的es6的知识点
提到es6我们就来说说javascript，es6也是ES2015

1995：JavaScript诞生，它的初始名叫LiveScript。

1997：ECMAScript标准确立。

1999：ES3出现，与此同时IE5风靡一时。

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

2009： ES5出现，（就是我们大多数人现在使用的）例如foreach，Object.keys，Object.create和JSON标准。

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

2016：ES7/ECMAScript2016出现。

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规范的先前版本中被称为“模板字符串。

``撇号

绑定变量

字符串支持多行

...扩展运算符

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

字面量对象属性能够简写

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

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

继承——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的扩展运算符，箭头函数，函数参数
扩展运算符的几个作用

展开数组

数组的拷贝

数组的合并

展开函数的调用

箭头函数
//箭头函数 =>
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);
函数参数
函数参数分为三种

默认参数

扩展参数

剩余参数

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属性。
云服务器 海外云主机 webrtc用到的算法 webrtc用到的协议 大数据用到的技术 用到的几个函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84042.html

相关文章

  • Vue面试中，经常会被问到的面试题/Vue知识点整理

    摘要：可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。我工作中只用到，对和不怎么熟与的区别相同点都支持指令内置指令和自定义指令都支持过滤器内置过滤器和自定义过滤器都支持双向数据绑定都不支持低端浏览器。 看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是...

    mengbo 评论0 收藏0

  • JavasScript重难点知识

    摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次，彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

    forsigner 评论0 收藏0

  • 「前端面试题系列5」ES6 中箭头函数的用法

    摘要：在这里，如果用箭头函数，可以这样改写箭头函数并没有自己的，所以事件处理函数的调用者并不受影响。比如，在需要动态上下文的场景中，使用箭头函数需要格外地小心，这些场景包括对象的方法原型方法事件的回调构造函数。 showImg(https://segmentfault.com/img/bVboce6?w=1304&h=734); 前言 年味儿渐散，收拾下心情，继续敲代码吧。 对于即将到来金三...

    betacat 评论0 收藏0

  • ES6/ES7 三点式 —— 扩展运算符与剩余操作符

    摘要：扩展运算符的应用接下来看看扩展运算符的常见应用。会报错方式使用扩展运算符代替方法方式扩展运算符方式剩余操作符另外一种以三个点形式出现的是剩余操作符，与扩展操作符相反，剩余操作符将多个值收集为一个变量，而扩展操作符是将一个数组扩展成多个值。 ES6 标准提供给 JavaScript 开发者许多简化代码的新特性，今天要介绍的扩展运算符就是非常常用的一种。可以使你的代码更加简洁优雅。 扩展运...

    zgbgx 评论0 收藏0

  • ES6精解：promise用法

    前言 今天就简单总结一下promise的用法，在用promise之前，我们要先了解一下什么promise，这个东西是用来干什么的？ 通俗易懂的讲，promise其实就是一个构造函数，是用来解决异步操作的，我们平时其实还是会用到挺多的，比如我们经常会嵌套一层层的函数 step1(function (value1) { step2(value1, function(value2){ s...

    enali 评论0 收藏0

发表评论

登陆后可评论

0条评论

asce1885

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<