翼度科技»论坛 编程开发 JavaScript 查看内容

30个Javascript知识点总结,总有你不会的!

8

主题

8

帖子

24

积分

新手上路

Rank: 1

积分
24
近重温了一遍红宝书,发现一些比较好玩的写法,很多东西日常都在用,但是发现还会有不一样的写法,结合一些日常工作中使用的方法,为大家总结一篇日常经常使用可能还不知道的点,希望对你能有所帮助:
一行代码完成结构加赋值

我们日常经常使用结构赋值,一般都是先结构,再赋值,当然我们也可以一行就完成解构加赋值操作,看起来非常简化,当然可读性你懂得!
  1. let people = { name: null, age: null };
  2. let result = { name: '张三',  age: 16 };
  3. ({ name: people.name, age: people.age} = result);
  4. console.log(people) // {"name":"张三","age":16}###
复制代码
对基础数据类型进行解构

日常中我们应该用不到这样的场景,但是实际上我们也可以对基础数据类型解构。
  1. const {length : a} = '1234';
  2. console.log(a) // 4
复制代码
对数组解构快速拿到最后一项值

实际上我们是可以对数组解构赋值拿到length属性的,通过这个特性也可以做更多的事情。
  1. const arr = [1, 2, 3];
  2. const { 0: first, length, [length - 1]: last } = arr;
  3. first; // 1
  4. last; // 3
  5. length; // 3
复制代码
将下标转为中文零一二三...

日常可能有的列表我们需要将对应的012345转为中文的一、二、三、四、五...,在老的项目看到还有通过自己手动定义很多行这样的写法,于是写了一个这样的方法转换。
  1. export function transfromNumber(number){
  2.   const  INDEX_MAP = ['零','一'.....]
  3.   if(!number) return
  4.   if(number === 10) return INDEX_MAP[number]
  5.   return [...number.toString()].reduce( (pre, cur) => pre  + INDEX_MAP[cur] , '' )
  6. }
复制代码
判断整数的不同方法
  1. /* 1.任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。但是对字符串不准确 */
  2. function isInteger(obj) {
  3. return obj%1 === 0
  4. }
  5. /* 1. 添加一个是数字的判断 */
  6. function isInteger(obj) {
  7. return typeof obj === 'number' && obj%1 === 0
  8. }
  9. /* 2. 使用Math.round、Math.ceil、Math.floor判断 整数取整后还是等于自己。利用这个特性来判断是否是整数*/
  10. function isInteger(obj) {
  11. return Math.floor(obj) === obj
  12. }
  13. /* 3. 通过parseInt判断 某些场景不准确 */
  14. function isInteger(obj) {
  15. return parseInt(obj, 10) === obj
  16. }
  17. /* 4. 通过位运算符*/
  18. function isInteger(obj) {
  19. return (obj | 0) === obj
  20. }
  21. /* 5.ES6提供了Number.isInteger */
复制代码
通过css检测系统的主题色从而全局修改样式

@media 的属性 prefers-color-scheme就可以知道当前的系统主题,当然使用前需要查查兼容性
  1. @media (prefers-color-scheme: dark) { //... }
  2. @media (prefers-color-scheme: light) { //... }
复制代码
javascript也可以轻松做到
  1. window.addEventListener('theme-mode', event =>{
  2.     if(event.mode == 'dark'){}
  3.    if(event.mode == 'light'){}
  4. })
  5. window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => {
  6.     if (event.matches) {} // dark mode
  7. })
复制代码
数组随机打乱顺序

通过 0.5-Math.random() 得到一个随机数,再通过两次sort排序打乱的更彻底,但是这个方法实际上并不够随机,如果是企业级运用,建议使用第二种洗牌算法
  1. shuffle(arr) {
  2.       return arr.sort(() => 0.5 - Math.random()). sort(() => 0.5 - Math.random());
  3. },
  4. function shuffle(arr) {
  5.   for (let i = arr.length - 1; i > 0; i--) {
  6.     const randomIndex = Math.floor(Math.random() * (i + 1))
  7.     ;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
  8.   }
  9.   return arr
  10. }
复制代码
随机获取一个Boolean值

和上个原理相同,通过随机数获取,**Math.random()**的区间是0-0.99,用0.5在中间百分之五十的概率
  1. function randomBool() {
  2.     return 0.5 - Math.random()
  3. }
复制代码
把数组的第一项放到最后一项
  1. function (arr){
  2.     return arr.push(arr.shift());
  3. }
复制代码
把数组最后一项移到第一项
  1. function(arr){
  2.   return arr.unshift(arr.pop());
  3. }
复制代码
篇幅关系,更多总结请参考:https://cybozudev.kf5.com/hc/community/question/34258634/?from=cnblog

来源:https://www.cnblogs.com/cybozu/p/17116744.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具