JavaScript

JavaScript 中常见注意事项

Posted by cl9000 on March 12, 2021

$(window).height()获取到的高度不对

$(window).height() 或 document.documentElement.clientHeight
只需要将 html5 的声明整成标准的带有 <!doctype> 或 <!DOCTYPE> 的声明的就可以了。

示例Demo web-code 18

JavaScript展平多维数组

将多维数组合并为单个数组的几种已知方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 给定此数组：
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
// 想要这样的结果：[1, 2, 3, 4, 5, 6, 7, 8, 9]
// 解决方案1：使用concat()和apply()
var myNewArray = [].concat.apply([], myArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 解决方案2：使用 reduce()
var myNewArray = myArray.reduce(function(prev, curr) {
  return prev.concat(curr);
}); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 解决方案3：循环遍历
var myNewArray3 = [];
for (var i = 0; i < myArray.length; ++i) {
  for (var j = 0; j < myArray[i].length; ++j)
    myNewArray3.push(myArray[i][j]);
}
console.log(myNewArray3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 解决方案4：在ES6中 使用 扩展运算符...
var myNewArray4 = [].concat(...myArray);
console.log(myNewArray4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 解决方案5：在ES10中 使用 flat() 
var myNewArray5 = myArray.flat();
console.log(myNewArray5);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

对于无限嵌套的数组，请尝试使用 Lodash 的 flattenDeep()。
flattenDeep - https://lodash.com/docs#flattenDeep

如果您对性能感到好奇，请在此处进行测试以检查其工作方式。
https://jsperf.com/flatten-an-array-loop-vs-reduce/6

JavaScript代码段

setTimeout() 并 setInterval() 接受参数，这些参数将传递给回调函数

1
2
3
4
5
6
var anArray = ['one', 'two', 'three'];
for (var i = 0, l = anArray.length; i < l; i++) {
  setTimeout(function (item) {
    console.log(item); // logs: one two three
  }, 1, anArray[i]);
}

连接数组而不创建新对象

1
2
3
4
var a = [1, 2, 3];
var b = [4, 5, 6];
Array.prototype.push.apply(a, b);
console.log(a); // [1, 2, 3, 4, 5, 6]

页面卸载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/// ###### 监听页面 隐藏/显示 Start ##### ##### ##### ##### 
    // query current page visibility state: prerender, visible, hidden
    var pageVisibility = document.visibilityState;
    // subscribe to visibility change events
    document.addEventListener('visibilitychange', function() {
        // fires when user switches tabs, apps, goes to homescreen, etc.
        if (document.visibilityState == 'hidden') { 
           console.log('hidden...')
        }
        // fires when app transitions from prerender, user returns to the app / tab.
        if (document.visibilityState == 'visible') { 
            console.log('visible...')
        }
    });
/// ###### 监听页面 隐藏/显示 End ##### ##### ##### #####

换行问题

在显示内容的元素标签添加如下样式，（使用v-html绑定数据，同时支持 \n 和 <br/>）

1
<div style="white-space: pre-line;" v-html="htmlTxt"></div>

这样\n（<br/>）就能被识别，自动换行。(最低兼容到IE8)。caniuse 兼容性查看

**注意：**若经过JSON处理，后台传入的 \n 会被解析为字符串\ 和 n， 需要在处理一下 str.replace(/\\n/g, '\n')


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
JavaScript
FRIENDS