【前端面试题】我靠它拿到了大厂Offer

//参考：忍者秘籍第二版
console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')

输出结果：script start->promise1->promise1 end->script end->promise2->settimeout

//参考：忍者秘籍第二版
async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start');
async1();
console.log('script end')

输出结果：script start->async1 start->async2->script end->async1 end

- Object.prototype.toString.call()
- instanceof
- Array.isArray()
参考：js高级程序设计第三版

const arr = ['abc','bca'];
arr.toString(); // "abc,bca"
Object.prototype.toString.call(arr); // "[object Array]"

[]  instanceof Array; // true

[]  instanceof Object; // true

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

let iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
let arr = new xArray(1,2,3); // [1,2,3]
Array.isArray(arr);  // true
arr instanceof Array; // false

输入: [2,3,4,6,7,9]
输出: '2~4,6~7,9'

const nums = [2,3,4,6,7,9];
function example(num) {
  let result = [];
  let temp = num[0]
  num.forEach((value, index) => {
    if (value + 1 !== num[index + 1]) {
      if (temp !== value) {
        result.push(`${temp}~${value}`)
      } else {
        result.push(`${value}`)
      }
      temp = num[index + 1]
    }
  })
  return result;
}
console.log(example(nums).join(','))

String('123') == new String('123'); //true,==时做了隐式转换，调用了toString

String('123') === new String('123');//false,两者的类型不一样，前者是string，后者是object

var name = 'abc';
(function() {
    if (typeof name == 'undefined') {
        name = 'cba';
        console.log(name);
    } else {
        console.log(name);
    }
})();
1、首先进入立即执行函数作用域当中，获取name属性
2、在当前作用域没有找到name
3、通过作用域链找到最外层，得到name属性
4、执行else的内容，输出 abc

2 + "3";

3 * "5";

[6, 3] + [3, 6];

"b" + + "c";  

2 + "3";
加性操作符：如果只有一个操作数是字符串，则将另一个操作数转换为字符串，然后再将两个字符串拼接起来

所以值为：“23”

3 * "5";
乘性操作符：如果有一个操作数不是数值，则在后台调用 Number()将其转换为数值

[6, 3] + [3, 6];
Javascript中所有对象基本都是先调用valueOf方法，如果不是数值，再调用toString方法。

所以两个数组对象的toString方法相加，值为："6,33,6"

"b" + + "c"; 
后边的“+”将作为一元操作符，如果操作数是字符串，将调用Number方法将该操作数转为数值，如果操作数无法转为数值，则为NaN。

所以值为："bNaN"

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
Foo.prototype.a = function() {
    console.log(3)
}
Foo.a = function() {
    console.log(4)
}
Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
// 以上只是 Foo 的构建方法，没有产生实例，此刻也没有执行

Foo.prototype.a = function() {
    console.log(3)
}
// 现在在 Foo 上挂载了原型方法 a ，方法输出值为 3

Foo.a = function() {
    console.log(4)
}
// 现在在 Foo 上挂载了直接方法 a ，输出值为 4

Foo.a();
// 立刻执行了 Foo 上的 a 方法，也就是刚刚定义的，所以
// # 输出 4

let obj = new Foo();
/* 这里调用了 Foo 的构建方法。Foo 的构建方法主要做了两件事：
1. 将全局的 Foo 上的直接方法 a 替换为一个输出 1 的方法。
2. 在新对象上挂载直接方法 a ，输出值为 2。
*/

obj.a();
// 因为有直接方法 a ，不需要去访问原型链，所以使用的是构建方法里所定义的 this.a，
// # 输出 2

Foo.a();
// 构建方法里已经替换了全局 Foo 上的 a 方法，所以
// # 输出 1

function fun(num){
    let num1 = num / 10;
    let num2 = num % 10;
    if(num1<1){
        return num;
    }else{
        num1 = Math.floor(num1)
        return `${num2}${fun(num1)}`
    }
}
var a = fun(12345)
console.log(a)

function changeObjProperty(o) {
  o.siteUrl = "http://www.baidu.com"
  o = new Object()
  o.siteUrl = "http://www.google.com"
} 
let webSite = new Object();
changeObjProperty(webSite);
console.log(webSite.siteUrl);

function deepCopy(target, cache = new Set()) {
  if (typeof target !== 'object' || cache.has(target)) {
    return target
  }
  if (Array.isArray(target)) {
    target.map(t => {
      cache.add(t)
      return t
    })
  } else {
    return [...Object.keys(target), ...Object.getOwnPropertySymbols(target)].reduce((res, key) => {
      cache.add(target[key])
      res[key] = deepCopy(target[key], cache)
      return res
    }, target.constructor !== Object ? Object.create(target.constructor.prototype) : {})
  }
}

