前端零碎知識點前端踩坑記錄(持續更新)

  1. This指向問題。this對象指向調用函數的對象,全局環境中this指向window。call和apply函數中的this指向指定的對象,如果所指定的是undefined或是null,this將重新指向window。在箭頭函數中,this等同於外層代碼塊的this。
  2. 取整時,建議使用Math.trunc( )來代替ParseInt( ),Math.trunc( )這個辦法僅僅只是刪除小數點後的數字。還可以使用 |0 例如:156.33 |0 //156 或是使用 ~~1234.33 //1234 。 如果我沒有記錯的話,後兩種方法比第一種方法運行速度更快。
  3. arguments也是對象,而且是一種特殊的對象,它的屬性是按照傳入參數的序列來的。第一個參數屬性名“ 0 ”,第二個參數名爲 “ 1 ”以此類推。其主要作用爲存儲當前傳入函數參數的個數,我們也稱之爲類數組對象。
  4. call( )用括號裏的對象來集成括號外的函數屬性,我們稱之爲“ 繼承 ”。
  5. cannot set property “…” of undefined 出錯原因爲 在獲取屬性時出錯,獲取屬性的方法不正確。
  6. cannot read property “…” of null 出錯原因在於 捕獲類型錯誤,需要檢查元素是否被正確的獲取到。
  7. addEventListener 中使用各種Js觸發事件,觸發事件不可以加括號!
  8. bind( )函數存在一個問題,即不可以兼容IE6、7、8。
  9. confirm( )彈窗包含確定與取消,分別返回“ true ”和 “ false”。window.open( )可以打開一個i新的窗口。
  10. tap事件在移動端中會比click事件更靈敏,但tap事件並不是瀏覽器BOM事件中的一種。是第三方庫封裝的。
  11. Js中沒有塊級作用域,只有函數作用域,但是支持塊級作用域。let和const 相同之處在於都可以聲明一個塊級作用域。使用var聲明,其作用域爲該語句所在的函數內,且存在變量提升的問題。let聲明,其作用域爲該語句所在的代碼塊內,不存在變量提升的問題。const多用於聲明一個常量,即爲初始化默認值。設置過const之後就不可以改變可不可以賦值。這也正是const與let的不同之處。
  12. 二維數組的本質,數組中的元素還是數組。即子數組作爲元素存在父級數組中。二維數組給我們帶來了行與列的選擇方式。var arr=[[0,1],["a","b"]]; alert(arr[1][0]) alert第一個中括號代表找到arr中索引爲1的數組即[“a”,“b”],第二個中括號代表找到arr中索引爲0的[0,1]。
  13. webpack是模塊打包機,它做的事情是分析你的項目結構,找到Js模塊以及其他的一些瀏覽器不能直接運行的拓展語言:例如C、sass等並打包爲最合適的格式供瀏覽器使用。
  14. 同步:只能做一件事,其他必須等當前事件完成後才能繼續。異步:提交數據後,可以做很多事情,不必等。JSON.parse( )解析json中的數據 output輸出 JSON.stringify()將對象轉換成json。
  15. window.open() 打開頁面適用於PC端,移動端安卓可以兼容,但ios並不兼容。
  16. IOS的旋轉機制與css3 rotate不同,如果是IOS則需要考慮兼容性問題。
  17. 通訊錄擡頭月份的展示:由於月份是放在統一Json中,需要在渲染的時候進行比對:
//index,billmonth是傳入的形參,mounth即爲後端的月份字段
//這個方法應該放在Vue.js中的methods中,並在html中調用

			MonthScreen:function(index,billmonth){
                if(index==0){
                    return true;
                }else{
                    if(this.dataList[index-1].mounth!=billmonth){
                        return true;
                    }else{
                        return false;
                    }
                }
            }
  1. 如果node環境升級了,出現基於老版的node創建的VueCLI運行不起來的現象。最簡單高效的方法即是 刪除 node_modules文件夾以及package-lock.json。重新 npm install 一下即可。
  2. 比較好用的VueUI框架 vant。
  3. Vue.js 如果需要根據參數的不同來跳轉不同的頁面時,最好不在html中做判斷(v-if 以及 else)。而是用methods中的函數來判斷跳轉地址,(將methods中的函數放在html中)或是使用計算屬性。
  4. < a v-on:click.stop=“doThis”>< /a> .stop 修飾符可以阻止冒泡事件。
  5. HTML5本地存儲只能存字符串,任何格式存儲的時候都會被自動轉爲字符串,所以讀取的時候,需要自己進行類型的轉換。
  6. 在畫頁面時,我們可以將一些數據通過虛擬數據的方式顯示出來。這樣即爲後期添加數據接口打下基礎,另一方面還可以測試頁面的性能。
  7. $().each()這個方法,在dom處理上用的比較多,如果頁面上有多個input標籤爲checkbox,就可以用改方法來處理多個checkbox,例如:
$("input[name='ch']").each(function(i){
  if ($(this).attr('checked') == true){
    //do something 
  }
})
  1. .map()函數用於處理當前jQuery對象匹配的所有元素,並將處理結果封裝爲新的數組。map(callback)爲包裝集中的每一個元素調用回調函數,並將返回值收集到jQuery對象的實例中。
/* .map()方法遍歷json數組中的某個key值並且以字符串的格式輸出
   注意item["age"]這裏需要添加引號""
*/
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},    {name:"d",age:14}];

var newArr = data.map(function(item,index) {
  var age = item["age"];
  return age;
}).toString();

//輸出爲 12,11,13,14 字符串格式
  1. 畫一箇中間帶文字的空心圓
.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 10px;
}
.circle span {
  height: 20px;
  line-height: 20px;
  display: block;
  font-size: 12px;
  color: #000;
  text-align: center;
}
  1. map()可以用來遍歷一個數組中的所有元素
var arr = [1, 2, 4, 5, 6];

var newArr = arr.map(function(item, index) {
 return item * 2;
});

console.log(newArr); //[2, 4, 8, 10, 12]

filter()可以可以取出數組中符合條件的元素 重新組成一個新的數組

var arr = [1, 2, 4, 5, 6];

var newArr = arr.filter(function(item, index) {
 return item > 3;
});
console.log(newArr); //[4, 5, 6]

forEach()

var arr = [1, 2, 4, 5, 6];

arr.forEach(function(item, index) {
 console.log(item); //1, 2, 4, 5, 6
});

reduce()讓數組中的前項和後項做某種計算,並累計最終值

var arr = [1, 2, 4, 5, 6];

var result = arr.reduce(function(prev, next) {
 return prev+next;
});
console.log(result); 

every()檢測數組中的每一項是否符合條件

var arr = [1, 2, 4, 5, 6];
var result = arr.every(function(item,index) {
 return item > 0;
});
console.log(result); //全部滿足才爲true

some()檢測數組中是否有某些項符合條件

var arr = [1, 2, 4, 5, 6];

var result = arr.some(function() {
 return item > 1;
});
console.log(result); //只要滿足一個條件即爲true
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章