JS经典试题（1）

 // 箭头函数没有自己的THIS，它里面的this是继承函数所处上下文中的this，使用call，apply等都无法改变this指向

// 箭头函数中没有ARGUMENTS(类数组)，只能基于...ARG获取传递的参数集合（数组）

// 箭头函数不能被new执行，因为箭头函数没有this也没有prototype

let a={},b='0',c=0
a[b]='电脑'
a[c]='书籍'
console.log(a[b])//书籍  数字属性名==字符串属性名

let a={},b=Symbol('1'),c=Symbol('1')   //symbol 创建唯一值
a[b]='电脑'
a[c]='书籍'
console.log(a[b])//电脑

let a={},b={n:'1'},c={m:'2'}   //[object,object]
a[b]='电脑'
a[c]='书籍'
console.log(a[b])//书籍

var test = (function(i){
	return function(){alert(i*=2)}
})(2)
test(5);  //'4',字符串4

var a=0,b=0
functionA(a){
	A = function(b){
		alert(a+b++)
	}
	alert(a++)
}
A(1)  //'1'
A(2)  //'4'   2+2

let obj={
	a:100,
	b:[10,20,30],
	c:{x:100},
	d: /^\d+$/
}
// 浅克隆
let obj2={}
for(let key in obj){
	if(!obj.hasOwnProperty(key)) breack;
	obj2[key] = obj[key]
}
let obj3={...obj}
//深克隆
let obj4=JSON.parse(JSON.stringify(obj)) //弊端，对函数、正则、时间对象、数字对象的时候问题

function deepClone(obj){
  //过滤特殊情况
  if(obj===null) return null
  if(typeof obj !== 'object') return obj
  if(obj instanceof RegExp){
    return new RegExp(obj)
  }
  if(obj instanceof Date){
    return new Date(obj)
  }
  //不直接创建空对象目的：克隆的结果和之前保持相同的所属类
  let newObj = new obj.constructor
  for(let key in obj){
    if(obj.hasOwnProperty(key)){
      newObj[key]=deepClone(obj[key])
    }
    return newObj
  }
}

function Foo(){
  getName=function(){
    console.log(1)
  }
  return this
}
Foo.getName =function(){
  console.log(2)
} 
Foo.prototype.getName = function(){
  console.log(3)
}
var getName=function(){
  console.log(4)
}
function getName(){
  console.log(5)
}
Foo.getName()  //2
getName()  //4
Foo().getName() // 1
getName()  //1
new Foo.getName() //2
new Foo().getName()  //3
new new Foo().getName() //3


