JavaScript笔记

一、JavaScript简介(JS)

1、JS概述

1. JavaScript是现阶段最主流的编程语言之一，是一种运行在客服端(浏览器)的脚本语言，同时也是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
2. 脚本语言（Script）：不需要进行编译，运行过程中由js引擎逐行来进行解释并执行。
3. JS也可以基于Node.js来进行服务端(后端)编程。

1. 浏览器执行解释JS

浏览器分为两部分 ：渲染引擎和JS引擎

1. 渲染引擎：用于解析HTML+CSS，俗称内核，比如chrome浏览器的blink。
2. JS引擎：也称为JS解释器。用于读取网页中的JavaScript代码，对其进行处理后运行。比如chrome浏览器的V8。

浏览器通过内置的JS引擎对JS代码逐行进行解释编译。

2、JS的组成

1. ECMAScript(JS语法)：

是由ECMA国际进行标准化的一门编程语言，ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

1. DOM(文档对象模型):

Document Object Model，简称DOM。是W3C组织推荐的处理可扩展置标语言的标准编程接口，通过DOM提供的接口来对页面上的各种元素进行操作(大小、位置、颜色等)。

1. BOM(浏览器对象模型):

Browser Object Model，简称BOM。它提供了独立于内容的、可以于浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

二、JS基础语法

1、JS输入输出函数

2、变量

1、变量可以理解为存放数据的容器，便于操作存放在内存中的数据。

2、数据类型

JavaScript 是一种拥有动态类型的编程语言。不同于JAVA、C#这类后端语言，需要规定具体的数据类型。JavaScript 不用声明具体的数据类型，会在程序运行中被自动确定。

3、简单数据类型

1、string(字符串)

1）、字符串转义符 \

2）、字符串的长度以及拼接

length属性

用于获取字符串或数组长度

3）、字符串拼接

1、ES6新语法

``反引号

内容拼接变量时，用${}包住变量

    let a = 'JavaSrcpit';
 
    let str = `${a}ES6`;
 
    console.log(str); // JavaSrcpitES6

2、ES5以前

多个字符串之间可以使用 + 进行拼接。

在拼接前，会将与字符串拼接的任何类型转换为字符串，再拼接为一个新字符串。

注：使用字符串进行拼接时 ‘’ 引号采用就近原则进行匹配。

2、boolean(布尔型)

布尔类型有true 和 false。

布尔型在与数值型进行拼接时，true为(1)，false为(0)。

3、Undefined(未定义)

一个声明后没有被赋值的变量会有一个默认值(Undefined)，表示未定义数据类型(基于JavaScript的变量的特性)。

4、Null(空)

表示为空(null)，需与Undefined区别开。

5、Typeof 可用来获取检测变量的数据类型

4、数据类型转换

1）、转换为字符串

2）、转换为数值型

3）、转换为布尔型

1. 代表空、否定的值会被转换为false ,如： ‘ ’ 、0、NaN、null、undefined。
2. 其余值都会被转换为true。

5、运算符

1）、算术运算符

概率：算术运算使用的符号，用于执行两个变量或值的算术运算。

2）、递增和递减运算符

递增（++）

递减（- -）

放在变量前面时，我们称为前置递增(递减)运算符

放在变量后面时，我们称为后置递增(递减)运算符

注意：递增和递减运算符必须和变量配合使用。

①前置递增运算符

++num   使用口诀:先自加，后返回值

②后置递增运算符

num ++   使用口诀:先返回原值，后自加

3）、比较运算符

是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值(true / false)作为比较运算的结果。所以经常将使用比较运算符的表达式用到逻辑运算符的运算中。

4）、逻辑运算符

是用来进行布尔值运算的运算符，其返回值也是布尔值。

4.1、逻辑中断

概念：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算(执行)右边的表达式的值。

①逻辑与 &&

②逻辑或 ||

6、数组

1. 、创建数组

JavaScript 中创建数组有两种方式：

1. 利用 new 创建数组

var array = new Array();

1. 利用数组字面量 [] 创建数组

var array  = [];

1. 、数组的索引(下标)

索引 (下标) ：用来访问数组元素的序号

array[1]; // 获取array数组的第二个元素

可通过数组的索引遍历数组元素

1. 、获取数组的长度length

使用 length可访问数组元素的数量。

Array.length; // 获取array数组的长度

三、JS函数

1. 函数(function)

1. 就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

1. 函数可以带参数也可以不带参数
2. 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
3. 调用函数的时候，函数名括号里面的是实参
4. 多个参数中间用逗号分隔
5. 形参的个数需与实参个数匹配

