关于形参的一些问题 spread/rest 运算符的使用 正则进阶使用 标签模板介绍

关于形参的一些问题

function test(a, b, c) {}
test(1);
console.log(test.length);

当我们给c一个默认值时

function test(a, b, c = 1) {}
test(1);
console.log(test.length);

而如果默认值前移

function test(a, b = 2, c, d) {}
test(1);
console.log(test.length);

function test(a = 1, b, c, d) {}
test(1);
console.log(test.length);

我们知道arguments与传入的实参是一种映射关系

function test(a, b, c, d) {
  arguments[1] = 7;
  console.log(b);
}
test(1, 2, 3, 4, 5, 6);

但是如果我们给任意形参一个默认值 就会打破这种关系
arguments依然可以更改 但是 却没了映射关系

function test(a, b, c, d = 1) {
  arguments[1] = 7;
  console.log(b);
  console.log(arguments);
}
test(1, 2, 3, 4, 5, 6);

function foo({ x, y = 5 }) {
  console.log(x, y);
}

foo({}); //undefined 5
foo({ x: 1 }); //1 5
foo({ x: 1, y: 2 }); //1 2
foo(); //报错

添加默认值 就不报错了

function foo({ x, y = 5 } = {}) {
  console.log(x, y);
}
foo();

var x = 1;
function foo(
  x,
  y = function () {
    x = 2;
    console.log(x);
  }
) {
  var x = 3;
  y();
  console.log(x);
}
foo();
console.log(x);

this总结

1.默认绑定规则
严格模式下 为undefined
非严格模式下 指向window
2.隐式绑定 谁调用 指向谁

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo,
};
obj.foo();

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo,
};
var bar = obj.foo;
bar();

3.显示绑定 call(obj,a,b,c) apply(obj,[a,b,c]) bind(obj.ab.c)
4.new

箭头函数

const full = ({ first, last } = {}) => first + '' + last;
console.log(full({ first: 3, last: 5 }));

var arr = [12313, 1241, 41, 45, 3, 56, 6, 25, 76];

var arr1 = arr.sort((a, b) => a - b);
console.log(arr1);

箭头函数中没有arguments

var sum = (a, b) => {
  console.log(arguments);
  return a + b;
};

sum(1, 2);

spread/rest 运算符

展开或收集
数组 不是非数组

var sum = (...args) => {
  console.log(args);
};

sum(1, 2);

function foo(x, y, z) {
  console.log(x, y, z);
}
foo(...[1, 2, 3]);

let a = [1, 2, 3];
let b = [4, ...a, 5, 6];
console.log(b);

收集必须是最后一个参数

let fn = (a, b, ...c) => {
  console.log(a, b, c);
};
fn(1, 2, 3, 4, 5, 6, 7);

对于对象的扩展

var obj = {
  a: 1,
  b: 2,
  c: 3,
};
var obj1 = {
  a: 4,
  c: 5,
  d: 6,
};
var obj2 = {
  ...obj,
  ...obj1,
};
console.log(obj2);

数组排序的普通函数与箭头函数两种写法

function sortNum() {
  return Array.prototype.slice.call(arguments).sort(function (a, b) {
    return a - b;
  });
}
console.log(sortNum(12313, 1241, 41, 45, 3, 56, 6, 25, 76));

const sortNum = (...args) => args.sort((a, b) => a - b);

console.log(sortNum(12313, 1241, 41, 45, 3, 56, 6, 25, 76));

例题

function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id', this.id);
      };
    };
  };
}

var f = foo.call({ id: 1 });
var t1 = f.call({ id: 2 })()();
var t2 = f().call({ id: 3 })();
var t3 = f()().call({ id: 4 });

正常函数返回函数挂载到全局 window

function foo() {
  console.log('id', this.id);
  return function () {
    return function () {
      return function () {
        console.log('id', this.id);
      };
    };
  };
}

var f = foo.call({ id: 1 });
var t1 = f.call({ id: 2 })()();
var t2 = f().call({ id: 3 })();
var t3 = f()().call({ id: 4 });

正则进阶

console.log(RegExp.prototype);

我们可以看到原型上有match replace等在String原型上的方法
当我们使用String上的match方法时 实际上调用的是 正则上的Symbol.match

console.log(RegExp.prototype[Symbol.match]);
console.log(String.prototype.match);

y修饰符

sticky粘连

var reg = new RegExp('xyz', 'ig');
console.log(reg.global);
console.log(reg.ignoreCase);
console.log(reg.sticky);

同样是全局匹配 第一次匹配没问题
y会判断第一次匹配到的与第二次匹配到的否是连续的 不连续就null

var str = 'aaa_aa_a';

var reg1 = /a+/g;
var reg2 = /a+/y;

console.log(reg1.exec(str));
console.log(reg2.exec(str));
console.log(reg1.exec(str));
console.log(reg2.exec(str));

flags

flags找到所有配置的修饰符
source返回正则主体

var reg = /\wabed/giy;

console.log(reg.source);
console.log(reg.flags);

s修饰符

使.来代表一切
dotAll

console.log(/foo.bar/.test('foo\nbar'));
console.log(/foo.bar/s.test('foo\nbar'));
console.log(/foo.bar/s.dotAll);

标签模板

let a = 5;
let b = 10;

console.log(`Hello ${a + b} world ${a * b}`);

tag`Hello ${a + b} world ${a * b}`;

function tag($, $1, $2) {
  console.log($, $1, $2);
}