JS知识点总结

一：初始JavaScript

1.什么是JavaScript？
JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言。
脚本语言：不需要编译，运行过程中由js解释器逐行解释并执行。

2.HTML/CSS/JS的关系
HTML和CSS属于 标记语言-描述类语言
HTML决定页面的结构和内容，CSS给页面添加样式。
JS脚本语言-编程类语言
JS实现业务逻辑和页面控制(决定功能)。

3.浏览器执行JS
浏览器分为：渲染引擎和JS引擎
渲染引擎：解析HTML和CSS，俗称 内核
JS引擎：也称为JS解释器，用来读取网页JavaScript代码
浏览器本身不会执行JS代码，是通过内置的JavaScript引擎来执行JS代码，JS引擎执行代码是 逐行解释的（转换成机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言。

4.JavaScript的组成
JavaScript由 ECMAScript(JavaScript语法)+DOM(页面文档对象模型)+BOM(浏览器对象模型)
ECMAScript：规定了js的编程语法和基础核心知识
DOM：是W3C推荐的处理可扩展标记语言的 标准编程接口。通过DOM提供的接口可以实现对页面元素的操作（大小、位置、颜色等）
BOM：提供了独立于内容的 、 可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，如弹出框、浏览器跳转、获取分辨率等

5.JS的书写位置
js分为3种书写位置：行内、内嵌、外部。

二：变量

1.什么是变量？
变量是用于存放数据的容器，我们通过变量名 获取元素，数据可以修改
本质：变量是程序在内存中申请的一块用来存放数据的空间

2.声明多个变量
var a =10,b=20,c=30;
注意： var a=b=c=10; 的执行顺序是
var a=10；——>b=10;——>c=10; b、c是全局变量

3.声明变量的特殊情况
只声明,不赋值： var age; console.log(age); 结果：undefined
不声明,不赋值，直接使用： console.log(age); 结果：报错
不声明,只赋值： age=10; console.log(age); 结果：10

三：数据类型

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

JS把数据类型分为两类：
简单数据类型：Number(数字型)，String(字符串型)，Boolean(布尔值类型)，Undefine，Null
复杂数据类型：object

Number数字类型
数型Number的个特殊值:

• Infinity:代表无穷大，大于任何数值
• -Infinity:代表无穷小，小于任何数值
• NaN,Not a number,代表一个非数值

isNaN(x):x是数字——>true ； x不是数字——>false;

String 字符串类型
字符串的length属性可以获取字符串长度：str.length;
多字符串之间的拼接用 + ， 字符串 + 任何类型 = 拼接后的新字符串

    <script>
        var a1 = 1;
        var a2 = 2;
        console.log(typeof(a1)); //number
        console.log('a1+a2=' + a1 + a2); //a1+a2=12    'a1+a2=' 是字符串 有字符就是相连  
    </script>

+号口诀：数值相加 字符相连

Boolean布尔类型
true(1)，false(0)

Undefined和Null
变量声明但是未赋值：Undefined;给变量赋值null，里面存的值就是空
注意：任何类型 +(拼接) Number / Boolean = NaN

2.获取变量数据类型
typeof 变量名
注意：typeof null 的结果是object

3.数据类型转换
使用表单、prompt获取过来的数据默认是 字符串类型的 不能直接进行加法运算 需要转换变量数据类型

一般有三种转换方式

• 转换成字符串类型
• 转换成数字型
• 转换成布尔型

转换成字符串类型：num.toString()、String(num)强制转换、加号拼接字符串（常用！隐式转换）
（和字符串拼接的结果都是字符串）
转换成数字型:parseInt(string)、parseFloat(string)、Number()强制转换、js隐式转换（- * /）
隐式转换是我们再进行算术运算的时候,js自动转换成了数据类型
转换成布尔类型：Boolean(‘true’)
代表空、否定的值会被转换false,如 ’‘，0，NaN，null，undefined
其余值都会被转换成true

三：运算符（操作符）

1.算术运算符
+加 _ -减 _ *乘 _ /除 _ %余
算数优先级：先乘除 后加减 有小括号先算小括号的

2.递增递减运算符
前置递增运算符 ++num 先自加，后返回值
后置递增运算符 num++ 先返回值，后自加
递减同上

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

js中 == 的隐式转换规则