1、函数的声明及调用

        // 带参数的函数声明
 
        function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
 
        // 函数体
 
        }
 
 
 
        // 带参数的函数调用
 
        函数名(实参1, 实参2, 实参3...);

2、函数的返回值(return)

在使用 return 语句时，函数会停止执行，并返回指定的值,如果函数没有 return ，返回的值是 undefined。

// 声明函数
 
function 函数名（）{
 
    ...
 
    return  需要返回的值;
 
}
 
// 调用函数
 
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

注：

return 语句之后的代码不被执行。

return 只能返回一个值。如果用逗号隔开多个值，则返回最后一个值。

break、continue、return 的区别：

1. break ： 结束当前循环体 (如 for、while)
2. continue ：跳出本次循环，继续执行下次循环 (如for、while)
3. return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

1. 函数的Arguments对象

JS函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。

伪数组具有以下特点：

​ ①：具有 length 属性

​ ②：按索引方式储存数据

​ ③：不具有数组的 push , pop 等方法

3、简单类型传参

把值类型(简单数据类型)变量作为参数传给函数的形参时，就是将简单类型变量存放在栈中的值传递给形参。所以在函数中操作的是形参，不会影响原变量。

        // 简单类型传参
 
        function fn1(num){
 
            var num = 10;
 
            console.log(num);
 
        }
 
 
 
        var a = 18;
 
        fn1(a); // return 10
 
        console.log(a); // 18

4、复杂类型传参

把引用类型(复杂数据类型)变量作为参数传递给函数的形参时，相当于将复杂类型变量存放在栈中的引用地址传递给形参。

当形参与复杂类型变量保存的是同一个地址时，所以操作的是同一个对象。

        // 复杂类型传参
 
        function fn2(arr){
 
            console.log(arr);
 
 
 
            var Array = ['A', 'B', 'C', 'D'];
 
            for (let index = 0; index < Array.length; index++) {
 
               arr.splice(index, 1, Array[index]);              
 
            }
 
            console.log(arr);
 
        }
 
        var array = [1, 2, 3, 4, 5];
 
        fn2(array);
 
        // return [1, 2, 3, 4, 5]
 
        // return ['A', 'B', 'C', 'D', 5]
 
 
 
        console.log(array); // // return ['A', 'B', 'C', 'D', 5]

5、匿名函数

    function(){} // 匿名函数

1）、函数表达式声明

即创建一个函数并将它赋值给变量。

    let fun = function(){} // 通过函数表达式声明匿名函数

需要注意的是，通过函数表达式声明函数时，需要在声明后，调用函数。（变量提升）

2）、立即执行函数

声明一个函数，并马上调用这个匿名函数就叫做立即执行函数；也可以说立即执行函数是一种语法，让你的函数在定义以后立即执行。

    (function(形参){
 
        // 函数体
 
    })(实参);

1. 立即执行函数内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。在该局部作用域内定义的变量或函数只在该作用域内生效，避免变量污染。

四、JS作用域

1. 概念

一段程序代码所作用的程序范围，而限定这段程序的可用性范围就是作用域。

1、作用域的分类

JavaScript (ES6前) 中的作用域有两种：

1. 全局作用域 (作用在script 标签范围内)
2. 局部作用域 (函数作用域)

2、变量的作用域

1. 、全局变量

在全局作用域下，声明的变量叫做全局变量（在函数外部定义的变量）

1. 全局变量，变量的整个<script>标签中都可以使用。
2. 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

1. 、局部变量

在局部作用域下，声明的变量叫做局部变量（在函数内部定义的变量）

1. 局部变量只能在该函数内部使用
2. 函数的形参实际上就是局部变量

1. 、区别

全局变量：在整个<script>标签中都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

3、块级作用域(ES6)

块作用域由 {} 包括。在 {} 里面声明的变量不能在 {} 外调用。

ES6以前，JS没有块级作用域的概念。

五、JS预解析

1. 概念：

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：

预解析；(JS引擎会把JS里面所有的 var 还有 function 提升到当前作用域的最前面)

代码执行。

注：预解析只会发生在通过 var 定义的变量和 function 上。

1、变量预解析(变量提升)

 变量的声明会被提升到当前作用域的最上面，但变量的赋值不会被提升。

        console.log(num);  // 结果是多少？
 
        var num = 10;  
 
        // 输出返回undefined
 
 
 
        //相当于执行了以下代码
 
        var num;        // 变量声明提升到当前作用域最上面
 
        console.log(num); // 输出返回undefined
 
        num = 10;       // 变量的赋值不会提升

2、函数预解析(函数提升)

1. 概念：

函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

1. 函数表达式声明调用问题

