美文网首页
js简单知识点

js简单知识点

作者: hanyuntao | 来源:发表于2017-04-14 10:29 被阅读0次

1. 条件判断的陷阱

在if判断中,使用===作比较,避免掉入==造成的陷阱。

在条件判断时,这样的一些值表示falsenullundefined,字符串' ',数字0NaN
而在==时,则会有一些让人难以理解的陷阱,如:

(function () { 
  var undefined; 
  undefined == null; // true 
  1 == true; //true 
  2 == true; // false 
  0 == false; // true 
  0 == ''; // true 
  NaN == NaN;// false 
  [] == false; // true 
  [] == ![]; // true 
})();

对于不同类型的 == 判断,有这样一些规则,顺序自上而下:

  1. undefinednull相等
  2. 一个是number一个是string时,会尝试将string转换为number
  3. 尝试将boolean转换为number01
  4. 尝试将Object转换成numberstring,取决于另外一个对比量的类型
    所以,对于0、空字符串的判断,建议使用 ======会先判断两边的值类型,类型不匹配时为false

2. 简单类型转换

  • number to string的转换,建议使用 1 + ' 'String(1),不使用new String(1)1.toString()的方式。
  • string to number的转换,建议使用parseInt,必须显式指定第二个参数的进制。下面的例子展示了不指定进制的风险:
parseInt('08'); // 0 
parseInt('08', 10); //8
  • float to integer的转换,建议使用Math.floor/Math.round/Math.ceil方法,不使用parseInt

3. 字符串拼接

字符串拼接,应使用数组保存字符串片段,使用时调用join方法。避免使用++=的方式拼接较长的字符串,每个字符串都会使用一个小的内存片段,过多的内存片段会影响性能。如:

不好的拼接方式,+=

var str = ''; 
for (var i = 0, len = list.length; i < len; i++) { 
  str+= '<div>' + list[i] + '</div>'; 
} 
dom.innerHTML = str;

正确拼接方式,Array的push+join

var str = []; 
for (var i = 0, len = list.length; i < len; i++) { 
  str.push('<div>'+ list[i] + '</div>'); 
} 
dom.innerHTML = str.join('');

4. 获取元素

获取单个元素

通常,我们使用document.getElementById来获取dom元素,避免使用document.alldocument.getElementById是标准方法,兼容所有浏览器

ie浏览器会混淆元素的idname属性,document.getElementById可能获得不期望的元素。
在对元素的idname属性的命名需要非常小心,应使用不同的命名法。
下面是一个nameid冲突的例子:

<input type="text" name="test"> <div id="test"></div>
<button onclick="alert(document.getElementById('test').tagName)"></button>
<!-- ie6下为INPUT -->

5.设置兼容事件

//设置兼容事件
        function addEvent(ele, event, func) {
            if (ele.addEventListener) {
                ele.addEventListener(event, func, false);
            } else if (ele.attachEvent) {
                ele.attachEvent('on' + event, func);
            } else {
                ele['on' + event] = func;
            }
        }

相关文章

  • 2018-08-22

    今天简单了解了一下关于js对象的知识点。包括JS 数字 JS 字符串 JS 日期 JS 数组 JS 逻辑 JS 算...

  • js简单知识点

    1. 条件判断的陷阱 在if判断中,使用===作比较,避免掉入==造成的陷阱。 在条件判断时,这样的一些值表示fa...

  • JS基本知识点回顾(Ⅱ)

    本文用于复习JS相关知识点,相当于知识简单的梳理. So, It's not be Detailed intro...

  • JS基本知识点回顾(Ⅲ)

    本文用于复习JS相关知识点,相当于知识简单的梳理. So, It's not be Detailed intro...

  • JS基本知识点回顾(Ⅰ)

    本文用于复习JS相关知识点,相当于知识简单的梳理. So, It's not be Detailed intro...

  • JS基本知识点回顾(Ⅳ)

    本文用于复习JS相关知识点,相当于知识简单的梳理. So, It's not be Detailed intro...

  • 来自一位react新手的react入门须知

    前言:自己刚刚总结的关于react的知识点,比较简单,大家可以粗略看看。 一:关于react的一些知识点 1,Js...

  • js小知识点

    js小知识点 整理 js小知识点 (一):获取元素 1:document.getElementById('id名'...

  • 原型和原型链

    知识点 JS 是基于原型的语言,原型理解起来非常简单。任何长存不会被遗弃和提到的东西,都是简单的东西。 构造函数 ...

  • XDL_NO.5 Node.js 中的I/O交互

    回顾下上节课的知识点 搭建一个简单的 Node.js 服务器 利用Node.js 搭建一个静态网站 今天的主题是:...

网友评论

      本文标题:js简单知识点

      本文链接:https://www.haomeiwen.com/subject/eciaottx.html