比如：
1.对象和布尔值进行比较
[] == false; //true
[]对象——>字符串——>数值0
false——>数值0
2.对象和数字进行比较
[111] == 111; //true
[111]对象——>字符串——>数值111
3.对象和字符串进行比较
[1,2,3]== ‘1,2,3’; //true
[1,2,3,]对象——>字符串’1,2,3,’

4.逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符，返回值也是布尔值，开发中经常用于多个条件的判断

逻辑与&&：两边都是true才返回true，否则返回false
栗子1：var a = 2 > 1 && 3 >1//true
解析：
2 > 1 // true
3 > 1 //true
true && true //true
栗子2： var a = 2 > 1 && 3 < 1
解析：
2 > 1 // true
3 < 1 //false
true &&false // false

**逻辑或||：**两边都为false才返回false,否则都为true
栗子1：var a = 2 <1 || 3 <1//true
解析：
2 < 1 // false
3 < 1 //false
false || false // true
栗子1：var a = 2 >1 || 3 <1//true
解析：
2 > 1 // true
3 < 1 //false
true|| false // false

逻辑非！： 也叫做取反符号，用来取一个布尔值相反的值，true的相反值就是false
var isOk = !true;
console.log(isOk);// false;

5.短路运算符
短路运算的原理:当有多个表达式（值）时，左边的表达式可以确定结果时，就不再继续运算右边的表达式的值。

a.逻辑与

• 语法： 表达式1 && 表达式2
• 如果第一个表达式的值为真，则返回表达式2
• 如果第一个表达式的值为假，则返回表达式1
  console.log( 123 && 456);//456
  console.log( 0 && 456);//0
  b.逻辑或
• 语法： 表达式1 || 表达式2
• 如果第一个表达式的值为真，则返回表达式1
• 如果第一个表达式的值为假，则返回表达式2
  -console.log( 123 && 456);//123
  console.log( 0 && 456);//456

总结：
逻辑与短路运算是从左往右找第一个假，没有找到，就是最后一个为真
逻辑或短路运算是从左往右找第一个真，没有找到，就是最后一个为假
找到之后都是中断

四：流程控制分支

1.流程控制分支三种结构：顺序结构、分支结构、循环结构
顺序结构：按代码先后顺序依次执行
分支结构：根据不同条件执行不同路径的代码

JS提供了两种分支语句

• if语句
• switch语句

2.三元表达式
表达式1 ？ 表达式2 : 表达式3；
表达式1为true 则返回 表达式2的值 否则 返回 表达式3的值
比如我们在写倒计时的案例时 想显示01这种0开头的 我们需要补0
num<10 ? ‘0’ + num : num;

3.闰年算法
能够被4整除，不能被100整除的为闰年 或者 能够被400整除的就是闰年
(year % 4 === 0 && year % 100 !==0 || year % 400 ===0 )

4.switch
switch case
break是退出循环，如果执行case语句，里面没有break,则会继续执行下一个case语句
continue是退出本次循环

五：数组

1.数组概念
数组是一组数据的集合，里面的每个元素被称为元素，数组中可以放任意类型的数据。数组是一种将一组数据存储在单个变量名下的优雅方式

2.数组的创建方式

• 利用new创建数组
• 利用数组字面量创建数组

<script>
 		// 1.new创建一个空的数组
        // var arr = new Array();
        // 2.利用数组字面量创建数组  创建了一个空的数组
        // var arr = [];
        // var arr1 = [1, 2, 3, 'pink', '456'];
        //数组中的数据用 , 分割    数组中的数据称为数组元素 数据类型无限制
        //数组的声明并赋值 称为数组的初始化
</script>      

数组的字面量是方括号[]

3.获取数组元素
a.利用索引 arr[0]
b.遍历数组——>for循环
使用 数组名.length 可以访问数组元素的数量（长度）

4.数组转换成字符串
思路：定义一个 var str = ‘’ ; 再循环遍历数组元素并拼接到str后面

5.数组新增元素

• 通过修改length长度新增数组元素（length属性是可读写的）修改之后增加的部分由于没有赋值默认值为undefined

<script>
 // 1.修改length 默认值是undefined
           var arr = [1, 2, 3, 4];
           console.log(arr.length);
           arr.length = 6;
           for (var i = 0; i < arr.length; i++) {
               console.log(arr[i]);
           }
