JS章节第一节总结知识点_js第一章知识点-CSDN博客

本文链接：https://blog.csdn.net/JackDiv/article/details/116428608

JS章节：

//   1.将JS代码写入script,类似于style
//   2.编写位置可以在任意位置   默认位置在body
//   3.也可以编写到外部文件   使用
<script src="外部位置.js"></script>
//   ！一旦引用外部，内部将无法显示   可以内部嵌套
//   自上向下执行
//   4.可以将js代码编写到标签的指定属性中
鼠标点击：<button οnclick="alert('你点我干嘛！')">你点我一下</button>
鼠标移入：<button οnmοuseleave="alert('你点我干嘛!')">点我一下</button>

alert（）；显示提示
console.log（）；控制台输出
document.write（）；网页中显示一个内容

------------------------------------------------------------------------------------------------------------------------------------

基本数据类型：

2020年推出新的数据类型 --- 大整数：数字后加n 检查返回：bigint

   数字：number   -----------   检查返回：原值
   字符串：string   -----------   检查返回：原值
   布尔值：Boolean   -----------   检查返回：原值
   空值：null       -----------   检查返回：object
   未定义：undefined   -----------   检查返回：原值

type of：可以检查一个数字的数据类型.
------------------------------------------------------------------------------------------------------------------------------------

数据类型的转换：

   转换文本（字符串类型）：

       a = string（a）；
       a = a.tostring（）；
               快捷方式：a = a + ' ';
   转换数字（number）：

       a = parseInt（a）；
       a = parseFloat（a）；
               快捷方式：a = +a；
   转换为布尔值（Boolean）：

       a = Boolean（a）；
       a = ！！a；
------------------------------------------------------------------------------------------------------------------------------------
运算符：

   +       加法运算符   a = 10 + 4;
   -       减法运算符   a = 10 - 4;
   *       乘法运算符   a = 3 * 3;
   **       幂运算       a = 9 ** 0.5;   ---0.5是方
   /       除法运算符   a = 10 / 2;
   %       模运算符       a = 10 % 3;

字符串的拼接：

对两个字符串进行加法运算时，会发生拼串操作.
a = '哈哈' + '啦啦'；

------------------------------------------------------------------------------------------------------------------------------------

运算符：

   - 赋值运算符用于将一个值赋值给一个变量
   - 赋值运算符会改变变量的值，
               并且只有赋值运算符会改变变量的值

   =        - 等号用来将符号右侧的值赋值给左侧的变量
   +=       - a += b 等价于 a = a + b
   -=       - a -= b 等价于 a = a - b
   *=       - a *= b 等价于 a = a * b
   /=       - a /= b 等价于 a = a / b
   %=       - a %= b 等价于 a = a % b
   **=       - a **= b 等价于 a = a ** b

一元运算符：

+ ：a = +a；不会对数值产生影响.
- ：a = -a；会对数字进行符号位取反.

注：对非数字类型的值进行一元运算的±时，他会将其转化为数字，然后再运算.

------------------------------------------------------------------------------------------------------------------------------------

自增运算符：

   a++ ：值是变量自增前的值，原值
   ++a ：值是变量自增后的值，新值

自减运算符：

a-- ：值是变量自减前的值，原值
--a ：值是变量自减后的值，新值

------------------------------------------------------------------------------------------------------------------------------------

逻辑运算符（与或非）：

   ！   逻辑非：取反
   &&   逻辑与：两边都为true，则执行
   ||   逻辑或：有一个为true，则执行

------------------------------------------------------------------------------------------------------------------------------------

