JavaScript

说明

JavaScript学习笔记

重点：

• JavaScript 里一切皆对象，一切皆可储存在变量里

• map方法会改变原始数组的值吗？

  当数组为基础类型时原数组不变，当数组为引用类型时原数组发生改变。

  下面代码段正确的输出是什么？

// 1 避免源对象被改变
const array1 = [{name:'1'},{name:'3'}]
const map1 = array1.map((x,index) => {
  let obj = {...x}
  obj.name = index
  return obj
});
console.log(map1);
console.log(array1);
//> Array [Object { name: 0 }, Object { name: 1 }]
//> Array [Object { name: "1" }, Object { name: "3" }]

// 2 源对象被改变了
const array1 = [{name:'1'},{name:'3'}]
const map1 = array1.map((x,index) => {
 	let obj = x
	obj.name = index
  return obj
});
console.log(map1); 
console.log(array1);
//> Array [Object { name: 0 }, Object { name: 1 }]
//> Array [Object { name: 0 }, Object { name: 1 }]

forEach循环中调用异步方法，如何实现同步

准备代码：

const res = []
const arr = [1,2,3,4,5]
 
function t(num) {
  return new Promise((resolve, reject) => {
    setTimeout(()=>{
      console.log('定时器', num)
      resolve()
    }, 1000)
  })
}
 
function t2(item){
  console.log('进入res')
  res.push(item)
}

情况1: forEach内部等待异步执行完成

arr.forEach(async (item, index) =>{
  await t(item)
  t2(item)
})

结果：

定时器 1
进入res
定时器 2
进入res
定时器 3
进入res
定时器 4
进入res
定时器 5
进入res

情况2：forEach外部等待forEach执行完成

let asyncFun = []
arr.forEach((item, index) =>{
  asyncFun.push(t(item))
  t2(item)
})
Promise.all(asyncFun).then(() => {
  console.log('res', res)
})

结果：

定时器 1
定时器 2
定时器 3
定时器 4
定时器 5
res (10) [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

情况3: 既需要forEach内部同步执行，又需要forEach外部同步执行

Promise.all(
  arr.map( item =>{
    return new Promise(async (resolve, reject) =>{
      await t(item)
      t2(item)
      resolve()
    })
  })
).then(() =>{
  console.log('object', res)
})

结果：

定时器 1
进入res
定时器 2
进入res
定时器 3
进入res
定时器 4
进入res
定时器 5
进入res
object (15) [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

js获取用户浏览器版本信息

navigator.userAgent 是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。我们可以使用它来检测浏览器信息。

function browser() {
  var ua = navigator.userAgent;
  var ret = {},
      webkit = ua.match( /WebKit\/([\d.]+)/ ),
      chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
          ua.match( /CriOS\/([\d.]+)/ ),
 
      ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
          ua.match( /(?:trident)(?:.*rv:([\w.]+))?/i ),
      firefox = ua.match( /Firefox\/([\d.]+)/ ),
      safari = ua.match( /Safari\/([\d.]+)/ ),
      opera = ua.match( /OPR\/([\d.]+)/ );
 
  webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
  chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
  ie && (ret.ie = parseFloat( ie[ 1 ] ));
  firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
  safari && (ret.safari = parseFloat( safari[ 1 ] ));
  opera && (ret.opera = parseFloat( opera[ 1 ] ));  console.log(ua);
  return ret;
}

console.log(browser())