函数表达式调用必须写在函数声明的下面。(因为函数表达式是通过变量的形式接收函数的，变量提升只提升变量，不提升赋值操作)

        // 匿名函数(函数表达式方式):若我们把函数调用放在函数声明上面
 
        fn();
 
        var  fn = function() {
 
            console.log('22'); // 报错
 
        }
 
 
 
        //相当于执行了以下代码
 
        var fn;
 
        fn();      //fn没赋值，没这个，报错
 
        var  fn = function() {
 
            console.log('22'); //报错
 
        }

六、JS对象

1. 对象的概念

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。(对象必须是具体的事物，不能是抽象的概念)

对象是由属性和方法组成的：

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

1、创建对象(object)

        1、利用字面量创建对象 {}

对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法，{ } 里面采取键值对的形式表示。

键：相当于属性名

值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）。

        var star = {
 
            name : 'pink',   // 多个属性或者方法中间用逗号隔开
 
            age : 18,
 
            sex : '男',
 
            sayHi : function(){  // 方法冒号后面跟的是一个匿名函数
 
                alert('大家好啊~');
 
            }
 
        };

        2、利用 new Object 创建对象

var 对象名 = new Object();

        var obj = new Object(); //创建了一个空的对象
 
        // 对象属性赋值
 
        obj.name = '张三丰';
 
        obj.age = 18;
 
        obj.sex = '男';
 
 
 
        // 对象方法
 
        obj.sayHi = function() {
 
            console.log('hi~');
 
        }
 
        // 调用对象的属性以及方法
 
        console.log(obj.name);
 
        console.log(obj['sex']);
 
        obj.sayHi();

3、利用构造函数创建对象

1. 、构造函数的概念

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以将对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

        //构造函数的语法格式
 
        function 构造函数名() {
 
            this.属性 = 值;
 
            this.方法 = function() {}
 
        }
 
        new 构造函数名();

1. 、通过构造函数创建对象

在 JS 中，使用构造函数要时要注意以下几点：

1. 构造函数名字首字母要大写
2. 构造函数不需要return就可以返回结果
3. 调用构造函数必须使用 new
4. 我们只要new 构造函数() 就能创建了一个对象
5. 我们的属性和方法前面必须加this

        // 创建Star构造函数
 
        function Star(uname,age,sex) {
 
            this.name = uname;
 
            this.age = age;
 
            this.sex = sex;
 
            this.sing = function(sang){
 
                console.log(sang);
 
            }
 
        }
 
       
 
        var ldh = new Star('刘德华',18,'男'); // 创建对象，并给对象赋初始值
 
        console.log(typeof ldh) // object对象，调用函数返回的是对象
 
 
 
        console.log(ldh.name); // 调用对象属性
 
        console.log(ldh['sex']);
 
        ldh.sing('冰雨'); // 调用对象方法，并传递实参

1. 、构造函数与对象

1. 构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
2. 创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

1. 、New关键字

new 在执行时的四种作用:

1. 在内存中创建一个新的空对象。
2. 让 this 指向这个新的对象。
3. 执行构造函数里面的代码，给这个新对象添加属性和方法
4. 返回这个新对象（所以构造函数里面不需要return）

变量、属性、函数、方法总结

1. 变量：单独声明赋值，单独存在
2. 属性：对象中的变量称为属性，不需要声明，属性用来描述该对象的特征
3. 函数：单独存在的，通过 函数名() 的方式就可以调用
4. 方法：对象里面的函数称为方法，方法不需要声明，使用 对象.方法名() 的方式就可以调用，方法用来描述对象的行为和功能。

2、对象的调用

1. 对象属性调用 : 对象.属性名。

        star.name     // 调用name属性

1. 对象属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用

        star['name']  // 调用name属性

1. 对象方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

3、遍历对象属性 for in

用于对数组或对象的属性进行循环操作。

    for(变量 in 对象名字){
 
      // 在此执行代码
 
    }
 
 
    
        // 创建对象
 
        var obj = {
 
            name: '秦sir',
 
            age: 18,
 
            sex: '男',
 
            fn:function() {};
 
        };
 
 
 
        //for in 遍历obj对象
 
        for(var key in obj){
 
            console.log(key); // key 变量 输出的是属性名
 
            console.log(obj[key]); // 通过调用对象属性的方式，得到属性值
 
        }

六、JS内置对象

1. 概念

内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能。

JavaScript 提供了多个内置对象：Math、 Date 、Array、String等。

1. MDN文档

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN来查询。

1、Math对象

（1）、概念

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

Math 的所有属性与方法都是静态的，不需要通过New关键字进行调用。

（2）、Math的常用属性

1. 、Math.PI -圆周率

（3）、Math的常用函数

描述：如果没有参数，则结果为 - Infinity；