function deepCopyByHistory(target) {
  const prev = history.state
  history.replaceState(target, document.title)
  const res = history.state
  history.replaceState(prev, document.title)
  return res
}

async function deepCopyByMessageChannel(target) {
  return new Promise(resolve => {
    const channel = new MessageChannel()
    channel.port2.onmessage = ev => resolve(ev.data)
    channel.port1.postMessage(target)
  }).then(data => data)
}

//不使用事件代理，每个 span 节点绑定一个 click 事件，并指向同一个事件处理程序
<div>
      <span 
        v-for="(item,index) of 100000" 
        :key="index" 
        @click="handleClick">
        {{item}}
      </span>
 </div>
//不使用事件代理，每个 span 节点绑定一个 click 事件，并指向不同的事件处理程序 
<div>
      <span 
        v-for="(item,index) of 100000" 
        :key="index" 
        @click="function () {}">
        {{item}}
      </span>
</div>
// 使用事件代理
<div  @click="handleClick">
      <span 
        v-for="(item,index) of 100000"  
        :key="index">
        {{item}}
      </span>
</div>
使用事件代理无论是监听器数量和内存占用率都比前两者要少

const findMidNum = function(arr1,arr2) {
    for(let i=0;i<arr2.length;i++) {
        arr1.push(arr2[i]);
    }
    arr1 = arr1.sort((a,b)=>{return b-a;})
    if(arr1.length%2===0) {
        return (arr1[arr1.length/2]+arr1[arr1.length/2-1])/2
    }else {
        return arr1[(arr1.length-1)/2]
    }

}
console.log(findMidNum([1,2],[3,5,6]))

const data = [{
    id: '1',
    name: 'test1',
    children: [
        {
            id: '11',
            name: 'test11',
            children: [
                {
                    id: '111',
                    name: 'test111'
                },
                {
                    id: '112',
                    name: 'test112'
                }
            ]
        },
        {
            id: '12',
            name: 'test12',
            children: [
                {
                    id: '121',
                    name: 'test121'
                },
                {
                    id: '122',
                    name: 'test122'
                }
            ]
        }
    ]
}];

let res = [];

const findId = (list, value) => {
  let len = list.length;

  for (let i in list) {
    const item = list[i];

    if (item.id == value) {
      return res.push(item.id), [item.id];
    }

    if (item.children) {
      if (findId(item.children, value).length) {
        res.unshift(item.id);
        return res;
      }
    }

    if (i == len - 1) {
      return res;
    }
  }
};

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>auto complete</title>
  <style>
    bdi {
      color: rgb(0, 136, 255);
    }

    li {
      list-style: none;
    }
  </style>
</head>
<body>
  <input class="inp" type="text">
  <section>
    <ul class="container"></ul>
  </section>
</body>
<script>

  function debounce(fn, timeout = 300) {
    let t;
    return (...args) => {
      if (t) {
        clearTimeout(t);
      }
      t = setTimeout(() => {
        fn.apply(fn, args);
      }, timeout);
    }
  }

  function memorize(fn) {
    const cache = new Map();
    return (name) => {
      if (!name) {
        container.innerHTML = '';
        return;
      }
      if (cache.get(name)) {
        container.innerHTML = cache.get(name);
        return;
      }
      const res = fn.call(fn, name).join('');
      cache.set(name, res);
      container.innerHTML = res;
    }
  }

  function handleInput(value) {
    const reg = new RegExp(`\(${value}\)`);
    const search = data.reduce((res, cur) => {
      if (reg.test(cur)) {
        const match = RegExp.$1;
        res.push(`<li>${cur.replace(match, '<bdi>$&</bdi>')}</li>`);
      }
      return res;
    }, []);
    return search;
  }
  
  const data = ["上海野生动物园", "上饶野生动物园", "北京巷子", "上海中心", "上海黄埔江", "迪士尼上海", "陆家嘴上海中心"]
  const container = document.querySelector('.container');
  const memorizeInput = memorize(handleInput);
  document.querySelector('.inp').addEventListener('input', debounce(e => {
    memorizeInput(e.target.value);
  }))
</script>
</html>

