我们一起来做一道 JS 题目：在控制台打印 React 仓库的 Fork 列表

[bw2]

要求

获取当前页面已 Fork 的成员列表，存储在数组。代码短，耗时少者更佳。返回数组长度应该是 1000。

地址

https://github.com/facebook/react/network/members

示例代码

// 时间和函数长度统计

function timeAndLengthCount(callback){
  const timeStart = new Date().getTime()
  callback()
  const timeEnd = new Date().getTime()
  console.log('Time: ' + (timeEnd-timeStart) + 'ms')
  console.log('Len: '+ callback.toString().length)
}

// 执行输出 Fork 成员列表的函数
// Time: 7ms
// Len: 223

timeAndLengthCount(()=>{
  const forkedMenber = document.querySelectorAll('.repo > a:nth-child(odd)');
  const forkedMenberList = [];
  [].forEach.call(forkedMenber, z => forkedMenberList.push(z.innerHTML));
  console.log(forkedMenberList);
})

接下来就是开始你的表演了

[nino]

[...document.querySelectorAll('#network .repo > a:first-of-type')].map(el => el.textContent)

[xiaojie668329]

把 querySelectorAll 换成 getElementsBy...会变快。

[zjsxwc]

剩下的就是 css 选择器的花式写法了

[bw2]

@nino 厉害了，把我的代码压缩成了一行，就扶你

[bw2]

@xiaojie668329 确实，然后使用正则？

[bw2]

@zjsxwc 我觉得还有别的玩法

[bw2]

最新记录是 @nino
Time: 2ms
Len: 96

[Wangxf]

[...document.querySelectorAll('.repo')].slice(1).map((item)=>item.children[2].innerHTML)

[crs0910]

document.querySelector('#network').textContent.replace(/\s/g, '').split('/react')

[bw2]

@Wangxf

Time: 4ms
Len: 92

[bw2]

@crs0910
Time: 2ms
Len: 85

但是，返回数组是 1001，数组的第一个'facebook'，不在需求范围内

[hueo]

要考虑性能的话正则是最快的。

不过昨天的代码是这样的：

Array.from(document.querySelectorAll('#network .repo > img + a'), e => e.href)

[crs0910]

加个 shift 不就得了，我测是 1ms

[crs0910]

@xiaojie668329 貌似 querySelector\querySelectorAll 都比 getElementById\getElementsByTag 要快，我是最新的 Chrome.
https://jsperf.com/getelementsbytagname-a-0-vs-queryselector-a/4

[bw2]

@crs0910 加 shift 之后返回的是'facebook'，你试试，需求是打印一个数组，长度 1000

[bw2]

@hueo 就是昨天看到你的，才突发奇想的

[Wangxf]

[...document.getElementById('network').getElementsByTagName('a')].filter((item,index)=>index%2===0).map((item)=>item.innerHTML).slice(1);

[crs0910]

@bw2
document.getElementById('network').textContent.replace(/\s/g, '').split('/react').slice(1)) document.getElementById('network').textContent.replace(/\s/g, '').split('/react').splice(1))

[Wangxf]

最新版 1.5s
[...document.getElementById('network').querySelectorAll('a:nth-child(odd)')].slice(1).map((item)=>item.innerHTML)

[crs0910]

去掉一个 replace 的版本

document.querySelector('#network').textContent.split(/\s*\/\s*react\s*/g).splice(1)