如果有任一参数不能被转换为数值，则结果为 NaN。

        1）、Math.Max() - 返回最大值

        2）、Math.Min() - 返回最小值

        3）、Math.abs() - 返回绝对值

        4）、Math.floor() - 向下取整

        5）、Math.ceil() - 向上取整

        6）、Math.round() - 四舍五入

        7）、Math.random() - 随机数

 函数返回一个浮点数， 伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1。

得到一个范围区间的随机数，参照MDN文档公式。

        var arr = ['张杰', '李连杰', '周杰伦', '成龙', '甄子丹'];
 
        // Math.random()生成随机数
 
        function getRandom(min, max) {
 
            return Math.floor(Math.random() * (max - min + 1)) + min; // 含最大值，含最小值
 
        }
 
        console.log(getRandom(1, 10));
 
        console.log(arr[getRandom(0, arr.length-1)]);  

2、Date对象

1、概念

1. 创建Date实例，用于处理日期和时间。Date 对象基于自 1970 年 1 月 1 日起经过的毫秒数。Date对象需要通过调用Date构造函数来实例化日期对象，即 new Date()。
2. 若将它作为常规函数调用（即不加 new 操作符），将返回一个字符串，而非 Date 对象。

2、创建Date对象

1. 、获取当前时间

  var date = new Date();  // 创建日期对象

1. 、new Date() 构造函数

当构造函数中没有参数，返回当前时间；

当构造函数中存在参数，则返回对应参数的日期时间。（参数常用的写法： 数字型 2019,10,1；  字符串型 '2019-10-1 8:8:8' 时分秒）

        // 1.如果构造函数中没有参数，返回当前系统时间
 
        var now = new Date();
 
        console.log(now);
 
 
 
        // 2.如果Date()里面写参数，则返回对应参数的日期时间
 
        var data = new Date(2019,10,1);
 
        console.log(data);  // 返回的是11月不是10月
 
        var data2 = new Date('2019-10-1 8:8:8');
 
        console.log(data2);

3、日期格式化

        1、方法

        2、格式化年月日

        // 格式化日期格式
 
        var date = new Date(); // 创建当前日期对象
 
 
 
        // 将日期格式化显示
 
        var year = date.getFullYear(); // 获取年
 
        var month = date.getMonth() + 1; // 获取月--返回 0-11
 
        var dates = date.getDate(); // 获取天
 
        var intDay = date.getDay(); // 获取星期--返回0-6
 
 
 
        // 将getDay返回的数值转换为星期
 
        var strDay = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
 
        var strDate = year + '年' + month + '月' + dates + '号' + strDay[intDay];
 
 
 
        console.log(strDate);

        3、格式化时分秒

        // 将时间格式化显示
 
        var h = date.getHours(); // 时
 
        var m = date.getMinutes(); // 分
 
        var s = date.getSeconds(); // 秒
 
 
 
        // 时分秒小于10时，前面加上0
 
        h = h < 10 ? '0' + h : h;
 
        m = m < 10 ? '0' + m : m;
 
        s = s < 10 ? '0' + s : s;
 
        var strTime = h + ':' + m + ':' + s;
 
        console.log(strTime);

4、时间戳

        1、概述

时间戳是指格林威治时间自1970年1月1日（00:00:00 GMT）至当前时间的总秒数。

        2、获取当前时间总的毫秒数

1. date.valueOf() ：得到date时间对象距离1970年1月1日（08:00:00 GMT+8）总的毫秒数
2. date.getTime() ：得到date时间对象距离1970年1月1日（08:00:00 GMT+8）总的毫秒数

        // 实例化Date对象
 
        var date = new Date();
 
 
 
        // 1 .通过 valueOf()  getTime() 用于获取Date对象的原始值
 
        console.log(date.valueOf());  // 得到现在时间距离1970.1.1总的毫秒数
 
        console.log(date.getTime());
 
        // 2.简单的写法
 
        var date1 = +new Date();  // +new Date()返回的就是总的毫秒数，
 
        console.log(date1);

1. Date.now(); 得到当前时间距离1970年1月1日（08:00:00 GMT+8）总的毫秒数

now() 是 Date 的一个静态函数，所以必须以 Date.now() 的形式来使用。

        3、将毫秒数转换为日期

var date = new Date(1670112000000); // 返回1670112000000毫秒数对应日期时间

5、倒计时-算法

// 倒计时
 
        function conutDown(dateTimes) {
 
            var datetime = new Date(dates);
 
            // 将开始时间与当前时间转换为秒进行计算
 
            var times = (datetime.getTime() - Date.now()) / 1000; 

            // 计算倒计时 天-时-分-秒
 
            var day = Math.floor(times / 60 / 60 / 24);
 
            var hours = Math.floor(times / 60 / 60 % 24);
 
            var minutes = Math.floor(times / 60 % 60);
 
            var seconds = Math.floor(times % 60);
 
            var strTimes = day + '天' + hours + ':' + minutes + ':' + seconds;
 
            return console.log(strTimes);
 
        }
 
        conutDown("2022-10-29 0:0:0");