Promise.myrace = function(iterator) {
    return new Promise ((resolve,reject) => {
        try {
            let it = iterator[Symbol.iterator]();
            while(true) {
                let res = it.next();
                console.log(res);
                if(res.done) break;
                if(res.value instanceof Promise) {
                    res.value.then(resolve,reject);
                } else {
                    resolve(res.value)
                }
                
            }
        } catch (error) {
            reject(error)
        }
    }) 
}

function convert(list) {
			const res = []
			const map = list.reduce((res, v) => (res[v.id] = v, res), {})
			for (const item of list) {
				if (item.parentId === 0) {
					res.push(item)
					continue
				}
				if (item.parentId in map) {
					const parent = map[item.parentId]
					parent.children = parent.children || []
					parent.children.push(item)
				}
			}
			return res
		}
		let list =[
		    {id:1,name:'部门A',parentId:0},
		    {id:2,name:'部门B',parentId:0},
		    {id:3,name:'部门C',parentId:1},
		    {id:4,name:'部门D',parentId:1},
		    {id:5,name:'部门E',parentId:2},
		    {id:6,name:'部门F',parentId:3},
		    {id:7,name:'部门G',parentId:2},
		    {id:8,name:'部门H',parentId:4}
		];
		const result = convert(list);
		console.table(result);

function isUrl(url) {
	const a = document.createElement('a')
	a.href = url
	return [
		/^(http|https):$/.test(a.protocol),
		a.host,
		a.pathname !== url,
		a.pathname !== `/${url}`,
	].find(x => !x) === undefined
}

给定 nums = [2, 7, 11, 15], target = 9

因为 nums[0] + nums[1] = 2 + 7 = 9
所以返回 [0, 1]

//：时间复杂度为O(N*N)
find2Num([2,7,11,15],9);
function find2Num(arr,sum){
    if(arr == '' || arr.length == 0){
        return false;
    }
 	let result = [];
    for(var i = 0; i < arr.length ; i++){
        for(var j = i + 1; j <arr.length; j++){
            if(arr[i] + arr[j] == sum){
            	result.push(i);
            	result.push(j);
                
            }
        }
    }
    console.log(result);
}

//时间复杂度为O(NlogN)
function find2Num(arr,sum){
    if(arr == '' || arr.length == 0){
        return false;
    }
    var left = 0, right = arr.length -1,result = [];
    while(left < right){
        if(arr[left] + arr[right] > sum){
            right--;
        }
        else if(arr[left] + arr[right] < sum){
            left++;
        }
        else{
            console.log(arr[left] + " + " + arr[right] + " = " + sum); 
            result.push(left);
            result.push(right);
            left++;
            right--;
        }
    }
    console.log(result);
}

if (_this.props.onClick) _this.props.onClick(event);

      if (!event.defaultPrevented && // onClick prevented default
      event.button === 0 && // ignore everything but left clicks
      !_this.props.target && // let browser handle "target=_blank" etc.
      !isModifiedEvent(event) // ignore clicks with modifier keys
      ) {
          event.preventDefault();

          var history = _this.context.router.history;
          var _this$props = _this.props,
              replace = _this$props.replace,
              to = _this$props.to;


          if (replace) {
            history.replace(to);
          } else {
            history.push(to);
          }
        }

function add(){
	let args = [...arguments];
	let addfun = function(){
		args.push(...arguments);
		return addfun;
	}
	addfun.toString = function(){
		return args.reduce((a,b)=>{
			return a + b;
		});
	}
	return addfun;
}

const result = (arr) => arr.filter(Boolean).concat([...Array(arr.length - arr.filter(Boolean).length).fill(0)])
console.log(result([0,1,0,3,0,12,0,0]))

const arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 0, 0, 0, 1, 9, 9, 9, 0, 0, 0, 0, 1, 0, 3, 12, 0, 0, 0, 0];
    const len = arr.length;
    console.log(len)
    for (let i = len; i >= 0; i--) {
      if (arr[i] === 0) {
        arr.splice(i, 1);
        arr.push(0)
      }
    }
console.log(arr)

[...Array(10000).keys()].filter((x) => { 
  return x.toString().length > 1 && x === Number(x.toString().split('').reverse().join('')) 
})

let result=[]
for(let i=1;i<10;i++){
    result.push(i)
    result.push(i*11)
    for(let j=0;j<10;j++){
        result.push(i*101+j*10)
        result.push(i*1001+j*110)
    }
}

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

