JavaScript 详细笔记（狂神说学习笔记）

傷城~ 2023-10-04 06:51 56阅读 0赞

#### 目录 ####

*   *  1、什么是JavaScript
     *   *  1.1、概述
         *  1.2、历史
     *  2、快速入门
     *   *  2.1、引人JavaScript
         *  2.2、基本语法入门
         *  2.3、数据类型
         *  2.4、严格检查模式
     *  3、数据类型
     *   *  3.1、字符串
         *  3.2、数组
         *  3.3、对象
         *  3.4、流程控制
         *  3.5、Map和Set
         *  3.6、iterator
     *  4、函数及面向对象
     *   *  4.1、函数定义
         *  4.2、变量的作用域
         *  4.2、方法
         *  4.3、闭包（难点）
         *  4.4、箭头函数（新特性）
         *  4.5、创建对象
         *  4.6、class继承（新特性）
         *  4.7、原型链继承（难）
     *  5、常用对象
     *   *  5.1、Date
         *  5.2、JSON
     *  6、操作Dom元素
     *   *  6.1、插入Dom
         *  6.2、更新Dom
         *  6.3、删除Dom
     *  7、操作Bom元素
     *   *  7.1、window
         *  7.2、navigator
         *  7.3、screen
         *  7.4、location
         *  7.5、Document
         *  7.6、History
         *  7.7、操作表单
         *  7.8、操作文件
     *  笔记持续更新中。。。
     *  更深一步学习请点击，视频链接：\[B站：【狂神说Java】\](https://www.bilibili.com/video/BV1JJ41177di?p=1).这里强烈推荐

### 1、什么是JavaScript ###

#### 1.1、概述 ####

*  JavaScript是一门世界上最流行的脚本语言
 *  JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为 开发Web页面的脚本语言而出名，但是它也被 用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且 支持面向对象、命令式和声明式（如函数式编 程）风格。
 *  一个合格的后端人员，必须精通JavaScript

#### 1.2、历史 ####

*  历史相关链接: [https://www.w3school.com.cn/js/pro\_js\_history.asp][https_www.w3school.com.cn_js_pro_js_history.asp].
 *  ECMAScript它可以理解为是JavaScript的一个标准
 *  最新版本已经到es6版本
 *  但是大部分浏览器还只停留在支持es5代码上！
 *  开发环境–线上环境，版本不一致

### 2、快速入门 ###

#### 2.1、引人JavaScript ####

1、内部标签

2、外部引入  
lyp.js

//....

test.html

<script src="lyp.js"></script>

测试代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        
        
        
    
        
        
        <script src="js/lyp.js"></script>
    
        
        <script type="text/javascript">
    
        </script>
    </head>
    <body>
    
    
    </body>
    </html>

#### 2.2、基本语法入门 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        
        <script>
            //1. 定义变量 变量类型 变量名 = 变量值;
            var score = 89;
            //alert(score);
    
            //2. 条件控制
            if(score > 60 && score < 70){
          
                alert("60~70");
            } else if(score >70 && score < 80){
          
                alert("70~80");
            } else{
          
                alert("other");
            }
            // console.log(score) 在浏览器的控制台打印变量！ System.out.println();
            /**
             *
             */
    
        </script>
    </head>
    <body>
    
    </body>
    </html>

#### 2.3、数据类型 ####

数值，文本，图形，音频，视频…

变量

var 王者荣耀 = "倔强青铜";

number

js不区分小数和整数，Number

123      //整数123
    123.1    //浮点数123.1
    1.123e3  //科学计数法
    -99      //负数
    NaN      //not a number
    Infinity //表示无限大

字符串

‘abc’ “abc”

布尔值

true, false

逻辑运算

&&      两个为真，结果为真
    
    ||      一个为真，结果为真
    
    ！       真即假，假即真

比较运算符 ！！！重要!

=      
    
    ==      等于（类型不一样，值一样，也会判断为true）
    
    ===     绝对等于（类型一样，值一样，结果为true）

这是一个JS的缺陷，坚持不要使用==比较  
须知：

*  NaN===NaN,这是与所有的数值都不相等，包括自己
 *  只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

console.log((1/3)===(1-2/3))

尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.00000001

null和undefined

*  null 空
 *  undefined 未定义

数组

java的数组必须是相同类型的对象~，JS中不需要这样！

//保证代码的可读性，尽量使用[]
    var arr = [1,2,3,4,5,'hello',null,true];
    
    new Array(1,2,3,4,5,'hello');

取数组下标：如果越界了，就会

undefined

对象

对象是大括号，数组是中括号~~

每个属性之间使用逗号隔开，最后一个不需要添加

//Person person = new Person(1,2,3,4,5);
       var person = {
        
                name:"liu",
                age:5,
                tags:['js','java','web','...']
            }

取对象的值

person.name
    "liu"
    person.age
    5

#### 2.4、严格检查模式 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        
        <script>
            'use strict';
            let i = 1;
            //ES6 let
        </script>
    </head>
    <body>
    
    </body>
    </html>

### 3、数据类型 ###

#### 3.1、字符串 ####

1.正常字符串我们使用 单引号，或者 双引号包裹

2.注意转义字符 \\

console.log('a\t\x41\t\u4e2d\nb');
    /*
    \ '
    \n
    \t
    \u4e2d \u### Unicode字符
    \x41         asc11字符
    */

3.多行字符串编写

//tab上面esc下面 ``
    var msg1 =
    `hello
    world
    你好ya
    你好`;
    
        console.log(msg1);

4.模板字符串

//tab上面esc下面 ``
    let name =  "Andy";
    let age = 12;
    var msg= `你好呀,${
          name}`
    
        console.log(msg);

5.字符串长度

str.length

var student = "zhangsan";
    console.log(student.length);

6.字符串的可变性，不可变

console.log(student[0]);
         VM100:1 Z
         undefined
         student[0] = 1;
         1
         console.log(student)
         VM221:1 ZhangSan

7.大小写转换

//注意，这里是方法，不是属性了
    console.log(student.toUpperCase()) ;
    console.log(student.toLowerCase()) ;

8.获取单个字符下标

console.log(student.indexOf("s"));

9.截取字符串 \[)

console.log(student.substring(1)) ;//从第一个字符截取到最后一个
    console.log(student.substring(1,3)); //[1,3)

#### 3.2、数组 ####

**Array可以包含任意的数据类型**

var arr = [1,2,3,4,5,6];//通过下标取值和赋值
    arr[0]
    arr[0] = 1;

1.长度

arr.length

注意：假如给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

2.indexOf,通过元素获得下标索引

arr.indexOf(2)
    1

字符串的“1”和数字 1 是不同的

3.slice() 截取Array的一部分，返回一个新数组，类似于String中的substring

**4.push(),pop() 尾部**

push: 压入到尾部
    pop: 弹出尾部的一个元素

**5.unshift(),shift() 头部**

unshift: 压入到头部
    shift: 弹出头部的一个元素

6.排序 sort()

var arr = ["B","C","A"];
    arr.sort()
    (3) ["A", "B", "C"]

7.元素反转 reverse()

(3) ["A", "B", "C"]
    arr.reverse()
    (3) ["C", "B", "A"]

**8.concat()**

(3) ["C", "B", "A"]
    arr.concat([1,2,3])
    (6) ["C", "B", "A", 1, 2, 3]
    arr
    (3) ["C", "B", "A"]

注意：concat() 并没有修改数组，只是会返回一个新的数组

9.连接符join

打印并拼接数组，使用特定的字符串连接

(3) ["C", "B", "A"]
    arr.join('-')
    "C-B-A"

10.多维数组

arr = [[1,2],[3,4],["5","6"]];
    (3) [Array(2), Array(2), Array(2)]
    arr[1][1]
    4

数组：存储数据（如何存，如何取，方法都可以自己实现！）

#### 3.3、对象 ####

若干个键值对

var 对象名 ={
        
        属性名: 属性值,
        属性名: 属性值,
        属性名: 属性值,
        属性名: 属性值
    }
    
    //定义了一个person对象，它有四个属性！
    var person = {
        
        name : "liuyipin",
        age : 6,
        email : "123456789@qq.com",
        score : 0
    }

js中对象，（…）表示一个对象，键值对描述属性 xxxx :xxxx ,多个属性之间使用逗号隔开，最后一个属性不加逗号！

JavaScript 中的所有键都是字符串，值是任意对象！

1.对象赋值

person.name = "lyp"
    "lyp"
    person.name
    "lyp"

2.使用一个不存在的对象属性，不会报错！undefined

person.hhh
    undefined

3.动态的删减属性，通过delete删除对象的属性

delete person.name
    true
    person
    {
        age: 6, email: "123456789@qq.com", score: 0}

4.动态的添加，直接给新的属性添加值即可

person.hhh = "hahaha"
    "hahaha"
    person
    {
        age: 6, email: "123456789@qq.com", score: 0, hhh: "hahaha"}

5.判断属性值是否在这个对象中！ xxx in xxx!

'age' in person
    true
    //继承
    'toString' in person
    true

6.判断一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty('toString')
    false
    person.hasOwnProperty('age')
    true

#### 3.4、流程控制 ####

if判断

while循环，避免程序死循环

while(age < 100) {
        
        age = age + 1;
        console.log(age);
    }
    
    do{
        
        age = age + 1;
        console.log(age);
    }while (age < 100)

for 循环

for(let i = 0; i < 100; i++){
        
        console.log(i);
    }

**forEach循环**

5.1引入

var age = [12,51,62,11,22,55,23,5,6,122];
    
    //函数
    age.forEach(function (value) {
         
        console.log(value);
    })

for…in

//for(var index in object){}
        for(var num in age) {
        
            if(age.hasOwnProperty(num)){
        
                console.log("存在");
                console.log(age[num]);
            }
        }

#### 3.5、Map和Set ####

ES6的新特性~  
Map:

//ES6 Map
        //学生的成绩，学生的名字
        // var names = ["tom","jerry",'andy'];
        // var scores = [100,90,80];
    
        let map = new Map([['tom',100],['jerry',90],['andy',80]]);
        let name = map.get('tom');//通过key获得value
        map.set('admin',123456);//新增或修改
        map.delete("tom");//删除
        console.log(name);

Set: 无序不重复的集合

let set = new Set([3,1,1,1,1]);//Set可以去重
        set.delete(1);//删除
        console.log(set.has(3));//是否包含某个元素

#### 3.6、iterator ####

ES6的新特性~

遍历数组

//通过for of / for in 下标
        let arr = [3,4,5]
        for(let x of arr){
        
            console.log(x);
        }

遍历Map

let map = new Map([['tom',100],['jerry',90],['andy',80]]);
        for(let x of map ){
        
            console.log(x);
        }

遍历Set

let set = new Set([5,6,7]);
        for(let x of set){
        
            console.log(x);
        }

### 4、函数及面向对象 ###

#### 4.1、函数定义 ####

> 定义方式一

绝对值函数

function abs(x){
        
          if(x >= 0){
        
              return x;
          } else {
        
               return -x;
          }
      }

一但执行到 return 代表函数结束，返回结果！  
如果没有执行return ，函数执行也会返回结果，结果就是undefined

> 定义方式二

var abs = function(x){
        
          if(x >= 0){
        
              return x;
          } else {
        
               return -x;
          }
      }

function(x)\{…\}这是一个匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数！  
方式一和方式二等价！

> 调用函数

abs(10)  //10
    abs(-10)  //-10

参数问题：javaScript 可以传递任意个参数，也可以不传递参数~  
参数进来是否存在的问题？  
假设不存在参数，如何规避？

> arguments

`arguments`是一个JS免费赠送的关键字；  
代表，传递进来的所有的参数，是一个数组！

问题：arguments包含所有的参数，我们有时候想使用多余的参数进行附加操作，需要排除已有的参数~

> rest

以前：

if(arguments.length > 2){
        
    	//....
    }

ES6 引入的新特性，获取除了已经定义的参数之外的所有参数~

function aaa(a,b,...rest){
        
            console.log("a=>"+a);
            console.log("b=>"+b);
            console.log(rest);
        }

rest 参数只能写在最后面，必须用…标识

#### 4.2、变量的作用域 ####

在javascript中，var定义变量实际是有作用域的。  
假设在函数体中声明，则在函数体外不可以使用~

function qj(){
        
            var x = 1;
            x = x + 1;
        }
        x = x + 2; //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj(){
        
            var x = 1;
            x = x + 1;
        }
        
        function qj2(){
        
            var x = 'A';
            x = x + 1;
        }

内部函数可以访问外部函数的成员，反之则不行

function qj(){
        
            var x = 1;
    
            //内部函数可以访问外部函数的成员，反之则不行
            function qj2(){
        
                var y = x + 1;  //2
            }
    
            var z = y + 1; //Uncaught ReferenceError: y is not defined
        }

假设，内部函数变量和外部函数的变量，重名！

function qj(){
        
            var x = 1;
            function qj2(){
        
                var x = 'A';
                console.log('inner'+x); //innerA
            }
            qj2();
            console.log('outer'+x); //outer1
    
        }
        qj();

假设在JavaScript 中 函数查找变量从自身函数开始~，由’内’ 向 '外’查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

> 提升变量的作用域

function qj(){
        
            var x = "x" + y;
            console.log(x);
            var y = "y";
        }

结果： x is not defined  
说明： js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

function qj2(){
        
    		var y;
    
            var x = "x" + y;
            console.log(x);
            var y = "y";
        }

这个是JavaScript建立之初就存在的特性，养成规范；所有的变量定义都放在函数的头部，不要乱发，便于代码维护；

function qj2(){
        
    		var x = 1,
    			y = x + 1,
    			z,i,a; // undefined
    			
    		//之后随意用
        }

> 全局函数

//全局变量
        x = 1;
    
        function f(){
        
            console.log(x);
        }
        f();
        console.log(x);

全局对象window

var x = 'xxx';
    alert(x);
    alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下;

alert()这个函数本身也是一个window的变量；

var x = 'xxx';
    
    window.alert(x);
    
    var old_alert = window.alert;
    
    //old_alert(x);
    
    window.alert = function(){
        
    
    };
    //发现 alert() 失效了
    window.alert(123);
    
    //恢复
    window.alert = old_alert;
    window.alert(456);

javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错`Refrence`

#### 4.2、方法 ####

#### 4.3、闭包（难点） ####

#### 4.4、箭头函数（新特性） ####

#### 4.5、创建对象 ####

#### 4.6、class继承（新特性） ####

#### 4.7、原型链继承（难） ####

### 5、常用对象 ###

#### 5.1、Date ####

#### 5.2、JSON ####

### 6、操作Dom元素 ###

#### 6.1、插入Dom ####

#### 6.2、更新Dom ####

#### 6.3、删除Dom ####

### 7、操作Bom元素 ###

#### 7.1、window ####

#### 7.2、navigator ####

#### 7.3、screen ####

#### 7.4、location ####

#### 7.5、Document ####

#### 7.6、History ####

#### 7.7、操作表单 ####

#### 7.8、操作文件 ####

### 笔记持续更新中。。。 ###

### 更深一步学习请点击，视频链接：[B站：【狂神说Java】][B_Java].这里强烈推荐 ###

[https_www.w3school.com.cn_js_pro_js_history.asp]: https://www.w3school.com.cn/js/pro_js_history.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210406225151748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjgyMjM2Nw==,size_16,color_FFFFFF,t_70
[B_Java]: https://www.bilibili.com/video/BV1JJ41177di?p=1