八种酷炫JavaScript 技巧

1.检查元素是否在屏幕可见区域内

我们如何获得元素的点击率？

主要取决于用户点击元素的次数和元素在页面上显示的次数。

我们可以很容易地获取到用户的点击次数，但是如何获取一个元素的显示次数呢？

我们可以通过IntersectionObserver轻松实现，大家可以点击codepen体验一下实际效果。

box is visible
box

2.深拷贝一个对象

我们经常使用 lodash 来深拷贝一个对象。

const obj = {
  a: {
    b: {
      name: 'fatfish'
    }
  }
}


const obj2 = lodash.cloneDeep(obj)


obj2.a.b.name = 'medium'
console.log(obj.a.b.name) // fatfish
console.log(obj2.a.b.name) // medium

但这非常麻烦，因为我们必须下载整个库才能使用 cloneDeep。

幸运的是，在大多数情况下，我们可以使用这两种更简单的方式来深拷贝一个对象。

深度克隆1

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) // fatfish
console.log(obj2.a.b.name) // medium

是的，我相信你已经看到了，deepClone1 有一些缺陷，它不能复制函数、正则表达式、未定义等值。

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": {}
}
*/

深度克隆2

另一种方法是使用 structuredClone。

这非常方便，我们甚至可以不做任何处理就可以深拷贝一个对象。

它甚至可以复制正则表达式和未定义的。

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) // fatfish
console.log(obj2.a.b.name) // medium
console.log(obj2)
/*
{
    "a": {
        "b": {
            "name": "medium"
        }
    },
    "reg": /fatfish/gi,
    "name": undefined
}
*/

但是真的没有缺点吗？它在某些情况下也无法正常工作。

它不能复制功能
它不复制dom元素
ETC。

3.获取浏览器名称

在前端监控系统中，需要获取用户出错的浏览器。

这是获取主要浏览器名称的通用函数。

const getBrowserName = () => {
  const userAgent = window.navigator.userAgent
  const browsers = {
    chrome: /chrome/i,
    safari: /safari/i,
    firefox: /firefox/i,
    ie: /internet 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 browser
console.log(getBrowserName()) // chrome
// Execute the above code in safari browser
console.log(getBrowserName()) // safari

4.获取随机颜色

我怎样才能得到一个随机的有效颜色？

大家可以点击codepen链接体验实际效果。

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;
}

演示地址：https://codepen.io/qianlong/pen/qBJaOGO

5.复制内容到剪贴板

为了给我们的网站用户提供更好的交互体验，我们经常需要提供将内容复制到剪贴板的功能。

难以置信的是，我们竟然只需要6行代码就可以实现这个功能。

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

演示地址：https://codepen.io/qianlong/pen/PoyGZYO

6.从搜索中获取查询字符串

使用 URLSearchParams 解析搜索数据变得非常容易。

const getSearchParam = (name) => {
  const searchParams = new URLSearchParams(window.location.search)
  return searchParams.get(name)
}


// https://medium.com?name=fatfish&age=1000
console.log(getSearchParam('name')) // fatfish
console.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=1000
getSearchParams() // { name: 'fatfish', age: 1000 }

7.将元素滚动到页面顶部

我们可以使用 scrollIntoView 方法将元素滚动到页面顶部。

甚至它可以提供非常流畅的用户体验。

const scrollToTop = (ele) => {
  ele.scrollIntoView({ behavior: "smooth", block: "start" })
}


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

8.将元素滚动到页面底部

哇，太好了，将元素滚动到顶部是如此简单。

朋友们，如何将元素滚动到页面底部？我想你已经猜到了，设置block结束即可。

const scrollToTop = (ele) => {
  ele.scrollIntoView({ behavior: "smooth", block: "end" })
}


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

演示地址：https://codepen.io/qianlong/pen/mdzrVGK

总结

以上就是我这篇文章想与您分享的8个关于JavaScript的技巧，希望对您有用。

标题名称：八种酷炫JavaScript 技巧
本文网址：http://www.mswzjz.cn/qtweb/news35/416935.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能

贝锐智能技术为您推荐以下文章