原生javascript的一些好用的小技巧1

qujian 發布于2019-08-21 17:47 / 2853人閱讀

摘要：以下我經常用，又總是記不住的幾個方法轉成數組形式獲取中的內容關鍵在頁面標簽加載完成事件關鍵在阻止瀏覽器事件默認行為關鍵，記憶方法阻止事件冒泡關鍵，記憶方法數組的幾個常用方法是數組的每一項如的下標，每一個元素的順序等同于一個單純的循環可以對進

以下我經常用，又總是記不住的幾個方法

document.querySelectorAll 轉成數組形式；

[].slice.call(document.querySelectorAll("div")).forEach(function(item,index){
    console.log(item,index);
});

獲取iframe中的內容

var doc = document.querySelector("iframe").contentWindow.document;
var html = doc.body.innerHTML;

關鍵在contentWindow

頁面標簽加載完成事件

document.addEventlistener("DOMContentLoaded",function(e){
    console.log("ready");
},false);

關鍵在:DOMContentLoaded = dom content loaded

阻止瀏覽器事件默認行為

window.addEventlistener("mousewheel",function(e){
    console.log(e);
    e.preventDevault()
},false);

關鍵：preventDefault() ，記憶方法：pr event default

阻止事件冒泡

document.body.addEventlistener("click",function(e){
    console.log(e);
    e.stopPropagation()
},false);

關鍵：stopPropagation() ，記憶方法：stop Propa gation

數組的幾個常用方法

var arr = [{a:3,b:2},{a:2,b:1}];

arr.forEach(function(item,index){
    //item 是數組的每一項 如{a:1,b:2}
    //index arr的下標，每一個元素的順序
    //等同于一個單純的for循環
    console.log(item,index);
});

var newArr = arr.map(function(item,index){
    //可以對item進行二次處理之后，再返回出去
    item.c = item.a;
    return item;
});
// map會返回一個新的數組，不會修改原數組

//排序 按照每一項的a值升序（由小到大）排序 
var newArr = arr.sort(function(v1,v2){
    return v1.a-v2.a>0?1:-1;
});
//newArr = [{a:2,b:1},{a:3,b:2}]；

//過濾
var newArr = arr.filter(function(item,index){
    return item.a>2;
});
//newArr = [{a:3,b:2}]；

一個json的操作

var obj = {a:1,b:3};
JSON.stringify(obj);// {"a":1,"b":3}
//字符串轉json
JSON.parse(JSON.stringify(obj));
JSON.stringify(obj,null,4);//4：縮進大小，null：隨便填
/**

{
    "a":1,
    "b":3
}

*/

//將所有key作為一個數組處理
Object.keys(obj); // ["a","b"]

//將所有value作為一個數組處理
Object.values(obj); // [1,3]

//合并兩個json
Object.assign(obj,{a:2});//{a:2,b:3}

寫的比較隨意，還有很多，改天再寫

GPU云服務器云服務器好用的小程序附近的小程序好用嗎微信好用的小程序原生的javascript

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90005.html

JavaScript精編干貨

摘要：老姚淺談怎么學鑒于時不時，有同學私信問我老姚，下同怎么學前端的問題。擼碼聽歌，全局控制。淺析用 js 解析 xml 的方法由于項目上需要解析 xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。裝 X - 建立自己的斗圖網站庫之前加過一個斗圖群，看到很多經典的表情，然后就收藏到了 QQ，迫于本屌絲開不起...

Fourierr 2019-08-21 18:46 評論0 收藏0
ES6+好用的小技巧，讓你的代碼更干凈，短巧，易讀

摘要：模板字符串擴展操作符操作符，有兩個主要用處復制一個新的數組或對象把多個參數賦值給一個數組變量把一個數組變量賦值給多個參數是一個新的數組，內容和一樣合并對象屬性，后邊的屬性會覆蓋前邊的，可用于修改對象的某個屬性值輸出默認參數給方法添加默認參模板字符串 let name = siri, age = 18, job = front-end engineer let oldStr = Hi,...

sanyang 2019-08-23 15:07 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
針對Python初學者，這13個好用到起飛的小技巧！

摘要：如果你也是學習愛好者，今天講述的個小技巧，真挺香歡迎收藏學習，喜歡點贊支持。因此，鍵將成為值，而值將成為鍵。幸運的是，這可以通過一行代碼快速完成。因此，我們的代碼不會因錯誤而終止。 ...

張憲坤 2021-10-14 09:43 評論0 收藏0
Eclipse被卡死了或者失去響應了后分析根源的一個小技巧

摘要：沒有經驗的朋友可能會用任務管理器強制結束進程，抱著僥幸的心理一次又一次得重試，希望這個卡死或者失去響應的問題可以不再出現，但往往事與愿違。本文介紹的這個通用辦法適用于一切不能正常工作時的故障排查和分析。提升程序員工作效率的工具/技巧推薦系列推薦一個功能強大的文件搜索工具SearchMyFiles 介紹一個好用的免費流程圖和UML繪制軟件-Diagram Designer 介紹Win...

王陸寬 2019-08-16 13:31 評論0 收藏0