前端模块开发之ES6特性（七）

电玩女神 2022-05-22 03:55 193阅读 0赞

## 前端模块开发之ES6特性（七） ##

*   *  前端模块开发之ES6特性（七）
 *  1.变量声明const和let
 *  2.模板字符串
    
     *  第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用$\{\}来界定。
     *  第二个用途，在ES5时我们通过反斜杠(\\)来做多行字符串或者字符串一行行拼接。ES6反引号(\`\`)直接搞定。
 *  3.函数
    
     *  函数默认参数
     *  箭头函数
     *  箭头函数返回函数

> 刚开始用vue或者react，很多时候我们都会把ES6这个大兄弟加入我们的技术栈中。但是ES6那么多那么多特性，我们真的需要全部都掌握吗？秉着二八原则，掌握好常用的、有用的这个可以让我们的开发快速起飞。

接下来我们就聊聊ES6那些可爱的新特性吧。

# 1.变量声明const和let #

在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都是块级作用域。`怎么理解这个块级作用域？  
1. 在一个函数内部  
2. 在一个代码块内部

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

看以下代码：

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

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

再来说说`const`  
`const` 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了。

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

还有，如果`const`的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行。

const student = { name: 'cc' }
        // 没毛病
        student.name = 'yy'
        // 如果这样子就会报错了
        student  = { name: 'yy' }

说一道面试题

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++) {
            funcs.push(
              (function(value) { 
                return function() { 
                    console.log(value)
                }
            })(i)
          )
        }
        funcs.forEach(function(func) { 
            func()
        })

// 再来看看es6怎么处理的

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

达到相同的效果，`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：判断是否包含然后直接返回布尔值
        const str = 'hahay'
        console.log(str.includes('y')) // true
    
        // 2.repeat: 获取字符串重复n次
        const str = 'he'
        console.log(str.repeat(3)) // 'hehehe'
        //如果你带入小数, Math.floor(num) 来处理
        // s.repeat(3.1) 或者 s.repeat(3.9) 都当做成 s.repeat(3) 来处理
    
        // 3. startsWith 和 endsWith 判断是否以 给定文本 开始或者结束
        const str =  'hello world!'
        console.log(str.startsWith('hello')) // true
        console.log(str.endsWith('!')) // true

# 3.函数 #

## 函数默认参数 ##

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

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

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

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

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

## 箭头函数 ##

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数（Lambda表达式）。

箭头函数最直观的三个特点。  
1. 不需要 function 关键字来创建函数  
2. 省略 return 关键字  
3. 继承当前上下文的 this 关键字，`没有this、super、arguments和new.target绑定--也就是说箭头函数中的this、super、arguments和new.target这些值由外围最近一层非箭头函数决定`

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

说个小细节。

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

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

作为参考

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

`箭头函数this不绑定`. 箭头函数的出现就是为了解决this作用域的问题和简化代码量。  
es3-5中的函数this的值和调用这个函数的上下文有关，基本是都是window对象，箭头函数的this其实就是在定义的时候就确定好的，以后不管怎么调用这个箭头函数，箭头函数的this始终为定义时的this。

const Person = {
        'name': 'little bear',
        'age': 18,
        'sayHello': () => {
          setInterval(() => { console.log('我叫' + this.name + '我今年' + this.age + '岁!') }, 1000) } } Person.sayHello()

打印结果：`我叫underfined我今年underrined岁`。但改成如下就可以

const Person = {
        'name': 'little bear',
        'age': 18,
        sayHello1: function() {
          setInterval(() => { console.log('我叫' + this.name + '我今年' + this.age + '岁!') }, 1000) } } Person.sayHello();

打印结果:`我叫little bear我今年18岁`  
`说明箭头函数中的this、super、arguments和new.target这些值由外围最近一层非箭头函数决定,外围最近一层非箭头函数在哪个对象上,this就指向哪个对象`,  
再比较

打印结果:`{ num: 4, fn: [Function: fn] }`

## 箭头函数返回函数 ##

我们经常看到如下写法

const test = (a)=>(b)=>{
        console.log("a:" +a)
        console.log("b:" +b);
        return a;
    }

有2个`=>`箭头符号,甚至多个箭头符号,它表达的意思是什么呢,其实=>相当于return的作用,但如果单单这么理解你就片面了,比如上面的2个=>函数其实写完整是

const testc=function(a){ 
        return function(b){ 
            console.log("a:" +a)
            console.log("b:" +b);
            return a;
        }
    }```
    使用return返回函数,在返回的函数里可以使用外层的作用域里的值,比如参数a,千万不要理解成下面的形势,不是函数调用.

const testa=function(a)\{  
return testb(a)  
\}  
const testb=function(b)\{  
console.log(“b:” +b);  
return b;  
\}

#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)  
\}  
\}

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

const objA = \{ name: ‘cc’, age: 18 \}  
const objB = \{ address: ‘beijing’ \}  
const objC = \{\} // 这个为目标对象  
const obj = Object.assign(objC, objA, objB)

// 我们将 objA objB objC obj 分别输出看看
    console.log(objA)   // { name: 'cc', age: 18 }
    console.log(objB) // { address: 'beijing' }
    console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
    console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }
    
    // 是的，目标对象ObjC的值被改变了。
    // so，如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}
    Object.assign({}, objC, 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()方法，你需要一个能够调用生成器并启动迭代器的方法。就像这样子的

“\`

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

ES6新特性远不止于此，但对于我们日常的开发来说。这算不上全部，但是能算得上是高频使用了。当然还有很有好玩有意思的特性。比如一些数组的新方法、class…等等。包括用set处理数组去重问题等等。我和我的小伙伴们都惊呆了!