async function async1(){
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2(){
  console.log('async2')
}
console.log('script start')
setTimeout(function(){
  console.log('setTimeout')
},0)
async1()
new Promise(function(resolve){
  console.log('promise1')
  resolve()
}).then(function(){
  console.log('promise2')
})
console.log('script end')

// 主栈 > 微任务(promise，async await) > 宏任务(定时器，事件绑定，ajax)
// script start > async1 start > async2 > promise1 > script end >
//async1 end > promise2 > setTimeout

//1 toString
var a={
  i:0,
  toString(){
    return ++this.i
  }
}
var a={
  i:0,
  valueOf(){
    return ++this.i
  }
}
var a=[1,2,3]
a.toString = a.shift;
//2 数据劫持实现
var i =0
Object.defineProperty(window,'a',{
  get(){
    return ++i
  }
}) 
if(a==1&&a==2&&a==3){
  console.log('条件成立')
}

 模拟双向数据绑定 v-model

<span id="spanName"></span>
<input type="text" id="inpName" ></input>

let obj ={
  name:''
}
let newObj=JSON.parse(JSON.stringify(obj))
Object.defineProperty(obj,'name',{
  get(){
    return newObj.name
  },
  set(val){
    if(val === newObj.name) return;
    newObj.name = val
    observer()
  }
})
function observer(){
  spanName.innerHTML = obj.name
  inpName.value = obj.name
}
setTimeout(()=>{
  obj.name = '今日阅读'
},1000)
inpName.oninput=function(){
  obj.name = this.value
}

let obj={}
obj = new Proxy(obj,{
  get(target,prop){
    return target[prop]
  },
  set(target,prop,value){
    target[prop] = value
    observer()
  }
})
function observer(){
  spanName.innerHTML = obj.name
  inpName.value = obj.name
}
inpName.oninput=function(){
  obj.name = this.value
}

跨域问题

因为同源策略，采用前后端分离

Jsonp

只能get，不安全、有缓存、大小限制

iframe

• window.name
• document.domin
• location.hash
• post message

CORS-服务端配置

http Proxy

webpack添加proxy

nginx反向代理

在build之后proxy不可以用，要服务器端nginx反向代理

组件中通信

属性传递

发布订阅(EventBus):$on/$emit

Provide/inject

slot

$parent/$children

vuex

redux

let arr = [12,13,14,15,15,16,16]
let newArr = [...new Set(arr)]
let newArr = Array.from(new Set(arr))
arr.sort((a,b)=>a-b)
arr = arr.join('@')+'@'
let reg= /(\d+@)\1*/g
let newArr = []
arr.replace(reg,(val,group1)=>{
  newArr.push(parseFloat(group1))
})
for(let i=0;i<arr.length-1;i++){
  let item=arr[i],args=arr.slice(i+1)
  if(args.indexOf(item)>-1){
    // arr.splice(i,1)
    // i--
    arr[i]=arr[arr.length-1]
    arr.length--
    i--
  }
}

//冒泡排序：
function bubble(arr) {
  let temp = null
  for (let i = 0; i < arr.length - 1, i++) {
    for (let j = 0; j < arr.length - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        temp = arr[j]
        arr[j] = arr[j + 1]
        arr[j + 1] = temp
      }
    }
  }
  return arr
}
//插入排序
function insert(arr){
  let handle=[]
  handle.push(arr[0])
  for(let i=1;i<arr.length;i++){
    let A=arr[i]
    for(let j=handle.length-1;j>=0;j--){
      let B= handle[j]
      if(A>B){
        handle.splice(j+1,0,A)
        break
      }
      if(j===0){
        handle.unshift(A)
      }
    }
  }
}
//快速排序
function quick(arr){
  if(arr.length<=1) return arr
  let middleIndex = Math.floor(arr.length/2)
  let middleValue = arr.splice(middleIndex,1)[0]
  let arrLeft=[],arrRight=[]
  for(let i=0;i<arr.length;i++){
    let item=arr[i]
    item<middleValue?arrLeft.push(item):arrRight.push(item)
  }
  return quick(arrLeft).concat(middleValue,quick(arrRight))
}

// 数组扁平化
let arr=[
  [1,2,2],
  [3,4,5,5],
  [6,6,[7,8,9,[11,[12,13,[14]]]]],10
]
// Array.prototype.flat()函数
arr=arr.flat(Infinity)
//转换字符串
arr=arr.toString().split(',').map(item=>parseFloat(item))
arr = JSON.stringify(arr).replace(/(\[|\])/g,'').split(',').map(item=>parseFloat(item))
//循环验证
while(arr.some(item=>Array.isArray(item))){
  arr=[].concat(...arr)
}
(function(){
  function myFlat(){
    let result=[],_this=this
    let fn=(arr)=>{
      for(let i=0;i<arr.length;i++){
        let item=arr[i]
        if(Array.isArray(item)){
          fn(item)
          continue
        }
        result.push(item)
      }
    }
    fn(_this)
    return result
  }
  Array.prototype.myFlat = myFlat
})()
arr = arr.myFlat()

// 斐波那契数列
function fibonacci(n){
  if(n<=1) return 1
  let arr =[1,1]
  let i = n+1-2 //要创建的个数
  while(i>0){
    let a=arr[arr.length-2],b=arr[arr.length-1]
    arr.push(a+b)
    i--
  }
  return arr[arr.length-1]
}
function fibonacci(count){
  function fn(count,curr=1,next=1){
    if(count==0){
      return curr
    }else{
      return fn(count-1,next,curr+next)
    }
  }
  return fn(count)
}

