JavaScript学习笔记

2023年5月10日 129次阅读 来源: RaoMeng
  • 所有的web开发都是【请求】+【响应】
  • 推荐JavaScript中使用单引号引用字符串，HTML中使用双引号，防止冲突
  • JavaScript代码、网页代码执行顺序是从上到下依次执行

  • <noscript></noscript>标签，在浏览器不支持JavaScript内容时会展示noscript标签内的内容

    <noscript>
    <p>本页面需要浏览器支持（启用）JavaScript</p>
</noscript>
  • 通过src属性加载外部script文件时，不应该在其<script></script>标签内再包含其他额外的JavaScript代码。因为即使包含了其他的代码，也只会下载并执行src属性内的外部script脚本文件，嵌入的额外代码会被忽略。
  • 现代web应用程序一般都把全部的JavaScript引用放在<body>元素中页面内容的后面，使页面内容呈现在浏览器中后再解析和执行JavaScript代码，这样会使得浏览器窗口显示空白页面的时间缩短，让用户感觉页面打开更快了。
  • 如果一个<script>代码块中有语法错误，那整个该script块中的代码都不执行了，但是不会影响其他的script代码块执行
  • JavaScript语言有数据类型区别，但是在JavaScript中声明变量不需要写数据类型，统一使用var来声明变量（“强类型语言”在编译的时候就要确定变量的数据类型并分配相应长度的内存空间，而JavaScript是“弱类型语言”，没有编译过程，是在运行的过程中确定数据类型的，故支持“动态类型”）
  • JavaScript变量命名规则：以字母，下划线或者$开头，中间可以包含字母，数字，下划线以及$。命名变量时，用下划线分隔各个单词；命名函数时，用驼峰命名法
  • JavaScript允许程序员直接对变量赋值而无需事先声明，这在许多程序设计语言中都是不允许的。在JavaScript脚本中，如果程序员在对某个变量赋值之前未声明，赋值操作将自动声明该变量。
  • JavaScript共有6中数据类型：Boolean,Number,String,Undefined,Null,Object。前五种为数值类型（基本类型），Object为引用类型
  • ==与===的区别：==忽略数据类型，先做数据类型转换再判断;===严格判断，数据类型也作为判断标准（不相等的比较操作符，!=,!==）,JavaScript的switch内部采用的是===严格判断

  • 当使用了一个没有声明的变量时，浏览器会报错。故在使用变量之前，可以先通过type of校验变量是否可用（变量的值为null或undefined时不可用）

    if (typeof (m) != 'undefined' && m != null ){
    alert('变量可用')
}else {
    alert('变量不可用')
}
  • 什么情况下要显式的将一个变量赋值为null？
    在一个变量使用完毕的时候，可以将变量显式的赋值为null，这个时候这个变量所指向的对象就可以被垃圾回收了
  • null转换成数字类型为0，undefined转换成数字类型为NaN
  • 在页面中声明的变量，在整个页面中的任何一个地方都可以访问；在方法内部中定义的变量，其作用域只是该方法内部
  • 在声明变量的时候如果不写var关键字，那么该变量会是一个整个页面都可以访问的“全部变量”。所以建议声明变量的时候一定要写var关键字，避免使用“全局变量”
  • eval方法会把字符串当做js代码来解析执行
  • JavaScript中没有方法重载的概念，所以遇到相同方法名的方法时，最后一次定义的方法会覆盖之前定义的同名方法。
  • JavaScript中的方法可以不定义形参，因为无论是否定义形参，最后传递的参数都是存入arguments对象中。
  • JavaScript中具有函数预解析功能，在执行代码之前会对所有的函数进行预解析，将所有函数都先提取出来，并完成同名函数的覆盖
  • JavaScript中同时具有变量的预解析功能，故在函数内部定义的变量（无论这个变量定义的位置在哪），在整个函数中都可以使用。
    如果遇到“全局变量”和“局部变量”冲突时，优先使用“局部变量”
    注意：变量的预解析只解析声明，不解析赋值
  • 匿名函数没有预解析功能，是从上到下依次执行的
  • 当一个函数，被直接调用时，那么它就是一个普通的函数；当通过关键字new来调用一个函数时，这个函数就叫做构造函数
  • JavaScript通过prototype原型对象实现继承、
  • 一般情况下，prototype原型对象中一般只存储方法，不存储属性。
  • 函数的prototype原型对象中的值是只读的，不能赋值，如果尝试为原型对象中的值赋值那么会为该对象添加一个同名的属性，并赋值为新的值。
  • 原型对象对应的栈内值是只读的，栈内存储的应用类型对象是存储的地址，这个地址也是只读的，所以地址不能修改，但是可以修改该地址所对应的存储内容。
  • 页面加载完毕，页面上所有元素全部都加载完毕后会调用window.onload方法
    在body标签内写onload方法和window.onload是一样的
  • 什么样的代码需要放到window.onload方法里？
    如果代码访问到了页面中的某个元素，那么就需要放在window.onload里。
    因为网页解析是从上至下依次执行的，而且JavaScript代码是立即执行的，
    所以为了防止JavaScript代码执行时，所用到的元素还未在页面中加载出来，就需要将该js代码放到window.onload方法里。

  • 想知道一个对象的所有属性，用for-in循环输出

    for (var key in resultObject) {
    console.log("键", key);
    console.log("值", resultObject[key]);
}

  • 获取事件的兼容方法：

    function(e){
    var event = window.event || e;
}

  • window.event.srcElement.id 最初触发事件的元素id（只兼容IE）
    event.target.id 最初触发事件的元素id(火狐浏览器)
    兼容写法：

    var target = event.srcElement || event.target;

  • 事件冒泡：
    点击元素时，不仅会触发其自身的点击事件，还会触发其所有父布局的点击事件。
    阻止事件冒泡：

    1、window.event.cancelBubble = true;
2、event.stopPropagation(火狐浏览器)
  • 创建元素：var obj = document.createElement(‘a’);
    添加子元素: xxx.appendChild(obj);
    删除子元素：xxx.removeChild(obj);
  • 数组拼接方法：
    1、resultList.puch.apply(resultList,targetList);
    2、var resultList = list1.concat(list2,list3);
    原文作者：RaoMeng
    原文地址: https://segmentfault.com/a/1190000015811053
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