</script>

• 通过修改数组索引新增数组元素：通过修改数组索引的方式追加数组元素，但是注意不能直接给数组名赋值，会覆盖掉原来的数据。

 // 2.修改索引号
         var arr1 = [1, 2, 3, 4];
         arr1[1] = 5;
         console.log(arr1.length);
         console.log(arr1);
         arr1 = '别给我直接赋值'; //不要给数组直接赋值，否则里面的全部元素都没有了
         console.log(arr1);
         console.log(arr1.length); 

6.筛选数组

//筛选数组 把大于10的数据放入新的数组
          var arr = [11, 5, 6, 45, 7, 8, 6, 34, 45, 78, 12, 66];
          var arr1 = [];
          var j = 0;
          for (var i = 0; i < arr.length; i++) {
              if (arr[i] >= 10) {
                  arr1[j] = arr[i];
                  //arr1[arr1.length]=arr[i]  arr1.length最开始是0 length可以自动检测长度的变化
                  j++;
              }
          }
          console.log(arr1); 

7.数组案例
删除指定元素

 //删除指定数组元素 去掉元素中的0
         `在这里插入代码片`var arr = [0, 1, 0, 2, 0, 5, 4, 5, 7, 0];
         var newArray = []
         var i = 0;
         for (i = 0; i < arr.length; i++) {
             if (arr[i] == 0) {
                 continue;
             }
             newArray[newArray.length] = arr[i];
         }
         console.log(newArray); 

冒泡排序

 //冒泡排序
        var arr = [1, 5, 3, 8, 7, 2, 8, 2, 88, 42, 36, 25, 21, 17, 78];
        var newArr = [];
        var temp;
        for (var i = 0; i < arr.length - 1; i++) {//控制趟数
            for (var j = 0; j < arr.length - 1 - i; j++) {//每趟交换变量次数
                if (arr[j] > arr[j + 1]) {
                    temp = arr[j + 1];
                    arr[j + 1] = arr[j];
                    arr[j] = temp;
                }
            }
        }
        console.log(arr);

数组排序

        var arr1 = [1, 58, 23, 668, 17, 88];
        //升序
          arr1.sort(function(a, b) {
              return a - b;
          }); 

        //降序
        arr1.sort(function(a, b) {
            return b - a;
        });
        console.log(arr1);

数组去重

 <script>
        //核心思想： 遍历旧数组，拿着旧数组元素查询新数组 如果元素在新数组存在就不放入 如果不存在就放入

        //封装一个去重的函数
        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]); //用 追加push(数组元素) 来写
                }
            }
            return newArr;
        }
        var arr = ['a', 's', 'd', 's', 'd', 'v', 't', 's', 'a', 'v', 'g'];
        console.log(unique(arr));
    </script>

数组转换成字符串

 var arr = [1, 2, 3, 4];
        // 1.toString()
         console.log(arr.toString());//1,2,3,4

        //2. join(分隔符)
        var arr1 = ['red', 'blue', 'green'];
        console.log(arr1.join()); //red,blue,green
        console.log(arr1.join('-')); //red-blue-green
        console.log(arr1.join('&')); //red&blue&green   提交表单会用

六：函数

1.函数概念
函数就是封装了一段 可被重复调用执行的代码块。

2.函数使用
步骤：声明函数 和 调用函数

声明函数
function 函数名（参数1，参数2）{
函数体；
}
调用函数
函数名（参数1，参数2）；
注意:声明函数本身并不会执行代码，只有调用函数才会执行代码

3.函数形参、实参个数不同的问题

参数个数	说明
实参 = 形参	输出正确结果
实参 > 形参	只取到形参的个数
实参 < 形参	多的形参定义为undifned,结果为NaN

在JavaScript的函数中不可以通过参数个数不同来区别不同的函数，只能是通过函数名来区别

4.函数返回值
如果函数没有return ,返回值就是undefined（使用return 函数会停止执行并返回指定值）

5.break,continue,return 区别

• break:结束当前的循环体
• continue：跳出本次循环，继续执行下次循环
• return:不仅可以退出循环，还能够返回return语句中的值，同时结束当前函数体代码

6.arguments
arguments是函数的内置对象，存储了传递的所有实参
arguments 是一个伪数组，可以进行遍历，为数组特点：

