ES6常用知识总结(20%的知识占80%的份额)
一、变量和常量
var的缺点:(1)var可以多次声明同一个变量; (2)var会造成变量提升
- (function rr() {
- if(true) {
- var a = 666;
- }
- console.log(a); //输出666
- })()
let以及const都是块级作用域。我们常常使用let来声明一个值会被改变的变量,而使用const来声明一个值不会被改变的变量,也可以称之为常量。
常见题:
- for(var a = 0; a < 3; a++) {
- setTimeout(function() {
- console.log(a);
- }, 1000)
- }
- //输出结果都为3
如何将结果输出为0, 1, 2
es5处理方法 -- 用函数制造块级作用域
- for(var a = 0; a < 3; a++) {
- (function (a) {
- setTimeout(function() {
- console.log(a);
- }, 1000)
- })(a)
- }
- //输出结果0,1,2
es6处理方法 -- 更加简单明了
- for(let a = 0; a < 3; a++) {
- setTimeout(function() {
- console.log(a);
- }, 1000)
- }
- //输出结果为:0,1,2
二、解构赋值(Destructuring)
1、对象的解构赋值
const props = {className: 'tiger-button',loading: false,clicked: true,disabled: 'disabled' }
当我们想要取得其中的2个值:loading与clicked时:
// es5 var loading = props.loading; var clicked = props.clicked;// es6 let { loading, clicked } = props;// 给一个默认值,当props对象中找不到loading时,loading就等于该默认值 let { loading = false, clicked } = props;
// es6 let arr = [1, 2, 3]; let [a, b, c] = arr;// es5 var arr = [1, 2, 3]; var a = arr[0]; var b = arr[1]; var c = arr[2];
数组以序列号一一对应,这是一个有序的对应关系。而对象根据属性名一一对应,这是一个无序的对应关系,属性名一致即可。根据这个特性,使用解析结构从对象中获取属性值更加具有可用性。
ES6解构赋值
三、函数
// es5 var fn = function(a, b) {return a + b; } // es6 箭头函数写法,当函数直接被return时,可以省略函数体的括号 const fn = (a, b) => a + b; // es5 var foo = function() {var a = 20;var b = 30;return a + b; } // es6 const foo = () => {const a = 20;const b = 30;return a + b; }
2、形参默认值(default)
function sum(x,y){x=x||10;y=y||20;return x+y;}
ES6的默认值写法:
function sum(x = 10, y = 20) {return x + y; }console.log(add());
注意:1、箭头函数是匿名函数,不能作为构造函数,不能使用new
let FunConstructor = () => {console.log('lll'); }let fc = new FunConstructor();
var obj = {a: 10,b: () => {console.log(this.a); // undefinedconsole.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}},c: function() {console.log(this.a); // 10console.log(this); // {a: 10, b: ƒ, c: ƒ}} } obj.b(); obj.c();
var obj = {a: 10,b: function(){console.log(this.a); //10},c: function() {return ()=>{console.log(this.a); //10}} } obj.b(); obj.c()();
function A(a){console.log(arguments); } A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ] let B = (b)=>{console.log(arguments); } B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined let C = (...c) => {console.log(c); } C(3,82,32,11323); // [3, 82, 32, 11323]
四、新增的数据类型
重新复习下旧知识:基本数据类型有6种:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
1、Set (类似数组)
主要用来去除重复的数据,Set 本身是一个构造函数,用来生成 Set 数据结构。
let set = new Set(["name1","zhang","wang","name1","zhang"]);
console.log(set); //"name1","zhang","wang"
console.log(set); //3
四个方法:add(),delete(),has(),clear()
2、Map(映射,类似对象)
const map1 = new Map() const objkey = {p1: 'v1'}map1.set(objkey, 'hello') console.log(map1.get(objkey))
结果:
hello
(2)Map可以接受数组作为参数,数组成员还是一个数组,其中有两个元素,一个表示键一个表示值。
const map2 = new Map([['name', 'Aissen'],['age', 12] ]) console.log(map2.get('name')) console.log(map2.get('age'))
结果:
Aissen 12
如果 Map 的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map 将其视为一个键,包括0和-0,布尔值true和字符串true则是两个不同的键。另外,undefined和null也是两个不同的键。虽然NaN不严格相等于自身,但 Map 将其视为同一个键。
3、symbol(唯一的属性名)
常用于对象的属性名,不会出现属性名冲突的现象。
Symbol
函数前不能使用new
命令,否则会报错。这是因为生成的Symbol是一个原始类型的值,不是对象
Symbol
函数可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。
// 没有参数的情况 var s1 = Symbol(); var s2 = Symbol();s1 === s2 // false// 有参数的情况 var s1 = Symbol("foo"); var s2 = Symbol("foo");s1 === s2 // false
Symbol值不能与其他类型的值进行运算
五、新增的语法糖
1、class, extends, super
这三个特性涉及了ES5中最令人头疼的的几个部分:原型、构造函数,继承
class Animal {constructor(){this.type = 'animal'}says(say){console.log(this.type + ' says ' + say)} }let animal = new Animal() animal.says('hello') //animal says helloclass Cat extends Animal {constructor(){super()this.type = 'cat'} }let cat = new Cat() cat.says('hello') //cat says hello
上面代码首先用class
定义了一个“类”,可以看到里面有一个constructor
方法,这就是构造方法,而this
关键字则代表实例对象。
简单地说,constructor
内定义的方法和属性是实例对象自己的,而constructor
外定义的方法和属性则是所有实例对象可以共享的。
Class之间可以通过extends
关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends
关键字,继承了Animal类的所有属性和方法。
super
关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor
方法中调用super
方法,否则新建实例时会报错。这是因为子类没有自己的this
对象,而是继承父类的this
对象,然后对其进行加工。如果不调用super
方法,子类就得不到this
对象。
ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
P.S 如果你写react的话,就会发现以上三个东西在最新版React中出现得很多。创建的每个component都是一个继承React.Component
的类。
六、内置对象扩展
1、模板字符串(template string)
大家可以先看下面一段代码:
$("#result").append("There are <b>" + basket.count + "</b> " +"items in your basket, " +"<em>" + basket.onSale +"</em> are on sale!" );
我们要用一堆的'+'号来连接文本与变量,而使用ES6的新特性模板字符串``后,我们可以直接这么来写:
$("#result").append(`There are <b>${basket.count}</b> itemsin your basket, <em>${basket.onSale}</em>are on sale! `);
用反引号(\
)来标识起始,用
${} 来引用变量,而且所有的空格和缩进都会被保留在输出之中
2、数组扩展(Array.from和Array.of)
(1)Array.from是将伪数组对象或可迭代对象转为数组实例
let m = new Map([[1, 2], [2, 4], [4, 8]]); Array.from(m); // [[1, 2], [2, 4], [4, 8]]
function f() {return Array.from(arguments); } f(1, 2, 3); // [1, 2, 3]
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]// Generate a sequence of numbers // Since the array is initialized with `undefined` on each position, // the value of `v` below will be `undefined` Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]
//数组去重合并function combine(){ let arr = [].concat.apply([], arguments); //concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,仅仅返回被连接数组的一个副本。 return Array.from(new Set(arr));
} var m = [1, 2, 2], n = [2,3,3]; console.log(combine(m,n)); // [1, 2, 3]
(2)Array.of是将零散的东西集合成一个数组,
Array.of(element0[, element1[, ...[, elementN]]])
Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]
兼容旧环境:如果原生不支持的话,在其他代码之前执行以下代码会创建 Array.of()
。
if (!Array.of) {Array.of = function() {return Array.prototype.slice.call(arguments);}; }
3、对象的扩展
(1)key和value相同时,写一个就够了。
(2)Object.assign(),将多个对象合为一个对象
let obj1={name:"July"};
let obj2={age:18};
console.log(Object.assign(obj1,obj2)) //{name:"July",age:18}
4、延展操作符(三点式)
const a = {a: 1, b: 2} const b = {b: 3, c: 4} console.log({...a, ...b, c: 5}) // {a: 1, b: 3, c: 5} // 相当于 Object.assign(a, b, {c: 5})
七、import export
这两个家伙对应的就是es6自己的module
功能。
我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起。
这有可能导致两个问题:
(1)一方面js代码变得很臃肿,难以维护
(2)另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug
在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种CommonJS(服务器端)和AMD(浏览器端,如require.js)。
而现在我们有了es6的module功能,它实现非常简单,可以成为服务器和浏览器通用的模块解决方案。
ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。
上面的设计思想看不懂也没关系,咱先学会怎么用,等以后用多了、熟练了再去研究它背后的设计思想也不迟!
传统的写法
首先我们回顾下require.js的写法。假设我们有两个js文件: index.js
和content.js
,现在我们想要在index.js
中使用content.js
返回的结果,我们要怎么做呢?
首先定义:
//content.js define('content.js', function(){return 'A cat'; })
然后require:
//index.js require(['./content.js'], function(animal){console.log(animal); //A cat })
那CommonJS是怎么写的呢?
//index.js var animal = require('./content.js')//content.js module.exports = 'A cat'
ES6的写法
//index.js import animal from './content'//content.js export default 'A cat'
以上我把三者都列出来了,妈妈再也不用担心我写混淆了...
ES6 module的其他高级用法
//content.jsexport default 'A cat' export function say(){return 'Hello!' } export const type = 'dog'
上面可以看出,export命令除了输出变量,还可以输出函数,甚至是类(react的模块基本都是输出类)
//index.jsimport { say, type } from './content' let says = say() console.log(`The ${type} says ${says}`) //The dog says Hello
这里输入的时候要注意:大括号里面的变量名,必须与被导入模块(content.js)对外接口的名称相同。
如果还希望输入content.js中输出的默认值(default),可以写在大括号外面。
//index.jsimport animal, { say, type } from './content' let says = say() console.log(`The ${type} says ${says} to ${animal}`) //The dog says Hello to A cat
修改变量名
此时我们不喜欢type这个变量名,因为它有可能重名,所以我们需要修改一下它的变量名。在es6中可以用 as
实现一键换名。(有点类似sql语句,哈哈)
//index.jsimport animal, { say, type as animalType } from './content' let says = say() console.log(`The ${animalType} says ${says} to ${animal}`) //The dog says Hello to A cat
模块的整体加载
除了指定加载某个输出值,还可以使用整体加载,即用星号(*
)指定一个对象,所有输出值都加载在这个对象上面。通常 星号*
结合 as
一起使用比较合适。
//index.jsimport animal, * as content from './content' let says = content.say() console.log(`The ${content.type} says ${says} to ${animal}`) //The dog says Hello to A cat
想更全面了解ES6伙伴们可以去看阮一峰所著的电子书ECMAScript 6入门
转载于:https://www.cnblogs.com/phoebeyue/p/9206625.html
ES6常用知识总结(20%的知识占80%的份额)相关推荐
- linux cpu不足处理运维,Linux运维知识之Linux服务器CPU占用率较高问题排查思路
本文主要向大家介绍了Linux运维知识之Linux服务器CPU占用率较高问题排查思路,通过具体的内容向大家展现,希望对大家学习Linux运维知识有所帮助. 注意:本文相关配置及说明已在 CentOS ...
- python编程中常用的12种基础知识总结
python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...
- 算法——常用的数据结构/模板/基础知识
常用的数据结构/模板/基础知识 (一)c++--优先队列(priority_queue) 最大堆和最小堆的写法 (二)c++中的全排列函数next_permutation() (三)迭代器的使用 (四 ...
- CIO40知识星球—20年数字化组织架构演进V4.0
CIO40知识星球-20年数字化组织架构演进V4.0 1-V1.0版本:技术型 时间:2003年左右 企业:300-800人 所属:财务,行政,人事等 组织:传统,职能,后勤,服务 优点:职责分明,各 ...
- python编程基础知识点总结_【转载】Python编程中常用的12种基础知识总结
Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...
- Python 编程中常用的12种基础知识总结
Python 编程中常用的12 种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出 ...
- 小学计算机学科知识与能力,学科知识与能力:计算机基础知识模块知识点分析...
学科知识与能力:计算机基础知识模块知识点分析来源于浙江教师教育网 中公教师通过对全国教师资格考试考情的分析,总结出全国教师资格考试<信息技术学科知识与能力>计算机基础知识模块的知识点,并提 ...
- 代理服务器基础知识介绍及防火墙知识普及
代理服务器基础知识介绍及防火墙知识普及 2004-10-17 作者:佚名 来源:诗凌工作室 代理服务器基础知识介绍: Internet大家已经不在陌生,现在已经迈进了广大工薪阶层的家庭. ...
- 公共基础知识计算机,公共基础知识计算机基础知识试题
计算机基础知识是公共基础知识考试的组成成分之一,以下是由学习啦小编整理关于共基础知识计算机基础知识试题的内容,希望大家喜欢! 公共基础知识计算机基础知识试题 1.CPU的主要功能是进行( ). A.算 ...
最新文章
- 前端——JavaScript
- (转)xshell无法在vim中复制黏贴
- ICLR 2020:从去噪自编码器到生成模型
- String与string的区别
- Android基础教程(三)之------ Activity 窗口切换
- 并发编程-concurrent指南-阻塞队列BlockingQueue
- The Process class relies on proc_open, which is not available on your PHP installation.
- 力扣 独一无二的出现次数
- IC卡读写器VB.NET源代码
- Linux 上最好的视频编辑软件
- android StageFright框架解读
- Spring boot微服务项目中上传图片报错,The field file exceeds its maximum permitted size of 1048576 bytes.
- nginx正向代理反向代理负载均衡
- 视频后期调色,PR调色分享,lumetri color调色
- 上传身份证照片js_web端上传图片,截取证件照
- 贝尔曼最优方程(Bellman Optimality Equation)
- Canvas—2D 绘图
- 3d编辑器的gizmo的缩放计算
- PostgreSQL 插入数据报错:column “xxx“ does not exist 解决方法
- metawrap quant_bins 的bin_abundance_table.tab结果理解
热门文章
- netbeans html 格式化,在NetBeans IDE8.0中怎么把html的文件转换成jsp格式
- git如何合并指定文件内容_git小技巧--如何从其他分支merge个别文件或文件夹
- python3 用pygame 简单建一个飞船模型
- C++文件打开模式详解
- 说说C语言运算符的“优先级”与“结合性”
- [BUUCTF-pwn]——ciscn_2019_n_3
- [BUUCTF-pwn]——mrctf2020_shellcode
- 变压器符号_3D动画解析油浸式和干式变压器,看完让你秒懂
- 台式计算机不用待机还是关机好,电脑应该选择“关机”还是“休眠”?不关机对电脑有损伤吗?...
- 深入Java核心 探秘Java垃圾回收机制