ES6语法学习

ES6语法学习

正则匹配

• 匹配的语法

var reg=new RegExp('^{/d}','g')//第一个匹配规则，第二个修饰符
var regOne=new RegExp(/^[0]$/i)// 斜杠内规则斜杠后修饰符
var regTwo=new RegExp(/^[0]$/i,'g').flags//第二个会覆盖第一个的饰符

• 遍历器转数组

  //遍历器--["test3", "e", "st3", "3", index: 10, input: "test1test2test3"]
          //遍历器转数组 方法一[...string.matchAll(regex)]
          // 转为数组的方法二 Array.from(string.matchAll(regex))
  

字符串方法

String.prototype.replaceAll(searchValue, replacement)
//searchValue是搜索模式，可以是一个字符串，也可以是一个全局的正则表达式（带有g修饰符）。

箭头函数

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;

箭头函数的一个用处是简化回调函数。

// 箭头函数写法
[1,2,3].map(x => x * x);

箭头函数有几个使用注意点。

（1）箭头函数没有自己的this对象。（对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。）

（2）不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

需要动态this的时候，也不应使用箭头函数。

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

上面代码运行时，点击按钮会报错，因为button的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通函数，this就会动态指向被点击的按钮对象。

另外，如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。

箭头函数内部，还可以再使用箭头函数。

尾递归

递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。

function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}
//二
function factorial(n, total = 1) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5) // 120
//三
function currying(fn, n) {
  return function (m) {
    return fn.call(this, m, n);
  };
}

function tailFactorial(n, total) {
  if (n === 1) return total;
  return tailFactorial(n - 1, n * total);
}

const factorial = currying(tailFactorial, 1);

factorial(5) // 120

function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
  if( n <= 1 ) {return ac2};

  return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}

Fibonacci2(100) // 573147844013817200000
Fibonacci2(1000) // 7.0330367711422765e+208
Fibonacci2(10000) // Infinity

Set用法

• 去重

  // 去除数组的重复成员
  [...new Set(array)]
  
  

• 合并

   let newList=[]
   let obj=[{text:"111",value:"00"}]
   let set =new Set([...this.option,...obj])
   newList.push(...set)
   console.log(newList,'11');