发表于: 2020-11-18 09:44:34

0 2111


1.在构建第二个页面时,玩家配比列表那一栏用到图标和文字环绕的效果,此时有两个被设置为inline-block的li,li内有一个浮动img和内联span(包含文字),当删除li2内的span后,发现li1下沉了15px,经过查找,发现是li2的inline-block的空白节点在作祟,如果把li2变成float:right,则li1没有下沉的问题。


2.犯了一个低级错误,js文件的命名上包含下划线,结果html无法正常读取js文件了。所以查了些js文件的命名规范:
  • 字母全部小写
  • 不要带空格
  • 用破折号(-)连接单词
  • 库文件可用逗点(.),用于体现版本或从属关系
栗子:
  • vue.min.js
  • vue-router.js
  • jquery.form.js
  • jquery-1.4.2.min.js
      3.在第二个页面输入数字,遇到了输入字母等其它符号的的问题,所以用到了
onkeydown="value=value.replace(/[^\d]/g,'')";
onkeyup="value=value.replace(/[^\d]/g,'')";


      4.用到随机数组时,发现直接用sort方法随机出来的数组,各个元素分布并不是一定均匀的,在谷歌浏览器上发现数组长度超过十个就不稳定了,如下代码可测试:

let n = 10000;
let count = (new Array(12)).fill(0)
for(let i=0;i<n;i++){
    let arr = ['a','b','c','d','e','f','g','h','i','j','k','l'];
    arr.sort(() => Math.random()-0.5);
    count[arr.indexOf('a')]++;
}
console.log(count);
所以网上找了下发现,发现了有个Fisher–Yates 洗牌算法,用ES6实现如下:

function shuffle(arr) {

    let i = arr.length;

    while (i) {

        let j = Math.floor(Math.random() * i--);

        [arr[j], arr[i]] = [arr[i], arr[j]];

    } 

}

用ES5实现如下:

function shuffle(arr) {

  var i = arr.length, t, j;

  while (i) {

    j = Math.floor(Math.random() * i--);

    t = arr[i];

    arr[i] = arr[j];

    arr[j] = t;

  } 

}

本质上还是两个数组的元素进行交换。
目前而言,Fisher–Yates shuffle 算法应该是最好的选择。

      

      5.关于拼接多个数组

用concat()方法会产生一个副本,增加了空间成本,如果用push.apply()则没这个问题。

在使用for语句时,不设置限制条件,并不会死循环,比如:
for(var i = 10;i--;){
console.log(i);
}
结果是10~0的数字,我的猜想是,当i=0的时候,for语句会把该值当作false,触发第二个表达式,防止死循环。


      6.如何在HTML中限制input 输入框只能输入纯数字:
<input type="text" maxlength="2" name="" oninput="value=value.replace(/[^\d]/g,'')">
要注意的是maxlength属性无法用在input的type为number。


      7.如何在HTML中限制input 输入框只能输入纯数字
<input type="text" maxlength="2" name="" oninput="value=value.replace(/[^\d]/g,'')">

oninput元素获取用户输入时触发

解读下replace方法和其中的正则表达式。
replace(searchvalue,newvalue) 方法的参数一是被替换的目标,参数二是替换后的值
正则中的/[^\d]/g中,“/”是匹配其后面字符;"^"是取反;\d是简写,相当于/[0-9];/g表示全局匹配,即在目标字符串中按顺序找到满足匹配模式的所有子串

整个意思当用户输入时,匹配除0到9数字外的字符,一旦符合条件匹配到后,直接替换成空字符。

要注意的是maxlength属性无法用在input的type为number。


      8.类数组与数组的区别
区别:
    1:类数组不具备数组的方法(splice,split,push..)
    2:类数组是一个普通对象,数组类型是Array
如何实现类数组转换数组:
    1:Array.prototype.slice.call(arrayLike, start)
    2:[...arrayLike]
    3:Array.from(arrayLike)


      9.往节点内插入文本时的问题

如果用innerHTML,则目标元素内的所有内容都会被重写一次,而且会带html格式的
如果用createTextNode,则只会修改节点内的文本值,不会带有html格式,而且兼容性好


      10.window.location.href的用法
javascript中的location.href有很多种用法,主要如下。
self.location.href="/url" 当前页面打开URL页面
location.href="/url" 当前页面打开URL页面
windows.location.href="/url" 当前页面打开URL页面,前面三个用法相同。
this.location.href="/url" 当前页面打开URL页面
parent.location.href="/url" 在父页面打开新页面
top.location.href="/url" 在顶层页面打开新页面
如果页面中自定义了frame,那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址
    此外,window.location.href=window.location.href;和window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。当有提交数据时,window.location.Reload()会提示是否提交,window.location.href=window.location.href;则是向指定的url提交数据


返回列表 返回列表
评论

    分享到