es6快速入门

 

 

es6快速入门

 

https://www.cnblogs.com/zhouyangla/p/7225335.html

https://www.cnblogs.com/wxj1129549016/p/10022910.html

Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

 

阅读目录

• let和const 
  • let
• 函数
  • 箭头函数
• 对象 
  • 属性简洁表示法
  • Object.assign() 
  • 面向对象：类
• 1、vue的介绍
  • （1）前端三大框架
  • （2）cdn方式引用
  • （3）下载到本地引用
  • （4）库和框架
  • （5）实例化对象
• 2、vue的模板语法 
• 3、vue的思想：
• 4、vue的基本指令
  • （1）vue的指令系统之v-text和v-html（***），如下：
  • （2）条件渲染v-if和v-show，如下：效果如下图：
  • （3）v-bind和v-on
  • （4）列表渲染v-for（不仅可以遍历数组，还可以遍历对象），如下：
• 1、实现轮播图，代码如下：
• 2、Vue中使用ajax（created是组件创建完成时执行），代码如下：
• 3、实现音乐播放器，代码如下： 
• 1、计算属性（主要产生缓存的数据属性，防止DOM性能消耗）
• 2、侦听器（watch）
• 3、计算属性的应用（上例中音乐播放器改为计算属性实现）
• 4、关于函数中this指向的问题
• 1、查看接口，如下图：
• 2、json在线格式化工具：
• 3、自己查阅资料了解js中闭包。

 

---

一、ES6快速入门

回到顶部

let和const 

let

ES6新增了let命令，用于声明变量。其用法类似var，但是声明的变量只在let命令所在的代码块内有效。

 

效果如下：

var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。

 

刷新页面，粘贴代码，效果如下：

而let不会这样，let声明的变量不能在声明之前使用。

刷新页面，粘贴代码，效果如下：

注意：

let不允许在相同的作用域内重复声明同一个变量。 

比如：

function foo(){
    let x = 10;
    var x = 20;
} 
foo();  // 报错

刷新页面，粘贴代码，效果如下：

 

再比如：

 

刷新页面，粘贴代码，效果如下：

ES5中只有全局作用域和函数作用域，并没有块级作用域。

请看下面的示例：

 

刷新页面，粘贴代码，效果如下：

出现上述现象的原因就是在函数内部，由于变量提升导致内存的name变量覆盖了外层的name变量。

类似的情况还出现在for循环的计数变量最后会泄露为全局变量。

var声明的变量存在变量提升，而let则不会

 

刷新页面，粘贴代码，效果如下：

 

var声明的变量会污染全局，所以在for循环外部可以打印i的值。for循环中的i最好使用let声明

 

ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。

 

 

刷新页面，粘贴代码，效果如下：

此时，在foo函数内容，外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。

let声明能够将变量限制在当前的块级作用域中

const

const用来声明常量。const声明变量必须立即初始化，并且其值不能改变。

const声明常量的作用域与let相同，只在生命所在的块级作用于内有效

例如：

const PI = 3.14；

举例：

const 用来声明一个常量，不能修改

全局对象的属性：

ES6规定：var命令和function命令声明的全局变量依旧是全局对象的属性；let命令、const命令和class命令声明的全局变量不属于全局对象的属性。

查看下面的示例代码：

 

刷新页面，粘贴代码，效果如下：

 

 

变量的解构赋值

ES6允许按照一定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被成为解构赋值

 

刷新页面，粘贴代码，效果如下：

 

对象的解构赋值：

 

刷新页面，粘贴代码，效果如下：

 

var和function声明的变量，默认会在windows对象上

let声明的变量默认不会出现在windows对象上

举例：

window.name1输出undefined

 

回到顶部

函数

箭头函数

箭头函数特点：

　　1.如果参数只有一个，可以省略小括号

　　2.如果不写return，可以不屑大括号

　　3.没有arguments

　　4.不改变this指向

其中箭头函数中this指向被固定化，不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this

可以查看下面两段代码输出的区别：

 

刷新页面，粘贴代码，效果如下：

 

和

 

刷新页面，粘贴代码，效果如下：

但凡用到箭头函数，不要用this

回到顶部

对象 

属性简洁表示法

ES6允许直接写入变量和函数作为对象的属性和方法。

 

上面的写法等同于：

 