3、Array对象

概述

参见文档-数组

1、判断是否为Array

        1)、Array.isArray(value); -方法

        2)、instanceof -运算符

当检测 Array 实例时，Array.isArray 优于 instanceof，因为 Array.isArray 能检测 iframes。

        // 判断是否为数组类型 -Array
 
        // Array.isArray(); -Array方法
 
        var arr = new Array();
 
        Array.isArray(arr); // true
 
 
 
        // instanceof  -运算符
 
        arr instanceof Array; // true

1、添加数组元素

①、unshift()函数

在数组开头插入元素，该函数能够把一个或多个参数值附加到数组的头部

array.unshift(元素1, 元素2, ..., 元素X)

②、push()函数

把一个或多个参数值附加到数组的尾部，并返回添加元素后的数组长度

 array.push(元素1, 元素2, ..., 元素X)

③、concat() 函数

也可以插入给定的一个或多个元素，能够把传递的所有参数按顺序添加到数组的尾部。

var array1 = [1,2,3,4,5];  //定义数组

var array2 = array1.concat(6,7,8);  //为数组a连接3个元素

说明：concat() 方法将创建并返回一个新数组，而不是在原来的基础上添加新元素。

④、splice() 函数

在指定下标位置插入一个或多个元素。

函数参数说明：

第1个参数index为指定起始下标位置；

第2个参数howmany指定应该删除的元素数目，当值设置为0时，就会不执行删除操作；

这样就可以通过第3个及后面参数item1,.....,itemX来插入一个或多个元素。

  array.splice(index,howmany,item1,.....,itemX)

2、删除数组元素

①、delete

  var arr = [1,true,{},"a"]; // 定义数组
 
  delete arr[0]; // 删除索引为 ’0’ 的数组元素

用delete删除后，数组的长度length不会发生变化，此时arr[x]变为undefined。

②、pop()函数

    var arr = [1,true,{},"a"]; // 定义数组
 
     arr.pop(); // 删除数组中最后一个元素

删除数组中最后一个元素，并返回该元素的值。此方法会更改数组的长度。

③、shift()函数

    var arr = [1,true,{},"a"]; // 定义数组
 
    arr.shift(); // 删除数组中第一个元素

删除数组中第一个元素，并返回该元素的值。此方法更改数组的长度。

3、筛选数组-算法

        // 筛选数组，将数组[2000, 1500, 5000, 600]中大于2000的添加到新数组中
 
        var array = [2000, 1500, 5000, 600];
 
        var newArr = new Array();
 
        for (let index = 0; index < array.length; index++) {
 
            // 大于2000添加到newArr数组中
 
            if (array[index] > 2000) {
 
                newArr.push(array[index]);    
 
            }
 
        }
 
        console.log(newArr);

4、数组排序

①、reverse()函数

        var array = [2000, 1500, 5000, 600];
 
        array.reverse(); // [600, 5000, 1500, 2000]

将数组中元素的位置反转，并返回该数组。

②、sort()函数

        // 数组排序(冒泡排序)
 
        var array = [2, 1, 5, 6];
 
        array.sort();
 
        console.log(array); // [1, 2, 5, 6]
 
 
 
        // 对于双位数
 
        var arr = [1,64,9,61];
 
        arr.sort(function(a,b) {
 
            return b - a;  //降序的排列
 
            return a - b; //升序
 
            }
 
        )

将数组中元素进行排序，排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的。（可以比较字符串）

于具体实现，因此无法保证排序的时间和空间复杂性。

5、获取Array元素索引

①、indexOf()函数

       var array = [2000, 1500, 5000, 600, 2000];
 
       array.indexOf(2000); // 返回数组元素的索引: 1

返回在数组中可以找到指定元素的第一个索引（可能存在该元素在数组中重复出现），如果不存在，则返回 -1。

②、lastIndexOf()函数

       var array = [2000, 1500, 5000, 600, 2000];
 
       array.lastIndexOf(2000); // 返回数组元素的索引: 4

返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找

6、数组去重-算法

        // 数组去重-算法
 
        function unique(array){
 
            var newArray = [];
 
            for (let index = 0; index < array.length; index++) {
 
                if (newArray.indexOf(array[index]) == -1) {
 
                    newArray.push(array[index])
 
                }              
 
            }
 
            return newArray;
 
        }
        
        console.log(unique(array));

