网络知识 娱乐 呕心沥血 JavaScript知识点梳理大全,超详细 建议收藏!!!

呕心沥血 JavaScript知识点梳理大全,超详细 建议收藏!!!

呕心沥血 JavaScript知识点梳理大全,超详细 建议收藏!!!

✴️大家好,我是王同学,爆肝三天三夜王同学把JavaScript 知识点梳理了一遍,文章没有一点套路,只有满满的干货
✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了
✴️星光不负赶路人,所有的幸运都来自于坚持不懈的努力,大家一起冲冲冲~~~

在这里插入图片描述

一、语法和变量

(一)、前端三层

在这里插入图片描述

(二)、JS的书写位置

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

(三)、输出语句

在这里插入图片描述

(四)、变量声明提升

变量的声明提升:你可以提前使用一个稍后才声明的变量,而不会引发异常

在执行所有代码前,JS有预解析阶段,会预读所有变量的定义

在这里插入图片描述

二、基本数据类型

(一)、JavaScript中两大类数据类型

在这里插入图片描述

(二)、typeof运算符

typeof运算符可以检测值或者变量的类型
在这里插入图片描述

(三)、五种基本数据类型的typeof检测结果

在这里插入图片描述

(四)、数字类型

所有数字不分大小、不分整浮、不分 正负、都是数字类型

在这里插入图片描述
较大数或者较小数(绝对值较小)可以写成科学计数法

(五)、不同进制的数字

在这里插入图片描述

(六)、一个特殊的数字型值NaN

NaN是英语“not a number” 的意思,即不是一个数字,但它是一个数字类型的值
在这里插入图片描述

(七)、字符串类型

  • 字符串就是人类的自然语言
  • 字符串要用引号包裹,双引号或者单引号都可以

在这里插入图片描述

(八)、字符串的拼接

加号可以拼接多个字符串

在这里插入图片描述
在这里插入图片描述

(九)、字符串和变量的拼接

在这里插入图片描述

空字符串

一些时候需要用到空字符串,直接书写闭合的引号对即可

在这里插入图片描述

字符串的length属性

字符串的length属性表示字符串的长度

在这里插入图片描述

(十)、字符串常用的方法

在这里插入图片描述

(十一)、charAt()方法

作用:得到指定位置的字符

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(十二)、substring()方法

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(十三)、substr()方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(十四)、slice()方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

(十五)、三者对比总结

在这里插入图片描述

(十六)、toUpperCase()和toLowerCase()

在这里插入图片描述

(十七)、indexOf()

在这里插入图片描述
在这里插入图片描述

(十八)、BOOlean(布尔类型)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(十九)、Undefined

一个没有被赋值的变量的默认值是undefined,而undefined的类型也是undefined,即undefined又是值,又是一种类型,这种类型只有它自己一个值
在这里插入图片描述

变量提升的情况

在变量声明提升时,变量的值也是undefined

在这里插入图片描述

(二十)、null类型

  • null对象表示是空,它是空对象
  • 当我们需要将对象销毁,数组销毁或者删除事件监听时,通常将他们设置为空
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

(二十一)、数据类型的转换

使用Number()函数

在这里插入图片描述
在这里插入图片描述

使用parseInt()函数

在这里插入图片描述

使用parseFloat()函数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(二十二)、复杂数据类型简介

在这里插入图片描述
在这里插入图片描述

3
true
NaN
Infinity

在这里插入图片描述

bcd
bc
''
bc

(二十三)、表达式和运算符

在这里插入图片描述

表达式的种类

算术、关系、逻辑、赋值、综合

(二十四)、算术运算符

默认情况下,乘除法的优先级要高于加法和减法,必要时可以使用圆括号来改变运算的顺序
在这里插入图片描述
在这里插入图片描述

加号的两种作用

在这里插入图片描述
在这里插入图片描述

取余运算(求模运算)

  • 取余运算也叫求模运算,用百分号来表示
  • a%b表示 a除以b的余数,它不关心整数部分,只关心余数
    在这里插入图片描述

(二十五)、隐式类型转换

如果参与运算的某操作数不是数字型,那么JavaScript会自动将此操作符转换为数字

在这里插入图片描述
隐式转换的本质就是内部调用Number()函数
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
解决办法:在进行小数运算的时候,要调用数字的toFixed ()方法保留指定的小数位
在这里插入图片描述

(二十六)、幂和开根号

JavaScript中没有提供幂计算,开根号的运算符,需要使用Math对象相关的方法进行计算

在这里插入图片描述

(二十七)、向上取整和向下取整

在这里插入图片描述
在这里插入图片描述

(二十八)、关系表达式

(二十九)、判断是否相等

在这里插入图片描述

在这里插入图片描述

(三十)、相等和全等

在这里插入图片描述