循环语句：

   if else 语句：           先判断后执行.
       if（条件表达式）{
           输出语句...
       }else if（条件表达式）{
           输出语句...
       }

   switch语句（条件分支语句）：       先判断后执行.
       switch（表达式）{
           case 表达式：
               语句...
               break；           break跳出循环，当执行语句结束，跳出switch循环.（continue则跳出此次循环）
           case 表达式：
               语句...
               break；
           default ：               当以上条件都不满足时，执行default语句.
               语句...
               break；
           }

   while语句：           先判断后执行.
       while（条件表达式）{
               语句...
           }

   do - while语句：           注：先执行后判断，多执行一次.（确保循环至少执行一次）
       do{
           语句...
       }while（条件表达式）；

   for循环语句：           先判断后执行.

       for（①初始化表达式;②条件表达式;④更新表达式）{
           ③语句...
       }

       执行流程：   1.执行初始化表达式.   （只会执行一次）
           2.判断条件表达式，满足（true）则继续.
           3.为true则执行循环体.
           4.进入更新表达式.
           5.继续执行②，直到不满足条件表达式则循环结束.

------------------------------------------------------------------------------------------------------------------------------------

对象（object）：复合数据类型
   创建对象的方式：
       第一种：
           let obj = new Object（）；
       第二种：
           let obj = {
               name:'孙悟空',
               age:18
           }

向对象中添加属性：
obj（对象）.属性名 = 属性值；如果有则改变，不过没有则添加

读取对象中的属性：（对象.属性名）
console.log（obj.name）；

------------------------------------------------------------------------------------------------------------------------------------

函数（function）：

使用typeof检查一个函数时，会返回'function'.

函数也是一个对象，函数可以用来存储代码，在需要时可以调用这些代码.

也就是说函数中存储的代码不会自动执行，需要对函数进行调用函数代码才会执行.
调用函数——函数名（）；

立即执行函数：
   立即执行函数没有名字，只会被调用一次，并且在函数声明完成以后立即调用
       （function（）{
           console.log（‘呵呵’）；
       }）（）；

返回值：返回值就是函数的执行结果
return 来设置函数的返回值

回调函数：定义一个函数给别的函数使用
       function fn（a）{   a（）；   }
       function fn2（）{console.log（‘哈哈哈’）；}
       fn（fn2）；

变量提升：

   在函数中
       function开头的函数都会被提前执行
       使用var定义的变量会在代码执行前定义（但不赋值！！）

JS代码执行前要经历两个阶段
   ①：预解析阶段
       - 找到var声明的变量，对其进行创建（不赋值）
       - 找到function开头的函数，将其创建
   ②：逐行执行代码

闭包：
   闭包就是可以访问外部函数中变量的函数
   - 作用：
       主要就是用来将一些不希望被外部访问的内容隐藏
   - 要件：
       1. 函数的嵌套
       2. 内部函数要引用到外部函数中的变量
       3. 将内部函数作为返回值返回
   - 闭包的生命周期：
       闭包在外部函数调用时产生
           外部函数每调用一次就会产生一个闭包
       当对内部函数的引用消失时，闭包即销毁

但当使用一个变量接收时将不会停止

    function outer() {
   // 定义一个变量，来记录函数调用的次数
    let times = 0;

   // 定义一个函数，每次执行时都可以打印它的调用的次数
    function fn() {
   console.log(++times);
   }

   return fn;

    }

let fn2 = outer();

console.log(fn2());
console.log(fn2());

函数作用域：

1.函数作用域在函数调用时创建，调用结束后自毁。

2.每次函数调用时都会创建一个新的函数作用于。

3.函数作用域可以直接访问全局的变量。

   4.在函数中声明的是局部变量，只有函数内部可以访问。
       如果不使用let、var、const等关键字声明，则会添加到全局（window）中，变成全局对象。

   5.变量及函数的提升同样在函数作用域中适用。

作用域链：

当我们访问一个变量时，函数首先会在当前作用域中寻找
如果没有定义将去上一层作用域中寻找，直到全局作用域，如果没有则报错。

------------------------------------------------------------------------------------------------------------------------------------

数组（Array）：

   - 数组也是一个对象
   - 数组用来存储有序的数据
   - 数组中存储的数据称为元素（element）
   - 数组中的每一个元素都有一个唯一的索引（index）与其对应
   - 索引是一组从0开始的整数，通过索引来操作元素

