博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js几个小技巧和坑
阅读量:5275 次
发布时间:2019-06-14

本文共 3312 字,大约阅读时间需要 11 分钟。

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

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

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

1判断object是[]还是{}

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

抄这个答案,

基本符合需要

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

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不同。

详见 

 除了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

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已经被占为其他用途了:

如果指定的
属性在指定的对象或其原型链中,则
in 运算符返回
true
例子很多,只要看一点就够了
// 数组var trees = new Array("redwood", "bay", "cedar", "oak", "maple");0 in trees // 返回true3 in trees // 返回true6 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]';

 

 

转载于:https://www.cnblogs.com/xuanmanstein/p/9871062.html

你可能感兴趣的文章
C++11 中的线程、锁和条件变量
查看>>
2019-02-28处理公司同事无法上网事件记录
查看>>
头文件有h和没有h的区别
查看>>
数据库的查询与视图
查看>>
2019-04(2)Python学习
查看>>
MVC开发插件汇总
查看>>
weevely-------linux中的菜刀(转载)
查看>>
Coprime Conundrum 容斥原理
查看>>
对REST的理解
查看>>
Linux批量重命名文件
查看>>
Optimize Slow VBA Code
查看>>
一个简单的epoll测试例子
查看>>
牛客网Java刷题知识点之字节缓冲区练习之从A处复制文本文件到B处(BufferedReader、BufferedWriter)、复制文本文件的原理图解...
查看>>
修改数据表——添加约束(二十二)
查看>>
标准配置的UBUNTU 11.10 RUBY VMWARE 镜像,手工MOD(ZSH_RVM_RAILS_VIM)
查看>>
SQL高效率语句(一)
查看>>
【大数据技术】操作系统和Hadoop版本选择
查看>>
生成树计数
查看>>
Elasticsearch入门之从零开始安装ik分词器
查看>>
去除表单元素的默认样式
查看>>