蝴蝶书看了,也知道充满了毒瘤和糟粕,但该用还是得用。

实际写了几天,小技巧记录下来。都是在py里有直接答案,不会遇到的问题,没想到js里这么费事。

还是要多读《ES6标准入门》

1判断object是[]还是{}

主要是转xml时是否正确,所以得判断这个。没想到这么麻烦。

抄这个答案,https://my.oschina.net/u/2436852/blog/609832

基本符合需要

if((Array.isArray(变量) && 变量.length === 0) || (Object.prototype.isPrototypeOf(变量) && Object.keys(变量).length === 0)){
alert('该方法判断了{}花括号这种情况!');
}

2 deepcopy

obj = JSON.parse(JSON.stringify(o))

3 根据object属性值判断object在array中的index

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

var array1 = [5, 12, 8, 130, 44];

function findFirstLargeNumber(element) {
return element > 13;
} console.log(array1.findIndex(findFirstLargeNumber));
// expected output: 3

4 boolean值逻辑取反用! 而不是~

js里~是位取反。反正作为逻辑判断效果不对,记住和py不同就行了。

5 字符串format

node这样写

import util from "util";
const str_out = util.format('%s/%s.html',path, name)

es6里这样写,反引号模板

const str_out = `${path}/${name}.html`;

node相当于py3.6之前的,写法,而es6相当于py 3.6之后:

str_out = f'{path}/{name}.html'

还是py 最简洁 -_-!

反正现在的流行语言和框架,都是互相抄的。感觉区别不是很大。

让我决定语言取舍的,还是擅长的领域,谁的库更优雅,导致代码更短,就用谁。

一切高级语言都是DSL语言,诚哉斯言。

6在NodeList做遍历,map()

dom操作时,有时会遇到NodeList,比如 element.childNodes  返回的就是这种。

一般对array,希望返回另一个数组时用map(), 不希望返回值时用forEach()

如果希望通过map,对每一个元素进行计算,返回1个数组:

