es6常用基础合集

es6常用基础合集

 

在实际开发中,ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。

ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大。值得高兴的是,如果你熟悉ES5,学习ES6并不需要花费太多的时间就可以掌握,因为常用的基础语法并不多,花少量的时间,就可以开始我们的ES6之旅了。

这篇文章不会详细的告诉你ES6的每一个细节知识,只会根据我自己的开发经验,将我在实际开发中常常用到的知识点分享给大家,给大家学习ES6一个方向的指引。这是因为考虑到很多同学虽然知道ES6的重要性,但是不知道自己需要掌握那些ES6的知识,也不知道这些知识需要掌握到什么程度,这给新手朋友带来了许多困惑,因此这篇文章就算是一个划重点吧,掌握这些,就可以轻轻松松得进行进一步学习了。

在学习之前,推荐大家使用babel官方提供的在线编译工具,编写自己的demo,会在右侧实时显示出编译之后的代码,以供参考学习 http://babeljs.io/repl/

一、新的变量声明方式 let/const

与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升。

通过2个简单的例子来说明这两点。

{let a = 20;
}console.log(a);  // a is not defined

而这个简单的例子,会被编译为:

{let _a = 20;
}console.log(a);  // a is not defined
// ES5
console.log(a);   // undefined
var a = 20; // ES6 console.log(a); // a is not defined let a = 20;

变量提升demo示例

当然,你的代码编译成为了ES5之后,仍然会存在变量提升,因此这一点只需要我们记住即可。在实际使用中,也需要尽量避免使用变量提升的特性带来的负面影响。只有在面试题中,才会对变量提升不停的滥用。

使用ES6,我们需要全面使用let/const替换var,那么什么时候用let,什么时候用const就成为了一个大家要熟练区分的一个知识点。

我们常常使用let来声明一个值会被改变的变量,而使用const来声明一个值不会被改变的变量,也可以称之为常量。

当值为基础数据类型时,那么这里的值,就是指值本身。
而当值对应的为引用数据类型时,那么我这里说的值,则表示指向该对象的引用。这里需要注意,正因为该值为一个引用,只需要保证引用不变就可以,我们仍然可以改变该引用所指向的对象。

当我们试图改变const声明的变量时,则会报错。

写几个例子,大家可以仔细揣摩一下:

let a = null;
a = 20;
const obDev = {a: 20,b: 30
}obDev.a = 30; console.log(obDev); // Object {a: 30, b: 30}
const fn = function() {}
const a = obDev.a; ... ...

只要抓住上面我说的特性,那么在使用let/const时就会显得游刃有余。
根据我自己的经验,使用const的场景要比使用let的场景多很多。

二、 箭头函数的使用

之前我说ES6颠覆了js的编码习惯,箭头函数的使用占了很大一部分。

首先是写法上的不同:

// 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; }

箭头函数可以替换函数表达式,但是不能替换函数声明

其次还有一个至关重要的一点,那就是箭头函数中,没有this。如果你在箭头函数中使用了this,那么该this一定就是外层的this。

也正是因为箭头函数中没有this,因此我们也就无从谈起用call/apply/bind来改变this指向。记住这个特性,能让你在react组件之间传值时少走无数弯路。

var person = {name: 'tom',getName: function() { return this.name; } } // 我们试图用ES6的写法来重构上面的对象 const person = { name: 'tom', getName: () => this.name } // 但是编译结果却是 var person = { name: 'tom', getName: function getName() { return undefined.name; } };

在ES6中,会默认采用严格模式,因此this也不会自动指向window对象了,而箭头函数本身并没有this,因此this就只能是undefined,这一点,在使用的时候,一定要慎重慎重再慎重,不然踩了坑你都不知道自己错在哪!这种情况,如果你还想用this,就不要用使用箭头函数的写法。

// 可以稍做改动
const person = {name: 'tom', getName: function() { return setTimeout(() => this.name, 1000); } } // 编译之后变成 var person = { name: 'tom', getName: function getName() { var _this = this; // 使用了我们在es5时常用的方式保存this引用 return setTimeout(function () { return _this.name; }, 1000); } };

先记住箭头函数的写法,并留意箭头函数中关于this的特殊性,更过实践与注意事项我们在封装react组件时再慢慢来感受。

三、模板字符串

