
<head>
 
    <!-- 内嵌式 -->
 
    <script text=text/javascript>
 
        alert('弹出警示框');
 
        prompt('用户输入框')
 
        document.write('向body输出一个内容。');
 
        console.log('向控制台输出，给程序员测试用的');
 
        // js单行注释 快捷键ctrl+/
 
        /* 多行注释 默认快捷键shift+alt+a
        多行注释   vscode中修改快捷键的方式：文件-首选项-键盘快捷方式可以自己修改。
        多行注释 */
 
    </script>
 
    <!-- 外部js 用script双标签加上src位置 -->
 
    <script src=my.js></script>
 
</head>
 
<body>
 
    <!-- 行内式 -->
 
    <input type=button value=点击此处 onclick=alert('alert是弹出框的意思，点击后弹出此内容')>
 
</body>

内嵌比较常用。

修改快捷键：vscode à 首选项按钮 à 键盘快捷方式 à 查找原来的快捷键 à 修改为新的快捷键 à 回车确认

变量：

用来存放数据的容器，可以通过变量名获取数据，数据可以修改。

（本质：变量是程序在内存中申请的一块用来存放数据的空间。）

使用变量：

1、声明变量（用var关键字声明变量）
2、赋值给变量名赋值
3、输出结果
4、变量的初始化


// 声明了一个age变量
 
        var age;
 
        // 给变量age赋值，把值存入这个变量中
 
        age = 10;
 
        // 输出结果
 
        console.log(age);
 
        // 变量的初始化：声明一个变量并赋值，
 
        var myname = '变量的初始化';
 
        console.log(myname);

变量调用：


// 用户输入姓名 存储到一个myname的变量里面
 
        var myname = prompt('请输入您的名字');
 
        // 输出这个用户名
 
        alert(myname);
 
        document.write(myname);

更新变量：

一个变量被重新赋值后，原有值会被覆盖，变量以最后一次赋值结果为准。


var age=18;
 
        var age=21;
 
        //age为21

声明多个变量：

变量之间要用逗号隔开。

不能用 var a=b=c=10;

(相当于 var a=undefined, b=undefined, c=10；)


// 声明多个变量
 
        var age = 18,
 
            name = 'wjw',
 
            gz = 20000;

声明变量的特殊情况：

变量的命名规范：

数据类型：

不同数据的存储空间不同，根据类型划分存储空间。

JavaScript是一种弱类型或者说动态语言，意味着不用提前声明变量的类型，在程序运行过程中会被自动确定。(在代码运行时，变量的数据类型由js引擎根据=右边的变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型)。

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的数据类型。


// 变量的数据类型可以变化
 
        var x = 1;
 
        var x = 'bill';

数据类型的分类：

复杂数据类型才有属性和方法（对象才有属性和方法）

数字进制：

常见的有二进制、八进制、十进制、十六进制。

在js中八进制前面加0，十六进制前面加0x。

数字型范围：

JavaScript中数值的最大值最小值：


// JavaScript中最大值和最小值
 
        alert(Number.MAX_VALUE); //1.7976931348623157e+308
 
        alert(Number.MIN_VALUE); //5e-324

数字型三个特殊值：


        alert(Infinity);//Infinity,表示无穷大，大于任何数值。
 
        alert(-Infinity);//-Infinity,表示无穷小，小于任何数值。
 
        alert(NaN);//NaN a number,代表一个非数值。

isNaN()判断非数字:


// isNaN()这个方法用来判断非数字  并且返回一个值  如果是数字返回false 如果不是数字返回true。
 
        console.log(isNaN(12)); //false
 
        console.log(isNaN('asd')); //true

字符串型

可以是引号中的任意文本，语法为双引号““和单引号‘’

Js推荐使用单引号。Js可以用单引号嵌套双引号，或者双引号嵌套单引号，（外单内双，外双内单）

转义字符：都是以反斜杠 \ 开头的。转义字符要写在引号里面。

字符串长度，可以通过用length属性来获取字符串长度。


// 获取字符串长度
 
        var a = '123456';
 
        alert(a.length); //显示6

字符串拼符号 +

多个字符串可以用加号拼接起来，只要有字符串和其他类型的相拼接最终结果都是字符串类型。（口诀：数值相加，字符相连）

变量不要写到字符串里面，是通过和字符串相连接的方式实现的。


 // 变量不要写到字符串里面，是通过和字符串相连接的方式实现的。
 
        var age = 19;
 
        console.log('w' + age + '岁'); //w19岁

变量和字符串相连的口诀：引引加加。

布尔型：

布尔类型有两个值：true（真）和false（假）

布尔类型和数值型相加的时候，true的值为1，false的值为0；

获取变量数据类型：typeof用来获取检测变量的数据类型。

Prompt（用户输入框）：取过来的值是字符型的。

字面量：在源代码中一个固定值的表示法。（字面量表示如何表达这个值。）

数据类型的转换：

把一种数据类型转换成另一种数据类型

转换成字符串类型：

把数字型转换成字符串型变量.toString()

利用String(变量)

利用加号+拼接字符串的方法实现转换效果隐式转换。

转换成数字型：

注意单词大小写，隐式转换在进行算数运算时，js自动转换了数据类型。

用parseInt()和parseFloat()括号里如果是数字开头后面为字符串，会去掉字符串显示；如果是字符串开头则是NaN