var p1 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 1000, 'one'); 
}); 
var p2 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 2000, 'two'); 
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'three');
});
var p4 = new Promise((resolve, reject) => {
  setTimeout(resolve, 4000, 'four');
});
var p5 = new Promise((resolve, reject) => {
  reject('reject');
});

Promise.all([p1, p2, p3, p4, p5]).then(values => { 
  console.log(values);
}, reason => {
  console.log(reason)
});

//From console:
//"reject"

//You can also use .catch
Promise.all([p1, p2, p3, p4, p5]).then(values => { 
  console.log(values);
}).catch(reason => { 
  console.log(reason)
});

//From console: 
//"reject"

var cpLock = true;
$('.com_search_input').on('compositionstart', function () {
        cpLock = false;
//      console.log("compositionstart")
    });
    $('.com_search_input').on('compositionend', function () {
        cpLock = true;
//      console.log("compositionend")
    });
$(".com_search_input").on("input",function(e){
e.preventDefault();
var _this = this;
// console.log("input");
setTimeout(function(){
if (cpLock) {
//开始写逻辑
  console.log("逻辑")
}
},0)
})

function rotateArr(arr,k) {
	return [...arr.splice(k+1),...arr];
}
rotateArr([1,2,3,4,5,6,7],3);

// example 1
var a={}, b='123', c=123;
a[b]='b';
a[c]='c'; // c 的键名会被转换成字符串'123'，这里会把 b 覆盖掉。
console.log(a[b]); // 'c'
// example 2
var a={}, b=Symbol('123'), c=Symbol('123');
a[b]='b';// b 是 Symbol 类型，不需要转换
a[c]='c';// c 是 Symbol 类型，不需要转换。任何一个 Symbol 类型的值都是不相等的，所以不会覆盖掉 b
console.log(a[b]);//'b'
// example 3
var a={}, b={key:'123'}, c={key:'456'};
// b 不是字符串也不是 Symbol 类型，需要转换成字符串。
// 对象类型会调用 toString 方法转换成字符串 [object Object]。
a[b]='b';
// c 不是字符串也不是 Symbol 类型，需要转换成字符串。
// 对象类型会调用 toString 方法转换成字符串 [object Object]。这里会把 b 覆盖掉。
a[c]='c';
console.log(a[b]);//'c'

const findStr = (s,t) => {
		let posArr = [];
		let index = s.search(t);
		while(index !== -1) {
			posArr.push(index);
			index = s.indexOf(t,index+t.length);
		}
		console.log(posArr);
	}
findStr('sdfsdf123er123','123');//[6,11]

	function trans2Case(str) {
		let arr = str.split('');
		arr = arr.map((item)=>{
			return item === item.toUpperCase() ? item.toLowerCase() : item.toUpperCase();
		});
		return arr.join('');
	}
	console.log(trans2Case('AbC'))

function Array2Group(len) {
	//生成随机整数型数组
	let arr = Array.from({length:len},(f)=>{return Math.floor(Math.random()*100)})
	arr = arr.sort((a,b)=>{//升序排序
		return a-b;
	})
	//去重
	arr = arr.filter((item,index)=>{
		return item !== arr[index+1];
	})
	
	//分组,将连续的放在一组
	let continueArr = [], tempArr = [];
	arr.map((item,index)=>{
	 	tempArr.push(item);
	 	if(arr[index+1] !== ++item) {
	 		continueArr.push(tempArr);
	 		tempArr = [];
	 	}
	})
	console.log(continueArr)
}

Array2Group(9);

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

img {max-width:330px;}

ar nums1 = [1, 2, 2, 1], nums2 = [2, 2, 3, 4];
// 1.
// 有个问题， [NaN].indexOf(NaN) === -1
var newArr1 = nums1.filter(function(item) {
     return nums2.indexOf(item) > -1;
});
console.log(newArr1);
// 2.
var newArr2 = nums1.filter((item) => {
     return nums2.includes(item);
});
console.log(newArr2);

function newFunc(father, ...rest) {
  var result = {};
  result.__proto__ = father.prototype;
  var result2 = father.apply(result, rest);
  if (
    (typeof result2 === 'object' || typeof result2 === 'function') &&
    result2 !== null
  ) {
    return result2;
  }
  return result;
}

一个更好的做法是，不去使用new。

LazyMan('Tony');
// Hi I am Tony

LazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// 等待了10秒...
// I am eating lunch

LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// 等待了10秒...
// I am eating diner

LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food

