八种酷炫JavaScript 技巧

<div class="tips">box is visible</div><div class="box">box</div><script>  const $tips = document.querySelector('.tips')  const callback = (entries) => {    entries.forEach((entry) => {      console.log(entry.intersectionRatio)      if (entry.intersectionRatio > 0) {        $tips.innerhtml = 'box is visible'      } else if (entry.intersectionRatio <= 0) {        $tips.innerHTML = 'box is hidden'      }    });  }
  const options = {    // A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.    // threshold: 1,  }  const observer = new IntersectionObserver(callback, options)  observer.observe(document.querySelector('.box'))</script>

const obj = {  a: {    b: {      name: 'fatfish'    }  }}
const obj2 = lodash.cloneDeep(obj)
obj2.a.b.name = 'medium'console.log(obj.a.b.name) // fatfishconsole.log(obj2.a.b.name) // medium

const deepClone1 = (obj) => {  return JSON.parse(JSON.stringify(obj))}
const obj = {  a: {    b: {      name: 'fatfish'    }  }}const obj2 = deepClone1(obj)obj2.a.b.name = 'medium'console.log(obj.a.b.name) // fatfishconsole.log(obj2.a.b.name) // medium

const deepClone1 = (obj) => {  return JSON.parse(JSON.stringify(obj))}
const obj = {  a: {    b: {      name: 'fatfish'    }  },  reg: /fatfish/gi,  name: undefined,  showName: (name) => console.log(name)}const obj2 = deepClone1(obj)console.log(obj2)/*{    "a": {        "b": {            "name": "fatfish"        }    },    "reg": {}}*/

const obj = {  a: {    b: {      name: 'fatfish'    }  },  reg: /fatfish/gi,  name: undefined,}
const obj2 = structuredClone(obj)obj2.a.b.name = 'medium'console.log(obj.a.b.name) // fatfishconsole.log(obj2.a.b.name) // mediumconsole.log(obj2)/*{    "a": {        "b": {            "name": "medium"        }    },    "reg": /fatfish/gi,    "name": undefined}*/

const getBrowserName = () => {  const userAgent = window.navigator.userAgent  const browsers = {    chrome: /chrome/i,    safari: /safari/i,    firefox: /firefox/i,    ie: /inte.NET explorer/i,    edge: /edge/i,    opera: /opera|opr/i,    yandex: /yandex/i,    uc: /ucbrowser/i,    samsung: /samsungbrowser/i,    maxthon: /maxthon/i,    phantomjs: /phantomjs/i,    crIOS: /crios/i,    firefoxios: /fxios/i,    edgios: /edgios/i,    safariios: /safari/i,    Android: /android/i,    ios: /(iphone|ipad|ipod)/i,    unknown: /unknown/i  }
  for (const key in browsers) {    if (browsers[key].test(userAgent)) {      return key    }  }  return 'unknown'}// Execute the above code in chrome browserconsole.log(getBrowserName()) // chrome// Execute the above code in safari browserconsole.log(getBrowserName()) // safari

const randomColor = () => {  // Generate three random numbers as the three components of an RGB color value  const r = Math.floor(Math.random() * 256);  const g = Math.floor(Math.random() * 256);  const b = Math.floor(Math.random() * 256);  // Convert RGB color values to hexadecimal format  const hexR = r.toString(16).padStart(2, '0');  const hexG = g.toString(16).padStart(2, '0');  const hexB = b.toString(16).padStart(2, '0');  // Concatenated into a complete color value string  const hexColor = `#${hexR}${hexG}${hexB}`;  return hexColor;}

const copyToClipboard = (content) => {  const textarea = document.createElement("textarea")  textarea.value = content  document.body.AppendChild(textarea)  textarea.select()  document.execCommand("Copy")  textarea.remove()}
copyToClipboard('i love medium') // i love medium

const getSearchParam = (name) => {  const searchParams = new URLSearchParams(window.location.search)  return searchParams.get(name)}
// https://medium.com?name=fatfish&age=1000console.log(getSearchParam('name')) // fatfishconsole.log(getSearchParam('age')) // 1000

const getSearchParams = () => {  const searchParams = new URLSearchParams(window.location.search)  const params = {};  for (const [ key, value ] of searchParams) {    params[key] = value  }
  return params}// https://medium.com?name=fatfish&age=1000getSearchParams() // { name: 'fatfish', age: 1000 }

const scrollToTop = (ele) => {  ele.scrollIntoView({ behavior: "smooth", block: "start" })}
document.querySelector('button').addEventListener('click', function () {  scrollToTop(this)}, false)

document.querySelector('button').addEventListener('click', function () {  scrollToTop(this)}, false)