7、Join()函数

将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

       var array = [2000, 1500, 5000, 600, 2000, 600];
 
       array.join('-'); // 将数组转换为字符串，每个元素用 - 分隔

4、字符串对象

        1、基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

基本包装类型就是把简单数据类型包装成为复杂数据类型（对象），这样基本数据类型就有了属性和方法。

        var str = 'andy';
 
        console.log(str.length);
 
        // 执行逻辑如下：
 
 
 
        // 1.生成临时变量,把简单类型包装为复杂数据类型
 
        var temp = new String('andy');
 
        // 2.赋值给我们声明的字符变量
 
        str = temp;
 
        // 3.销毁临时变量
 
        temp = null;

        2、字符串的不可变性

当用户定义string类型的变量时，会在堆中开辟一块空间存储字符串的值，并将引用地址返回到栈里面；而当用户重新给变量赋值时，会在堆中开辟一块新的空间用于存储新字符串的值，将原本存放在栈中的引用地址替换为新字符串的引用地址。

而原先字符串的值依然存放在堆中，只是将栈中的引用指向新值。

        3、根据字符返回下标

①、indexOf()函数

indexOf('需要查询的字符', [起始位置(索引)])

搜索字符串，并返回指定字符第一次出现的索引。如果没有搜索到，则返回 -1。

        var str = "JavaScript";
 
        var index = str.indexOf("a", 2); // 从第2位下标开始查询 'a'

-根据字符查询其出现的下标及次数

        // 查询字符a在字符串中出现的位置，以及出现的次数
 
        var str = "abcdfuiopouyavs";
 
        var index = str.indexOf("a"); // 查询a第一次出现的索引号
 
        while (index != -1) {
 
            console.log(index); // 循环得到每次查询到的下标
 
            num ++; // 出现的次数
 
            index = str.indexOf("a", index + 1);
 
        }

②、lastIndexOf()函数

lastIndexOf('需要查询的字符', [起始位置(索引)])

在一个字符串中的指定位置索引处从后向前搜索。如果没找到这个特定值则返回 -1。

        4、根据下标返回字符

①、charAt(index)函数

根据给定下标返回对应的字符。

②、str[index] H5

根据给定下标返回对应的字符。

        var str = "JavaScript";
 
        // 根据下标，返回检索到字符
 
        var strIndex = str[1]; // return 'a'

从左向右索引，第一个字符的索引值为 0，最后一个字符的索引值为 stringName.length - 1。如果指定的 index值超出该范围，则返回一个空字符串。

③、charCodeAt()函数

返回指定位置处字符的ASCII码。

        var str = "JavaScript";
 
        // 根据下标，返回检索到字符的ASCII码
 
        console.log(str.charCodeAt(0));  // return '74'

-统计字符串中各字符的数量

        // 统计字符串中各字符出现的次数
 
        var str = "JavaScript";
 
        var obj = {};
 
        // 循环遍历字符串
 
        for (let i = 0; i < str.length; i++) {
 
            var chars = str[i]; // 将遍历的每个字符传递给 chars 字符串变量
 
            // 判断obj对象中是否存在该属性 ? 返回该属性值并转换为Boolean类型为true，条件成立
 
            if (obj[chars]) {
 
                obj[chars] ++;
 
            } else {
 
                obj[chars] = 1;
 
            }      
 
        }
 
        console.log(obj);

        5、拼接字符串

①、concat(str1, str2, str3, ...)函数

将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。

        var str = "123";
 
        var newStr = str.concat("456", "789"); // concat()返回一个新的字符串。
 
 
 
        console.log(newStr); // return "123456789"

        6、截取字符串

①、slice(beginIndex, endIndex)函数

截取字符串，并返回一个新的字符串，且不会改动原字符串。不包含最后一个索引号。

beginIndex

从该索引（以 0 为基数）处开始提取原字符串中的字符。如果值为负数，会被当做 strLength + beginIndex 看待，这里的strLength 是字符串的长度（例如，如果 beginIndex 是 -3 则看作是：strLength - 3）。

endIndex

可选。在该索引（以 0 为基数）处结束提取字符串。如果省略该参数，slice() 会一直提取到字符串末尾。如果该参数为负数，则被看作是 strLength + endIndex，这里的 strLength 就是字符串的长度 (例如，如果 endIndex 是 -3，则是，strLength - 3)。

        var str = "JavaScript";
 
        var newStr = str.slice(0, 4); //slice(开始下标, 结束下标)
 
 
 
        console.log(newStr); // return "Java"

②、substring(beginIndex, endIndex)函数

返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。

