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

qujian 发布于2019-08-21 17:47 / 2755人阅读

摘要：以下我经常用，又总是记不住的几个方法转成数组形式获取中的内容关键在页面标签加载完成事件关键在阻止浏览器事件默认行为关键，记忆方法阻止事件冒泡关键，记忆方法数组的几个常用方法是数组的每一项如的下标，每一个元素的顺序等同于一个单纯的循环可以对进

以下我经常用，又总是记不住的几个方法

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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