创建数组对象：

   第一种：   let arr = new Array（）；
   第二种：   const arr = []；

       创建数组的区别：
           const arr = new Array(10);
           创建十个没有元素的数组；
           const arr = [10];
           创建一个数值为10 的元素.
---

向数组中添加元素：

   arr[0] = 4;

   向数组中最后添加一个元素：
       数组[数组.length] = 元素；
       arr[arr.length] = 11；
---

读取数组中的某一个元素：

   console.log（arr[5]）；

       ☆如果读取元素的索引不存在不会报错，返回undefined.
------------------------------------------

length可以获取数组的长度 length返回最大索引 + 1

length可以被修改，改大则后面会留出空位，改小则多出的元素会被删除.

使用type of检查一个数组，会返回object.

------------------------------------------

也可以在数组中存放数组

   二维数组：
       const arr3 = [
           ['孙悟空', 18, '男'],
           ['猪八戒', 28, '男']
        ];

push（）；
   用来向数组末尾添加一个或多个元素并返回新的长度
pop（）；
   用来删除并返回数组的最后一个元素
shift（）；
   用来删除并返回数组的第一个元素
unshift（）；
   用来向数组开始添加一个或者多个元素并返回新的长度

-------------------------------------------------------

遍历数组：

   const arr = ['孙悟空', '猪八戒', '沙和尚', '唐僧', '白骨精', "蜘蛛精"];
   for (let i = 0; i < arr.length; i++) {
       console.log(arr [ i ]);
   }

-------------------------------------------------------

类数组对象（伪数组）：arguments

   // arguments表示实参，用来存储函数调用过程中所有的参数
   // arguments是一个类数组对象（伪数组）
   // 通过arguments即使不定义形参也可以访问实参

   function fn(a, b, c){
   console.log(arguments.length);
   console.log(arguments[1]);
   }
   fn(10, 'hello', true);
   //返回 3 ，hellow

...args的用法：
   可变参数
       - 作用和arguments类似
       - 不同点：
           1.可变参数需要在形参中定义
           2.可变参数就是一个数组
   function fn2(a, b, ...args){
       console.log(a, b);           //返回第一个和第二个值
       console.log(Array.isArray(args));   // 返回true 证明是一个数组
       console.log(args);           //取余，输出剩余数组元素
   }

fn2(1, 2, 3, 4, 5); //调用函数

-------------------------------------------------------

Math
   - Math不是一个构造函数
   - 它是数学运算相关的工具类
   - Math中存储了数学运算相关的常量和方
       使用Math无需创建对象直接使用即可
   - 比如：
       Math.PI 可以用来获取圆周率
   - 方法：
       Math.abs()
           - 获取一个数的绝对值
       Math.max()
           - 获取多个值中的最大值
       Math.min()
           - 获取多个值中的最小值
       Math.pow(x, y)
           - 幂运算，求x的y次幂
       Math.sqrt()
           - 求一个数的平方根
       Math.ceil()
           - 向上取整（往大了取）
       Math.floor()
           - 向下取整（往小了取）
       Math.round()
           - 四舍五入取整
       Math.random()
           - 生成一个（伪）随机数
           - 生成随机数的范围0-1之间
-------------------------------------------------------
   生成指定范围的随机数（小知识）
   0 - x Math.round(Math.random()*x)
   x - y Math.round(Math.random()*(y-x) + x)

   （int）（Math.random（）* 20 + 1 ）* 50；
   确保生成0-19 的20个随机整数 + 1就是1-20 ，然后*50 就是50-1000的随机整数了

-------------------------------------------------------

Date
   - 在JS中所有时间相关内容都通过Date来表示
   - 方法：
       getDay()
           - 获取当前日期是周几
           - 返回值
               0-6
               0 周日
               1 周一
               ...
       getDate()
           - 获取当前日期是几日
       getMonth()
           - 获取当前日期的月份
           - 返回值：0-11
               0 一月
               1 二月
               ...
       getFullYear()
           - 获取当前日期的年份
       getTime()
           - 获取当前日期的时间戳
           - 时间戳
               - 自1970年1月1日0时0分0秒到当前时间所经历的毫秒数
               - 在计算机底层所有的涉及时间的存储的都是时间戳
       Date.now()
           - 获取当前的时间戳

           // 如果直接使用new Date()来创建时间
           // 则Date中会存储当前的时间
           let d = new Date();

           //也可以传递一个时间的字符串来创建一个指定的时间
           // 字符串格式月/日/年时:分:秒
           let d1 = new Date('5/20/2018 10:30:38');