两个带引号的数字相-/*都会变成数字型的计算。


 // parseInt(变量)把字符型转换成数字型 得到的是整数
 
        console.log(parseInt('3.14')); //3 取整
 
        console.log(parseInt('210pxabc')); //120 会去掉数字后面的其他字符
 
        console.log(parseInt('rem120px')); //NaN 开头只能为数字
 
        // parseFloat(变量)把字符型转换成数字型 得到的是小数，浮点数
 
        console.log(parseFloat('3.14')); //3.14 得到小数部分
 
        console.log(parseFloat('210pxabc')); //120 会去掉数字后面的其他字符
 
        console.log(parseFloat('rem120px')); //NaN 开头只能为数字

转换成布尔型：

只有一种方法，用Boolean（）函数，转换成布尔型。

代表空、否定的值都会被转换成false，如：‘’、0、NaN、null、undefined。

其余值都会被转换成true。

标识符、关键字、保留字

标识符：指开发人员为变量、属性、函数、参数取得名字。不能是关键字或者保留字。

关键字：指js本身已经使用了的字，不能用他们当变量名、方法名。

保留字：是预留的关键字，未来可能会成为关键字的字，也不能用他们当变量名或者方法名。

JavaScript运算符：

也被称为操作符，用于实现赋值，比较和执行算数运算等功能的符号。

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

最好在运算符左右加一个空格。

浮点数的精度问题：

浮点数值的最高精度是17位小数，但在进行运算时其精确的远远不如整数。


 // 浮点数的算数运算里面会有精度问题
 
        console.log(0.1 + 0.2); //0.30000000000000004
 
不要直接判断两个浮点数是否相等。
 
// 不能直接用浮点数来进行相比较， 是否相等
 
        var num = 0.1 + 0.2;
 
        console.log(num == 0.3); //false

表达式和返回值

表达式是由数字、运算符、变量等以能求出数值的有意义的排列方法所得的组合。

表达式最终都有一个结果，返回给我们称为返回值。

递增（++）和递减（--）运算符：

可以放在变量前也可以放在变量后，放在变量前时，称为前置递增（递减）运算符，放在变量后时，称为后置递增（递减）运算符。注意：递增和递减运算符必须和变量配合使用。

前置递增（减）运算符：先自加（减），后返回值。

后置递增（减）运算符：先返回值，后自加（减）。

比较运算符：

两个数据进行比较时用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

逻辑运算符：

用布尔值运算的运算符，返回值也是布尔值。与，两边真都为真；或两边为假才为假；非，真为假，假为真。注意短路运算；（短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;）

赋值运算符：

用来把数据赋值给变量的运算符。

运算符的优先级：

一元运算符里面的逻辑非优先级很高

逻辑与比逻辑或的优先级要高

JavaScript流程控制：

有三种流程控制，顺序，分支，循环。

顺序结构：程序按照代码的先后顺序，依次执行。

分支结构：

根据不同的条件，执行不同的路径代码（执行过程中多选一），从而得到不同的结果。

if语结构：


// 语法结构
 
        if (条件表达式) {
 
            //执行语句
 
        }
 
        //if里面的表达式为真则执行语句，为假则不执行。

if else语句结构：


if (条件表达式) {
 
            //条件表达式为真执行语句
 
        } else {
 
            //否则执行
 
        }

if else if语句


if (条件表达式1) {
 
            //条件表达式为真执行语句1
 
        } else if （条件表达式2）{
 
            //否则执行语句2
 
        }else if（条件表达式3） {
 
            //否则执行语句3
 
        }else {
 
            //否则执行最后的语句
 
        }

三元表达式：

由三元运算符组成的表达式。

条件表达式？表达式1：表达式2

如果表达式为真，返回表达式1的值，为假返回表达式2的值。

switch语句：

也是多分支语句，基于不同的条件来执行不同的代码，当要针对变量设置一系列的特定值的选项时，就可以用switch。

语法结构：

switch：多选一

value:值

case：小例子或者选项的意思


switch (表达式) {
 
            case value1:
 
                执行语句1;
 
                break;
 
            case value2:
 
                执行语句2;
 
                break;
 
            default:
 
                执行最后的语句;
 
        }

注：开发里面，表达式经常写成变量。

表达式里面的值和case里面的值相匹配的时候是全等才可以执行。（必须是值和数据类型一致才可以执行语句）。

如果当前的case里面没有break则不会退出switch，而是会继续执行下一个case。

循环：

在循环中，一组被重复执行的语句称为循环体，能继续反复执行取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称为循环语句。

for 循环


//for循环语法结构
 
         for(初始化变量 ; 条件表达式 ; 操作表达式){
 
             //循环体
 
         }

初始化变量：用var声明的一个普通变量，用于作为计数器使用。初始化变量在for循环中只执行一次。

条件表达式：循环的条件，决定循环是否继续进行，就是终止的条件。

操作表达式：循环后执行的操作，经常用于计数器变量的更新（递增或者递减）。

双重循环：循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个

for 循环，这样的 for 循环语句我们称之为双重for循环。


 for(外层初始化变量 ;外层 条件表达式 ; 外层操作表达式){
 
             //循环体
 
 for(内层初始化变量 ;内层 条件表达式 ; 内层操作表达式){
 
             //循环体
 
         }  
 
 }

外层循环执行一次，内层循环执行一轮。

while循环：

语法结构：


//当条件为真时，执行循环体，否则退出循环体
 
        while(条件表达式){
 
            //循环体
 
        }

do while循环：

语法结构：


 // 先执行一次循环体在判断是否满足条件。
 
        do{
 
            //循环体
 
        }while(条件表达式)

continue和break

continue关键字：用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的语句就会少执行一次）

break关键字：用于立即跳出整个循环（循环结束）

JavaScript命名规范：

标识符命名规范：

变量、函数命名要有意义

变量的名称一般名词

函数的名称一般用动词

JavaScript数组：array

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是将一组数据集合存储在单个变量名下的方式。

创建数组的方式：

利用new创建数组：(A要大写)


 //  数组的创建
 
        var 数组名 = new Array();
 
        var arr = new Array(); //创建一个新的空数组
 
        var arr = new Array(2); //创建数组,数组长度为2，里面有两个空的数组元素（一个值代表长度，并且为空的值）
 
        var arr = new Array(2，3); //创建数组[2,3]

利用数组字面量 [ ] 创建数组：[里面写数组元素即可]


//利用数组字面量创建数组[]
 
        var 数组名 = [];
 
        var arr = [];

数组里面的数据一定要用逗号分隔；数组里面的数据称为元素；数组字面量是方括号；声明数组并赋值称为数组的初始化；数组里面的元素可以是任意类型的数据。

获取数组元素：

数组的索引（下标）：用来访问数组元素的序号（数组下标从0开始）。

数组可以通过索引来访问（获取，得到）、设置、修改对应的数组元素，我们可以通过“数组名[索引]"的形式来获取数组中的元素。

格式：数组名[索引号];

数组长度：

数组名.length可以访问数组元素的长度（数组长度)。数组的长度是元素个数，不要和索引号混淆了。

数组中新增元素：

通过修改length长度以及索引号增加数组元素

1、可以通过修改length长度来实现扩容的目的。length属性是可读写的。数组名.length = 长度;

2、修改索引号的方式新增数组元素。追加数组元素

数组名[索引号] = 值;

不要直接给数组名赋值，否则会覆盖掉之前的数组元素。


// length的秒用
 
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
 
        var newArr = [];
 
        // 刚开始 newArr.length 就是 0
 
        for (var i = 0; i < arr.length; i++) {
 
            if (arr[i] >= 10) {
 
                // 新数组索引号应该从0开始 依次递增
 
                newArr[newArr.length] = arr[i];
 
            }
 
        }
 
        console.log(newArr);

函数：

封装了一段可以被重复执行调用的代码块，目的：就是让大量代码被重复使用。

使用函数：声明函数和调用函数。


// 函数：声明函数
 
        function 函数名(形参,形参) {
 
            //函数体
 
        }
 
        // 调用函数
 
        函数名(实参,实参);

function是声明函数的关键字，全部小写。

函数是做某件事情，函数名一般是动词。

函数不调用自己不执行。（声明函数本身并不会执行代码，只有调用函数才会执行函数体代码）

调用函数时，不要忘记了小括号。

函数的封装：就是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。

形参和实参：

在声明的小括号里面的是形参，在函数调用的小括号里面是实参。

形参是形式上的参数，实参是实际上的参数，函数调用时传递的参数实参是传递给形参的。

多个参数之间用逗号隔开。新参可以看作是不用声明的变量。新参和实参的个数要匹配；如果实参个数多于形参个数，则会取到新参的个数，多余的不取值；如果实参个数少于形参个数，则多余的形参定义为undefined，则最终结果为NaN。尽量使形参实参个数相匹配。JavaScript中新参不传值时默认值为undefined。

函数的返回值：return 需要返回的结果；

函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名（）通过return实现的。

只要函数遇到return 就把后面的结果返回给函数的调用者函数名（）=return后面的结果。

注意：return：终止函数，后面的代码不会被执行。只能返回一个值，以最后一个值为准，可以利用数组或者对象来返回多个值。函数如果有return则返回的是return后面的值，如果没有return则返回的是undefined。

区别：

break：结束当前的循环体。

continue：跳出本次循环，继续执行下次循环。

return：不仅可以退出循环，还可以返回return语句中的值，同时还能结束当前函数体内的代码。

arguments的使用：

当不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上，他是当前函数的一个内置对象。所有函数都内置了一个argument对象，argument对象中存储了传递的所有实参。

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

伪数组具有以下特点：（并不是真正意义上的数组）

具有length属性。

按索引方式存储数据。

不具有数组的push，pop等方法。


// arguments的使用
 
        function fn() { //可以不写形参。下面有arguments
 
            console.log(arguments); //里面存储了所有传递过来的实参
 
        }
 
        fn(1, 2, 3);//[1,2,3]  伪数组的展示形式
 
        fn(1, 2, 3, 4);//[1,2,3,4]

也可以按照数组的方式遍历arguments（可以当作数组名来用）


     // 可以按照数组的方式遍历arguments
 
            for (var i = 0; i < arguments.length; i++) {
 
            }

只有函数才有arguments对象，而且是每个函数都内置好了这个arguments对象。

函数可以调用另一个函数，嵌套调用，但不能嵌套定义。

函数声明的两种方式：

利用函数关键字function自定义函数：


 // 函数：声明函数
 
        function 函数名(形参,形参) {
 
            //函数体
 
        }

函数表达式声明函数：


 //函数表达式
 
        // var 变量名 = function() {};//fun是变量名不是函数名，这个函数也叫匿名函数。
 
        var fun = function() {
 
                console.log('函数表达式方式声明函数');
 
            }
 
            //调用函数
 
        fun();

fun是变量名而不是函数名。调用通过调用变量来使用。

函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数。

函数表达式也可以传递参数。

JavaScript作用域：

就是代码名字（变量）在某个范围内起作用和效果。目的是为了提高程序的可靠性，更重要的是减少命名冲突。

JavaScript作用域（es6之前的）分为两大类：全局作用域、局部作用域。

全局作用域：整个script标签或者是一个单独的js文件

局部作用域（函数作用域）：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用。

变量的作用域：

在JavaScript中，根据作用域的不同，变量可以分为两种：全局变量和局部变量。

全局变量：在全局作用域下用var声明的变量。（在函数外部声明的变量；特殊情况下，在函数内不使用var声明的变量也是全局变量，但不建议这样使用。）

局部变量：在在局部作用域（函数内部）的变量。注意：函数的形参也可以看作是局部变量。

从执行效率来看全局变量和局部变量：

全局变量只有浏览器关闭的时候才会销毁，比较占内存资源。

局部变量当我们程序执行完毕就会销毁，比较节约资源。

现阶段js没有块级作用域，在es6的时候会新增块级作用域 { } 用花括号包含的。

作用域链：内部函数访问外部函数的变量，采用的是链式查询的方式来决定取那个值，这种结构称为作用域链。就近原则。

JavaScript预解析：

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

js引擎运行js分为两步：

预解析： js 引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面。

代码执行：按照代码书写顺序从上往下执行。


 // 预解析
 
        // 1、直接使用num
 
        console.log(num);
 
        //2、先使用，后定义 结果为 undefined
 
        console.log(num);
 
        var num = 10 ;//undefined 
 
//变量预解析，相当于：
 
  var num ;
 
 console.log(num);
 
        var num = 10 ;
 
        //3、先调用函数，后使用关键字声明函数 可以的
 
        fn();
 
        function fn(){
 
            console.log(11);//11
 
        }
 
        //4、先调用后使用函数表达式声明函数 会报错
 
        fun();
 
        var fun=function(){
 
            console.log(22);//报错  （和变量差不多的原因）函数表达式的调用函数必须写在函数表达式的后面。
 
        }

预解析分为两个部分：变量预解析（变量提升）和函数预解析(函数提升）

变量提升：把所有的变量声明提升到当前作用域的最前面，并不提供赋值操作。

函数提升：把所有的函数声明提升到当前作用域的最前面，并不调用函数。

例子1：


var num = 10;
 
        fun();
 
        function fun() {
 
            console.log(num);
 
            var num = 20;
 
        } //结果undefined
 
        //相当于：
 
        var num;
 
        function fun() {
 
            var num;
 
            console.log(num); //此时num为undefined
 
            num = 20;
 
        }
 
        num = 10;
 
        fun();

例子2：


 f1();
 
        console.log(c);
 
        console.log(b);
 
        console.log(a);
 
        function f1() {
 
            var a = b = c = 9;
 
            //集体声明要用逗号隔开：a=9,b=9,c=9
 
            //这个地方相当于 var a=9;b=9;c=9;b和c直接赋值没有var声明 ，当成全局变量看。
 
            console.log(a);
 
            console.log(b);
 
            console.log(c);
 
        } //结果为99999报错
 
        // 相当于
 
        function f1() {
 
            var a;
 
            a = b = c = 9;
 
            console.log(a);
 
            console.log(b);
 
            console.log(c);
 
        }
 
        f1();
 
        console.log(c);
 
        console.log(b);
 
        console.log(a);// 相当于a没有声明没有赋值，会报错。

js对象：

生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象由属性和方法组成。

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

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

对象的属性名不强制要求遵守标识符规范，但是尽量使用标识符规范去做，如果要使用特殊的标识符不能采用 . 的方式，要用另一种方式，语法：对象["属性名"]=属性值。读取时也使用这种方法。

使用[]这种形式去操作属性，会更加的灵活，在[]里可以直接传递一个变量，这样变量值是多少就读取哪一个属性。

js对象的属性值也可以是任意的数据类型。甚至也可以是一个对象。

创建对象三种方式：

利用字面量创建对象 : 就是花括号里面 {} 包含了表达这个具体事物（对象）的属性和方法。


// 利用字面量创建对象 
 
        // var obj = {}; //创建了一个空对象
 
        var obj = {
 
            uname: '张三',//用逗号隔开每个属性。
 
            age: 18,
 
            sex: '男',
 
            sayHi: function() {//方法用 名字：加上匿名函数来创建
 
                console.log("hi");
 
            }
 
        }

里面的属性或者方法用键值对的形式（键属性名：值属性值）

多个属性或者方法用逗号隔开。最后一个不用跟逗号

方法冒号后面跟的是一个匿名函数。

使用对象：

调用对象的属性：我们采取对象名 . 属性名的形式；还有一种方法对象名 [ ' 属性名 ' ]

调用对象的方法：采用对象名 . 方法名 ( ) 千万别忘记小括号。

利用 new Object创建对象：

利用等号 = 赋值的方法来添加对象的属性和方法


//利用 new Object创建对象
 
        var obj = new Object(); //创建了一个空对象
 
        obj.uname = '张三';
 
        obj.age = 18;
 
        obj.sex = '男';
 
        obj.sayHi = function() {
 
            console.log('hi');
 
        }

每个属性和方法之间用分号；结束使用对象：

的形式；还有一种方法对象名 [ ' 属性名 ' ]

调用对象的方法：采用对象名 . 方法名 ( ) 千万别忘记小括号。

利用构造函数创建对象：

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


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

调用构造函数：使用new关键字。


//使用构造函数
 
        new 构造函数名();

构造函数的名字，首字母要大写。

构造函数不需要return就可以返回结果。

我们调用构造函数必须使用new。

我们只要new 函数名() 调用函数就创建一个对象。

我们的属性和方法前面必须添加this.

使用构造函数创建的对象：

调用对象的属性：我们采取对象名 . 属性名的形式；还有一种方法对象名 [ ' 属性名 ' ]

调用对象的方法：采用对象名 . 方法名 ( ) 千万别忘记小括号。


//使用构造函数
 
        function Star(uname, age, sex) {
 
            this.name = uname;
 
            this.age = age;
 
            this.sex = sex;
 
        }
 
       var a =  new Star('张三', 18, '男');//调用函数返回的是一个对象。

new关键字执行过程：

new 构造函数可以在内存中创建一个空对象。

this就会指向刚才创建的空对象。

执行构造函数里面的代码给这个空对象添加属性和方法。

返回这个对象。（所以构造函数里面不需要return）

遍历对象：for...in 语句用于对数组或者对象的属性进行循环操作。

for （变量 in 对象）{

}


var obj = {
 
            name: 'pink',
 
            age: 18,
 
            sex: '男'
 
        }
 
        for (var k in obj) {
 
            console.log(k); //k 变量 输出得到的是obj对象的属性名
 
            console.log(obj[k]); //obj[k]  得到的是obj对象的属性值 注意k不加引号
 
        }

我们使用for in里面的变量喜欢写 k 或者 key。

对象可以让代码结构更清晰

对象属于复杂数据类型object

本质：对象就是一组无序的相关属性和方法的集合。

构造函数泛指某一大类，比如苹果，不管红苹果还是青苹果都统称苹果。

对象实例特指一个事物，比如这一个苹果。

for in 语句用于对对象的属性进行循环操作。

JavaScript内置对象：js语言自带的一些对象，供开发者使用。

JavaScript对象有：自定义对象、内置对象、浏览器对象。

查阅文档，MDN：网址：MDN Web Docs

MDN Web Docs (mozilla.org)

Math对象：

是一个内置对象，具有数学常数和函数的属性和方法，不是一个函数对象。（不是一个构造函数，所以不需要用new调用，可以直接使用属性和方法。

向下取整：往小的取整 1.1=1 1.9=1

向上取整：往大的取整 1.1=2 1.9=2

绝对值可以注意一下字符串隐式转换为数字型。

四舍五入：注意其他数字都是四舍五入，但是 . 5 特殊：往大了取，（负数部分注意）

Math对象中的随机数方法：random() 返回一个随机的浮点数（左闭右开）

这个方法里面不跟参数；返回参数为浮点型的伪随机数字在0（包括0）和1（不包括1）之间。

Date日期对象 :

是构造函数对象，只能通过new来调用日期对象。否则会返回字符串而不是日期。

如果里面没有参数，返回当前系统的当前时间。

参数常用写法：数字型： 2000，12，12 或者是字符串型 '2019-10-1 6:6:6' 数字型会出现问题

date方法的使用：

日期格式化：

获取当月会比返回的月份小一个月，所以要记得月份加一。

获取星期几要注意周一是1，周六是6，但是周日返回的是0。（可以做一个数组把星期天，星期一按顺序放数组里，获取的星期几可以当索引号用，注意一定要把星期天放第一个。）

获取date总的毫秒数（时间戳）不是当前时间的毫秒数，而是距离1970年1月1日过了多少毫秒


//获取date总的毫秒数  不是当前时间的毫秒数  而是距离1970年1月1日过了多少毫秒数
 
        // 1、 通过valueOf()  getTime()
 
        var date = new Date();
 
        console.log(date.valueOf()); //就是 我们现在时间距离1970年1.1总的毫秒数
 
        console.log(date.getTime());
 
        // 2、简单的写法    最常用的写法
 
        var date1 = +new Date(); //+new Date()  返回的就是总的毫秒数。
 
        console.log(date1);
 
 // 3、H5新增的 获得总的毫秒数
 
        console.log(Date.now());

倒计时效果：

1、核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的。

2、用时间戳来做。用户输入时间的总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。

3、把剩余时间总的毫秒数转换成天、时、分、秒（时间戳转换成时分秒）

转换公式如下


   var d = parseInt(times / 60 / 60 / 24); //计算天数
 
            var h = parseInt(times / 60 / 60 % 24); //计算小时
 
            var m = parseInt(times / 60 % 60); //计算分钟
 
            var s = parseInt(times % 60); //计算秒数

倒计时效果全部代码：


   // 倒计时效果
 
        function countDown(time) {
 
            var nowTime = +new Date(); //返回的是当前时间的总的毫秒数
 
            var inputTime = +new Date(time); //返回的是用户输入时间的总的毫秒数
 
            var times = (inputTime - nowTime) / 1000; //times是剩余时间总的秒数
 
            var d = parseInt(times / 60 / 60 / 24); //天
 
            d = d < 10 ? '0' + d : d; //天数没满十天前面补零
 
            var h = parseInt(times / 60 / 60 % 24); //时
 
            h = h < 10 ? '0' + h : h; //小时数没满十小时前面补零
 
            var m = parseInt(times / 60 % 60); //分
 
            m = m < 10 ? '0' + m : m; //分钟数没满十分钟前面补零
 
            var s = parseInt(times % 60); //秒
 
            s = s < 10 ? '0' + s : s; //秒数没满十秒前面补零
 
            return d + '天' + h + '时' + m + '分' + s + '秒';
 
        }
 
        console.log(countDown('2022-4-9 19:00:00')); //输入的时间
 
        var date = new Date();
 
        console.log(date);

数组对象：

检测是否为数组：

1、instanceof 运算符它可以用来检测是否为数组。


 //检测是否为数组
 
        var arr = [];
 
        var obj = {};
 
        console.log(arr instanceof Array); //true
 
        console.log(obj instanceof Array); //false

2、Array.isArray(参数) 方法用于确定传递的值是否是一个Array。H5新增的方法，ie9以上的版本才支持。


  var arr = [];
 
                var obj = {};       
 
                console.log(Array.isArray(arr));//true
 
                console.log(Array.isArray(obj));//false

添加或者删除数组元素的方法：

1、push是可以给数组追加新的元素，多个元素逗号隔开。

push（参数）参数直接写数组元素就可以了。

push完毕之后，返回的结果是新数组的长度。

原数组也会发生变化

2、pop是可以删除数组的最后一个元素

pop（）没有参数。

pop完毕之后，返回的结果值是删除的那个元素。

原数组也会发生变化

3、unshift向数组的开头添假新的元素，多个元素逗号隔开。

unshift(参数)参数直接写数组元素就可以了。

unshift完毕之后，返回的结果是新数组的长度。

原数组也会发生变化

4、shift是可以删除数组的第一个元素记住一次只能删除第一个元素

shift（）没有参数。

shift完毕之后，返回的结果是删除的那个元素

原数组也会发生变化。

数组排序：

方法：reverse（）颠倒数组中的元素顺序，无参数。方法会改变原来的数组返回新数组

方法：sort() 对数组的元素进行排序。方法会改变原来的数组返回新数组


// 翻转数组
 
        var arr = ['pink', 'red', 'blue'];
 
        arr.reverse();
 
        console.log(arr); //'blue','red','pink'
 
        // 数组排序 冒泡排序
 
        var arr1 = [13, 4, 77, 1, 7, 3, 8]
 
        arr1.sort(function(a, b) {
 
            // return a-b;升序的排列顺序
 
            return b - a; //降序的排列顺序
 
        })
 
        console.log(arr1);

数组索引的方法：

indexOf（）数组中查找给定元素的第一个索引。如果存在返回索引号，不存在返回 -1。

lastIndexOf（）在数组中的最后一个索引。如果存在返回索引号，不存在返回 -1。


 //数组索引使用方法
 
        var arr = [1, 3, 5, 2, 3, 7, 2];
 
        console.log(arr.indexOf(2)); //结果3  2的第一个索引位置是3。
 
        console.log(arr.lastIndexOf(2)); //结果为6  2的最后一个索引位置为6
 
        console.log(arr.indexOf(10)); //结果为-1   没有找到10 返回-1

数组去重：要求去除数组中重复的元素。

1、目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。

2、算法：遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。

3、利用新数组 .indexOf（数组元素）如果返回是 -1 就说明新数组里面没有该元素

封装一个去重的函数 unique 独一无二的。


    //封装一个去重的函数 unique 独一无二的
 
        function unique(arr) {     //传递旧数组
 
            var newArr = [];      //创建新数组
 
            for (var i = 0; i < arr.length; i++) {      //遍历旧数组
 
                if (newArr.indexOf(arr[i]) === -1) {    //如果新数组中没有旧数组中的元素
 
                    newArr.push(arr[i]);    //则保存在新数组中
 
                }
 
            }
 
            return newArr;
 
        }
 
        var demo = unique(['c', 'a', 'z', 'a', 'z', 'a', 'x', 'c', 'b', 'x', 'a']);
 
        console.log(demo);     //  ['c', 'a', 'z', 'x', 'b']

数组转换成字符串方法：

toString() ,把数组转换成字符串，逗号分隔每一项。返回一个字符串。

join('分隔符'）方法用于把数组中的所有元素转换为一个字符串。返回一个字符串。


  // 数组转换成字符串
 
        // 1、toString()将数组转换成字符串
 
        var arr = [1, 2, 3];
 
        console.log(arr); //[1,2,3] 数组
 
        console.log(arr.toString()); //1,2,3 字符串
 
        // 2、join(分隔符)
 
        var arr1 = ['green', 'blue', 'pink'];
 
        console.log(arr1.join()); //green,blue,pink 默认逗号分隔
 
        console.log(arr1.join('-'));//green-blue-pink

字符串对象：

基本包装类型：就是把简单数据类型包装成复杂数据类型。这样基本数据类型就有了属性和方法。

JavaScript提供了三个特殊的引用类型：String、Number、Boolean。

字符串的不可变性：是值不可变。看上去改变了内容，实际是地址改变了，内存中开辟了新的内存空间。

字符串的所有方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。

方法名：

indexOf（'要查找的字符' , 开始的位置）返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号。

lastIndexOf（）从后往前找，只找第一个匹配的。

查找字符串'abcoefoxyozzopp'中所有o出现的位置和次数

1、算法：先查找第一个o出现的位置。

2、只要indexOf返回的结果不是-1 就继续往后查找。

3、indexOf只能查找到第一个，所有后面的查找，利用第二个参数，当前索引加1，从而继续查找。

根据位置返回字符：

1.charAt（index）根据指定位置返回的字符。

2.charCodeAt（index）获取指定位置处字符的ASCII码

3.str[index] 获取指定位置处的字符（html5新增）

简单数据类型和复杂数据类型

简单类型又叫做基本数据类型或者值类型，复杂数据类型又叫做引用类型。

值类型：在存储时变量中存储的是值本身。

（简单数据类型中：null空类型，用检测类型的typeof返回值是一个空的对象类型object。如果有个变量以后打算存储为对象，暂时没想好放什么，可以先用null）

引用类型：在存储时变量中存储的仅仅是地址（引用）。

堆和栈：

堆栈空间分配区别：

1.栈（操作系统）：由操作系统自动分配释放存放函数的参数值，局部变量的值等。简单数据类型存放在栈里面。

2.堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放带堆里面。

js中没有堆栈的概念。

1.简单数据类型是存放在栈里面，里面直接开辟一个空间存放的是值

2.复杂数据类型首先在栈里面存放地址十六进制表示然后这个地址指向堆里面的数据。

Dom

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

或者XML）的标准编程接口。

文档：一个页面就是一个文档，DOM 中使用 document 表示

元素：页面中的所有标签都是元素，DOM 中使用 element 表示

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

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

根据 ID 获取元素：

返回值是拥有指定id的元素，（没找到指定id返回null，如果存在多个则返回undefined。）

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

根据标签名获取：

注意：

1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。（如果页面只有一个li，返回的还是伪数组的形式，如果页面没有这元素则返回空的伪数组。）

2. 得到元素对象是动态的

通过element对象（元素对象的统称）获取元素：

element.getElementsByTagName('标签名')；

元素对象必须是单个对象不能是集合，可以查找该元素的子元素或者后代元素，获取的时候不包括父元素自己。

根据name获取元素：

document.getElementsByName()一般用于获取表单元素

返回的是一个对象集合，使用索引获取元素

通过 HTML5 新增的方法获取

querySelector 和 querySelectorAll里面的选择器需要加符号,

比如:document.querySelector('#nav');

querySelectorAll用于返回指定选择器的所有元素对象的集合。

获取body元素

获取html元素

事件基础：

事件三要素：

1. 事件源（谁）：触发事件的元素。

2. 事件类型（什么事件）：如点击事件。

3. 事件处理程序（做啥）：事件触发后要执行的代码（函数形式）也称为事件处理函数。

执行事件步骤：

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采取函数赋值形式）

事件源 . 事件类型 = 事件处理 { }

操作元素：

element.innerText：从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去掉，会进行特殊字符转义。

element.innerHTML：起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行（w3c标准）

element.textContent:设置或者返回指定节点的文本内容，保留空格和换行。

innerText和innerHTML的区别：

1.innerText不识别html标签（原样输出）innerHtml识别HTML标签

2.这两个属性是可读的，可以获取元素里面的内容

3..innerText去除 html 标签，同时空格和换行也会去掉，innerHTM保留空格和换行。

利用 DOM 可以操作表单元素的属性：type、value、checked、selected、disabled。

操作元素样式：

1. element.style 行内样式操作

2. element.className 类名样式操作

注意：

1.JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor

2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

注意：

1. 如果样式修改较多，可以采取操作类名方式更改元素样式。

2. class因为是个保留字，因此使用className来操作元素类名属性

3. className 会直接更改元素的类名，会覆盖原先的类名。

案例：淘宝点击关闭二维码

当鼠标点击二维码关闭按钮的时候，则关闭整个二维码。

操作元素：

自定义属性的操作

1. 获取属性值：

1.element.属性获取属性值。

2.element.getAttribute('属性');

区别：element.属性获取内置属性值（元素本身自带的属性），element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性。

2.设置属性值：

element.属性 = ‘值’ 设置内置属性值。

element.setAttribute('属性', '值');

区别：element.属性设置内置属性值 , element.setAttribute(‘属性’); 主要设置自定义的属性（标准）

3.移除属性

element.removeAttribute('属性');

自定义属性：

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

1. 设置H5自定义属性

H5规定自定义属性 data- 开头做为属性名并且赋值。

2. 获取H5自定义属性

1. 兼容性获取 element.getAttribute(‘data-index’);

2. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持（index是自定的属性名）

节点操作：

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个

基本属性。

l 元素节点 nodeType 为 1

l 属性节点 nodeType 为 2

l 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

在实际开发中，节点操作主要操作的是元素节点

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

1. 父级节点

node.parentNode

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点

如果指定的节点没有父节点则返回 null

2.子节点

1. parentNode.childNodes（标准）

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

2. parentNode.children（非标准）

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返

回。

3.parentNode.firstChild ：返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

4.parentNode.lastChild ：返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

5. parentNode.firstElementChild：返回第一个子元素节点，找不到则返回null。有兼容性问题，IE9 以上才支持

6. parentNode.lastElementChild ：返回最后一个子元素节点，找不到则返回null。兼容性问题，IE9 以上才支持。

兼容性问题解决方案：

1. 如果想要第一个子元素节点，可以使用 parentNode.chilren[0]

2. 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

3. 兄弟节点

1.node.nextSibling：返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点

2. node.previousSibling ：返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

3. node.nextElementSibling ：返回当前元素下一个兄弟元素节点，找不到则返回null。兼容性问题，IE9 以上才支持。

兼容性问题解决方案：

4. node.previousElementSibling ：返回当前元素上一个兄弟节点，找不到则返回null。兼容性问题，IE9 以上才支持。

兼容性问题解决方案：

创建节点

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，

是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点

1.node.appendChild((child) 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的

after 伪元素。

2.node.insertBefore(child, 指定元素) 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before

伪元素。

删除节点

node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。

复制节点(克隆节点)

node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点.

注意：

1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

DOM重点核心

事件高级：

注册事件：传统注册，方法监听。

传统注册特点：唯一性。

方法监听：addEventListener（）方法。

事件类型是字符型，要加引号，且不带on。

useCapture：默认false表示，冒泡阶段完成事件处理，设置为ture时，表示捕获阶段完成事件处理。

同一个元素同一个事件可以添加多个侦听器（事件处理程序）

实际开发中常用事件冒泡。有些事件是没有事件冒泡的：onblur,onfocus,onmouseenter,onmouseleave。

同一个元素，同一个事件可以添加多个侦听器（事件处理程序）

删除事件：

1.传统注册方式DOM对象 . onclick = null; //传统方式删除

2.方法监听注册方式removEventListener()和detachEvent()

DOM对象 . detachEvent(type,callback); //早期ie浏览器版本

DOM对象 . removeEventListener(type,callback); //标准浏览器

参数callback表示事件处理程序的名称，即函数名（添加事件时不能用匿名函数，要用函数名创建。那么，此处写上函数名即可删除，不需要加小括号调用）

事件流：

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。（事件传播的过程就是事件流）

事件对象：

event就是一个事件对象，写到侦听函数里面小括号里面，当成形参。

事件对象之一有了事件才会存在，是系统自动创建的，不需要我们传递参数。事件对象是事件一系列相关数据的集合，跟事件相关的信息。（事件对象是事件一系列相关数据的集合）

事件对象可以自己命名，如：event，evt，e。（事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象

event，它有很多属性和方法。）

阻止默认行为：

有些html标签具有默认行为，可以用preventDefault()方法和returnValue属性，禁止浏览器执行元素的默认行为。（只有事件对象的cancelable属性设置为true才可以使用这个方法取消其默认行为。早期版本用returnvalue属性）

事件冒泡：开始由最具体的元素接受，然后逐级向上传播到DOM最顶层节点。

阻止事件冒泡：利用事件对象里面的stopPropagation（）方法。实现禁止所有浏览器的事件冒泡行为。

事件委托：也称为事件代理，在jquery里面称为事件委派。

（不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。提高了程序的性能）

鼠标事件：

1.禁止鼠标右键菜单：contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。（禁用右键菜单）

preventDefault()阻止默认行为。

2.禁止鼠标选中（selectstart开始选中）

鼠标事件对象：event对象代表事件的状态，跟事件相关的一系列信息的集合。

MouseEvent和键盘事件对象KeyboardEvent.

鼠标事件对象：1.client鼠标在可视区的x和y坐标。

2.page鼠标在页面文档的x和y坐标。（常用，兼容性问题）

3.screen鼠标相当于电脑屏幕的x和y坐标。

实现代码：

键盘事件：

注意：

1. 如果使用addEventListener 不需要加 on

2. onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。

3. 三个事件的执行顺序是： keydown -- keypress --- keyup

注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。

在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）

Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

例：模拟京东按键输入内容:

① 核心思路：检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面

② 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键

③ 搜索框获得焦点：使用 js 里面的 focus() 方法

BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。、

BOM构成：包含DOM

window 对象是浏览器的顶级对象，它具有双重角色。

1. 它是 JS 访问浏览器窗口的一个接口。

2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

注意：window下的一个特殊属性 window.name

window 对象的常见事件

1 窗口加载事件

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS

文件等), 就调用的处理函数。

注意：

1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，

再去执行处理函数。

2. window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。

3. 如果使用 addEventListener 则没有限制

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。(如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适)

2 调整窗口大小事件

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。(常用于响应式布局）

注意：

1. 只要窗口大小发生像素变化，就会触发这个事件。

2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度.

定时器： setTimeout() 和setInterval()

定时器里面的this指向的是window。

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。（setTimeout() 这个调用函数我们也称为回调函数 callback）

1. window 可以省略。

2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()' 三种形式。第三种不推荐

3. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。

4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

停止 setTimeout() 定时器：

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。

注意：

1. window 可以省略。

2. 里面的参数就是定时器的标识符

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

注意：

1. window 可以省略。

2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 '函数名()' 三种形式。

3. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

停止 setInterval() 定时器:

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

注意：

1. window 可以省略。

2. 里面的参数就是定时器的标识符。

小技巧：button里面的内容由innerHTML改变。

第一次执行也是由间隔毫秒数的，因此刚刷新页面会有空白（一秒延迟）最好使用封装函数的方式，这样可以先调用一次这个函数，防止最开始由空白）

this指向

1. 如果将函数作为对象的方法调用，this将会指向该对象。

2. 直接通过函数名调用函数时，this指向的是全局对象window。（注意定时器里面的this指向window）

3.构造函数中this指向构造函数的实例（指向新创建的对象）

原型对象函数里面的this指向实例对象。

更改this指向：

apply（）方法：

fun.apply(thisArg,[argArray])

thisArg：在fun函数运行时指定的this值。

aryArray：传递的值，必须经过包含在数组里面。

call() 方法：

fun.call(thisArg,agr1,arg2.....)

thisArg：当前调用函数this的指向对象

arg：参数。（传递参数）

bind（）方法：

fun.bind(thisArg,arg1,arg2.....)

thisArg：在fun函数运行时指定的this值。

arg：参数。（传递参数）

返回由指定的this值和初始化参数改造的原函数拷贝。（新函数）

bind方法的含义是绑定，用于调用函数前指定this的含义，实现提前绑定的效果，在绑定时，还可以提前传入调用函数时的参数。

如果有点函数我们不需要立即调用，但是又想改变这函数内部的this指向，此时可以用bind（）；（他不会调用原来的函数，其他两个都会调用函数）

注意：

在方法中，this 表示该方法所属的对象。如果单独使用，this 表示全局对象。

在函数中，this 表示全局对象。在函数中，在严格模式下，this 是未定义的(undefined)。

在事件中，this 表示接收事件的元素。

js执行机制：

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

同步和异步：

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。

同步任务：同步任务都在主线程上执行，形成一个执行栈。

异步任务：

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）

location对象：

提供了与当前显示文档的相关信息，提供了用户获取和设置窗体的URL，并且可以用来解析URL。

在URL中包含了网络协议，服务器名称，服务器的主机名，端口号，资源名称字符串，参数，以及锚点。

search：返回当前URL的查询部分（?之后的部分，也就是参数）

href 可以设置跳转页面.

assign：记录浏览历史，可以回退.

navigator 对象:

下面前端代码可以判断用户那个终端打开页面，实现跳转:

history 对象:

Screen 对象:

元素偏移：

元素偏移量 offset 系列：

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 获得元素距离带有定位父元素的位置（如果没有父亲或者父亲没有定位则以body为准）

2.获得元素自身的大小（宽度高度）

3. 注意：返回的数值都不带单位。

例：获取鼠标在盒子内的坐标

元素可视区 client 系列：

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列

的相关属性可以动态的得到该元素的边框大小、元素大小等。（可视区的大小）

元素 scroll 系列属性：

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏

掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

页面被卷去的头部兼容性解决方案：需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法： 1. 声明了 DTD，使用 document.documentElement.scrollTop 2. 未声明 DTD，使用 document.body.scrollTop 3. 新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持

立即执行函数：

不需要调用，立马就可以执行的函数。

写法、:（function（）{}）（）第二个小括号可以看作是调用。或者（function（）{}（））；

例如：

（function（）{console.log(a+b)}）(1,2)

结果为三。

立即执行函数最大作用是独立创建了一个作用域，里面所有变量都是局部变量，不会有命名冲突的情况。

mouseenter 和mouseover的区别

动画函数封装

动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤： 1. 获得盒子当前位置 2. 让盒子在当前位置加上1个移动距离 3. 利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位，才能使用element.style.left

2 动画函数简单封装注意函数需要传递2个参数，动画对象和移动到的距离。

3 动画函数给不同元素记录不同定时器如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

4 缓动效果原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路： 1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。 2. 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长 3. 停止的条件是：让当前盒子位置等于目标位置就停止定时器 4. 注意步长值需要取整

5 动画函数多个目标值之间移动可以让动画函数从 800 移动到 500。当我们点击按钮时候，判断步长是正值还是负值 1. 如果是正值，则步长往大了取整 2. 如果是负值，则步长向小了取整

6 动画函数添加回调函数回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。回调函数写的位置：定时器结束的位置。

7 动画函数封装到单独JS文件里面因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。 1. 单独新建一个JS文件。 2. HTML文件引入 JS 文件。

5.1 节流阀防止轮播图按钮连续点击造成播放过快。节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。开始设置一个变量 var flag = true; If(flag) {flag = false; do something} 关闭水龙头利用回调函数动画执行完毕， flag = true 打开水龙头

移动端网页特效

本地存储

js面向对象

面向对象的核心是对象，面向过程的核心是对象。

面向对象的特征；封装性，继承性，多态性。。

封装性是隐藏内部的实现细节，之对外开放操作接口，接口就是对象的方法。

继承性是指一个对象继承另一个对象的成员，从而在不改变另一个对象的前提下进行扩展。

多态性是指同一个操作作用域不同的对象，会产生不同的执行结果。

es6面向对象语法：

类和对象：

类是对象的模板，对象是类的实例。

类：

用class关键字来定义一个类，在类中可以定义constructor()构造方法，用来初始化对象的成员。

语法：

class name {

//class body

}

name是类名。

类必须要用new实例化

例如：

var xx=new name();

命名习惯：

类名使用首字母大写的形式，（如果一个类中没有编写构造方法，那么程序会在类中自动创建一个构造方法。

constructor（）方法是用于传递参数，返回实例对象（类的构造函数）。

在类中可以编写对象共有的方法，在定义方法时，不需要使用function关键字，并且多个方法之间不需要用逗号分隔。

继承：

类的继承用extends关键字。

1.在es6中类没有变量提升，所以必须先定义类，才能通过类实例化对象。

2.类里面的共有属性和方法一定要加 this使用。

3.constructor 里面的this指向实例对象，方法里面的this指向这个方法的调用者。

（可以定义一个全局变量that，将constructor 里面的this 保存给全局变量 that = this，这样在任何地方都可以使用that.方法，来用conseructor里面的属性和方法了。

super关键字：

用于访问和调用在父类上的方法。可以调用父类的构造方法，也可以调用父类的普通方法。

super相当于特指父类：

父类.方法（）=super.方法（）

父类方法（）=super（）调用父类的构造方法。

继承中的属性和方法查找原则是就近原则。

当子类和父类具有同名方法时，由于最后实例化的对象是子类对象，那么子类对象就会覆盖父类对象

想要父类被调用就要在子类的同名方法上面先调用一次父类的同名方法。

super必须在子类的this之前调用。（子类必须先调用父类的构造方法，才能继续执行自己的构造方法。

构造函数与原型对象：

构造函数：主要用于创建对象，并为对象成员赋初值。可以把对象的一些公共的属性和方法抽取出来，封装到构造函数中。构造函数里不需要return。

注意：构造函数用于创建某一类对象，首字母要大写。构造函数要和new一起使用才有意义。

静态成员和实例成员：

实例成员是指实例对象的成员，静态成员是指通过类或构造函数访问的对象。

实例对象只能通过实例化对象访问，实例成员是构造函数内部通过this添加的成员。

注意：在静态方法中不能使用this访问实例对象，因为静态方法与实例对象没有关联，在静态方法中如果使用this，访问到的是构造函数本身。

使用类可以节约内存空间。一般情况下，公共属性定义到构造函数里面，公共的方法放到原型对象里面。

原型对象：作用是共享方法。

每个构造函数都有一个原型对象的存在，这个原型对象通过构造函数的prototype属性来访问。

构造函数通过原型对象分配的函数是所有对象共享的。原型对象其实就是所有实例对象的原型。

构造函数名 . prototype . 方法=......... //建原型对象里面的方法

可以把不变的方法直接定义在prototype对象上这样所有对象的实例就可以共享这些方法。

原型链：

对象有原型对象，原型对象也有原型对象，这就形成了链式结构简称原型链。

访问对象的原型对象用 _proto_ 属性，这个属性指向了对象的原型对象。（实际开发中不建议使用该属性，非标准属性）

方法的查找规律：首先查看实例对象身上是否有该方法，如果有就执行这个对象上的该方法，如果没有由于有_proto_的存在就去构造函数原型对象prototype上去找此方法。

_proto_和prototype是等价的。

通过实例对象的constructor属性就可以访问实例对象的构造函数。

用赋值的方式修改原型对象会直接覆盖constructor属性，以对象的形式赋值的所以会覆盖原构造函数，手动添加一个constructor属性指向构造函数即可。（用constructor：构造函数名的方法。）

原型对象的原型对象：

1.每个构造函数都有一个prototype属性指向原型对象。

2.原型对象通过constructor属性指向构造函数。

3.通过实例对象的_proto_属性可以访问对象。

4.Object的原型对象的_proto_属性为null。

补充：函数的构造函数

在js中，函数也可以像对象一样拥有属性和方法，所有函数也是对象，它也有构造函数，函数的构造函数是Function（）函数，而Function（）函数的构造函数是它本身。

数组和字符串内置对象不能给原型对象赋值操作,不能 Array.prototype={} ，只能 Array.prototype.xxx=function(){} 的方式。

继承

1.利用构造函数继承父类属性：

fun.call(thisArg,arg1,arg2,....)

thisAry ：当前调用函数this的指向对象。

org:传递的参数

2.利用原型对象继承父类方法：

不能用赋值的方式：son.prototype=Father.prototype;这样是地址赋值，如果修改了子原型对象那么父原型对象也会修改。

正确的是：

1.将父类的实例对象作为子类的原型对象

Son.prototype=new Father();

2.将原型对象的constructor属性指向子类。

Son.prototype.constructor =Son;

这样修改子原型对象父类不会受到影响。并且可以调用父类里的方法和属性。并且当子类和父类方法名相同时，子类方法可以覆盖父类。

文章中的截图基本来自于哔哩哔哩黑马pink老师教学视频中，部分来自于菜鸟教程。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/251352

JavaScript基础知识笔记_js基本笔记

浏览器执行

Js组成：

变量：

数据类型：

数字进制：

数字型范围：

字符串型

布尔型：

数据类型的转换：

转换成字符串类型：

转换成数字型：

转换成布尔型：

标识符、关键字、保留字

JavaScript运算符：

浮点数的精度问题：

表达式和返回值

递增（++）和递减（--）运算符：

比较运算符：

逻辑运算符：

赋值运算符：

运算符的优先级：

JavaScript流程控制：

分支结构：

三元表达式：

循环：

for 循环

while循环：

do while循环：

continue和break

JavaScript命名规范：

JavaScript数组：array

获取数组元素：

数组长度：

数组中新增元素：

函数：

形参和实参：

arguments的使用：

函数声明的两种方式：

JavaScript作用域：

变量的作用域：

JavaScript预解析：

js对象：

创建对象三种方式：

使用对象：

利用构造函数创建对象：

new关键字执行过程：

Math对象 ：

Date日期对象 :

数组对象：

字符串对象：

Dom

事件基础：

执行事件步骤：

操作元素：

操作元素：

自定义属性：

节点操作：

创建节点

事件高级：

删除事件：

事件流：

事件对象：

鼠标事件：

键盘事件：

BOM

window 对象的常见事件

定时器： setTimeout() 和setInterval()

this指向

更改this指向：

apply（）方法：

call() 方法：

bind（）方法：

js执行机制：

异步任务：

location对象：

元素偏移：

移动端网页特效

本地存储

构造函数与原型对象：

Math对象：