class LazyManClass {
	constructor(name) {
		this.taskList = [];
		this.name = name;
		console.log('Hi I am',this.name);
		let that = this;
		setTimeout(()=>{
			that.next();
		},0);
	}
	eat(name) {
		let that = this;
		let fn = (function(name) {
			return function() {
				console.log('I am eating',name);
				that.next();
			}
		})(name);
		that.taskList.push(fn);
		console.log(that.taskList)
		return that;
	}
	sleepFirst(time) {
		let that = this;
		let fn = (function(time) {
			return function() {
				setTimeout(()=>{
					console.log(`等待了${time}秒`);
					that.next();
				},time*1000);
			}
		})(time);
		that.taskList.unshift(fn);
		console.log(that.taskList)
		return that;
		
	}
	sleep(time) {
		let that = this;
		let fn = (function(time){
			return function() {
				setTimeout(()=>{
					console.log(`等待了${time}秒`);
					that.next();
				},time*1000);
			}
		})(time);
		that.taskList.push(fn);
		console.log(that.taskList)
		return that;
	}
	next() {
		let that = this;
		let fn = that.taskList.shift();
		console.log(that.taskList)
		if(typeof fn ==='function')
			fn && fn()
	}
}
function LazyMan(name){
	return new LazyManClass(name);
}
LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

let obj = {1:222, 2:123, 5:888};
const result = Array.from({ length: 12 })         //先生成一个长度为12的数组，里面的值为undefined
					.map((_, index) => obj[index + 1] || null); //然后对数组赋值
console.log(result)

// 升序冒泡
function bubbleSort(arr){
  const array = [...arr]
  for(let i = 0, len = array.length; i < len - 1; i++){
    for(let j = i + 1; j < len; j++) {
      if (array[i] > array[j]) {
        let temp = array[i]
        array[i] = array[j]
        array[j] = temp
      }
    }
  }
  return array
}

functionbubbleSort(arr){
  const array = [...arr]
  let isOk = true
  for(let i = 0, len = array.length; i < len - 1; i++){
    for(let j = i + 1; j < len; j++) {
      if (array[i] > array[j]) {
        let temp = array[i]
        array[i] = array[j]
        array[j] = temp
        isOk = false
      }
    }
    if(isOk){
      break
    }
  }
  return array
}

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

console.log(a.x) 	  //undefined
console.log(b.x)    // {n:2}

// no.1
div.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
// no.2
div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}
//no.3
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}
//no.4
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
//no.5
div.parent {
    display: grid;
}
div.child {
    justify-self: center;
    align-self: center;
}
//no.6
div.parent{
  display:flex;
}
div.child{
  margin:auto;
}

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

Number.MAX_SAFE_DIGITS = Number.MAX_SAFE_INTEGER.toString().length-2
Number.prototype.digits = function(){
	let result = (this.valueOf().toString().split('.')[1] || '').length
	return result > Number.MAX_SAFE_DIGITS ? Number.MAX_SAFE_DIGITS : result
}
Number.prototype.add = function(i=0){
	if (typeof i !== 'number') {
        	throw new Error('请输入正确的数字');
    	}
	const v = this.valueOf();
	const thisDigits = this.digits();
	const iDigits = i.digits();
	const baseNum = Math.pow(10, Math.max(thisDigits, iDigits));
	const result = (v * baseNum + i * baseNum) / baseNum;
	if(result>0){ return result > Number.MAX_SAFE_INTEGER ? Number.MAX_SAFE_INTEGER : result }
	else{ return result < Number.MIN_SAFE_INTEGER ? Number.MIN_SAFE_INTEGER : result }
}
Number.prototype.minus = function(i=0){
	if (typeof i !== 'number') {
        	throw new Error('请输入正确的数字');
    	}
	const v = this.valueOf();
	const thisDigits = this.digits();
	const iDigits = i.digits();
	const baseNum = Math.pow(10, Math.max(thisDigits, iDigits));
	const result = (v * baseNum - i * baseNum) / baseNum;
	if(result>0){ return result > Number.MAX_SAFE_INTEGER ? Number.MAX_SAFE_INTEGER : result }
	else{ return result < Number.MIN_SAFE_INTEGER ? Number.MIN_SAFE_INTEGER : result }
}

<script type="text/javascript">
 var thisPage = location.href;
 var referringPage = (document.referrer) ? document.referrer : "none";
 var beacon = new Image();
 beacon.src = "http://www.example.com/logger/beacon.gif?page=" + encodeURI(thisPage)
 + "&ref=" + encodeURI(referringPage);
</script>

fun.apply(thisArg, [argsArray])

