前端基础进阶_ ES6常用基础合集。

网站前端开发_前端开发者丨JavaScript

https://www.rokub.com

ES6基础智商划重点尽管我们在实际开发中， 想要使用ES6还是必须使用babel编译之后才能使用， 但是ES6仍然已经非常普及了， 可以说是大多数听说过前端的朋友都已经知道ES6， 并且大多数人已经开始在使用ES6来进行学习和工作。 ES6彻底改变了前端的编码风格， 可是说对于前端的影响非常巨大。 但是值得高兴的是， 如果你熟悉ES5， 学习ES6并不需要花费太多的时间就可以掌握， 因为常用的基础语法并不多， 我们花少量的时间， 就可以开始自己的ES6之旅了。 这篇文章不会详细的告诉你ES6的每一个细节知识， 只会根据我自己的开发经验， 将我在实际开发中常常用到的知识点分享给大家， 给大家学习ES6一个方向的指引。 否则很多同学也不知道自己需要掌握那些ES6的知识， 也不知道这些知识需要掌握到什么程度， ES6大家都在说还算简单， 这也造成了许多人的更加迷茫， 因此这篇文章就算是一个划重点吧， 掌握这些， 就可以轻轻松松的去学习react / vue了。 一、 新的变量声明方式

let / const与var不同， 新的变量声明方式带来了一些不一样的特性， 其中最重要的两个特性就是提供了块级作用域与不再具备变量提升。 通过2个简单的例子来说明这两点。 {

leta=20;

}

console.log(a);

a is not defined 1 2 3 4 5 {

leta=20;

}

console.log(a);

a is not defined而这个简单的例子， 会被编译为： {

let_a=20;

}

console.log(a);

a is not defined 1 2 3 4 5 {

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;

1 2 3 4 5 6 7 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;

1 2

let a = null;

a = 20;

const obDev = {

a: 20,

b: 30

}

obDev.a = 30;

console.log(obDev);

Object {

a: 30,

b: 30

}

1 2 3 4 5 6 7 8

const obDev = {

a: 20,

b: 30

}

obDev.a = 30;

console.log(obDev);

Object {

a: 30,

b: 30

}

const fn = function () {}

const a = obDev.a;……1 2 3

const fn = function () {}

const a = obDev.a;……只要抓住上面我说的特性， 那么在使用let / const时就会显得游刃有余。 根据我自己的经验， 使用const的场景要比使用let的场景多很多。 二、 箭头函数的使用之前我说ES6颠覆了js的编码习惯， 箭头函数的使用占了很大一部分。 首先是写法上的不同: es5

var fn = function (a, b) {

returna+b;

}

es6 箭头函数写法， 当函数直接被return时

const fn = (a, b) => a + b;

es5

var foo = function () {

vara=20；

varb=30;

returna+b;

}

es6

const foo = () => {

consta=20;

constb=30;

returna+b;

}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 es5

var fn = function (a, b) {

returna+b;

}

es6 箭头函数写法， 当函数直接被return时

const fn = (a, b) = > a + b;

es5

var foo = function () {

vara=20；

varb=30;

returna+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(){

returnthis.name;

}

}

我们试图用ES6的写法来重构上面的对象

const person = {

name: ‘tom’,

getName:()=>this.name

}

但是编译结果却是

var person = {

name: ‘tom’,

getName:functiongetName(){

returnundefined.name;

}

};

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var person = {

name: ‘tom’,

getName:function(){

returnthis.name;

}

}

我们试图用ES6的写法来重构上面的对象

const person = {

name: ‘tom’,

getName: () = > this.name

}

但是编译结果却是

var person = {

name: ‘tom’,

getName:functiongetName(){

returnundefined.name;

}

};

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

const person = {

name: ‘tom’,

getName:function(){

returnsetTimeout(()=>this.name,1000);

}

}

编译之后变成

var person = {

name: ‘tom’,

getName:functiongetName(){

var_this=this;

使用了我们在es5时常用的方式保存this引用

returnsetTimeout(function(){

return_this.name;

},1000);

}

};

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 可以稍做改动

const person = {

name: ‘tom’,

getName:function(){

returnsetTimeout(() =>this.name,1000);

}

}

编译之后变成

var person = {

name: ‘tom’,

getName:functiongetName(){

var_this=this;

使用了我们在es5时常用的方式保存this引用

returnsetTimeout(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);

1 2 3 4 5 6 7 8 9 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’

}

1 2 3 4 5 6 7 首先有这么一个对象

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;

1 2 3 4 5 6 7 8 9 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 任何获取对象属性值的场景都可以使用解析结构来减少我们的代码量 1 2 3 4 5 6 7 8 9 10 11 12 比如 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];

1 2 3 4 5 6 7 8 9 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) {

varx=x||20;

vary=y||30;

returnx+y;

}

console.log(add());

50 1 2 3 4 5 6 7

function add(x, y) {

varx=x||20;

vary=y||30;

returnx+y;

}

console.log(add());

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

function add(x = 20, y = 30) {

returnx+y;

}

console.log(add());

1 2 3 4 5

function add(x = 20, y = 30) {

returnx+y;

}

console.log(add());

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

const ButtonGroupProps = {

size: ‘normal’,

className: ‘xxxx-button-group’,

borderColor: ‘#333’

}

export default function ButtonGroup(props = ButtonGroupProps) { ……

}

1 2 3 4 5 6 7 8 9

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];

1 2 3 4

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

}) 1 2 3 4 5 6 7 8 9 10 11 12 13 14

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 > < /button> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 这种方式在react中十分常用 const props = { size : 1 , src : ‘xxxx’ , mode : ‘si’ } const { size , . . . others } = props ; console . log ( others ) 然后再利用暂开运算符传递给下一个元素，再以后封装react组件时会大量使用到这种方式，正在学习react的同学一定要搞懂这种使用方式 < button > < /

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

const add = (a, b, …more) => {

returnmore.reduce((m,n)=>m+n) +a+b

}

console.log(add(1, 23, 1, 2, 3, 4, 5)) 39 1 2 3 4 5 6 所有参数之和

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八、 模块 Modules深入学习ES6推荐 http://es6.ruanyifeng.com/

网站前端开发_前端开发者丨JavaScript

https://www.rokub.com