JavaScript笔记

本文具体参考《JavaScript权威指南》《JavaScript高级程序设计》
MDN
以及B站尚硅、谷动力节点以及数十篇CSDN博客

变量定义

• 定义的变量不进行初始化操作，例如let a，将自动把变量初始化为undefined

定义变量时可以省去var或者let，例如a = 1
注意：

• 这样所定义出来的变量是全局变量
• 定义后一定要先进行初始化，否则该变量定义无效，会报错

---

• null术语NULL类型，但是typeof的运算结果结果是“object”

---

事件

**事件 **是某事发生的信号，当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
事件和事件句柄之间差了一个“on” on<event>

lode事件是在页面中所有的元素加载完毕后才发生的

事件的注册

• onlick="function()"

var btn = document.querySelector('button');
btn.onclick = function (){}//匿名函数
btn.onclick = function;   //没有括号！

监听器是指专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象，当被监视的对象发生变化时，立即采取相应的行动。即事件句柄，即事件处理程序。
注册（绑定）事件、删除（解绑）事件的三种方式
使用onload
解决代码执行顺序所带来的问题

类

void运算符（函数）

MDN
博客园
当点击超级链接时，什么都不发生，herf中为空时，缺省为当前地址，会重新刷新页面，而解决办法是令herf属性的值为javascript:void(0)
PS:其实javascript: javascript:undefined javascript:null 都可以实现

循环

for…in以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

语法

for (variable in object)
  statement

variable
在每次迭代时，variable会被赋值为不同的属性名。
object
非Symbol类型的可枚举属性被迭代的对象。
tips:

• for … in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for … of
• 它最常用的地方应该是用于调试，可以更方便的去检查对象属性（通过输出到控制台或其他方式）。尽管对于处理存储数据，数组更实用些，但是你在处理有key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，还是推荐用for … in。

Employee = function(empno,ename){
                this.empno = empno;
                this.ename = ename;
            }            
            var e = new Employee(7369, "SMITH");
            console.log(e.empno + "," + e.ename)
            console.log(e["empno"] + "," + e["ename"])            
            // for..in语句遍历对象的属性
            for(var fdsafdsa in e){ // e是JS对象的话,fdsafdsa就是对象的属性名.并且属性名是**字符串**.
                //console.log(fdsafdsa)
                //console.log(typeof fdsafdsa) //string
                console.log(e[fdsafdsa])
                //console.log(e.fdsafdsa)// 这种方式就不行了.因为其代表的是"属性名"所以说不能用点.的方式来引用
            }

lable标记语句

与C语言不同，lable不是用于goto语句，而是break语句结合，达到类似goto语句功能。break语句可以不在循环体内，但continue语句要在循环内，其实lable与continue语句结合才是真正的goto语句吧
显而易见的功能应该是，从多层循环中直接跳出整个循环,不需要再break跳出多层循环 了

    outer:
    for (-----) {
      for (-----) {
          break outer;
        }
      }

MDN

内置对象Array&Date

JavaScript的数组可以自己扩容，不存在数据越界

//在JS中提供了一个函数toLocaleString(),其实这个函数是Object中的.
            // 转换成具有本地语言环境的日期格式
            var strTime = time.toLocaleString();
            
            console.log(strTime) //2020/3/26 下午5:59:55

// 进行格式转换
            // 可以将年月日的信息都拿出来.然后自己拼接格式.
            var year = time.getFullYear();
            var month = time.getMonth(); // 0-11 表示 1-12
            //var day = time.getDay(); // 获取的是星期几
            var day = time.getDate(); // 获取一个月份中的第几天
            console.log(year + "年" + (month + 1) + "月" + day + "日")

函数

不严格，函数传参不需要指定类型，也不指定个数，也无需声明，大括号必须有

方法

JavaScript _方法_是包含_函数定义_的属性

匿名函数

匿名函数的执行环境具有全局性，因此其 this 对象通常指向 window——《JavaScript高级程序设计》

this关键字

解析器在调用函数每次都会向函数内部传递进一个隐含的参数 ,这个隐含的参数就是this, this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象
1.以函数的形式调用时，this永远都是window
2.以方法的形式调用时，this就是调用方法的那个对象

<script type="text/javascript">
            function fun()
            {
                console.log(this);
            }
            let aa = {
                name:"wzx",
                asd:fun//注意这里不要加括号否则相当于又调用了一次
            }
            console.log(aa.asd === fun)//true
            fun()//this是windows
            aa.asd()//this是aa那个对象
        </script>

PS:this也会出现一些问题

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;
  setInterval(function growUp() {
    // growUp()函数定义 `this`作为全局对象windows
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}
var p = new Person();

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。

function Person() {
  var that = this;
  that.age = 0;
  setInterval(function growUp() {
    // 回调引用的是`that`变量, 其值是预期的对象.
    that.age++;
  }, 1000);
}

或使用箭头函数，详见与普通函数区别

箭头函数

CSDN箭头函数
一种ES6规定的简洁定义函数的方法，相当于匿名函数

箭头函数内部的this是词法作用域，由上下文确定，this指向在定义的时候继承自外层第一个普通函数的this。函数体内的this对象，就是定义时所在的对象，与使用时所在的对象无关。

> 返回的表达式是对象字面量时，必须把这个对象字面量放在一对圆括号中，以免解释器分不清花括号到底是函数体的花括号，还是对象字面量的花括号。——《JavaScript权威指南》 eg.`params => ({foo: bar});`

与普通函数区别

• 它们继承了this关键字的值，而不是向普通函数那样定义自己调用的上下文
  箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}