fun.call(thisArg, arg1, arg2, ...)

var obj = {
    '2': 3,
    '3': 4,
    'length': 2,
    'splice': Array.prototype.splice,
    'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)

let arr = [3, 15, 8, 29, 102, 22];
arr.sort((a,b)=>{a-b}); // 升序
arr.sort((a,b)=>{b-a}); //倒序

	//Promise
	const sleep = time => {
		return new Promise(resolve=>setTimeout(resolve,time))
	}
	sleep(1000).then(()=>{
		console.log(1)
	})
	//Generator
	function* sleepGenerator(time) {
		yield new Promise(function(resolve,reject){
			setTimeout(resolve,time);
		})
	}
	sleepGenerator(1000).next().value.then(()=>{console.log(1)})
	//async
	function sleep(time) {
		return new Promise(resolve=>setTimeout(resolve,time))
	}
	async function output() {
		let out = await sleep(1000);
		console.log(1);
		return out;
	}
	output();
	//ES5
	function sleep(callback,time) {
		if(typeof callback === 'function')
			setTimeout(callback,time)
	}
	
	function output(){
		console.log(1);
	}
	sleep(output,1000);

  var a = 10;
  (function () {
      console.log(a);    //undefined
      a = 5 
      console.log(window.a) // 10
      var a = 20;
      console.log(a) //20
  })()

  var a = 10;
  (function () {
      console.log(a);    //10
      a = 5 
      console.log(window.a) // 5
      //var a = 20;
      console.log(a) //5
  })()

if (process.env.NODE_ENV !== 'production') {
      var hyphenatedKey = hyphenate(key);
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(
          ("\"" + hyphenatedKey + "\" is a reserved attribute and cannot be used as component prop."),
          vm
        );
      }
      defineReactive$$1(props, key, value, function () {
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            "Avoid mutating a prop directly since the value will be " +
            "overwritten whenever the parent component re-renders. " +
            "Instead, use a data or computed property based on the prop's " +
            "value. Prop being mutated: \"" + key + "\"",
            vm
          );
        }
      });
    }

var a = ?;
if(a == 1 && a == 2 && a == 3){
 	console.log(1);
}

let a = {
  i: 1,
  toString () {
    return a.i++
  }
}

if(a == 1 && a == 2 && a == 3) {
  console.log('1');
}

let a = {
  i: 1,
  valueOf () {
    return a.i++
  }
}

if(a == 1 && a == 2 && a == 3) {
  console.log('1');
}

var a = [1,2,3];
a.join = a.shift;
if(a == 1 && a == 2 && a == 3) {
  console.log('1');
}

let a = {[Symbol.toPrimitive]: ((i) => () => ++i) (0)};
if(a == 1 && a == 2 && a == 3) {
  console.log('1');
}

	function flatten(arr=[1,[2],[[3]],[[[4]]]]) {
		return arr.toString().split(',')
	}
	alert(flatten());

	function flatten(arr,result=[]) {
		for(let item of arr){
			if(Array.isArray(item))
				flatten(item,result)
			else
				result.push(item)
		}
		return result
	}
	var array = [[1,2,3],4,5,6,[[7]],[]];
	var result = flatten(array);
	console.log(result);

var b = 10;
(function b() {
  b = 20;
  console.log(b)
})()

(function () { 
    var name = "Barry";
})();
// 外部不能访问变量 name
name // undefined

var result = (function () { 
    var name = "Barry"; 
    return name; 
})(); 
// IIFE 执行后返回的结果：
result; // "Barry"

var b = 10;
    (function b() {
      b = 20;
      console.log(b)
})()

var b = 10;
(function b() {
    window.b = 20; 
    console.log(b); // [Function b]
    console.log(window.b); // 20是必然的
})();

var b = 10;
(function b() {
    var b = 20; // IIFE内部变量
    console.log(b); // 20
   console.log(window.b); // 10 
})();

for (var i = 0; i< 10; i++){
    setTimeout(() => {
	console.log(i);
    }, 1000)
}

	function fn() {
		for(var i=0;i<10;i++){//可以将for循环用while循环替换
			console.log(i);
			clearTimeout(timer);
		}
		
	}
	var timer = setTimeout(fn,1000);
或者：
for (let i = 0; i< 10; i++){
	setTimeout(() => {
		console.log(i);
	}, 1000)
}
或者 简写：
for (var i = 0; i< 10; i++){
    setTimeout(console.log, 1000, i)
}