输出所有和N的连续正数序列

(function(){
  function check(){
    n= Number(n)
    return isNaN(n)?0:n
  }
  function add(n){
    n=check(n)
    return this +n
  }
  function minus(n){
    n=check(n)
    return this -n
  }
  Number.prototype.add = add
  Number.prototype.minus = minus
})()
(5).add(3).minus(2)    //6

// 字母大小写互换
let str = 'aBcDeFg'
str = str.replace(/[a-zA-Z]/g,content=>{
  return content.toUpperCase()===content?content.toLowerCase()
  :content.toUpperCase()
})

// (function(){
//   function myIndexOf(T){
//     let lenT=T.length,lenS=this.length,res=-1
//     if(lenT>lenS) return -1
//     for(let i=0;i<=lenS-lenT;i++){
//       if(this.substr(i,lenT)===T){
//         res=i
//         break
//       }
//     }
//     return res
//   }
//   String.prototype.myIndexOf = myIndexOf
// })()
let S ='abcdefghijklmn'
let T = 'def'
//正则
(function(){
  function myIndexOf(T){
    let reg = new RegExp(T)
    let res = reg.exec(this)
    return res===null?-1:res.index
  }
  String.prototype.myIndexOf = myIndexOf
})()

// url验证有效
let reg=/^(?:(http|https|ftp):\/\/)?((?:[\w-]+\.)+[a-z0-9]+)((?:\/[^/]*)+)?(\?[^#]+)?(#.+)?$/i

//正则一个6-16位字符串必须同时有大小写字母和数字
let reg = /^(?!^[a-zA-Z]+$)(?!^[a-z0-9]+$)(?!^[A-Z0-9]+$)(?!^[A-Z0-9]+$)(?!^[0-9]+$)^[a-zA-Z0-9]{6,16}$/

// 实现一个_new方法：
function Dog(name) {
  this.name = name
}
Dog.prototype.bark = function () {
  console.log('bark')
}
function _new(Fn, ...args) {
  // let obj={}
  // obj._proto_ = fn.prototype
  let obj = Object.create(Fn.prototype)
  Fn.call(obj, ...args)
  return obj
}
let maomao = _new(Dog, '毛毛')

// 修改方式：
for (var i = 0; i < 10; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000)
}
// 1.let存在块级作用域
//2.闭包
for (var i = 0; i < 10; i++) {
  (function (i) {
    setTimeout(() => {
      console.log(i)
    }, 1000)
  })(i)
}
for(var i=0;i<10;i++){
  setTimeout((i=>{
    return()=>console.log(i)
  })(i),1000)
}
for(var i=0;i<10;i++){
  setTimeout((i=>()=>console.log(i))(i),1000)
}
var fn=function(i){
  console.log(i)
}
for(var i=0;i<10;i++){
  setTimeout(fn.bind(null,i),1000)
}

let obj={
  2:3,
  3:4,
  length:2,
  push:Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj) // {2:1,3:2,length:4,push...}

let obj={
  1:22,
  2:33,
  5:88
}
let arr = new Array(12).fill(null).map((item,index)=>{
  return obj[index+1] || null
})
let arr = Array.from({length:12}).map((item,index)=>obj[index+1]||null)
let arr = Array.from({length:12}).fill(null)
Object.keys(obj).forEach(item=>res[item-1]=obj[item])


let obj={}
function Fn(...arg){}
document.body.onclick= fn.bind(obj,100,200)
document.body.onclick= function(ev){
  fn.call(obj,100,200,ev)
} 
(function(){
  function myBind(context=window,...outerArg){
    let _this = this
    return function(...innerArg){
      _this.call(context,...outerArg.concat(innerArg))
    }
  }
  Function.prototype.myBind = myBind
})()