site infoHacknerd | Tech Blog
blog cover

🪵 ECMAScript6

ES6JavaScript

字符串新增方法

  • 1.fromCodePoint()

    • 返回unicode对应码点的字符

    javascriptCopy
    String.fromCodePoint(0x20BB7)

  • 1.codePointAt

  • 1.String.raw

  • 1.normalize
  • 2.repeat

    • 对字符串重复n次

    遇到负数 和 Infinity 会报错

    遇到小数 如2.9 会进行取整, -0.9 （会先进行取整 -0 repeat 0次）

    javascriptCopy
    '123'.repeat(2.9) // 123123123

  • 1.padStart padEnd

    • 常用于补全指定位数

    javascriptCopy
    '100'.padStart(8, '0') // 00000100

    进行字符串提示

    javascriptCopy
    '12'.padStart(10, 'YYYY-MM-DD') // YYYY-MM-12
'09-12'.padStart(10, 'YYYY-MM-DD') // YYYY-09-12

  • 1.trimStart trimEnd
  • 2.includes，statrWith，endWith
  • 3.matchAll
  • 4.replaceAll

    • 历史上replace 只能替换第一个字符，想要替换所有匹配择不得不使用正则表达式 g 修饰号。

    ES2021引入了replaceAll，进行一次性替换。

    特殊字符

  • $& 匹配的字符串
  • $` 匹配结果前面字符
  • $’ 匹配结果后面字符
  • $n 第几组内容
  • $$ 美元符号
  • 1.at

    • 返回指定位置的字符，负数代表倒数位置

    javascriptCopy
    '123'.at(1) // 1
'123'.at(-1) // 3

    正则扩展

  • 1.RegExp构造函数

    • ES5 不支持添加修饰符，但ES6 改变了这种行为。

    javascriptCopy
    let regrex = new RegExp('xyz', 'i')

  • 1.u 修饰符

    • JavaScript 不能很好的处理 超过\uFFFF 的字符

  • 1.RegExp.prototype.unicode

    • 标识是否使用了u 修饰符

  • 1.y 修饰符

    • 粘连模式

    用于从上一次匹配的成功的下一个位置开始匹配

  • 1.RegExp.prototype.sticky

    • 标识是否设置了y修饰符

  • 1.RegExp.prototype.flags

    • 返回表达式中的修饰符

  • 1.dotAll

    • 正则表达式. 代表任意单个字符，但存在两个例外。四字节的UTF-16字符和终止符(line terminator charactor)

  • U+000A 换行符 \n
  • U+000D 回车符 \r
  • U+2028 行分隔符
  • U+2029 段风格符
  • 1.后行断言 后行否定断言

    • 比如 (?<=y)x 表示x必须出现在y的后面，(?<!y)x 表示x不能出现在y后面

  • 1.unicode类

    • ES2020中 引入

    javascriptCopy
    \p{UnicodePropertyName=UnicodePropertyValue}

  • 1.具名组匹配

    • 组匹配

    javascriptCopy
    const result =  \^(\d{4})-(\d{2})-(\d{2})$\.exec('1999-12-31')
const year = result[0]
const month = result[1]
const day = result[2]

    具名组匹配

    javascriptCopy
    const result =  \^(?<year>\d{4})-(?<year>\d{2})-(?<year>\d{2})$\.exec('1999-12-31')
const year = result.groups.year
const month = result.groups.month
const day = result.groups.day

    引用具名组匹配 \k<组名>

  • 1.d 修饰符
  • 2.mathAll

    • 数值扩展

    TODO

    函数扩展

  • 1.默认参数
    • javascriptCopy
    function Point(x=0, y =0) {
	this.x = x;
	this.y = y;
}

const point = new Point() // { x: 0, y: 0 }

  • 1.rest参数

    • …rest 用于获取函数多余参数这样就不需要使用arguments对象了。

  • 1.name属性

    • 返回函数名

    javascriptCopy
    function a () {} 

a.name // a

  • 1.箭头函数

    • 箭头函数使得回调函数更加简洁

  • 不存在arguments对象，可以用rest参数替代
  • 箭头函数没有自己的this对象，内部的this就是定义时上层作用域中的this 。正是因为它没有this，所以也就不能用作构造函数。
    • javascriptCopy
    function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100); // s1: 3
setTimeout(() => console.log('s2: ', timer.s2), 3100); // s2: 0

    上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2一次都没更新。

    箭头函数实际上可以让this指向固定化，绑定this使得它不再可变，这种特性很有利于封装回调函数。下面是一个例子，DOM 事件的回调函数封装在一个对象里面。

    不适用场景

    javascriptCopy
    const cat = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}

    上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成上面那样的箭头函数，使得this指向全局对象，因此不会得到预期结果。这是因为对象不构成单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。

    javascriptCopy
    globalThis.s = 21;

const obj = {
  s: 42,
  m: () => console.log(this.s)
};

obj.m() // 21

    上面例子中，obj.m()使用箭头函数定义。JavaScript 引擎的处理方法是，先在全局空间生成这个箭头函数，然后赋值给obj.m，这导致箭头函数内部的this指向全局对象，所以obj.m()输出的是全局空间的21，而不是对象内部的42。上面的代码实际上等同于下面的代码。

  • 1.toStrong 方法返回自身
  • 2.尾调用优化

    • 函数最后一步是调用一个函数，就称为尾调用

    javascriptCopy
    // 不属于
function f(x){
  let y = g(x);
  return y;
}

// 不属于
function f(x){
  return g(x) + 1;
}

// 不属于
function f(x){
  g(x);
}

// 属于
function f(x) {
  if (x > 0) {
    return m(x)
  }
  return n(x);
}

  • 1.尾递归

    • 数组扩展

  • 1.扩展运算符

    • Contents

    • 字符串新增方法
    • 正则扩展
    • 数值扩展
    • 函数扩展
    • 数组扩展
    2024/03/18 06:02