(function fn(i){
    if(i<10){
        console.log(i);
        i++;
        setTimeout(fn, 1000,i);
   }
})(0)

for(var i=0;i<10;i++){
		(function(i){
			setTimeout(()=>{
				console.log(i);
			},1000);
		})(i);
	}
或者：
for(var i=0;i<10;i++){
		(function(){
		var j = i; 
			setTimeout(()=>{
				console.log(i);
			},1000);
		})();
	}

var arr1 = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2', 'E1', 'E2'];
var arr2 = ['A', 'B', 'C', 'D','E'];
var arr3 = [];
	arr1.forEach(function(item,index){
		
		if((index+1)%2===0) {
			arr3.push(arr1[index]);
			arr3.push(arr2[(index+1)/2-1]);
		}else {
			arr3.push(arr1[index]);
		}
	});
	console.log(arr3);

	arr1.map(function(item,index){
		(index+1)%2===0 ? arr3.push(arr1[index]) && arr3.push(arr2[(index+1)/2-1]) : arr3.push(arr1[index])
	});

//defineProperty的用法
var obj = { };
var name;
//第一个参数：定义属性的对象。
//第二个参数：要定义或修改的属性的名称。
//第三个参数：将被定义或修改的属性描述符。

	Object.defineProperty(obj, "data", {
		//获取值
		get: function () {return name;},
		//设置值
		set: function (val) {
			name = val;
			console.log(val)
		}
	})
	//赋值调用get
	obj.data = 'aaa';
	//取值调用set
	console.log(obj.data);

//defineProperty的双向绑定
	var obj={};
	Object.defineProperty(obj, 'val',{
		set:function (newVal) {
			document.getElementById("a")
			.value = newVal == undefined ? '' : newVal;
			document.getElementById("b")
			.innerHTML = newVal == undefined ? '' : newVal;
	}
	});
	document.getElementById("a")
	.addEventListener("keyup",function (e) {
		obj.val = e.target.value;
	})

var a = 12;
function f(){};

console.log(window.a); // 12
console.log(window.f); // f(){}

let aa = 1;
const bb = 2;

console.log(window.aa); // undefined
console.log(window.bb); // undefined

let aa = 1;
const bb = 2;

console.log(aa); // 1
console.log(bb); // 2

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>So UI - A Component Library for Vue.js.</title>
</head>
<body>
    <div id="app"></div>
    <script src="a.js"></script>
    <script src="b.js"></script>
    <script src="c.js"></script>
    <script src="d.js"></script>
    <script src="e.js"></script>
</body>
</html>

export { 
 	one, 
 	two
 }
 export default three;

import  { one, two }  three from 'a.js'

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'));
    } else {
        // 浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    方法
    function myFunc(){};
 
    //    暴露公共方法
    return myFunc;
}));

define = function (name, deps, callback) {
        var node, context;
        
        //Allow for anonymous modules
        if (typeof name !== 'string') {
            //Adjust args appropriately
            callback = deps;
            deps = name;
            name = null;
        }

        //This module may not have dependencies
        if (!isArray(deps)) {
            callback = deps;
            deps = null;
        }

        //If no name, and callback is a function, then figure out if it a
        //CommonJS thing with dependencies.
        if (!deps && isFunction(callback)) {
            deps = [];
            //移除注释
            //查找 require 语句，收集依赖到 deps 里面
            // but only if there are function args.
            if (callback.length) {
                callback
                    .toString()
                    .replace(commentRegExp, commentReplace)
                    .replace(cjsRequireRegExp, function (match, dep) {
                        deps.push(dep);
                    });

                //May be a CommonJS thing even without require calls, but still
                //could use exports, and module. Avoid doing exports and module
                //work though if it just needs require.
                //REQUIRES the function to expect the CommonJS variables in the
                //order listed below.
                deps = (callback.length === 1 ? ['require'] : ['require', 'exports', 'module']).concat(deps);
            }
        }

        //If in IE 6-8 and hit an anonymous define() call, do the interactive
        //work.
        if (useInteractive) {
            node = currentlyAddingScript || getInteractiveScript();
            if (node) {
                if (!name) {
                    name = node.getAttribute('data-requiremodule');
                }
                context = contexts[node.getAttribute('data-requirecontext')];
            }
        }

        //Always save off evaluating the def call until the script onload handler.
        //This allows multiple modules to be in a file without prematurely
        //tracing dependencies, and allows for anonymous module support,
        //where the module name is not known until the script onload event
        //occurs. If no context, use the global queue, and get it processed
        //in the onscript load callback.
        if (context) {
            context.defQueue.push([name, deps, callback]);
            context.defQueueMap[name] = true;
        } else {
            globalDefQueue.push([name, deps, callback]);
        }
    };

    define.amd = {
        jQuery: true
    };
    
	req.exec = function (text) {
        /*jslint evil: true */
        return eval(text);
    };

    //Set up with config info.
    req(cfg);

