码迷，mamicode.com
首页 > 其他好文 > 详细

ES6常用语法简介

时间：2018-08-17 00:33:57      阅读：219      评论：0      收藏：0      [点我收藏+]

标签：onclick   pen   res   art   http   i++   简介   改变   原因   

//var 
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

------------------------------

//let
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6


------------------------------


//如果不用 let 实现类似功能
function iteratorFactory(i){
    var onclick = function(e){
        console.log(i)
    }
    return onclick;
}
var clickBoxs = document.querySelectorAll(‘.clickBox‘)
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = iteratorFactory(i)
}

Class 和普通构造器有何区别： 普通构造器在继承中不能直接向父类传参，必须要借助对象冒充继承传参和原型链继承，而class则结合两种继承，里面有super()传参


//es5继承

/*
原型链继承和对象冒充继承

对象冒充继承:没法继承原型链上面的属性和方法

原型链继承：可以继承构造函数里面以及原型链上面的属性和方法，实例化子类的时候没法给父类传参
* */


function Person(name,age) {
this.name=name;
this.age=age;
this.run=function(){
console.log(this.name+‘---‘+this.age);
}
}
Person.prototype.work=function(){
console.log(‘work‘);
}

function Web(name,age){
Person.call(this,name,age); /*对象冒充实现继承*/
}

Web.prototype=new Person();
var w=new Web(‘李四‘,20);
w.run();
w.work(); //w.work is not a function

Class写法

 

 

Es6中的单例(多次调用class的静态方法进行缓存)

class Db {

static getInstance(){ /*单例*/

if(!Db.instance){

Db.instance=new Db();
}
return Db.instance;
}

constructor(){

console.log(‘实例化会触发构造函数‘);

this.connect();
}

connect(){

console.log(‘连接数据库‘);
}
find(){
console.log(‘查询数据库‘);
}
}

var myDb=Db.getInstance();


var myDb2=Db.getInstance();


var myDb3=Db.getInstance();


var myDb4=Db.getInstance();

myDb3.find();

myDb4.find();

class, extends, super


class Animal {
    constructor(){
        this.type = ‘animal‘
    }
    says(say){
        console.log(this.type + ‘ says ‘ + say)
    }
}

let animal = new Animal()
animal.says(‘hello‘) //animal says hello

//继承
class 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的通过修改原型链实现继承，要清晰和方便很多。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。
这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

箭头函数 arrow function

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6

如果方程比较复杂，则需要用{}把代码包起来：

//es5
function(x, y) { 
    x++;
    y--;
    return x + y;
}
//es6
(x, y) => {x++; y--; return x+y}

除了看上去更简洁以外，arrow function还有一项超级无敌的功能！
长期以来，JavaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。例如：

//错误代码
class Animal {
    constructor(){
        this.type = ‘animal‘
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ‘ says ‘ + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says(‘hi‘)  //undefined says hi

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：

1.第一种是将this传给self,再用self来指代this

says(say){
   var self = this;
   setTimeout(function(){
       console.log(self.type + ‘ says ‘ + say)
}, 1000)

2.第二种方法是用bind(this),即

says(say){
    setTimeout(function(){
        console.log(this.type + ‘ says ‘ + say)
    }.bind(this), 1000)
}

但现在我们有了箭头函数，就不需要这么麻烦了：

class Animal {
    constructor(){
        this.type = ‘animal‘
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ‘ says ‘ + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says(‘hi‘)  //animal says hi

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

模板字符串 template string

//不用模板字符串 写法
$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);


//使用模板字符串写法
$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

用反引号（`）来标识起始，用${}来引用变量，而且所有的空格和缩进都会被保留在输出之中(==这个需要注意==)

解构 destructuring

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

let cat = ‘ken‘
let dog = ‘lili‘
let zoo = {cat: cat, dog: dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

//使用es6解构
let cat = ‘ken‘
let dog = ‘lili‘
let zoo = {cat, dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

//反过来可以这么写：
let dog = {type: ‘animal‘, many: 2}
let { type, many} = dog
console.log(type, many)   //animal 2

默认值 default


function animal(type){
    type = type || ‘cat‘  
    console.log(type)
}
animal()

//ES6
function animal(type = ‘cat‘){
    console.log(type)
}
animal()

展开操作符 rest arguments (...)

扩展运算符详细介绍

function animals(...types){
    console.log(types)
}
animals(‘cat‘, ‘dog‘, ‘fish‘) //["cat", "dog", "fish"]

import export

传统的写法CommonJS(服务器端)和AMD（浏览器端，如require.js）

AMD写法


//content.js
define(‘content.js‘, function(){
    return ‘A cat‘;
})

//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.js
export default ‘A cat‘    
export function say(){
    return ‘Hello!‘
}    
export const type = ‘dog‘ 




//index.js
import { say, type } from ‘./content‘  
let says = say()
console.log(`The ${type} says ${says}`)  //The dog says Hello

这里输入的时候要注意：大括号里面的变量名，必须与被导入模块（content.js）对外接口的名称相同。
如果还希望输入content.js中输出的默认值(default), 可以写在大括号外面。

//index.js
import 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实现一键换名。

//index.js
import 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

模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

//index.js

import 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

 

通常星号*结合as一起使用比较合适。

ES6常用语法简介

标签：onclick   pen   res   art   http   i++   简介   改变   原因   

原文地址：https://www.cnblogs.com/jinly/p/9490812.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！