var p = new Person();

箭头函数的问题

箭头函数表达式对非方法函数是最合适的，对于方法函数this不会正常绑定

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();
// undefined, Window{...}
obj.c();
// 10, Object {...}

• 无prototype属性，不能作为构造函数

复选框的全选与取消全选

<script type="text/javascript">
        let a = document.getElementsByName("checkBox")
        function fun(){
            for (let i = 1;i < a.length;i++) {
                a[i].checked = a[0].checked;    
            }
        }
        for (let i = 1;i < a.length;i++) {
            a[i].onclick = function (){
                for (var i = 1;i < a.length;i++) {
                    if (!a[i].checked) {
                        a[0].checked = false;
                        break
                    }
                }
                a[0].checked = i == a.length
            }
        }
        </script>

网页时钟（定时器）与setInterval函数

setInterval函数MDN参考
此返回值intervalID是一个非零数值，用来标识通过setInterval()创建的计时器，这个值可以用来作为clearInterval()的参数来清除对应的计时器 。

<script type="text/javascript">
            window.onload = function(){
                document.getElementById("displayTimeBtn").onclick = function(){
                    // 每隔1S调用一次displayTime()函数(设置周期性调用。)
                    // 返回值是一个可以取消周期性调用的value.
                    v = window.setInterval("displayTime()", 1000)
                }
                document.getElementById("stopTimeBtn").onclick = function(){
                    // 停止周期性的调用.
                    window.clearInterval(v)
                }
            }
            
            
            function displayTime(){
                var nowTime = new Date();
                document.getElementById("timediv").innerHTML = nowTime.toLocaleString();
            }
            
        </script>

JSON:JavaScript对象表示法

JSON是一种轻量级的数据传送格式，与用对象字面量创建对象的方法相似

• 其中 值 可以是：数字（整数或浮点数）、字符串（在双引号中）、布尔值（true或false）、数组（在方括号中）、对象（在花括号中）、null
  JSON 中字符串必须使用双引号

• 转义
  JSON是一个提供了stringify和parse方法的内置对象

• stringify将js对象转化为符合json标准的字符串
  json字符串 = JSON.stringify(js对象);

• parse将符合json标准的字符串转化为js对象
  js对象 = JSON.parse(json字符串);

• eval()
  eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
  JS对象与JSON区别： 一个是文本格式, 一个是对象
  JS对象与JSON中对象区别：
  1. JSON 的字符串必须用双引号。
  2. JSON 无法表示 undefined，只能表示 “undefined”
  3. JSON 无法表示函数
  4. JSON 的对象语法不能有引用

PS:1.XML相较于JSON更安全,同时也更难以解析
     2.若不能保证数据的安全性，不要使用eval方法进行转义

正则表达式

正则表达式手册

BOM

BOM浏览器对象模型

• JS Window
• JS Screen
• JS Location
• JS History
• JS Navigator

JS Navigator
navigator.userAgent可以判断大多数浏览器类型
appName基本废了
JS History
back
forword
go
Location地址
location="url"来修改当前页面地址，有超链接效果
location.reload()相当于刷新
location.reload(true)强制刷新（清空缓存，只有Firefox不会清空）

DOM

• getElementsByClassName返回的是一个数组，要加上下标！！！
• 获取属性一般用的是ele.style.border这种形式的方法, 但是这种方法是有局限性的。该方法只能获取到行内样式,获取不了外部的样式。

let wid0 = document.querySelector('.block1');
        let wid1 = document.querySelector('body');
        console.log(window.getComputedStyle(wid1,null).width)
        wid0.style.width = window.getComputedStyle(wid1,null).width;
            // document.getElementsByClassName('block1')[0].color = 'blue'

解构赋值

es6允许按照一定的模式，从数组或对象中提取值，给变量进行赋值，称为解构赋值
看到等于号左边出现了对象字面量或数组字面量，那就是解构赋值表达式
[value2, value1] = [value1, value2];这样就可以不添加第三个变量的基础上进行数据的交换了

解构对象

好像并没有什么用处，就是把对象内的属性同步到同名的变量上？

• 要有声明或者用 ();进行包裹！//正确性存疑

无声明赋值

一个变量可以独立于其声明进行解构赋值。

var a, b;
({a, b} = {a: 1, b: 2});

PS:注意下面的代码会把变量foo赋值为42，而非把p赋值为42

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true

使用foo = o.p;不好吗？

解构字符串

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

实际应用

![]
(index_files/_u622A_u56FE2021_u5E7408_u67082.png)