req = requirejs = function (deps, callback, errback, optional) {

        //Find the right context, use default
        var context, config,
            contextName = defContextName;

        // Determine if have config object in the call.
        if (!isArray(deps) && typeof deps !== 'string') {
            // deps is a config object
            config = deps;
            if (isArray(callback)) {
                // Adjust args if there are dependencies
                deps = callback;
                callback = errback;
                errback = optional;
            } else {
                deps = [];
            }
        }

        if (config && config.context) {
            contextName = config.context;
        }
       
        if (config) {
            context.configure(config); // 完善配置
        }

        return context.require(deps, callback, errback); 

makeRequire: function (relMap, options) {
		options = options || {};
		function localRequire(deps, callback, errback) {
			.... 当前 require 的转换
      	 	return localRequire;
  		 }
		completeLoad: function (moduleName) {
			判断 context 的依赖队列，是继续加载还是执行回调
		}
		 nameToUrl: function (moduleName, ext, skipExt) {
		 	根据模块名和配置得到加载的路径
		 }
		 load: function (id, url) {
	               req.load(context, id, url);
	      },
	      execCb: function (name, callback, args, exports) {
	                return callback.apply(exports, args);
	        },
		onScriptLoad: function (evt) {
			脚本加载完成后得到数据，执行 context.completeLoad(data.id);
		}
		onScriptError: function (evt) {
			加载错误执行错误处理
		}
	};
   context.require = context.makeRequire();

function test () {
   console.log('start')
    setTimeout(() => {
        console.log('children2')
        Promise.resolve().then(() => {console.log('children2-1')})
    }, 0)
    setTimeout(() => {
        console.log('children3')
        Promise.resolve().then(() => {console.log('children3-1')})
    }, 0)
    Promise.resolve().then(() => {console.log('children1')})
    console.log('end') 
}
test()

// start
// end
// children1
// children2
// children3
// children2-1
// children3-1

// start
// end
// children1
// children2
// children2-1
// children3
// children3-1

<body>
<div class="error">
    <h4>我的组件</h4>
    <p><strong>错误：</strong>错误的描述…</p>
    <h5>错误纠正</h5>
    <ol>
        <li>第一步</li>
        <li>第二步</li>
    </ol>
</div>
</body>

<div>
  <a> <span></span> </a>
</div>
<style>
  span {
    color: red;
  }
  div > a > span {
    color: red;
  }
</style>

const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';

const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';

const el = document.getElementById('test');
el.className += ' active';

function appendDataToElement(appendToElement, data) {
    let li;
    for (let i = 0; i < data.length; i++) {
    	li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}

const ul = document.getElementById('list');
appendDataToElement(ul, data);

function appendDataToElement(appendToElement, data) {
    let li;
    for (let i = 0; i < data.length; i++) {
    	li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}
const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';

const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
ul.appendChild(fragment);

const ul = document.getElementById('list');
const clone = ul.cloneNode(true);
appendDataToElement(clone, data);
ul.parentNode.replaceChild(clone, ul);

function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + 'px';
}

const width = box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
    }
}

const an = ['Hello','An'];
an.toString(); // "Hello,An"
Object.prototype.toString.call(an); // "[object Array]"

[]  instanceof Array; // true

[]  instanceof Object; // true

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

// Correctly checking for Array
Array.isArray(arr);  // true
Object.prototype.toString.call(arr); // true
// Considered harmful, because doesn't work though iframes
arr instanceof Array; // false

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}   

-  若存在，不再重新安装

-  若不存在

    - npm 向 registry 查询模块压缩包的网址
    - 下载压缩包，存放在根目录下的`.npm`目录里解压压缩包到当前项目的

node_modules
 – foo
 ---- lodash@version1
– bar
 ---- lodash@version2
假设 version1 和 version2 是兼容版本，则经过 dedupe 会成为下面的形式：
node_modules
 – foo
– bar
– lodash（保留的版本为兼容版本）
假设 version1 和 version2 为非兼容版本，则后面的版本保留在依赖树中：
node_modules
 – foo
 – lodash@version1
– bar
 ---- lodash@version2