对象的方法也可以使用简洁表示法：

 

等同于：

 

刷新页面，粘贴代码，效果如下：

Object.assign() 

Object.assign方法用来将源对象（source）的所有可枚举属性复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，第二个参数是源对象。

参数必须都是对象，否则抛出TypeError错误。

Object.assjgn只复制自身属性，不可枚举属性（enumerable为false）和继承的属性不会被复制。

简单示例：

 

 刷新页面，粘贴代码，效果如下：

注意：

Object.assign方法的其他用处，可查看文末链接。

 

面向对象：类

ES5的构造对象的方式 使用构造函数来创造。构造函数唯一的不同是函数名首字母要大写。

构造函数，使用new关键字创建对象

修改test.html，增加一段js代码

 

刷新页面，效果如下：

ES6 使用Class构造对象的方式：

修改test.html，js代码如下：

 

刷新页面，效果如下：

二、Vue

回到顶部

1、vue的介绍

（1）前端三大框架

（可以去github查看三个框架的 star星）：   

　　vue     尤雨溪，渐进式的JavaScript框架                                

　　react    Facebook公司，里面的（高阶函数 es6）非常多，对初学者不友好           

　　angular  谷歌公司，目前更新到6.0，学习angular得需要玩一下typescript

（2）cdn方式引用

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

（3）下载到本地引用

<script src='./vue.js'></script>

（4）库和框架

　　上面vue.js文件是一个库，小而精；

　　框架是功能比较齐全，像Django，大而全，功能比较多；

（5）实例化对象

　　示例代码：

 

　　注意：如果是我们自己定义的属性和方法，则全部暴露在外面，如果是vue实例对象自己属性和方法，会在前边加一个”$”进行区分。另外，data中有一个观察者Observer，在观察着一些数据是否发生了改变，若改变，则将改变后的值立马渲染到DOM中对应的地方，控制台查看data效果如下图：

　　

回到顶部

2、vue的模板语法 

<div id="app">
    <!--模板语法-->
    <h2>{{ msg1 }}</h2>
    <h3>{{ 'haha' }}</h3>
    <h3>{{ 1+1 }}</h3>
    <h4>{{ {'name':'alex'} }}</h4>
    <h5>{{ person.name }}</h5>
    <h2>{{ 1>2?'真的':'假的' }}</h2>
    <p>{{ msg2.split('').reverse().join('') }}</p>
</div>

回到顶部

3、vue的思想：

数据驱动视图，设计模式MVVM（model view viewmodel）

回到顶部

4、vue的基本指令

（使用指令系统后边一定是字符串，且字符串中的变量一定是数据属性中已有的变量）

（1）vue的指令系统之v-text和v-html（***），如下：

 

效果如下图：

（2）条件渲染v-if和v-show，如下：效果如下图：

　　<div class="box1" v-show="isShow">hello</div>
　　<div class="box2" v-if="isShow">hello</div>

　　分析：isShow为真则显示div，为假则不显示；

　　区别：v-show为假时相当于display:none；v-if为假时相当于移除该div，但是有一个占位的注释”<!-- -->”；

　　官网对v-if和v-show的区别：

　　　　1）v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

　　　　2）v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　　　　3）相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

　　　　4）一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

　　v-if与v-else：可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.5">
   Now you see me
</div>
<div v-else>
   Now you don't
</div>
// 注意：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

（3）v-bind和v-on

　　v-bind：标签中所有属性，如img标签的src alt，a标签的href title id class等，如下：

　<img v-bind:src="imgSrc" v-bind:alt="msg">

　　v-bind:class='{active:isActive}'表示若isActive（数据属性中定义的变量）为真，则对应div增加active类，否则不增加，如下：

　<div class="box" v-bind:class='{active:isActive}'></div>

　　v-on：监听js中的所有事件，如click，mouseover，mouseout等，如下：

　<button v-on:click="clickHandler">切换颜色</button>

　　v-bind的简便写法是":"，如：<div class="box" :class='{active:isActive}'></div>

　　v-on的简便写法是"@"，如：<button @click="clickHandler">切换颜色</button>

（4）列表渲染v-for（不仅可以遍历数组，还可以遍历对象），如下：

 

　　总结：遍历数组时，一个参数是值，两个参数是（值，索引）；遍历对象时，一个参数是值，两个参数是（值，键）。

