• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

【Vue.js 知识量化】ES6 语法积累

互联网 diligentman 2小时前 1次浏览

ES6 语法

  • let / var
  • const 的使用
  • class、extends、super
  • 箭头函数(arrow function)
  • 模版字符串(template string)
  • 结构(destructuring)
  • default、rest
  • ES6 module
    • import、export
    • 其他语法
  • Promise
  • 参考

不定时更新,慢慢积累…

let / var

事实上 var 的设计可以看成 JavaScript 语言设计上的错误,这种错误多半不能修复和移除,因为需要向后兼容

  • 大概十年前,Brendan Eich 就决定修复这个问题。于是他添加了一个新的关键字 let
  • 我们可以将 let 看成更完美的 var

块级作用域

  • JS 中使用 var 来声明一个变量时,变量的作用域主要是和函数的定义有关
  • 针对于其他块定义来说是没有作用域的,比如 if / for 等,这在开发中往往会引起一些问题

以前解决 块级作用域 问题的方法:

var btns = document.getElementsByTagName('button');
for (var i=0; i<btns.length; i++) {
  (function (num) { // 0
    btns[i].addEventListener('click', function () {
      console.log('第' + num + '个按钮被点击');
    })
  })(i)
}

ES6 解决 块级作用域 问题的方法:

const btns = document.getElementsByTagName('button')
for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function () {
    console.log('第' + i + '个按钮被点击');
  })
}

const 的使用

在很多语言中已经存在,比如 C/C++ 中,主要的作用是将某个变量修饰为常量

在 JavaScript 中也是如此,使用 const 修饰的标识符为常量。不可以再次赋值

什么时候使用 const 呢?

  • 当我们修饰的标识符不会被再次赋值时,就可以使用 const 来保证数据的安全性

建议:在 ES6 开发中,优先使用 const,只有需要改变某一个标识符的时候才使用 let

const 注意点:

  • const 注意一:const 修饰的变量不可修改值
    const a = 20;
    a = 30; // 错误,不可以修改
    
  • const 注意二:const 修饰的变量必须赋初值
    const name; // 错误,cons修饰的变量必须赋初值
    

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

const monent = require('moment')

class、extends、super

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念。新的 class 写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。

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

箭头函数(arrow function)

ES6 最常用的特性之一,用它写 function 比原来的写法简洁清晰很多。

function(i){ 
	return i + 1; 
} //ES5
i => i + 1 //ES6 或一个参数时省略为 i=>i+1

如果函数比较复杂,则需要用 {} 把代码包起来:

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

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)
  1. 使用 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

模版字符串(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> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

结构(destructuring)

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

ES5 的写法:

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"}

ES6:解构赋值

let dog = {type: 'animal', many: 2}
let { type, many} = dog   //import { validateUserName } from '@/utils/validate'
console.log(type, many)   //animal 2

default、rest

ES5 指定默认值:

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

ES6 指定默认值:

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

ES6 的 rest 语法:

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

如果不用 ES6 的话,我们则得使用 ES5 的 arguments

ES6 module

import、export

ES6 之前为解决 JavaScript 的模块化问题,常常利用一些第三方方案,主要有 CommonJS(服务器端)、AMD(浏览器端,如 require.js)

ES6 的 module 实现非常简单,可以成为服务器和浏览器通用的模块解决方案。

require.js 解决方案:

//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'

其他语法

export 命令除了输出变量,还可以输出函数,甚至是类:

//content.js
export default 'A cat'    
export function say(){
    return 'Hello!'
}    
export const type = 'dog' 

import:大括号里面的变量名,必须与被导入模块(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

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

ES6 用 * 实现模块的整体加载(将所有输出值加载到一个对象上)且可以和 as 一起使用:

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

Promise

参考 【Vue.js 知识量化】Promise

参考

  • 30分钟掌握ES6/ES2015核心内容

程序员灯塔
转载请注明原文链接:【Vue.js 知识量化】ES6 语法积累
喜欢 (0)