substring()参数不能使用负数，可使用String.length 属性去获取指定字符串的倒数元素。

        var str = "JavaScript";
 
        var newStr = str.substring(0, 4);
 
 
 
        console.log(newStr); // return "Java"
 
        // substring()参数不能使用负数，可使用String.length 属性去获取指定字符串的倒数元素。
 
        var str = "JavaScript";
 
        var newStr = str.substring(0, str.length - 4);
 
 
 
        console.log(newStr); // return "JavaSc"

        7、分隔字符串

①、split()函数

使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。

        var strArray = "Java;JavaScript;C#;SQL;HTML;CSS";
 
 
 
        // 将字符串中的字符用 ';' 符号分隔为数组
 
        var arrayStr = strArray.split(";");
 
        console.log(arrayStr); // ['Java', 'JavaScript', 'C#', 'SQL', 'HTML', 'CSS']

        8、替换字符

①、replace()函数

.replace(regexp/substr, replacement)

用于在字符串中，用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

可通过正则表达式 /g 进行全局匹配。

        // 将'J'替换为'j'
 
        var str = "Java;JavaScript;C#;SQL;HTML;CSS";
 
       
 
        while (str.indexOf('J') != -1) {
 
            str = str.replace('J', 'j');
 
        }
 
        console.log(str); // return "java;javaScript;C#;SQL;HTML;CSS"
 
 
 
        // 通过正则表达式进行全局匹配 //g
 
        str = str.replace(/;/g, ',');
 
 
 
        console.log(str); // return "java,javaScript,C#,SQL,HTML,CSS"

七、Web APIs

首先要了解API与Web API的区别：

1. API：API(Application Program Interface，应用程序编程接口)是一些预先定义的函数(方法)，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。（简单来说，API是给开发人员提供的一种工具，以便能更轻松的实现需要完成的功能）
2. Web API：是Browser(浏览器)提供的一套用于操作浏览器功能和页面元素的API（BOM和DOM）。主要用来与浏览器进行交互【JS中的理解】。

---

DOM

（1）、概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言

（HTML和XML）的标准编程接口。

DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式（API）操作这个树，用这些方法（API）你可以改变文档的结构、样式或者内容。同样节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

1. 文档（doucument）：一个浏览器页面就是一个文档；
2. 元素（element ）：页面中的所有标签都是元素；
3. 节点（node）：网页中的所有内容都是节点（标签，属性，文本，注释等）；

DOM 把以上内容都看做是对象。

（2）、获取DOM元素

控制台打印返回的元素对象，可更好的查看其元素和方法。

console.dir(element);

①、getElementById()根据ID获取

document.getElementById('id名');

②、getElementsByTagName()根据标签名获取

方法返回一个动态（返回的集合列表是动态的，这意味着它会随着 DOM 树的变化自动更新自身）的包含所有指定标签名的元素的 HTML 集合HTMLCollection（伪数组）。

document.getElementsByTagName('li'); // document获取DOM中所以li标签的集合

element表示为父级标签的元素，在指定的父级标签元素（element）的后代中进行搜索。父级标签元素必须指定到具体元素。

element.getElementsByTagName('li'); // element 获取element中li标签的集合

③、getElementsByClassName()根据类名获取

document.getElementsByClassName('类名');

④、querySelector()根据指定选择器获取第一个元素对象

返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。

document.querySelector('选择器'); // 选择器需要加上对应的符号，例如：'#'、'.'

⑤、querySelectorAll()根据指定选择器获取所以元素对象

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

document.querySelectorAll("div.note, div.alert");

⑥、获取body元素对象

document.body;

⑦、获取html元素对象

document.documentElement;

（3）、改变DOM元素内容

①、innerText和innerHtml的区别

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉（不能识别HTML标签和空格）。

element.innerText

推荐 起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行（能识别HTML标签和空格）。

element.innerHTML

InnerText和innerHtml都是可读写属性。

（4）、改变DOM元素属性

1. 旧版函数

获取属性值：element .getAttribute("属性名")
 
修改属性值：element .setAttribute("属性名", "新值")
 
判断是否包含某个属性：element .hasAttribute("属性名")
 
移除属性：element .removeAttribute("属性名")

1. 新版简化（推荐）

获取属性值：element.属性名
 
修改属性值：element.属性名 = 属性值
 
判断是否包含某个属性：element.属性名!==" "  说明包含该属性
 
移除属性：element.属性名 = ""

样例：

    <script>    
 
        var inpText = document.getElementById("inpText"); // 获取元素
 
 
 
        inpText.type = "password"；// 修改元素属性        
 
    </script>

并不是所有情况都适用于新版简化，ES6 基础语法中已经将 class 定义为关键字，有特殊功能，专门用于创建一种类型。