在这里插入图片描述

(三十一)、NaN不自等

在这里插入图片描述

如何判断某变量的值为NaN?

  • isNaN()函数可以用来判断变量的值是否为NaN
  • 但isNaN()也不好用,它的机理是:只要该变量传入Number()的执行结果是NaN,则isNaN()函数都会得到true
    在这里插入图片描述
    在这里插入图片描述

不相等和不全等

在这里插入图片描述

JS中没有连比

判断变量 a是不是介于3到15之间,应该怎么写呢?

在这里插入图片描述

(三十二)、非运算

置反运算的结果一定是布尔值

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(三十三)、与运算

在这里插入图片描述
在这里插入图片描述

(三十四)、或运算

在这里插入图片描述

(三十五)、短路计算

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(三十六)、逻辑运算的顺序

在这里插入图片描述

(三十七)、赋值运算符

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(三十八)、快捷运算符

快捷运算符表示在原数组基础上进一步进行运算
在这里插入图片描述
在这里插入图片描述

(三十九)、自增和自减运算符

在这里插入图片描述
在这里插入图片描述

(四十)、综合表达式

综合表达式的运算顺序:非运算—数学运算—关系运算—逻辑运算
在这里插入图片描述
在这里插入图片描述

变量的范围表示

在这里插入图片描述

知识回顾

请添加图片描述
函数

(一)、函数的定义和调用

在这里插入图片描述
在这里插入图片描述

(二)、函数的调用

执行函数体中的所有语句,就称为函数调用
调用函数十分简单,只需要在函数名字后面书写圆括号对即可
在这里插入图片描述

(三)、语句的执行顺序

请添加图片描述
在这里插入图片描述

(四)、函数声明的提升

和变量声明提升类似,函数声明也可以被提升
在这里插入图片描述
函数的表达式是不能被提升的,如果函数是用函数表达式的写法定义的,则没有提升的特性

在这里插入图片描述

(五)、函数的优先提升

请添加图片描述

<script>
        //首先函数会优先提升
        //变量的定义后提升 后提升并不会把先提升的覆盖掉
        //变量提升只会先提升定义 不会提升值
        fun();
        var fun = function() {
            alert('A');
        }


        function fun() {
            alert('B')
        }

        fun();
    </script>

(六)、函数的参数

参数是函数内的一些特定的值,在调用函数时,必须传入这些参数的具体的值

函数的参数有多有少,函数可以没有参数,也可以有多个参数,多个参数之间要用逗号隔开

在这里插入图片描述
在这里插入图片描述

(七)、arguments

在这里插入图片描述

  <script>
           function fun() {
            var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];

            }

            console.log('所有的参数之和为:' + sum); //110
        }

        fun(33, 22, 55)
    </script>

(八)、函数的返回值

函数体内可以使用return关键字表示“函数的返回值”

在这里插入图片描述

   //函数的功能是返回两个参数的和
        function sum(a, b) {
            return a + b;
        }


        var result = sum(3, 4);
        console.log(result);

(九)、函数的返回值

调用一个有返回值的函数,可以被当做一个普通值,从而可以出现在任何可以书写的地方

在这里插入图片描述

(十)、遇见return即退出函数

调用函数时,一旦遇见return语句则会立即退出函数,将执行权交还给调用者

在这里插入图片描述

1
A
B
2

结合if语句 往往不需要写else分支了

   <script>
        //书写一个函数 函数的功能是判断一个数字是否是偶数
        function checkEven(n) {
            if (n % 2 == 0) return true;
            return false;
        }

        var result = checkEven(7);
        console.log(result); //false
    </script>

函数像一个小工厂

在这里插入图片描述

(十一)、练习题

在这里插入图片描述

  <script>
        //计算一个数字的阶乘
        function factorial(n) {
            //累乘器
            var result = 1;
            for (var i = 1; i <= n; i++) {
                result *= i;

            }
            return result;
        }

        //穷举法
            for (var i = 100; i <= 999; i++) {
            // 把数字i变为字符串
            var i_str = i.toString();
            var a = Number(i_str[0]);
            var b = Number(i_str[1]);
            var c = Number(i_str[2]);
            // 根据喇叭花数来判断
            if (factorial(a) + factorial(b) + factorial(c) == i) {
                console.log(i);//145
            }
        }
    </script>

(十二)、JavaScript内置的sort()方法

这个函数中的a、b分别表示数组中靠前和靠后的项,如果需要将他们交换位置,则返回正数,否则就返回负数
在这里插入图片描述
在这里插入图片描述

      <script>
        var arr = [3, 5, 6, 1, 2];
        arr.sort(function(a, b) {
            return a - b;
        })

        console.log(arr);


        var arr = [99, 55, 66, 77];
        arr.sort(function(a, b) {
            return b - a;
        })

        console.log(arr);
     </script>

