• 本栏最新文章
  • 本栏推荐文章
当前位置: 主页 > youle老虎机 >

ES6常用特性

时间:2019-06-13    作者:侠客    来源:未知

1、什么是ECMAScript6?和JavaScript什么关系?

1.1 什么是ECMAScript6?

首先说一下什么是ECMA(European Computer Manufacturers Association)欧洲谋略机制造商协会。

假如说ECMA是一种组织,那么ECMAScript 便是这个组织推出的一个脚本(script)的标准。

ECMAScript 6(以下简称ES6)是JavaScript说话的下一代标准。由于当前版本的ES6是在2015年宣布的,以是又称ECMAScript 2015。

1.2 ECMAScript6和JavaScript的关系?

JavaScript的核心便是ECMAScript,包括ActionScript

然则JavaScript由ECMAScript、DOM和BOM三部分组成

2、常用特点有?

let、const 及var的不合

Destructuring 解构赋值

arrow function 箭头函数

template string 模板字符串

class、extends、super

default、rest

总结

2.1 let、const和var之间的异同

let变量 有块级感化域,没有var的变量提升,不能重复声明覆盖

var变量 有函数感化域,有变量提升,可以重复声明覆盖

const常量 声明后弗成再改动的,弗成以重复声明覆盖

es6里面不建议应用var了,由于var定义的变量没有块级感化域,

还会呈现变量提升的环境,这样常常会导致你意想不到的差错,而let就不会这样.

const是定义那些弗成以被从新赋值的变量,let是定义通俗的变量。

var的变量提升和let对照,也就说let修复了var存在的一些bug。

console.log(name1); // 可以输出到节制台

console.log(name2); // 弗成以输出到节制台

var name1 = "Tom"; // var有变量提升

let name2 = "Jerry"; // let没有变量提升

var变量只有全局感化域和函数感化域,没有块级感化域,这带来很多分歧理的场景。第一种场景便是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级感化域。用它所声明的变量,只在let敕令所在的代码块内有效

var name = "Tom";

console.log(name);// Tom

var name = "Tom2";

console.log(name);// Tom2

while (true) {

var name = "Jerry";

console.log(name);//Jerry

break;

}

console.log(name);//Jerry

let变量弗成以重复声明覆盖

let name = "Tom";

let name = "Tom2";//此处报错

Uncaught SyntaxError: Identifier 'name' has already been declared

let变量是块级感化域

let name = "Tom";

while (true) {

//let是块级感化域 变量name只在此代码块内有效

let name = "Jerry";

console.log(name);//Jerry

break;

}

console.log(name);//Tom

别的一个var带来的分歧理场景便是用来计数的轮回变量泄露为全局变量

var a = [];