• 具有length属性
• 可以遍历但是不具有数组的pop,push等方法

7.函数的两种声明方式
自定义函数方式（命名函数）、函数表达式方式（匿名函数）

命名函数：
funciton fn(){
//
}
fn();//调用
调用函数的代码可以放到声明函数前面，也可以放后面

匿名函数：
varf fn = function(){//此处的fn是变量名 不是函数名 fn里面存储的是一个函数
//
}
fn();
函数调用必须写到函数体后面

七：作用域

1.作用域概念
限定这个名字的可用性的代码范围就是这个名字的作用域
ES6之前，作用域有两种：全局作用域和局部作用域（函数作用域） ES6之后新增块级作用域

2.变量的作用域
根据作用域的不同，变量可分为两种：全局变量、局部变量
全局变量：在代码任何位置都可以使用；全局作用域下用var声明的变量
局部变量：函数内部声明的变量，形参也是局部变量

3.全局变量和局部变量的区别

• 全局变量在任何一个地方都可以使用，只有在浏览器关闭的时候才会被销毁，因此比较占内存
• 局部变量只能在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，比较节约内存

4.作用域链
只要是代码就至少有一个作用域，写在函数内部的是局部作用域，函数中还有函数，那么这个作用域中又可以诞生一个作用域
柑橘在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能够被内部函数访问，就成为 作用域链
作用域链采取就近原则查找变量最终值

八：预解析

1.JavaScript解析器在运行代码的时候的步骤：预解析和代码执行
预解析:（也叫做变量、函数提升）在当前作用域下，JS执行代码之前，浏览器默认把带有var和function声明的变量在内存中进行提前的声明或者定义。 注意：并不赋值
代码执行：从上到下

2.变量预解析
变量提升：变量的声明提升到作用域最上面，但是变量的赋值不会提升
函数提升：函数的声明会被提升到作用域最上面，但是不会调用函数

九：对象

1.什么是对象？
对象是一个具体的事物，对象由属性和方法组成。
属性：事物的特征，在对象中用属性来表示 （名词）
方法：食物的行为，在对象中用方法来表示 （动词）

2.创建对象的三种方式

• 利用字面量创建对象
• 利用new Object创建对象
• 利用构造函数创建对象(函数名的首字母要大写并且要和new一起使用才有意义 里面的属性和方法要加this哟表示当前对象的属性和方法)

  			// 字面量创建对象
        	 var dog = {
             name: '可可',
             type: '阿拉斯加犬',
             age: 5,
             color: '棕红色',
             bark: function() {
                 alert('汪汪汪');
             },
             showFilm: function() {
                 alert('演电影');
             }
         }
         console.log(dog.name);
         dog.bark() 

        //利用new Object创建对象
        var people = new Object;
        people.name = '鸣人';
        people.sex = '男';
        people.age = '19';
        people.skill = function() {
            alert('影分身术');
        }
        console.log(people.name); 

        // 构造函数创建对象
        	function 构造函数名（）{
            this.属性=值;
            this.方法=function(){

            }
        }
        new 构造函数名() 

3.对象的调用
对象属性的调用:

• 对象.属性名
• 对象[ ’ 属性名 ’ ],方括号里面的属性必须加引号 如 star[‘name’]

对象里面的方法调用：对象.方法名()

4.遍历对象属性
for … in
for ( 变量 in 对象名字 ){
//执行代码
}
for ( var k in obj){
console.log( k ); // k 是属性名
console.log( obj[k] ); // obj[k] 是属性值
}

十：内置对象

JavaScript中的对象分为三种：自定义对象、内置对象、浏览器对象
内置对象是指JS语言自带的一些对象，比如Math、Data、Array、String

1.Math对象
Math对象不是构造函数
Math.floor() 向下取整（往小了取）
Math.ceil() 向上取整（往大了取）
Math.round() 四舍五入（就近取值） 注意！-3.5 是 -3 ， .5的时候是取大的
Math.abs() 绝对值
Math.max() / Math.min() 最大值 / 最小值

