【笔记】JS学习笔记

1. break只允许出现在循环或者switch语句中

2. 字符串的在内存中的不可变性

var str = "123";
str = str + "abc";
console.log(str);

• 字符串操作中
• 第一步，在栈中开辟一块空间用来存储字符串 “123”，变量str指向它

• 第二步，新开辟一块空间，找到str对应的值，将拼接后的结果”123abc”放到新空间中去，再改变变量str的指向，使其指向新空间

  var num = 123;
  num = num + 1;
  console.log(num);

• 数值操作中
• 第一步，在栈中开辟一块空间用来存储数值 123，变量num指向它
• 第二步，找到num的值，加1，得到124，直接将值修改为124，不开辟新空间也不需要改变num的指向
• 所以大量拼接字符串时会多了一些操作，并且原有的字符占据的空间不会被立即释放，因此会产生效率问题
• ES6新增 `` 可以直接拼接字符串和变量

3. 只有document有getElementById方法

4. document.getElementsByClassName 有兼容性问题

• 调用时需要判断当前浏览器是否支持document.getElementsByClassName
• 如果直接在使用方法前判断，这样每次调用时都要进行一次判断，因此可以声明一个对象support，在其中添加方法预先判断浏览器是否支持某些方法。

• 给support添加同名方法getElementsByClassName，并且要验证该方法是否为浏览器原生提供的，具有应有的功能，而不是自定义或被修改过的。

  var support = {
    getElementsByClassName: function () {
        var b = false;
        if (typeof document.getElementsByClassName === "function") {
            var dv = document.createElement("div");
            var cls = "itcast" + Math.random()
            dv.className = cls;
            // 将创建出来的dv放到页面中去
            document.body.appendChild(dv);
            b = document.getElementsByClassName(cls) === dv;
            document.body.removeChild(dv);
            return b;
        }
        return b;
    }
  }
  
  function getElmsByClsName(className, results) {
    results = results || [];
    if (support.getElementsByClassName()) {
        // 支持
        results.push.apply(results, document.getElementsByClassName(className));
    } else {
        // 不支持
        var nodes = document.getElementsByTagName("*");
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if (" " + node.className + " ".indexOf(" " + className + " ") > -1) {
                results.push(node);
            }
        }
    }
    return results;
  }
  

  5. Dom对象共同点，都有nodetype属性，并且值都不为0

• ELEMENT\_NODE:1 元素节点

• TEXT\_NODE:3 文本节点

  • 获取文本节点的值 txtNode.nodeValue
• DOCUMENT\_NODE:9 document

• DOCUMENT\_FRAGMENT\_NODE:11 documentFragment

  6. 在jQuery中获取元素的方式，是从后往前获取的

• 原因：从后往前获取的效率要高

• CSS选择器也是从后往前匹配的

  7. 动态创建元素的推荐方式

• 使用字符串拼接然后一次性添加到页面中去 拼接字符串：+= 数组： push，最后join一次
• 使用 createElement 创建元素，然后一次性的添加到页面中去

• jQuery中如何创建元素

  // 1
  var $dv=$("<div></div>");
  $("body").append($dv);
  // 2
  $("body").append("<div></div>");
  // 3
  $("<div></div>").appendTo("body");

  8. documentFragment

• nodetype: 11
• 优势：只作为容器，不占用结构
• 用法：var docFrag = document.createDocumentFragment();

• 封装创建元素的函数

    // 方法1
    var createElement = function (htmlString) {
      var dv = document.createElement("div");
      dv.innerHTML = htmlString;
      var docFrag = document.createDocumentFragment();
      var len = dv.childNodes.length;
      for (var i = 0; i < len; i++) {
        docFrag.appendChild(dv.childNodes[0]);
      }
      return docFrag;
    }
    // 方法2
    var createElement = function (htmlString) {
      var dv = document.createElement("div");
      dv.innerHTML = htmlString;
      var docFrag = document.createDocumentFragment();
      while (dv.firstChild !== null) {
        docFrag.appendChild(dv.firstChild);
      }
      return docFrag;
    }
    var list = createElement("<div>123</div><div>abc</div>");
    document.body.appendChild(list);

  • 注意点：使用appendChild时会将元素从原来的位置扒下来放到新的位置上，所以dv.childNodes的长度会不断减小