for (var i = 0; i

按钮的onclick事故场景

由于var不是块级感化域,以是这次声明的变量i,在全部感化域内有效,

针对这种环境,可以用闭包或let变量声明来处置惩罚按钮点击事故的问题。

var btns = document.querySelectorAll("button");

console.log(btns.length);

for(var i=0;i

const也是用来声明常量,一旦声明,常量的值就弗成变更

const PI = Math.PI

PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

const有一个很好的利用处景,便是当我们引用第三方库的时声明的变量,用const来声明可以避免未来不小心重命名而导致呈现bug:

const moment = require('moment');

注:在代码中,建议首选const声明,假如某个变量值是必要改动的,可以选择let变量声明。有利于js中的模块化开拓。

2.2 Destructuring 解构赋值

解构赋值:便是从工具或数组中提取值,对变量进行赋值,被称为解构(Destructuring)

2.2.1 从工具中提取值

let cat = "Tom";

let mouse = "Jerry";

let zoo = { cat: cat, mouse: mouse}

console.log(zoo);

console.log(zoo.cat + " and " + zoo.mouse);

//同样也可以写成下面的款式

let cat = "Tom";

let mouse = "Jerry";

let zoo = { cat, mouse}

console.log(zoo);

console.log(zoo.cat + " and " + zoo.mouse);

//还有这种款式

let cat2 = { type: 'animal', many: 2}

let { type, many } = cat2;

console.log(type,many); // animal2

2.2.2 从数组中提取值

//完全解构

let [a,b,c] = [1,2,3];

console.log(a+","+b+","+c); // 1,2,3

let [foo,[[bar],baz]] = [1,[[2],3]];

console.log(foo+","+bar+","+baz); // 1,2,3

let [x,,y] = [1,2,3];

console.log(x + "," + y); //1,3

let [head,...tail] = [1,2,3,4,5];

console.log(head); // 1

console.log(tail); // [2,3,4,5]

//不完全解构

let [x,y] = [1,2,3];

console.log(x+","+y);// 1,2

let [a,[b],d] = [1,[2,3],4];

console.log(a+","+b+","+d); // 1,2,4

2.2.3 解构赋值的用场

互换变量的值

从函数返回多个值

函数参数的定义

提取JSON数据

函数参数的默认值

遍历Map布局

输入模块的指定措施

1)互换变量的值

let x = 1;

let y = 2;

[x,y] = [y,x];

console.log(x + "," + y); // 2,1

从函数返回多个值

函数只能返回一个值,假如要返回多个值,就要把值放在数组或工具里面返回。有懂得构赋值就异常简单了

function example() {

return [1,2,3];

}

let [a,b,c] = example();

console.log(a,b,c); // 1 2 3

function example2() {

return {

x: 111,

y: 222,

z: 333

}

}

let {x,y,z} = example2();

console.log(x,y,z); // 111 222 333

函数参数的定义

function f([x,y,z]) {

return x + y + z;

}

console.log(f([1,2,3])); // 6

function f1({x,y,z}){

return x + y +z;

}

console.log(f1({y:3,z:2,x:1})); // 6

提取JSON数据

let jsonData = {

id: 2,

status: 'ok',

data: [123,456]

};

let { id,status,data: number } = jsonData;

console.log(id+","+status+","+number); // 2,ok,123,456

函数参数的默认值

jQuery.ajax = function (url, {

async = true,

beforeSend = function () {},

cache = true,

complete = function () {},

crossDomain = false,

global = true,

// ... more config

}) {

// ... do stuff

};

遍历Map布局

const map = new Map();

map.set('first','hello');

map.set('second','world');

for(let [key,value] of map){

console.log(key + " is " + value);

}

输入模块的指定措施

加载模块时,每每必要指定哪些输入措施。应用解构赋值如下:

const { sourcemap,sourcenode } = require('source-map');

2.3 箭头函数

2.3.1 箭头函数

应用“=>”来定义函数.如下是相同的两种函数声明要领

//箭头函数

var f = v => v;

//通俗函数

var f = function f(v) {

return v;

}

2.3.2 箭头函数的参数

假如箭头函数不必要参数或必要多个参数,就应用一个圆括号代表参数部分。

var f = () => 5;

//等同于如下

var f = function() {

return 5;

}

//必要多个参数

var f = (num1,num2) => num1 + num2;

//等同于

var f = function (num1,num2){

return num1 + num2;

}

//假如箭头函数多与一条语句,就应用大年夜括号将他们扩起来

var f = () => {

let a = 1;

let b = 3;

return a + b;

}

//因为{}被解释为代码块,箭头函数直接返回一个工具,必要在工具外貌加上括号,否则会报错

let retObject = id => ({ id:1, name: "Tom"});

//变量函数可以与解构赋值结合应用

const f = ({ first,second }) => first + " " + second;

//等同于

const f = function(person) {

return person.first + " " + person.second;

}

应用箭头函数,无意偶尔一行代码就能定义一个简单的对象函数。如下:

const square = n => n * n;

console.log(square(2));

console.log(square(3));

箭头函数的一个用场,便是用来简化回调函数

箭头函数能处置惩罚this指向的问题

经久以来,JavaScript说话的this工具不停是一个令人头痛的问题,在工具措施中应用this,必须异常小心。然则应用箭头函数后,要担心的问题就办理了。

应用通俗函数

class Animal {

constructor() {

this.type = 'animal';

}

says(say) {

setTimeout(function(){

//此处this指向的是全局工具,而不是animal工具

console.log(this.type + " says " + say);

console.log(this); // windows工具

},1000)

}

}

var animal = new Animal();

animal.says('hello'); // undefined says hello

应用箭头函数

class Animal {

constructor() {

this.type = 'animal';

}

says(say) {

//应用箭头函数

setTimeout( () => {

//此处this指向的Animal工具

console.log(this.type + " says " + say);

console.log(this); //Animal工具

},1000);

}

}

var animal = new Animal();

animal.says('hello'); // animal says hello

不应用箭头函数

//this重指向

class Animal {

constructor() {

this.type = 'animal';

}

says(say) {

//此处this指向的Animal工具

console.log(this);

const self = this;

setTimeout(function(){

//此处self.type便是构造措施中的值

console.log(self.type + " says " + say);

console.log(this); // windows工具

},1000)

}

}

var animal = new Animal();

animal.says('hello'); // animal says hello

var animal = new Animal();

animal.says('koook'); // animal says koook

//措施bind this,天生一个新的工具

class Animal {

constructor() {

this.type = 'animal';

}

says(say) {

//此处this指向的Animal工具

console.log(this);

// const self = this;

setTimeout(function(){

//此处self.type便是构造措施中的值

console.log(this.type + " says " + say);

console.log(this); // Animal工具

}.bind(this),1000)

}

}

var animal = new Animal();

animal.says('hello'); // animal says hello

箭头函数应用留意点

函数体内的this工具,便是定义时所在的工具,而不是应用时所在的工具。

弗成以当做构造函数,弗成以应用new敕令,否则会抛出一个差错

弗成以应用arguments工具,该工具在函数体内不存在。假如要应用,可以用rest参数代替

弗成以应用yield敕令,是以箭头函数不能用作Generator函数

2.4 模板字符串(template string)

当我们要插入大年夜段的html内容到文档中时,传统的写法异常麻烦;如下:

//不应用模板字符串

const tempStr = "There are " + '3' + " " +

"items in your basket, " +

"" + '$50.00' +

" are on sale!";

const tempNode = document.getElementById('app');

console.log(tempNode);

tempNode.innerHTML = tempStr;

//应用模板字符串

const tempStr = `

There are 3 items

in your basket, $50.00

are on sale!`;

const tempNode = document.getElementById('app');

console.log(tempNode);

tempNode.innerHTML = tempStr;

2.5 class extends super

ES6供给了更靠近传统说话的写法,引入了Class(类)这个观点。新的class写法让工具原型的写法加倍清晰、更像面向工具编程的语法,也加倍普通易懂。

//定义Animal类

class Animal {

//构造措施内定义的措施和属性是实例工具自己的

//构造措施为定义的措施和属性是所有实例工具共享的

constructor() {

this.type = 'animal';

}

says (say) {

console.log(this.type + " says " + say);

}

}

//实例化Animal工具

let animal = new Animal();

//animal工具调用says措施

animal.says('hello');// animal says hello

//定义Cat类,并承袭Animal类

class Cat extends Animal {

//子类的构造措施先调用父类的构造措施

constructor() {

//指代父类的实例(即父类的this工具)

super();

this.type = 'cat';

}

}

//实例化Cat工具

let cat = new Cat();

//cat工具调用父类的says措施

cat.says('miaomiao');// cat says miaomiao

上面代码首先用class定义了一个“类”,可以看到里面有一个constructor措施,这便是构造措施,而this关键字则代表实例工具。简单地说,constructor内定义的措施和属性是实例工具自己的,而constructor外定义的措施和属性则是所有实例工具可以共享的。

Class之间可以经由过程extends关键字实现承袭,这比ES5的经由过程改动原型链实现承袭,要清晰和方便很多。上面定义了一个Cat类,该类经由过程extends关键字,承袭了Animal类的所有属性和措施。

super关键字,它指代父类的实例(即父类的this工具)。子类必须在constructor措施中调用super措施,否则新建实例时会报错。这是由于子类没有自己的this工具,而是承袭父类的this工具,然后对其进行加工。假如不调用super措施,子类就得不到this工具。

ES6的承袭机制,实质是先创造父类的实例工具this(以是必须先调用super措施),然后再用子类的构造函数改动this。

2.6 default、rest参数

2.6.1 default的写法

//es5及之前的default写法

function animal(type) {

type = type || 'cat';

console.log(type);

}

animal(); // cat

animal("mouse"); // mouse

//es6的default写法

const animal2 = (type='cat') => console.log(type);

animal2(); // cat

animal2("dog"); // dog

2.6.2 rest参数

rest参数(...变量名),用于获取函数的多余参数,这样就不必要应用Arguments工具了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add (...values) {

let sum = 0;

for(let val of values) {

sum += val;

}

console.log(sum);

return sum;

}

add(1,2,3);

rest参数之后,不能再有其它参数

//error

function f(a,...b,c) {

...

}

上一篇:建筑工人匠心坚守30年收藏“红色大寨”文物50
下一篇:没有了