-------------------------------------------------------

字符串的方法：

   字符串的本质就是一个字符数组,
       操作字符串时完全可以将其当成数组去操作

   字符串的所有方法都不会改变原字符串

   length
       - 可以用来获取字符串的长度
   字符串[索引]
       - 根据索引来获取指定字符
   方法：
       charAt()
           - 根据索引获取字符result = str.charCodeAt(0);
       charCodeAt()
           - 根据索引获取指定字符的编码
       String.fromCharCode()
           - 根据字符编码获取字符result = String.fromCharCode(29579);
       concat()
           - 用来连接两个或多个字符串
       slice()
           - 用来截取字符串
       substring()
           - 用来截取字符串
           - 参数：
               1.截取的开始位置（包括）
               2.截取的结束位置（不包括）
               substring()不能设置负索引，
                   如果设置负索引，则会重置为0
                   如果第二参数小于第一个，它会自动交换位置
       substr()（过时，不推荐使用）
           - 用来截取字符串
           - 参数：
               1.截取的开始位置
               2.截取的数量
       indexOf()
       lastIndexOf()
           - 查询指定字符串在当前字符串中出现的位置
       startsWith()
           - 判断检查字符串是否以指定内容开始
       endsWith()
           - 判断检查字符串是否以指定内容结束

-------------------------------------------------------

    padEnd()
       - 向字符串后添加内容，是字符串变成指定长度
   padStart()
       - 向字符串前添加内容，是字符串变成指定长度
       - 参数：
           1. 要改变的长度
           2. 要添加的内容，默认使用空格
   repeat()
       - 将字符串重复指定的次数
   split()
       - 根据指定分隔符来将字符串拆分为数组
       - 参数：
           1.分隔符
           2.保留元素的数量
   toLowerCase()
       - 将字符串转换为小写
   toUpperCase()
       - 将字符串转换为大写
   trim()
       - 去除字符串的前后空格
   trimStart()
       - 去除开头的空格
   trimEnd()
       - 去除结尾的空格

-------------------------------------------------------

正则表达式：

   正则表达式
   - 正则表达式用来定义字符串的规则
   - 正则表达式由我们来定义，
       程序可以根据正则表达式来判断一个字符串是否符合规则
       或者将符合要求的内容从一个字符串中提取出来

匹配模式i，表示忽略大小写

   一、创建一个正则的对象
   语法 new RegExp(正则, 匹配模式)
   let re = new RegExp('a');
   二、使用字面量来定义正则表达式
          /正则/匹配模式
   let re2 = /a/i;


   //匹配模式i，表示忽略大小写
   re = new RegExp('ab', 'i');
   str = 'ab'; // true
   str = 'Ab'; // true
   str = 'AB'; // true

   test()方法用来检查一个字符串是否符合正则表达式
   console.log(re.test(str));

replace()；用法：
       - 用来将字符串中的指定内容替换为新的内容
       - 参数：
           1.被替换的内容（可以是正则表达式）
           2.新的内容
       - 替换时默认只会替换一个，
           如果想替换全部则需要指定全局匹配模式g

       str = '张三13667489076李四13715689076王五13454356590'
   let result = str.replace(/1[3-9][0-9]{9}/g, '哈哈');

   // console.log(result);

match()；用法
       - 根据正则表示获取字符串中的指定内容
       - 参数：
           1.正则表达式
       - 返回值
           数组，将所有的符合条件的内容保存到数组中
           匹配不到时，会返回null
           result = str.match(/1[3-9][0-9]{9}/g);

-------------------------------------------------------