【Vue(1)，mysql常见笔试题

}

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) 

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**。



[]( )模版字符串（template string）

=========================================================================================



传统的使用 `+` 和 `"` 字符串拼接：

$("#result").append(

"There are " + basket.count + " " +

"items in your basket, " +

“” + basket.onSale +

" are on sale!"

ES6 的新特性模板字符串：使用 `${}` 来引用变量

$("#result").append(`

There are ${basket.count} items

in your basket, ${basket.onSale}

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