每日思考（2020/08/20）

题目概览

• ol和ul标签的区别
• CSS的overflow属性定义溢出元素内容区的内容会如何处理
• 写个方法随机打乱一个数组

题目解答

ol和ul标签的区别

• ul有序列表、ol无序列表

  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul
      
  <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
  

• 两个符号都可以修改、也可以改成图片，但是type支持的类型不一样

• 还有个dl自定义列表

  <dl>
     <dt>计算机</dt>
     <dd>用来计算的仪器 ... ...</dd>
     <dt>显示器</dt>
     <dd>以视觉方式显示信息的装置 ... ...</dd>
  </dl>
  

CSS的overflow属性定义溢出元素内容区的内容会如何处理

• visible（默认值）：溢出的内容会照常显示在元素内容区之外；
• hidden：溢出的内容会被裁剪；
• scroll：溢出的内容会出现在滚动区，通过滚动条滚动可以看到；
• auto：当内容溢出时表现同scroll；
• 参考文档：overflow - CSS（层叠样式表） | MDN

写个方法随机打乱一个数组

//随机交换
function shuffle(arr) {
    arr.forEach((_, idx) => {
        const targetIdx = Math.floor(Math.random() * arr.length);
        [arr[idx], arr[targetIdx]] = [arr[targetIdx], arr[idx]]
    })
    return arr
}

shuffle([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// => [6, 4, 1, 8, 5, 2, 10, 9, 3, 7] or else

//打乱下标（慢了 300-1000 倍左右）
function shuffleSubscript(n) {
    const arr = new Array(n)
    for (let i = 0; i < n; i++) {
        let val
        do val = Math.floor(Math.random() * n)
        while (arr.includes(val))
        arr[i] = val
    }
    return arr
}

function shuffle(arr) {
    return shuffleSubscript(arr.length).map(s => arr[s])
}

shuffle([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// => [7, 4, 5, 8, 6, 3, 1, 2, 10, 9] or else

function shuffle(arr) {
    let new_arr = arr.map(i => ({v: i, r: Math.random()}));
    new_arr.sort((a, b) => a.r - b.r);
    arr.splice(0, arr.length, ...new_arr.map(i => i.v));
}

let a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
let n = 10000;
let count = (new Array(a.length)).fill(0);

for (let i = 0; i < n; i ++) {
    shuffle(a);
    count[a.indexOf('a')]++;
}

console.log(count);

function shuffle(arr) {
    let i = arr.length;
    while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]];
    }
}