模板字符串是为了解决使用+号拼接字符串的不便利而出现的。它的功能非常强大,但是我们大多数时候使用它则非常简单。看一个例子大家就明白怎么使用了。

// es6
const a = 20;
const b = 30; const string = `${a}+${b}=${a+b}`; // es5 var a = 20; var b = 30; var string = a + "+" + b + "=" + (a + b);

使用 `` 将整个字符串包裹起来,而在其中使用 ${} 来包裹一个变量或者一个表达式。

当然模板字符串还支持换行等强大的功能,更多的大家可通过参考资料进一步学习。

四、 解析结构

解析结构是一种全新的写法,我们只需要使用一个例子,大家就能够明白解析结构到底是怎么一回事儿。

// 首先有这么一个对象
const props = {className: 'tiger-button',loading: false,clicked: true, disabled: 'disabled' }

当我们想要取得其中的2个值:loading与clicked时:

// es5
var loading = props.loading;
var clicked = props.clicked;// es6
const { loading, clicked } = props; // 给一个默认值,当props对象中找不到loading时,loading就等于该默认值 const { loading = false, clicked } = props;

是不是简单了许多?正是由于解析结构大大减少了代码量,因此它大受欢迎,在很多代码中它的影子随处可见。

// 比如
// section1 
import React, { Component } from 'react'; // section2 export { default } from './Button'; // section3 const { click, loading } = this.props; const { isCheck } = this.state; // more 任何获取对象属性值的场景都可以使用解析结构来减少我们的代码量

另外,数组也有属于自己的解析结构。

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;// es5 var arr = [1, 2, 3]; var a = arr[0]; var b = arr[1]; var c = arr[2];

数组以序列号一一对应,这是一个有序的对应关系。
而对象根据属性名一一对应,这是一个无序的对应关系。
根据这个特性,使用解析结构从对象中获取属性值更加具有可用性。

五、 函数默认参数

之前我们不能直接为函数指定默认参数,因此很多时候为了保证传入的参数具备一个默认值,我们常常使用如下的方法:

function add(x, y) { var x = x || 20; var y = y || 30; return x + y; } console.log(add()); // 50

这种方式并不是没有缺点,比如当我传入一个x值为false,这个时候任然会取到默认值,就不是我们的本意了。

来看看ES6的默认值写法:

function add(x = 20, y = 30) {return x + y;
}console.log(add());

在实际开发中给参数添加适当的默认值,可以让我们对函数的参数类型有一个直观的认知。

const ButtonGroupProps = {size: 'normal',className: 'xxxx-button-group', borderColor: '#333' } export default function ButtonGroup(props = ButtonGroupProps) { ... ... }
六、 展开运算符

在ES6中用...来表示展开运算符,它可以将数组方法或者对象进行展开。先来看一个例子它是如何使用的。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30]; // 这样,arr2 就变成了[1, 2, 3, 10, 20, 30];

当然,展开对象数据也是可以得到类似的结果

const obj1 = {
  a: 1,
  b: 2, 
 c: 3 } const obj2 = { ...obj1,  d: 4,  e: 5,  f: 6 } // 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4})

展开运算符还常常运用在解析结构之中,例如我们在Raect封装组件的时候常常不确定props到底还有多少数据会传进来,就会利用展开运算符来处理剩余的数据。

// 这种方式在react中十分常用
const props = {size: 1,src: 'xxxx', mode: 'si' } const { size, ...others } = props; console.log(others) // 然后再利用暂开运算符传递给下一个元素,再以后封装react组件时会大量使用到这种方式,正在学习react的同学一定要搞懂这种使用方式 <button {...others} size={size} />

展开运算符还用在函数的参数中,来表示函数的不定参。只有放在最后才能作为函数的不定参,否则会报错。

// 所有参数之和
const add = (a, b, ...more) => {return more.reduce((m, n) => m + n) + a + b } console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39

展开运算符的运用可以大大提高我们的代码效率,但是在刚开始使用的时候比较绕脑,掌握好了用起来还是非常爽的,记住这些使用场景,平时在用的时候可以刻意多运用就行了。

七、对象字面量 与 class

ES6针对对象字面量做了许多简化语法的处理。

  • 当属性与值的变量同名时。
const name = 'Jane';
const age = 20 // es6 const person = { name, age } // es5 var person = { name: name, age: age };