　　注意：一定要绑定一个标识（有id就绑定id，没有id绑定index），则值改变会直接通过key查找，而不用再去遍历查找，提升效率。

三、Vue应用示例

回到顶部

1、实现轮播图，代码如下：

 

回到顶部

2、Vue中使用ajax（created是组件创建完成时执行），代码如下：

 

　　页面运行效果如下图：

　　依次点击每一项，控制台效果如下图：

回到顶部

3、实现音乐播放器，代码如下： 

 

四、Vue基础知识

回到顶部

1、计算属性（主要产生缓存的数据属性，防止DOM性能消耗）

　　模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

　　在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。例如：

 

回到顶部

2、侦听器（watch）

　　虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

　　watch可以监听单个属性，如果想监听多个属性，则声明多个属性的监听，如下：

 

注意：计算属性即可以监听单个属性，又可以监听多个属性，如下示例：

 

回到顶部

3、计算属性的应用（上例中音乐播放器改为计算属性实现）

　　修改audio标签的src属性值，如下：

computed:{
    currentSong(){
        // 既监听了musicList，又监听了currentIndex
        return this.musicList[this.currentIndex].songSrc
    }
}

　　总结：计算属性的方法即可以在模板语法中使用，又可以在指令系统中使用。

回到顶部

4、关于函数中this指向的问题

　　Vue实例对象中，一般methods和computed中定义的函数中的this是指当前Vue实例对象，而created中的ajax和定时器中定义的函数中的this是指ajax或者定时器对象，这时，ajax和定时器中的函数改为箭头函数，就可以改变this的指向，即this指向当前Vue实例对象。

五、补充知识点

回到顶部

1、查看接口，如下图：

回到顶部

2、json在线格式化工具：

http://www.bejson.com/

回到顶部

3、自己查阅资料了解js中闭包。

 

 

es6快速入门

 

上次分享了es6开发环境的搭建，本次接着分享es6常用的特性。

1.变量声明let和const

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

function aa() {
    if(bool) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的代码实际上是：

function aa() {
    var test // 变量提升
    if(bool) {
        test = 'hello man'
    } else {
        //此处访问test 值为undefined
        console.log(test)
    }
    //此处访问test 值为undefined
  }

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。

接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？

• 在一个函数内部
• 在一个代码块内部

说白了 {}大括号内的代码块即为let 和 const的作用域。

看以下代码：

 function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test 在此处访问不到
        console.log(test)
    }
  }

let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

再来说说const。

 const name = 'lux'
    name = 'joe' //再次赋值此时会报错

说一道面试题

var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(function() { console.log(i) })
    }
    funcs.forEach(function(func) {
        func()
    })

这样的面试题是大家常见，很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢？两种解决方法。直接上代码。

// ES5告诉我们可以利用闭包解决这个问题
    var funcs = []
    for (var i = 0; i < 10; i++) {
        func.push((function(value) {
            return function() {
                console.log(value)
            }
        }(i)))
    }
    // es6
    for (let i = 0; i < 10; i++) {
        func.push(function() {
            console.log(i)
        })
    }

达到相同的效果，es6简洁的解决方案是不是更让你心动！！！

2.模板字符串

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

 //es5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

  // es5
    var msg = "Hi \
    man!
    "
    // es6
    const template = `<div>
        <span>hello world</span>
    </div>`

对于字符串es6当然也提供了很多厉害的方法。说几个常用的。

// 1.includes：判断是否包含然后直接返回布尔值
    let str = 'hahay'
    console.log(str.includes('y')) // true
    // 2.repeat: 获取字符串重复n次
    let s = 'he'
    console.log(s.repeat(3)) // 'hehehe'
    //如果你带入小数, Math.floor(num) 来处理

3.函数

函数默认参数

在ES5我们给函数定义参数默认值是怎么样？

 function action(num) {
        num = num || 200
        //当传入num时，num为传入的值
        //当没传入参数时，num即有了默认值200
        return num
    }

但细心观察的同学们肯定会发现，num传入为0的时候就是false， 此时num = 200 与我们的实际要的效果明显不一样

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

 function action(num = 200) {
        console.log(num)
    }
    action() //200
    action(300) //300

箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

