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

版权声明:本文为博主原创文章,未经博主允许不得转载。转载请标明出处:http://blog.csdn.net/ligang2585116! https://blog.csdn.net/ligang2585116/article/details/79750203

下述内容是通过阅读《深入理解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 = /ligang\d\s?/
p2 = /ligang\d\s?/g
p3 = /ligang\d\s?/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: ligang\nage: 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()方法会根据迭代器来决定转换哪个值

数组索引

  • Array.prototype.find(callback[, thisArg])
  • Array.prototype.findIndex(callback[, thisArg])

如果要在数组中根据某个条件查找匹配的元素,那么find()方法和findIndex()方法可以很好地完成任务;如果只想查找与某个值匹配的元素,则indexOf()方法和lastIndexOf()方法是更好的选择。

猜你喜欢

转载自blog.csdn.net/ligang2585116/article/details/79750203