0228

1.【单选】以下选项错误的是：

a: 我们应该尽量避免使用 "==" 来做比较
b: Object.is 与 “===” 除了对 NaN 的比较结果不同外，比较行为基本一致
c: 通过 Object toString 方法可以帮助我们查看数据的类型，Object.prototype.toString.call(NaN) 返回的值为 '[object Number]'
d: 表达式 toString.call(new String('test')) === toString.call('test') && new String('test') !== String('test') 的结果是 true。
e: Date 实例的 toLocaleString 方法的返回值会根据语言环境返回不同的值。

（b）

• （b）：Object.is

Object.is(value1, value2);

1. 这种相等性判断逻辑和传统的 == 不同，Object.is不会做隐式类型转换
2. 与 === 也不一样，具体表现在对 -0,+0以及 NaN 的判断

Object.is(-0, +0);            // false
-0 === +0;                    // true

Object.is(NaN, NaN);          //true
NaN === NaN;                  //false

• （d）：New String() 与 String()

typeof new String('test') //"object"
typeof String('test') //"string"

2.【多选】以下选项正确的是

a: setTimeout 两次执行之间的间隔大于等于指定的时间，setInterval 两次执行之间的间隔会小于setInterval指定的时间。
b: requestAnimationFrame 总是与浏览器屏幕的刷新次数匹配，大多数屏幕的刷新频率是 60HZ，对应大约 16.7ms 就会执行一次回调函数。
c: promise.then中回调是异步执行的，且比setTimeout先执行。
d: 做动画效果，建议使用 requestAnimationFrame > setTimeout

（b，c，d）

• （b） requestAnimationFrame(callback)；下一次重绘之前调用回调函数，时间是精确的。回调函数执行次数通常与浏览器屏幕刷新次数相匹配，一般是每秒60次。

window.requestAnimationFrame(callback);

3. 【编程】实现 parse 函数，满足如下用例

const template = 'there are ${count} ${name} on the ${place}.';
function create(value) {
    return {
      tag: 'div',
      children: value
    };
}
function parse(tpl, data, create) {
  // 补充代码
}
console.log(parse(template, {count: 2, name: 'apples', place: 'table'}, create));

/* 输出数据如下，最终输出的是混合了字符串和 JSON 对象的数组。
['there are ', {tag: 'div', children: 2}, ' ', {tag: 'div', children: 'apples'},' on the ', {tag: 'div', children: 'table'}, '.']
*/

function parse(tpl, data, create) {
  let result = [];
  while(tpl.indexOf("${") >= 0){
    let preIndex = tpl.indexOf("${");
    let  endIndex = tpl.indexOf("}");
    if(endIndex > preIndex){
      let attr = tpl.substring(preIndex+2,endIndex);
      result.push(tpl.substring(0,preIndex));
      result.push(create(data[attr]));

      tpl = tpl.substring(endIndex+1);
    }
    else{
      break;
    }
  }
  result.push(tpl);
  return result;
}

replace + Reg

function parse(tpl, data, create) {
  let resultArr = [];
  let cursor = 0;
  template.replace(/\$\{.+?\}/g,(matched,index)=>{
    console.log(matched,index);
    resultArr.push(tpl.substring(cursor,index));
    let val = matched.substring(2,matched.length-1);
    resultArr.push(create(data[val]));
    cursor = index + matched.length;
  })
  resultArr.push(tpl.substring(cursor,tpl.length));
  return resultArr;
}

function parse(tpl, data, create) {
  const result = [];
  let cursor = 0;
  tpl.replace(/\$\{([^\}]+)\}/g, (matched, key, index) => {
    const prevText = tpl.slice(cursor, index);
    result.push(prevText);

    cursor = index + matched.length;
    if(data[key]) {
      result.push(create(data[key]));
    }else {
      // 如果没有对应数据的处理
    }
  });
  
  if(cursor < tpl.length) {
    result.push(tpl.slice(cursor));
  }
  
  return result;
}

补充：正则表达式

在 JavaScript 中，正则表达式常用于两个字符串方法：search()和 replace()

const template = 'there are ${count} ${name} on the ${place}.';
let newstr = template.replace(/\$\{.+?\}/g,(matchedStr, index)=>{ //匹配以固定字符串开头和结尾，中间任意的字符串
  console.log(matchedStr,index);
  return "aaa";
})
console.log(newstr)

/*
${count} 10
${name} 19
${place} 34
there are aaa aaa on the aaa.
*/