• 不需要function关键字来创建函数
• 省略return关键字
• 继承当前上下文的 this 关键字

//例如：
    [1,2,3].map( x => x + 1 )

//等同于：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this))

说个小细节。

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；例如:

 var people = name => 'hello' + name
    //参数name就没有括号

作为参考

  var people = (name, age) => {
        const fullName = 'h' + name
        return fullName
    } 
    //如果缺少()或者{}就会报错

4.拓展的对象功能

对象初始化简写

ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：

 function people(name, age) {
        return {
            name: name,
            age: age
        };
    }

键值对重名，ES6可以简写如下：

  function people(name, age) {
        return {
            name,
            age
        };
    }

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：

 const people = {
        name: 'lux',
        getName: function() {
            console.log(this.name)
        }
    }

ES6通过省略冒号与 function 关键字，将这个语法变得更简洁

 const people = {
        name: 'lux',
        getName () {
            console.log(this.name)
        }
    }

ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

 const obj = Object.assign({}, objA, objB)

5.更方便的数据访问--解构

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程

ES5我们提取对象中的信息形式如下：

const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)

是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，解构能让我们从对象或者数组里取出数据存为变量，例如

//对象
    const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)
    //数组
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'

6.Spread Operator 展开运算符

ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿...接下来就展示一下它的用途。

组装对象或者数组

//数组
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]

    //对象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
}

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //对象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"
}

对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边

const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

7.import 和 export

import导入模块、export导出模块

//全部导入
import people from './example'

//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from './example'

// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

以前有人问我，导入的时候有没有大括号的区别是什么。下面是我在工作中的总结：

1.当用export default people导出时，就用 import people 导入（不带大括号）

2.一个文件里，有且只能有一个export default。但可以有多个export。

3.当用export name 时，就用import { name }导入（记得带上大括号）

4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age } 

5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

8. Promise

在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。

说白了就是用同步的方式去写异步代码。

发起异步请求

 fetch('/api/todos')
      .then(res => res.json())
      .then(data => ({ data }))
      .catch(err => ({ err }));

今天看到一篇关于面试题的很有意思。

setTimeout(function() {
      console.log(1)
    }, 0);
    new Promise(function executor(resolve) {
      console.log(2);
      for( var i=0 ; i<10000 ; i++ ) {
        i == 9999 && resolve();
      }
      console.log(3);
    }).then(function() {
      console.log(4);
    });
    console.log(5);

Excuse me？这个前端面试在搞事！

当然以上promise的知识点，这个只是冰山一角。需要更多地去学习应用。

9.Generators

生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。

OK。说说迭代器。当你调用一个generator时，它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值，它返回的对象具有两个属性：done和value。value是你获得的值，done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子，每张排队号就是这里的value，打印票的纸是否用完就这是这里的done。

// 生成器
    function *createIterator() {
        yield 1;
        yield 2;
        yield 3;
    }

    // 生成器能像正规函数那样被调用，但会返回一个迭代器
    let iterator = createIterator();

    console.log(iterator.next().value); // 1
    console.log(iterator.next().value); // 2
    console.log(iterator.next().value); // 3

那生成器和迭代器又有什么用处呢？

围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于我们来说是很困难的事，我们的函数并不会等待异步调用完再执行，你可能会想到用回调函数，（当然还有其他方案比如Promise比如Async/await）。

生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

那么问题来了，咱们也不能手动一直调用next()方法，你需要一个能够调用生成器并启动迭代器的方法。就像这样子的

function run(taskDef) { //taskDef即一个生成器函数

        // 创建迭代器，让它在别处可用
        let task = taskDef();

        // 启动任务
        let result = task.next();

        // 递归使用函数来保持对 next() 的调用
        function step() {

            // 如果还有更多要做的
            if (!result.done) {
                result = task.next();
                step();
            }
        }

        // 开始处理过程
        step();

    }

生成器与迭代器最有趣、最令人激动的方面，或许就是可创建外观清晰的异步操作代码。你不必到处使用回调函数，而是可以建立貌似同步的代码，但实际上却使用 yield 来等待异步操作结束。

总结

ES6的特性远不止于此，但对于我们日常的开发开说。这已经是够够的了。还有很多有意思的方法。比如findIndex...等等。包括用set来完成面试题常客数组去重问题。我和我的小伙伴们都惊呆了!