前端循环根据条件对象内赋值_前端研发——ES6应用之路

随着前端技术的不断发展，前端应用也变得越来越复杂。ES5的标准已经不能满足当今前端开发的需要，ES6、ES7应运而生。

在拍拍贷的实际业务中，我们总结了前端开发中经常使用的ES6特性，下面就来一起简单的了解下吧。

一、let和const

1.1 let

在ES6中我们更多的使用let来声明变量，它的用法和var一样，作用却千差万别。
使用let声明的变量只在let命令所在代码块内有效，不会污染外部作用域。

{

   let a = 1

   var b = 2

}

console.log(a) // Uncaught ReferenceError: a is not defined

console.log(b) // 2

1.2 const

和很多语言一样，ES6使用const来声明常量，但是一旦声明在其词法环境中就会进行初始化，常量的值就不能改变了。

const PI = 3.141592654

console.log(PI)

PI = 666 // Uncaught TypeError: Assignment to constant variable

const fakeConstValue // Uncaught SyntaxError: Missing initializer in const declaration

1.3 块级作用域

ES5有全局作用域和函数作用域，ES6中新增了块级作用域，就是{}包含的区域。
块级作用域可以避免内部变量对外部变量的影响，同时也可以防止循环中的计数变量泄漏为全局变量。
let和const就是块级作用域的绑定构造，这两种操作符具有静态限制，可以防止“在赋值之前的使用”。

二、变量的解构赋值

ES6中允许按照特定模式，从数组和对象中提取值赋值给变量，这被称为解构(Destructuring)。

解构允许在变量和值绑定时使用“模式匹配”，支持匹配数组和对象，解构支持失效弱化，与标准的对象查询Object[PropertyName]相似，当查询无结果时生成undefined值。其中数组的匹配必须按照顺序依次赋值，对象的匹配没有特定的顺序，而是按照属性名来赋值。

// 数组匹配

let [a, , b] = [1, 2, 3]

// 对象匹配

let Company = {

   name: '拍拍贷',

   stockCode: 'PPDF',

   location: 'ShangHai'

}

let { name, location, stockCode} = Company

// 失效弱化的解构

let { investorNumber} = {}

investorNumber === undefined

三、字符串扩展

3.1 字符串处理增强

ES6强化了处理字符串的能力，扩展了字符串对象。常用的扩展大致如下：

• 添加了遍历器接口，字符串可以直接被 for...of循环遍历。

• includes() 返回布尔值，表示是否找到了参数字符串。支持第二个参数，表示开始搜索的位置。

• startsWith() 返回布尔值，表示参数字符串是否在源字符串的头部。支持第二个参数，表示开始搜索的位置。

• endsWith() 返回布尔值，表示参数字符串是否在源字符串的尾部。支持第二个参数，表示对前n个字符进行搜索。

• repeat() 返回一个新字符串，表示将原字符串重复n次。

除了上面的方法，在ES7中还新增了字符串补全长度功能。 padStart用于头部补全， padEnd用于尾部补全。

'dai'.padStart('5, 'p') // 'ppdai'

'pp'.padEnd(5, 'dailian') // 'ppdai'

// 不传入第二个参数默认则用空格补全

'ppdai'.padStart(8) // '   ppdai'

// 生成10位数的数值字符串

'123'.padStart(10, '0') // '0000000123'

3.2 模板字符串

模板字符串(template string)是提供构造字符串的语法糖，用反引号(`)标识，可以作为普通字符串使用，也可以定义多行字符串或者嵌入变量使用，这与早期的HTML模板语言很像。

具体的使用规则如下：

• 嵌入变量使用，需要将变量写在${}之中

• 大括号之中可以进行运算，使用JS表达式甚至是函数

• 在模板字符串中使用反引号需要加反斜杠转义

// 多行字符串

`Working in PPDai

is great `

// 使用变量

let name = 'PPDai'

`My company name is ${name}`

// 使用函数

let sayHello = () => {

   return 'Hello, everyone! Happy New Year!'

}

console.log(`My blessing SMS to workmates is \`${sayHello()}\`.`)

四、数值扩展

4.1 二进制和八进制表示法

ES6中分别用0b和0o标识二进制和八进制数值