深入理解ES6--块级作用域、字符串、正则、数组块级作用域绑定

66 阅读 0 评论 44 点赞

我是靠谱客的博主甜蜜小霸王，最近开发中收集的这篇文章主要介绍深入理解ES6--块级作用域、字符串、正则、数组块级作用域绑定，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

下述内容是通过阅读《深入理解ES6》后的总结，内容为对ES6的常用或错误使用点的总结，以便更深入的理解，这里并不会讲述和陈述基本用法，想要查看ES6基本语法请移步到ES6基本语法。

块级作用域绑定

块级声明

const和let只在当前代码块内有效，一旦执行到块外会立即被销毁。
javascript中的常量如果是对象，则对象中的值可以修改。

const name = 'lg'
name = 'lee'        // Uncaught TypeError: Assignment to constant variable.

const person = {name: 'lg'}
person.name = 'lee' // ok

javascript引擎在扫描代码发现变量声明时，要么将它们提升至作用域顶部（遇到var声明），要么将声明放到TDZ<临时死区>中（遇到let和const声明）

if(true){
    console.log(typeof a)   // Uncaught ReferenceError: a is not defined
    let a = 1
}

循环中的块级作用域绑定

for-in或for-of循环中使用const时的行为与使用let一致

 // 报错 Uncaught TypeError: Assignment to constant variable.
 for(const i = 0; i < 10; i++) console.log(i) 
 // 正常输出 a b
 for(const item of ['a', 'b']) console.log(item)    
 // 正常输出 a b
 for(const item in {a: 1, b: 2}) console.log(item)

在for-in和for-of循环中，因为每次迭代不会（像for循环的例子一样）修改已有绑定，而是会创建一个新绑定。

默认使用const，只有确实需要改变变量的值时使用let。这样可以在某种程度上实现代码的不可变，从而防止某些错误的产生。

字符串和正则表达式

字符串中的子串识别

方法	说明
includes、startsWith、endsWith	是否包含
indexOf、lastIndexOf	具体位置

正则y修饰符

从正则表达式的lastIndex属性开始进行匹配，如果在指定位置没能成功匹配，则停止继续匹配。

let txt = 'ligang1 ligang2'
p1 = /ligangds?/
p2 = /ligangds?/g
p3 = /ligangds?/y
p1.lastIndex = 1
p2.lastIndex = 1
p3.lastIndex = 1
console.log(p1.exec(txt)[0]) // 'ligang1 '
console.log(p2.exec(txt)[0]) // 'ligang2 ' 
console.log(p3.exec(txt)[0]) // Uncaught TypeError: Cannot read property '0' of null

p1没有修饰符，会忽略lastIndex的变化，默认从头匹配；
p2会从第二个字符”e“开始搜索，继续向后匹配；
p3会从第二个字符”e“开始匹配，由于第二个字符不符合直接停止匹配（滞待）；

关于y修饰符需要注意的：只有调用exec()和test()方法时才会涉及lastIndex属性；调用字符串的方法，不会触发滞待行为！

模板字面量

可以显示地使用n来指明插入新行的位置

 let message = `name: ligangnage: 28`

在一个模板字符串中引用另一个

 let name = 'ligang'
 let message = `my ${`name is ${name}`}`
 console.log(message) // my name is ligang

标签函数

let me = {name: 'ligang', age: 28}
function meTag(literals, ...substitutions) {
    let result = ''
    for(let i = 0, len = substitutions.length; i < len; i++) {
        result += literals[i] + substitutions[i];
    }
    result += literals[literals.length - 1]
    return result
}
let message = meTag`${me.name}-${me.age}`
console.log(message) // ligang-28

你不知道的javascrip(下卷)：提供方式

let me = {name: 'ligang', age: 28}
function meTag(literals, ...substitutions) {
    return literals.reduce((accumulator, value, index) => {
        return `${accumulator}${index > 0 ? substitutions[index - 1] : ''}${value}`
    }, '')
}
let message = meTag`${me.name}-${me.age}`
console.log(message) // ligang-28

arr.reduce((上一次调用回调时返回的累积值, 正在处理的元素, 正在处理的元素索引，调用的数组) => {}[, initialValue])
initialValue用作第一个调用 callback的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

模板字符串中使用原始字符串
String.raw() 是一个模板字符串的标签函数，用来获取一个模板字符串的原始字面量值

let name = 'ligang'
console.log(`my name is n ${name}`)
// my name is 
// ligang
String.raw`my name is n ${name}`  
// "my name is n ligang" 
String.raw({raw: "test"}, 0, 1, 2) // "t0e1s2t"

注意：在Chrome下输出有差异~~~

改进的数组功能

填充数组

Array.from(arrayLIke, mapFn, thisArg)
Array.prototype.fill(value[, start[, end]])
Array.prototype.copyWithin(target, start, end)

javascript不支持直接将非数组对象转换为真实数组。

let ary1 = Array.from({length: 3}, () => ({name: ''}))  // 深拷贝
ary1.forEach((item, index) => item.name = index)
console.log(ary1) // [{name: 0}, {name: 1}, {name: 2}]

let ary2 = new Array(3).fill({name: ''}) // 浅拷贝
ary2.forEach((item, index) => item.name = index)
console.log(ary2) // [{name: 2}, {name: 2}, {name: 2}]

let ary3 = Array.of({name: ''}, undefined, undefined).copyWithin(1, 0, 2).copyWithin(2, 0, 2) // 浅拷贝
ary3.forEach((item, index) => item.name = index)
console.log(ary3) // [{name: 2}, {name: 2}, {name: 2}]

Array.from()可以转换可迭代对象

let numbers = {
  *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
}
let ary4 = Array.from(numbers, (value) => value + 1)
console.log(ary4) // [2, 3, 4]

注意：如果一个对象既是类数组又是可迭代的，那么 Array.from()方法会根据迭代器来决定转换哪个值