前端小知识点

226 阅读1分钟

合并数组

array1.concat(array2)
array1.push.apply(array1, array2) //减少内存

将NodeList转换成数组

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); //第一种方法 将NodeList转化为数组
var arrayElements = Array.from(elements); // 另一种方法将NodeList转化为数组

模拟一个模板字符串的实现。

    let address = '北京海淀区';
    let name = 'lala';
    let str = '${name}在${address}上班...';
    // 模拟一个方法 myTemplate(str) 最终输出 'lala在北京海淀区上班...'
    function myTemplate(str) {
         // do it
    }
    console.log(myTemplate(str)) // lala在北京海淀区上班...
    return str.replace(/\${(.*?)}/g,function (s1,s2){
            return eval(s2);
    })

实现标签化模板(自定义模板规则)。

    const name = 'cc';
    const gender = 'male';
    const hobby = 'basketball';
    // 实现tag最终输出 '姓名:**cc**,性别:**male**,爱好:**basketball**'
    function tag(strings) {
        // do it
    }
    const str = tag`姓名:${name},性别:${gender},爱好:${hobby}`;
    console.log(str) // '姓名:**cc**,性别:**male**,爱好:**basketball**'
    function tag(strings,...s) {
       return s.map((n,i)=>strings[i]+'**'+n+'**').join('')
    }
    function tag(strings) {
      return [].map.call(arguments,(n,i)=>(i == 0?'': (strings[i-1]+'**'+n+'**'))).join('')
    }