Math.random() 随即返回小数。[0，1） 左闭右开
求两个数之间的随机整数包括这两个数：
Math.floor(Math.random() * (max - min + 1)) + min;

2.Date对象
Date日期对象是一个构造函数 所以需要实例化后才能使用
new Date();

• 如果 Date() 不写参数，就返回当前时间
• 如果 Date() 写参数，就返回括号里的时间

日期格式化
获取日期总毫秒
Date对象是基于1970年1月1日（世界标准时间）起的毫秒数
我们进场利用毫秒数来计算时间，因为更加精确

//获取Date总的毫秒数（时间戳） 不是当前时间的 而是现在时间距离1970年1月1日 过了多少毫秒
        //1.通过 valueOf() getTime()
        var date = new Date();
        console.log(date.valueOf());
        console.log(date.getTime());
        //2.简单写法  开发中常用的
        var date1 = +new Date(); // +new Date() 返回就是距离现在过了多少毫秒   现实开发中常用的
        console.log(date1);
        //3. H5 新增的  低版本浏览器不兼容
        console.log(Date.now());

倒计时案例：https://blog.csdn.net/qq_42156918/article/details/108745113

3.数组对象

数组对象创建的两种方式：

• 字面量方式
• new Array()

 		//1.new创建一个空的数组
        var arr = new Array();

        //2.利用数组字面量创建数组  创建了一个空的数组
        var arr = [];
        var arr1 = [1, 2, 3, 'pink', '456'];

检测是否为数组？
instanceof运算符，可以判断一个对象是否属于某种类型
Array.isArray(arr)用于判断一个对象是否为数组，（HTML5中提供的方法）

添加删除数组元素的方法

数组排序

数组索引方法
indexOf() 数组中查找指定元素的一个索引 存在返回索引号，不存在返回-1
lastIndexOf() 在数组中的最后一个索引， 存在返回索引号， 不存在返回-1

数组转换成字符串
toString()
join(‘分隔符’)

4.字符串对象

为了方便操作基本数据类型，JavaScript提供了三个特殊的引用类型：String、Number、Boolean
基本包装类型就是把简单数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法

// 1. 把简单数据类型包装成复杂数据类型   给临时变量
        var temp = new String('hello');
        // 2.把临时变量给 str
        str = temp;
        // 3.销毁临时变量
        temp = null;

字符串是不可变的，指的是里面的值是不变的，当我们重新给字符串赋值时，其实地址已经变了，在内存中开辟了新的空间。

根据字符串返回位置

indexOf（‘要查找的字符’，[开始的位置]）返回指定字符在字符串中出现的位置，没有就返回-1，开始位置是索引号
lastIndexOf() 从后往前找，只找第一个匹配的

根据位置返回字符
charAt(index) 返回指定位置的字符，index是字符串的索引号 str.charAt(0)
charCodeAt(index) 获取指定位置处字符的ASCII码（index是索引号） str.charCodeAt(0)
str[index] 获取指定位置处的字符

求字符串中出现字符次数最多的字符和次数

//思路 ：把每一次遍历的字符都放到一个对象的属性中，并且看有无该属性 有则创建 无则属性值+1 属性名就是字符名
        var str = 'andsbckcsivbisezcadedsc';
        var obj = {}; // 创建一个空对象
        //属性赋值
        for (var i = 0; i < str.length; i++) {
            if (obj[str[i]]) {
                //如果已经有这个属性了  值 +1
                obj[str[i]]++;

            } else {
                //没有这个属性 赋值 1
                obj[str[i]] = 1;
            }
        }
        //遍历对象 for in
        var max = 0;
        var ch = '';
        for (var k in obj) {
            // k 得到的是属性名
            // obj[k] 得到的是属性值
            if (max < obj[k]) {
                max = obj[k];
            }

        }
        for (var k in obj) {
            if (obj[k] === max) {
                ch += k;
            }
        }

字符串操作方法
contact(str1,str2…) 连接字符串
substr(start,length）截取字符串，start开始位置（索引号）length取得个数，如果省略代表取start开始后面所有的字符
replace(‘被替换的字符串’,‘要替换的字符串’)
split()切分字符串，可以将字符串切分成数组，切分完毕后返回的是一个新数组
var str = ‘a,b,c,d’;
console.log(str.split(’,’));//[a,b,c,d];

十一：简单类型和复杂类型

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

• 值类型：简单数据类型/基本数据类型，在存储变量中是存储的是值本身
  string,number,boolean,undefined,null
• 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型，通过new关键字创建的对象，如Object，Array,Date等