• ele1.appendChild(ele2)

  • 如果ele2是页面上原有的标签，会把他从原来的位置揪下来，如果不是页面上原有的标签，直接追加
  • 注意点：在调用appendChild方法的时候，会将页面中存在的元素或者作为某个元素的子元素（DOM结构）存在的元素移除掉，之后再追加。如果这些元素，被存储到了某个数组中，并且 调用 appendChild 的时候，是直接从数组中获取的元素，那么，此时会将页面中的元素做移除并添加的操作。但是不会影响到数组本身（数组中的元素的顺序是不会改变的）

• ele.cloneNode(boolean)

  // 克隆demo 克隆出来的元素被变量clone接收
  var clone = demo.cloneNode(true);
  // 参数是一个布尔值 true表示深层复制 false是浅层复制
  // 深层复制会把内部 所有的内容都复制
  // 克隆出来的节点不会对原来的节点产生任何影响

  9. 数组和对象的联系和区别

• 数组：有序键值对的集合

  • 数组的索引号，就相当于对象的键（属性）
• 对象：无序键值对的集合

• 如何区分数组和伪数组？

  1. arr instanceof Array 若是返回true

     • 使用此方法来判断类型是否是数组，在一个页面中是没有问题的。但是，如果是页面中嵌套了 iframe，某些浏览器中返回的就是false
  2. Array.isArray(arr) 若是返回true 有兼容性问题
  3. Object.prototype.toString.call(arr)

  10. length和push方法的关系

• push 方法会自动修改对象的length属性
• 不管这个对象一开始有没有这个属性，如果一开始没有length就会添加
• 如果有，就会修改 length 属性的值

• 如果这个属性是只读的，那么，调用 push 方法的时候，就会报错

  11. 函数声明与函数表达式

  // 函数声明 有function关键字 就是函数声明 就会把这个函数的引用赋值给关键字后面的标识符
  // 将来通过这个标识符就可以对函数进行调用
  function fn1() {
    console.log("fn1");
  }
  // 函数表达式 运算符和function关键字 构成了表达式 此时函数就变为了一个整体
  // 会把这个函数的引用返回 也就是说 这个整体相当于一个引用
  var fn2 = function () {
    console.log("fn2");
  };
  
  // 也就是说 只要有运算符 函数就变为了一个可以调用的整体
  (function () {
  })();
  +function () {
    console.log("fn2");
  }();
  !function () {
    console.log("fn2");
  }();
  
  // 函数表达式 如果在function关键字后面写了标识符 也不会报错
  // 但是没有意义 function关键字后面即使写了标识符 也获取不到引用
  var fn3 = function fn4() {
    console.log("a");
  };
  fn3(); // a
  fn4(); // Uncaught ReferenceError: fn4 is not defined

  12. jQuery 的入口函数 与 window.onload 有什么区别？

• 绑定事件的数量不同

  • window.onload只能出现一次
  • window.addEventListener("load", function() {}) 通过此种方法可以绑定多个
  • jQuery的入口函数可以出现多次

• 执行的时机不同（主要区别）

  • jQuery的入口函数，是等到文档树（DOM树）加载完成就会执行
  • window.onload 这个事件，是等到所有的外部资源（页面、图片、视频、引入的js、css等）加载之后，再执行

  13. 获取元素样式

• style只能用来获取行内样式

• W3C标准：

  // 返回值是一个对象，这个方法可以获取到元素的所有样式
  window.getComputedStyle( 要获取的元素 [,伪元素] )
  // IE 返回值是一个对象
  dom.currentStyle()

  14. = 等号运算符返回的是等号右边的值

  var a = b = 0;
  console.log(a); // 0
  console.log(b); // 0

  15. 逗号运算符返回的是最后一个的值

  var a = (1, 3, 5, 7);
  console.log(a); // 7
  for (var i = 0; i < 10, i < 20; i++) {
    console.log(1); // 20个1
  }

  16. p元素内部不允许出现任何块级元素

17. 函数的length属性 是形参的个数

18. tabIndex 属性可设置或返回某个区域的 tab 键控制次序

areaObject.tabIndex = tabIndex