JS 部分

基本類型

對于類型的進一步判斷， 可以參考js類型判斷

# typeof

undefined – 未定義
object – 對象或null

# null類型

如果定義的變量準備在將來用于保存對象，那么最好將該變量初始化為 null 而不是其他值。這樣一來，只要直接檢查 null 值就可以知道相應的變了是否已經保存一個對象的引用。

---

# with使用

延長作用域鏈
例子1：

function buildUrl(){var qs = "?debug=true";with(location){var url = href + qs;}return url; }

例子2：（對對象的訪問提供便利，但是不能增加屬性）

function Lakers() { this.name = "kobe bryant"; this.age = "28"; this.gender = "boy"; } var people=new Lakers(); with(people) { var str = "姓名: " + name + "<br>"; str += "年齡：" + age + "<br>"; str += "性別：" + gender; }

執行結果如下

姓名: kobe bryant
年齡：28
性別：boy

注意: 使用with / eval，引擎會無法優化，從而導致性能下降，慎用 (參考：你不知道的Javascript上卷）。

# 數組降維

將數組**[** [1, 2, 3], [4, 5], 6 **]**降為一維數組 [ 1, 2, 3, 4, 5, 6 ]， 有一個很巧妙的方法

var newArr = [].concat.apply([], arr);

這里僅對 concat方法做一個簡單的解釋，concat適用于數組拼接, 不改變原數組，返回新的數組，參數接受普通值或者數組：

var arr = [1, 2, 3];console.log(arr.concat(4)); // [1, 2, 3, 4] console.log(arr.concat(4, 5)); // [1, 2, 3, 4, 5] console.log(arr.concat([4])); // [1, 2, 3, 4] console.log(arr.concat([4, 5])); // [1, 2, 3, 4, 5]console.log(arr.concat([[4]])); //[1, 2, 3, [4]]

值得注意的一點是超二維數組需要遞歸降維。
而重點是apply的用法，apply通常用于和call的對比*（見高級程序設計的5.5.5 函數屬性與方法）*，其中描述有：apply()接受兩個參數：一個是在其中運行函數的作用域，另一個是參數數組。書中給出的例子：

function sum (num1, num2) {return num1 + num2; }function callSum(num1, num2) {console.log(sum.apply(this, [num1, num2])); //傳入數組 }callSum(10, 20); //30

從這個例子可以看出apply將傳入的數組拆開分別傳給前面的函數，所以

[].concat.apply([], [ [1, 2, 3], [4, 5], 6])//可以理解為： [].concat([1,2,3], [4,5], 6)

# 移動端和PC端判斷

有時候我們為了更好的適配移動端和PC端，采用兩套架構開發，這時候就需要針對不同的平臺加載不同的網站。
可以通過如下方式判斷：

var isMobile = /Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent) ? true : false;

---

CSS 部分

# table元素內部強制不換行，并滾動

//強制不換行white-space: nowrap;// display: table會導致內部不滾動display: block;overflow-x: auto;

# display: inline-block 莫名其妙出現的樣式差

有關于使用inline-block來代替float的討論也蠻多的，最常說的就是使用inline-block來代替float進行布局，或者使用inline-block來實現元素的居中效果。前面《CSS3制作的分頁導航》一文中就是使用的inline-block制作的居中效果，不過留下了一上問題，就是使用inline-block的元素之間會存在“4px”的空白間距。
原文: https://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements ? w3cplus.com

可以通過設置父元素font-size為0來解決，但是safri瀏覽器問題仍然存在。
可以用 float 替換 Inline-block，但是記得清除浮動

# 清除浮動

.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0; } .clearfix{ zoom:1 }

# 其他

user-select: none; // 文本不被選中 outline: none; //去掉輸入框

---

項目中遇到的問題

jquery animate動畫執行中，修改樣式失效

修改樣式的時候，應該先將該元素動畫停止，用stop()方法，然后修改樣式。

總結

以上是生活随笔為你收集整理的知识碎片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。