那么这种方式在任何地方都可以使用,比如在一个模块对外提供接口时

const getName = () => person.name;
const getAge = () => person.age; // commonJS的方式 module.exports = { getName, getAge } // ES6 modules的方式 export default { getName, getAge }
  • 除了属性之外,对象字面量写法中的方法也可以有简写方式。
// es6
const person = {name,age,getName() { // 只要不使用箭头函数,this就还是我们熟悉的thisreturn this.name } } // es5 var person = { name: name, age: age, getName: function getName() { return this.name; } };
  • 在对象字面量中可以使用中括号作为属性,表示属性也能是一个变量了。
const name = 'Jane';
const age = 20const person = { [name]: true, [age]: true }

在ant-design的源码实现中,就大量使用了这种方式来拼接当前元素的className,例如:

let alertCls = classNames(prefixCls, {[`${prefixCls}-${type}`]: true, [`${prefixCls}-close`]: !this.state.closing, [`${prefixCls}-with-description`]: !!description, [`${prefixCls}-no-icon`]: !showIcon, [`${prefixCls}-banner`]: !!banner, }, className);

ant-design是一个认可度非常高的UI组件库,官方使用react的方式进行了实现,除此之外,还有vue也有对应的实现,有兴趣的同学可以去他们的官网了解学习。https://ant.design/index-cn

  • class

ES6为我们创建对象提供了新的语法糖,这就是Class语法。如果你对ES5中面向对象的方式比较熟悉的话,Class掌握起来也是非常迅速的,因为除了写法的不同,它并不会增加新的难以理解的知识点。我们先利用一个简单的例子来看看写法的不同。

// ES5
// 构造函数
function Person(name, age) {this.name = name;this.age = age;
}// 原型方法 Person.prototype.getName = function() { return this.name } // ES6 class Person { constructor(name, age) { // 构造函数 this.name = name; this.age = age; } getName() { // 原型方法 return this.name } }

babel会将ES6的写法编译成为利用Object.defineProperty实现的方式,这个方法的具体用处大家可以在《JavaScript高级编程3》中学习了解,包括get,set,等都有详细的说明

除此之外,我们还需要特别注意在实际使用中的几种写法方式的不同,在下面的例子注释中,我说明了他们分别对应的ES5中的含义。

class Person {constructor(name, age) {  // 构造函数 this.name = name; this.age = age; } getName() { // 这种写法表示将方法添加到原型中 return this.name } static a = 20; // 等同于 Person.a = 20 c = 20; // 表示在构造函数中添加属性 在构造函数中等同于 this.c = 20 // 箭头函数的写法表示在构造函数中添加方法,在构造函数中等同于this.getAge = function() {} getAge = () => this.age }

箭头函数需要注意的仍然是this的指向问题,因为箭头函数this指向不能被改变的特性,因此在react组件中常常利用这个特性来在不同的组件进行传值会更加方便。

  • 继承 extends

相比ES5,ES6的继承就要简单很多,我们直接来看一个例子。

class Person {constructor(name, age) {this.name = name;this.age = age; } getName() { return this.name } } // Student类继承Person类 class Student extends Person { constructor(name, age, gender, classes) { super(name, age); this.gender = gender; this.classes = classes; } getGender() { return this.gender; } }

我们只需要一个extends关键字,就可以实现继承了,不用像ES5那样去担心构造函数继承和原型继承,除此之外,我们还需要关注一个叫做super的方法。

在继承的构造函数中,我们必须如上面的例子那么调用一次super方法,它表示构造函数的继承,与ES5中利用call/apply继承构造函数是一样的功能。

// 构造函数中
// es6 
super(name, age);// es5
Person.call(this);

super还可以直接调用父级的原型方法,super.getName,但是我自己从来没这样用过,也就不扩展说了。

继承在react中有大量的使用场景,许多组件都利用继承来创建。

import React, { Component } from 'react';class App extends Component { defaultProps = {} state = {} componentWillMount() {} componentDidMount() {} btnClick = e => {} render() {} }

只要根据我们上面所学到的知识,明确的知道哪些属性方法是放在构造函数中,哪些属性方法是放到了原型中,那么我们自己在编写react组件的时候就要简单和清晰很多。

其实只要我们ES5面向对象的知识足够扎实,ES6和react掌握起来也没有太多的难度,所有的学习难点,并不在ES6这些不同的语法糖上,而在于ES5中的原理,因此我在前面分享ES5的核心知识的时候,很多读者老爷都迫不及待的希望我能够更多的说一说ES6的知识。其实我们都没有必要那么着急,只要前面10多篇文章的知识足够扎实,这篇文章所涉及到的常用的ES6知识,最多花30分钟也就掌握了。这些写法上的不同并不会造成大家理解上的困难,只需要有一个熟悉过程就行了。所以大家的重点,还是要回归到基础上来。

 

转载于:https://www.cnblogs.com/lsgxeva/p/7976237.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java接口开发_如果你想学好Java,这些你需要了解

01基本知识  在学习Java之前&#xff0c;您需要了解计算机的基本知识&#xff0c;然后再学习Java。同时&#xff0c;您需要熟悉DOS命令、Java概述、JDK环境安装配置、环境变量配置。JDK和环境变量配置完成后&#xff0c;就可以编写Java程序了。02编程格式  此时&#xff0c…

从Java程序生成QR码图像

如果您精通技术和小工具&#xff0c;则必须了解QR码。 这些天&#xff0c;到处都可以找到它-在博客&#xff0c;网站&#xff0c;甚至在某些公共场所。 这在移动应用程序中非常流行&#xff0c;在移动应用程序中&#xff0c;您可以使用QR Code扫描仪应用程序扫描QR Code&#x…

LintCode-最长公共子串

给出两个字符串&#xff0c;找到最长公共子串。并返回其长度。 您在真实的面试中是否遇到过这个题&#xff1f; Yes例子 给出A“ABCD”&#xff0c;B“CBCE”&#xff0c;返回 2 注意 子串的字符应该连续的出如今原字符串中&#xff0c;这与子序列有所不同。标签 Expand 相关…

课时67.标签选择器(掌握)

通过上节课的学习我们明白了如何通过十六进制来表示颜色 例如&#xff1a;红色的几种表示方法 我们发现在学习CSS当中的一些属性的时候&#xff0c;它都有一些套路 只要知道属性的名称&#xff0c;属性有什么作用&#xff0c;它有哪些取值&#xff0c;这个属性有什么注意点 …

计算几何问题 java_【转载】ACM计算几何题目推荐

2107 Quoit Design 典型最近点对问题POJ 3714 Raid 变种最近点对问题B&#xff0c;最小包围圆最小包围圆的算法是一种增量算法&#xff0c;期望是O(n)。ZOJ 1450 Minimal CircleHDU 3007 Buried memoryC&#xff0c;旋转卡壳POJ 3608 Bridge Acr…

jdbc连接oracle的几种格式

1. SID的方式。已经不推荐使用这种方式了。 jdbc:oracle:thin:[<user>/<password>]<host>[:<port>]:<SID> 2.Service Name的方式。 jdbc:oracle:thin:[<user>/<password>]//<host>[:<port>]/<service> 3.TNSNames…

Java 7:使用NIO.2进行文件过滤-第1部分

NIO.2是自Java 7起JDK中包含的用于I / O操作的新API。使用此新API&#xff0c;您可以执行与 java.io以及许多出色的功能&#xff0c;例如&#xff1a;访问文件元数据和监视目录更改等。 显然&#xff0c;由于向后兼容&#xff0c;java.io包不会消失&#xff0c;但是我们鼓励为…

第十三周活动进度表

学习进度表&#xff1a; 第三周内容时间周一&#xff08;4&#xff1a;10-6&#xff1a;00&#xff09;上课&#xff0c;周二晚上&#xff08;8&#xff1a;00-9&#xff1a;00&#xff09;&#xff0c;周四晚上&#xff08;8&#xff1a;00-8&#xff1a;30&#xff09;&#…

课时66.颜色控制属性下(理解)

今天来讲解十六进制控制属性的方法&#xff0c;其实用十六进制表示的方式本质就是rgb&#xff0c;只不过它们的格式不一样而已&#xff0c;十六进制中是通过每两位表示一种颜色的方式来给颜色赋值。 如 #FF0000 FF----r 00----g 00----b 修改前两位相当于修改rgb中的第一…

idea复制java_IntelliJ IDEA的剪切、复制和粘贴

IntelliJ IDEA的剪切、复制和粘贴本节内容概览&#xff1a;• 剪切、复制和粘贴的基本使用• 复制选定的文本片段• 将路径复制到文件• 将引用复制到一行或一个符号• 剪切选定的文本片段• 从剪贴板粘贴最后一个条目• 将最后一个条目从剪贴板粘贴为纯文本• 从剪贴板粘贴特定…

python方差的计算公式为什么减一_样本标准差分母为何是n-1

欢迎各位学习从0到1Python数据科学之旅&#xff0c;腾讯课堂和网易云课堂入口分别如下&#xff1a;(腾讯课堂新营业&#xff0c;报名可领取20元优惠券)微信公众号&#xff1a;pythonEducation模型和统计项目QQ&#xff1a;231469242大家好&#xff0c;今天给大家介绍标准差。标…

pxe+kickstart 自动化部署linux操作系统

kickstart 是什么&#xff1f; 批量部署Linux服务器操作系统 运行模式&#xff1a; C/S client/server 服务器上要部署&#xff1a; DHCP tftp&#xff08;非交互式文件共享&#xff09; 安装系统的三个步骤&#xff1a; 1、加载vmlinuz、 initrd (微型启动根目录&#xff0c;它…

课时57.HTML被废弃的标签(掌握)

1.为什么HTML中有一部分标签会被废弃&#xff1f; 因为当前HTML中的标签只有一个作用&#xff0c;就是用来添加语义&#xff0c;而早期的HTML标签中有一部分标签是没有语义的 有一部分标签是用来修改样式的 所以这部分标签就被淘汰了 <br><hr><font> <…

Java编码约定被认为是有害的

在Oracle网站上有Java编程语言指南的正式代码约定 。 您可能希望这份超过20页的文档将是有关Java语言的最佳实践&#xff0c;提示和技巧的最完整&#xff0c;最全面和最权威的来源。 但是一旦你开始阅读它&#xff0c;失望和愤怒就会增加。 我想指出本指南中最明显的错误&#…

flash php socket通信_php socket通信机制实例说明

php socket通信机制实例说明与代码----什么是socket 所谓socket一般也称作"套接字"&#xff0c;用于描述ip地址和端口&#xff0c;是一个通讯链的句柄。使用程序一般经过"套接字"向network发出请求也许应对network请求。说白了就是一种通讯机制。它类似于银…

python的ogr模块_python GDAL/OGR模块安装注意事项

软件准备&#xff1a;首先&#xff0c;确保电脑里已安装python2.7(2.x版本的比较好用&#xff0c;因为还使用ArcGIS)&#xff0c;然后从http://www.gisinternals.com网站上下载这两个文件GDAL-2.1.3.win32-py2.7.msi和gdal-201-1500-core.msi。软件安装&#xff1a;首先安装gda…

课时55.详情和概要标签(理解)

1.什么是详情和概要标签&#xff1f; 作用&#xff1a;利用summary标签来描述概要信息&#xff0c;利用details标签来描述详情信息 默认情况下是折叠展示&#xff0c;想看见详情必须点击 格式&#xff1a; <details> <summary>概要信息</summary> 详情信…

Spring Security可以做的十件事

一 您可以在Spring XML配置文件中指定您选择的授权提供者。 您可以通过配置Spring的http://www.springframework.org/schema/security/spring-security-3.1.xsd模式中定义的authentication-manager来实现。 简化的authentication-manager元素定义看起来像这样&#xff1a; &l…

python编写自定义函数判断n1-n2范围内的素数_【每日道代码题001】- PYTHON基础复习...

问题001-1&#xff1a;请对输入三个整数a,b,c,判断能否以它们为三个边长构成三角形。若能&#xff0c;输出YES和面积&#xff0c;否则输出NOa float(input())b float(input())c float(input())if a > 0 and b > 0 and c > 0: #判断边长是否为正if (a b > c) an…

php绘制一个三角形,如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...

我们在平时的前端开发的时候&#xff0c;有时候是需要一些小图形来丰富一下页面效果&#xff0c;比如&#xff1a;下拉列表的倒三角图形。那么这样的一个三角形是如何制作出来的&#xff0c;本章给大家介绍如何利用css或html画出一个三角形&#xff1f;两种不同的制作三角形方法…