在这里插入图片描述

(十三)、什么是递归?

  • 函数的内部语句可以调用这个函数自身,从而发起对函数的一次迭代。

  • 在新的迭代中,又会执行调用函数自身的语句,从而又产生一次迭代,当函数执行到某一次时,不再进行新的迭代,函数被一层一层返回,函数被递归递

  • 归是一种较为高级的编程技巧,它把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解。
    在这里插入图片描述

   <script>
        //书写一个函数 函数会自己调用自己  从而形成递归
        //函数的功能就是计算某个阶乘 n的阶乘就是n*(n-1)的阶乘
        function factorial(n) {
            //递归的出口 如果计算1的阶乘,可以不用递归了 直接告诉你答案1
            if (n == 1) return 1;
            //如果询问的不是1的阶乘就返回n*(n-1)!
            return n * factorial(n - 1);
        }

        var result = factorial(6);
        console.log(result); //720
    </script>

递归的要素

  • 边界条件:确定递归到何时终止,也称为递归出口
  • 递归模式:大问题是如何分解为小问题的,也称为递归体

递归的常见算法题

在这里插入图片描述

  <script>
        // 编写一个函数 这个函数的功能就是返回斐波那契数列中下标为n的那项的值

        function fib(n) {
            //出口  数列的小标为0和下标为1的项的值都是1
            if (n == 0 || n == 1) return 1;
            // 斐波那契数列的本质特征就是每一项都等于前面两项的和
            return fib(n - 1) + fib(n - 2);

        }
        //书写一个循环语句 计算斐波那契数列的前15项
        for (var i = 0; i < 15; i++) {
            console.log(fib(i));
        }
    </script>

在这里插入图片描述

(十四)、实现深克隆

<script>
        //原数组
        var arr1 = [33, 44, 11, 22, [77, 88],
            [11, 999]
        ];
        //结果数组  "每一个都有一个结果"
        var result = [];
        //函数  这个 函数会被递归

        function deepClone(arr) {
            //遍历数组的每一项
            for (var i = 0; i < arr.length; i++) {
                //类型判断 如果遍历到的项是数组
                if (Array.isArray(arr[i])) {
                    //递归
                    result.push(deepClone(arr[i]));
                } else {
                    //如果遍历到的项不是数组,是基本类型,就直接推入到结果数组中
                    //相当于是递归的出口
                    result.push(arr[i])

                }
            }
            //返回结果数组
            return result;

        }
        //测试一下
        var arr2 = deepClone(arr1);
        console.log(arr2);

        //是否藕断丝连
        console.log(arr1[4] == arr2[4]);
        arr1[4].push(99);
        console.log(arr1)
        console.log(arr2);
    </script>

如何实现深克隆?

使用递归的思想,整体思路和浅克隆相似,但稍微进行一些改动,如果遍历到项是基本类型值,则直接推入结果数组,如果遍历到的项是又是数组,则重复执行浅克隆的操作。

(十五)、浅克隆

请添加图片描述

  <script>
        //准备原数组
        var arr1 = [33, 44, 55, 66, [99, 22], 111];
        //准备一个结果数组
        var result = [];
        //遍历原数组
        for (var i = 0; i < arr1.length; i++) {
            result.push(arr1[i]);
        }
        //输出结果数组
        console.log(result);
        // 测试是否实现了克隆 ,就是说本质上是内存中的不同数组了
        console.log(arr1 == result); // false
        //测试这样的克隆是浅克隆“藕断丝连”
        arr1[4].push(100);
        console.log(result);
    </script>

在这里插入图片描述

(十六)、全局变量和局部变量

变量的作用域

JavaScript是函数级作用域编程语言:变量只在其定义时所在的function内部有意义

在这里插入图片描述

全局变量

如果不将函数定义在任何函数的内部,此时这个变量就是全局变量。它在任何函数内都可以被访问和更改

在这里插入图片描述

(十七)、遮蔽效应

遮蔽效应:如果函数中也定义了和全局同名的变量,则函数内的变量会将全局的变量遮蔽
在这里插入图片描述

在这里插入图片描述

(十八)、考虑变量提升的情况

在这里插入图片描述
在这里插入图片描述

(十九)、形参也是局部变量

在这里插入图片描述

 <script>
        var a = 10;

        function fun(a) {
            a++;
            console.log(a); //8
        }

        fun(7);
        console.log(a); //10
    </script>

(二十)、作用域链

一个函数内部也可以定义一个函数,和局部变量相似,定义在一个函数内部的函数是局部函数

在这里插入图片描述
作用域链:在函数嵌套中,变量会从内到外逐层寻找他的定义

在这里插入图片描述

 <script>
        var a = 10;
        var b = 20;

        function fun() {
            var c