所以 DOM 标准就不能重复使用 "class" 这个属性名；所以今后在 DOM 中用 "." 获取或修改元素的class属性值时，必须换成".className"。

（6）、改变DOM元素样式

①、element.style -行内样式

    // 获取div元素
 
    var div =document.getElementById("div");
 
    div.onclick = function(){
 
        // 通过元素的Style属性修改元素的样式
 
        div.style.backgroundColor = "red";
 
        div.style.width = "100px";
 
        div.style.height = "100px"
 
    }

1. JS里面的样式采取小驼峰命名法，比如 fontSize ，backgroundColor；
2. 通过style修改元素样式，产生的是行内样式（内联样式）会覆盖掉CSS样式（外联样式）。

②、element.ClassName -类名样式

Element.className 用于获取或设置指定元素的 class 属性的值。Element.className 会直接更改元素的类名，会覆盖原先的类名。

③、element.classList -类名样式

通过className修改类名会覆盖掉原先的类名，为避免出现此情况可以通过classList去操作类名。

1. Element.classList.add(“类名”) --追加

在元素的class属性后追加指定“类名”。

1. Element.classList.remove(“类名”) --删除

删除指定的类名。

1. Element.classList.toggle(“类名”) --切换

当元素的class属性中存在指定类名时，就删除指定的类名；反之则添加指定的类名。

（7）、H5自定义属性

基本语法：data-属性名 = "属性值"

    <!-- 自定义属性 data-属性名 -->
 
    <div data-options="required:false"></div>
 
    <script>
 
        // 获取元素
 
        const custom = document.querySelector("div");
 
        // 获取元素自定义属性值 elemnet.dataset.属性名
 
        custom.dataset.options;
 
    </script>

（8）、定时器

1）、setInterval()

1、概念

setInterval() 重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。返回值intervalID  。

2、语法

创建一个间隔一秒执行一次函数的定时器。

    setInterval(function(){
 
      // 函数体
 
    }, 1000)

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

    let time = setInterval(function(){
 
      // 函数体
 
    }, 1000)
 
 
 
    // 关闭定时器
 
    clearInterval(time);

（9）、事件[event]

1）、概念

是指文档（DOM）或者浏览器窗口（BOM）中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。或者说，事件是JavaScript和DOM之间进行交互的桥梁。

2）、事件三要素

1. 事件源
2. 事件类型
3. 事件处理程序

3）、事件执行步骤

<body>
 
    <button id="btnTime">查看当前时间</button>
 
    <div style="margin-top: 20px;">
 
        <span></span>
 
    </div>
 
</body>
 
<script>
 
    // 获取绑定事件源
 
    var btn = document.getElementById("btnTime");
 
    var sp = document.getElementsByTagName("span");
 
    // 事件类型--onclick
 
    btn.onclick = function(){
 
        // 事件处理
 
        sp[0].innerHTML = getDateTime();
 
    }
 
    // 获取当前时间
 
    function getDateTime(){
 
        var date = new Date();
 
       
 
        let year = date.getFullYear();
 
        let month = date.getMonth() + 1;
 
        let day = date.getDate();
 
        return year + '年' + month + '月' + day + '日'
 
    }
 
</script>

4）、事件处理程序

1. DOM0级事件

1. Html事件一般不推荐使用，使用HTML事件不能将HTML与JS进行分离。

<body>
 
    <button id="btn" onclick="clickAlert()">点击</button>
 
<script>
 
    // 弹出框
 
    function clickAlert(){
 
        alert("弹出！");
 
    }
 
</script>
 
</body>

1. DOM0级事件，无法为同一元素添加多个事件，事件会被覆盖。

<body>
 
    <button id="btn">点击</button>
 
    <script>
 
        var btn = document.getElementById("btn");
 
 
 
        btn.onclick = function(){
 
            alert("弹出！");
 
        }
 
    </script>
 
</body>

2. DOM2级事件

DOM2级事件可以为同一元素添加多个事件。

<body>
 
    <button id="btn">点击</button>
 
    <script>
 
        var btn = document.getElementById("btn");
 
 
 
        btn.addEventListener("click", function(){
 
            alert("弹出！");
 
        })
 
        btn.addEventListener("click", function(){
 
            console.log("信息提示！");
 
        })
 
    </script>
 
</body>

5）、事件类型——鼠标事件

1. BOM

八、正则表达式

（1）、概念

        正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。

正则表达式 – 教程 | 菜鸟教程

（2）、标识符 "/"、"\"

"/"是正则表达式开始和结束的标记；

"\"表示转义符

（3）、修饰符- 匹配、检索

标记不写在正则表达式里，标记位于表达式之外。

九、JS的事件函数

1. Is NaN();

用于判断一个变量是否为非数值，返回布尔型。