const result = myNodeList.map((d)=>{ //do some compute}); 

会报错:

.map is not a function

官方文档说得很详细,NodeList只是长得像Array,但并不是Array,因为原型链和Array不同。

详见 为什么 NodeList 不是数组?

除了forEach方法,NodeList 没有这些类似数组的方法。

官网给出了多种遍历的方法,最简单的就是最老实做for

    const results = [];
for (let i = 0; i < myNodeList.length; ++i) {
results.push(parser_item(myNodeList[i]));
}

然而,这也太弱了好吗,10多年前学C++ primer的时候最开始就是学在Vector上遍历 然后push。这TM一点技术含量都没有!

官网其他方法也都没有兴趣,有点过于跑题了。语句要比这个更短,要一眼能看出我是在做遍历map

仔细看文档,发现NodeList有values()方法。在pandas之类的库里,这玩意通常是返回array的,有戏:

试了一下,这个返回的类型是

Object [Array Iterator]

哈哈,果然有戏,既然是个数组迭代器,那么转数组就很显然了(继续Google一番),最终解决方案:

const results = Array.from(myNodeList).map(parser_item);

稍微绕点脖子,但是还是压缩在了1行里,而且肉眼可见 Array map 这些字眼,显然我是在做相关的遍历求值操作。

对于我这种只考虑可读性,不考虑性能的人来说,可以和上面的naive for循环说byebye了!

7 遍历element.attributes

和前面类似,这玩意是个NamedNodeMap。

传统操作

const attrMap = element.attributes;
for(let i = 0; i < attrMap.length; i++){
let key = attrMap[i].nodeName;
let value = attrMap[i].nodeValue;
}

或者不遍历的情况,直接

element.getAttribute(‘属性名’);

那么参考上面的做法,但还是稍微复杂点,要用到Array的reduce

https://stackoverflow.com/questions/26264956/convert-object-array-to-hash-map-indexed-by-an-attribute-value-of-the-object

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

const results = Array.from(element.attributes)
.filter((item) => {return !excludes.includes(item.name);})
.reduce((res, item) =>{
res[item.name]=item.value;
return res;
},{});

遇到两个坑,卡了很长时间。第一个坑是 reduce 的第一个参数累积函数,每次必须要返回累积后的结果 也就是return res; 这里初始值是{},每次往里塞一个属性值。

第二个坑,是py和js完全不同的地方,下面说。

8 判断 元素在数组中

这个是py玩家基本必中的天坑了。

py里 太习惯 了

if x in list_a:

pass

if x not in dict_b:

pass

但是,在js里,in已经被占为其他用途了:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in

如果指定的属性在指定的对象或其原型链中,则in 运算符返回true
例子很多,只要看一点就够了
// 数组
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees // 返回true
3 in trees // 返回true
6 in trees // 返回false
"bay" in trees // 返回false (必须使用索引号,而不是数组元素的值) "length" in trees // 返回true (length是一个数组属性)
 
也就是说,js里的in关键字
'property' in a

大约等于py里的 hasattr()函数

hasattr(a, 'property')

这TM坑爹呢!

js里真正和py里in关键字一样作用的是
a.includes(element)

9判断代码运行在node还是browser

var isBrowser = typeof window !== 'undefined'
&& ({}).toString.call(window) === '[object Window]'; var isNode = typeof global !== "undefined"
&& ({}).toString.call(global) === '[object global]';

js几个小技巧和坑的更多相关文章

  1. js 数组去重小技巧

    js 数组去重小技巧 Intro 今天遇到一个问题,需要对数据进行去重,想看一下有没有什么比较方便的方法,果然有些收获. Question 问题描述: 我有一个这样的数据: [ { "Pro ...

  2. 开发使用Node.js的一个小技巧

    Node.js作为可以在服务器端运行的一门语言,其处理长连接.多请求的优势受到各大编程爱好者的追捧. 但是在开发调试方面却极为不方便,因为每次改动代码后,都需要终止当前进程,重启服务器.supervi ...

  3. (网页)JS中的小技巧,但十分的实用!

    转自CSDN: 1.document.write(”"); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4. ...

  4. Vue.js 的一些小技巧

    给 props 属性设置多个类型 这个技巧在开发组件的时候用的较多,为了更大的容错性考虑,同时代码也更加人性化: export default { props: { width: { type: [S ...

  5. js的常用小技巧

    //类对象转成数组 var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));   ...

  6. js两个小技巧【看到了就记录一下】

    1.不声明第三个变量实现交换 ,b=; a=[b,b=a][];//执行完这句代码之后 a的值为2 b的值为1了 2.&&和||的用法 (学会了立马感觉高大尚了吧) ; //传统if语 ...

  7. 记录js的一些小技巧

    1.取数组最大值,最小值 Math.max.apply(null,[1,2,3,32,3]); Math.min.apply(null,[1,2,3,32,3]); 2.旧版IE setTimeout ...

  8. js 的一些小技巧

    来源:https://www.w3cplus.com/javascript/javascript-tips.html 1.确保数组的长度 在处理网格结构时,如果原始数据每行的长度不相等,就需要重新创建 ...

  9. javascript小技巧-js小技巧收集(转)

    本文转载自:http://blog.csdn.net/ocean20/article/details/2498699 每一项都是js中的小技巧,但十分的实用! 1.document.write(&qu ...

随机推荐

  1. sqlalchemy 小试

    # -*- coding: utf-8 -*- from sqlalchemy import Column, String, create_engine,ForeignKey,Text,INTEGER ...

  2. diff 命令实用

    1.概述 本文将要讨论的是diff命令,diff用来比较两个文件.当然文件比较的工具很多,windows系统下面就有不错的工具可以使用,例如常用的Beyond Compare,WinMerge都是图形 ...

  3. windows 7/10 安装u盘制作

    今天,在拷贝数据时,发现那台丢在那两三年的pc密码忘了,故计划重装,因为从来都是公司信息中心管这事,至少都七八年没有自己装机了,故整理过程如下: 1.从itellyou.cn下载原版镜像: 2.准备一 ...

  4. 07:vue定义路由

    1.1 定义路由 1.说明 1. 路由是单页面应用程序(SPA)的关键,Vue提供过来路由插件,使用这个路由就要安装这个插件 2. 安装: npm install vue-router 3. 依赖于v ...

  5. libvirt的security

    1. libvirt支持SASL authentication and encryption MD5 hashes are considered unsafe and should not be us ...

  6. promql查询表达式

    Basics 即时矢量选择器 =:匹配与标签相等的内容!=:不匹配与标签相等的内容=~: 根据正则表达式匹配与标签符合的内容!~:根据正则表达式不匹配与标签符合的内容 示例: http_request ...

  7. mysql 用存储过程插入11位 随机数

    BEGIN #Routine body goes here... ; ); ); ); ); ); ); ); ); ); ); ); ); ) DEFAULT ''; ); ); WHILE row ...

  8. UML(统一建模语言)是通用的可视化标准建模语言。由构造块、公共机制、构架三部分组成。

    UML UML(统一建模语言)是通用的可视化标准建模语言.由构造块.公共机制.构架三部分组成. 1.构造块:包括基本的UML建模元素(类.接口.用例等).关系(关联关系.依赖关系.泛化关系.实现关系) ...

  9. 4698: Sdoi2008 Sandy的卡片

    前言 总之这个东西说起来很麻烦就是了, 思路 差分合并+后缀数组+二分(dddl) 类似于那个bzoj1031的复制子串和那个poj1743的差分 来看个例子 3 5 1 2 3 4 5 4 1 1 ...

  10. reshape2

    require(reshape2)x = data.frame(subject = c("John", "Mary"),                 tim ...