前端——JavaScript基础学习【part 2】

最新推荐文章于 2024-07-12 09:36:48 发布
最新推荐文章于 2024-07-12 09:36:48 发布
阅读量115 收藏
点赞数
分类专栏： JavaScript基础学习 文章标签： javascript 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73958269/article/details/130466292
版权

文章目录

运算符

1. 赋值运算符

1.1定义

  • 对变量进行赋值的运算符
  • 运算符右边是值，左边必须是一个容器（即是一个变量）

1.2赋值运算符

  • 变量+=数值
  • 变量-=数值
  • 变量*=数值
  • 变量/=数值
  • 变量%=数值
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let num = 1;
      //   num = num + 1;
      // 简化代码：采用赋值运算符的方法进行赋值
      num += 3;
      console.log(num);
    </script>
  </body>
</html>

2. 一元运算符

2.1分类

根据所需表达式的个数分为：

  • 一元运算符
  • 二元运算符
  • 三元运算符

2.2自增运算符

  • 符号：++
  • 作用：让变量的值+1（只能加一）
  • 注意：前置自增和后置自增在单独使用的时候没有区别
2.2.1前置自增

先自加再使用（++在前先加）

2.2.2后置自增

先使用后自加（++在后后加）

2.3自减运算符

  • 符号：–
  • 作用：让变量的值-1
2.3.1前置自减

先自减再使用（–在前先减）

2.3.2后置自减

先使用后自减（–在后后减）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let num;
      num += 1;
      let l = 0;
      ++l;
      //   前置自增，结果是1
      console.log(l);
      let t = 2;
      t++;
      //   后置自增，结果是3
      console.log(t);
      let m = 3;
      console.log(++m + 2);
      //   结果是6，m先自加变成4，再和2相加
      let n = 9;
      console.log(n++ + 3);
      //   结果是12，n先和3相加，在自加变成10
      let i = 1;
      console.log(i++ + ++i + i);
      //   answer是7
    </script>
  </body>
</html>

3. 比较运算符

3.1比较运算符的基础知识

  1. 比较运算符
  • ==：左右两边值是否相等
  • ===：左右两边是否类型和值都相等
  • !=：左右两边是否不相等
  • !==：左右两边是否不全等
  1. 结果
    比较的结果为布尔类型，只会得到true和false

3.2比较运算符的细节

  1. 字符串比较，是比较的字符对应的ASCII码
  • 从左往右依次比较，one by one
  1. NaN不等于任何值，包括ta本身
  • 涉及到NaN都是false

  1. 尽量不要比较小数

  2. 不同类型之间比较会发生隐式转换

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(5 > 10);
      //   answer是false;
      console.log(10 >= 10);
      //   answer是true;
      console.log(2 == 10);
      //   answer是false;
      console.log("10" == 10);
      //   answer是true;存在隐式转换，把'10'字符串类型转换成数字型10，双等号只判断值
      console.log("10" === 10);
      //   answer是false;三等号判断值和数据类型，以后使用三等号
      console.log(NaN === NaN);
      //   answer是flase;NaN不等于任何东西
      console.log('a'<'b');
      //   answer是true;
      console.log('aa'<'ab');
      //   answer是true;第一个字符先进行比较，相等再对第二个字符进行比较，one by one
      console.log('aa'<'aac');
      //   answer是true;
    </script>
    </script>
  </body>
</html>

4.逻辑运算符

4.1逻辑运算符的基本知识

4.1.1场景

用来解决多重条件判断

4.1.2符号
符号名称日常读法特点口诀
&&逻辑与并且符号&&两边都为true，结果才为true一假则假
ll逻辑或或者两边只要有一个true就为true一真则真
！逻辑非取反true变成false，false变成true真变假，假变真
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(true && true);
      //   两边都为true才是ture
      console.log(false && true);
      //   只要有一个是false就是false
      console.log(3 < 0 && 4 > 1);
      console.log(3 < 10 && 5 > 2);
      console.log(false || true);
      //   只要有一个是true就是true
      console.log(false || false);
      // 两边都是flase，才是flase
      console.log(3 < 0 || 5 > 2);
      console.log(!true);
      //   结果是flase
      console.log(!false);
      //   结果是true
    </script>
  </body>
</html>

5.运算符优先级

优先级运算符顺序
1小括号（）
2一元运算符++,–,!
3算数运算符先*，%，/，后+，-
4关系运算符>,>=,<,<=
5相等运算符!= ,!==
6逻辑运算符先&&，后ll
7赋值运算符=
8逗号运算符，

语句

1. 表达式和语句

1.1表达式

表达式是可以被求值的代码，JavaScript引擎会计算出来一个结果

1.2语句

语句是一段可以执行的代码

1.3表达式和语句的区别

表达式可以被求值，而语句不一定有值

2. 分支语句

2.1程序三大流程控制语句

  • 顺序结构：对代码从上往下执行
  • 分支结构：需要根据条件选择执行代码，即有选择性的执行想要的代码
  • 循环结构：某段代码被重复执行

2.2分支语句

2.2.1if分支
  1. 三种使用方法：
  • 单分支
  • 双分支
  • 多分支
  1. 单分支使用语法：

if(条件) {
满足条件要执行的代码
}

注意

  • 括号内条件有两个答案，true或者false
  • 条件是true的时候，进入大括号里面执行代码
  • 小括号内的结果不是布尔类型的时候，会发生隐式转换，转换成布尔类型
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      if (true) {
        console.log("最后一天");
      }
      console.log("--------------------");
      if (3 > 5) {
        console.log("最后一天");
      }
      console.log("--------------------");
      if (2 === "2") {
        console.log("最后一天");
      }
      console.log("--------------------");
      if (200000) {
        console.log("最后一天");
      }
      //   所有的数字除了0以外，放在小括号里面，都是true
      console.log("--------------------");
      if ("sparkle是我") {
        console.log("最后一天");
      }
      //   所有的字符串除了空字符串'',放在小括号里面，都是true
    </script>
  </body>
</html>
  1. 双分支if语法

if(条件) {
满足条件要执行的代码
} else {
不满足条件要执行的代码
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let year = +prompt("请输入要判断的年份：");
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
        alert(`${year}是闰年`);
      } else {
        alert(`${year}是平年`);
      }
    </script>
  </body>
</html>

注意

  • 两个代码必须要执行一个
  1. 多分支语句

if(条件1) {
代码1
} else if（条件2） {
代码2
} else if（条件3） {
代码3
} else if（条件n） {
代码n
}

注意

  • 多个代码必须选择一个执行
  • 依次判断变量满足哪一个条件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let grade = +prompt("请输入你的成绩");
      if (grade >= 90 && grade <= 100) {
        alert("你的成绩是优秀的");
      } else if (grade >= 70 && grade < 90) {
        alert("你的成绩是良好的");
      } else if (grade >= 60 && grade < 70) {
        alert("你的成绩是及格的");
      } else {
        alert("你的成绩是不及格的");
      }
    </script>
  </body>
</html>
2.2.2三元运算符
  1. 场景
    是比if双分支更为简单的一种写法
  2. 语法

条件？满足条件执行的代码：不满足条件执行的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let num1 = +prompt("请输入第一个数字");
      let num2 = +prompt("请输入第二个数字");
      //   let max =
      num1 > num2 ? alert(`最大的数是${num1}`) : alert(`最大的数是${num2}`);
    </script>
  </body>
</html>
2.2.3数字补0案例
  1. 场景
    为后期网页显示时间做准备
  2. 代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let num = prompt("请您输入一个数");
      let num1 = num < 10 ? 0 + num : num;
      alert(num1);
    </script>
  </body>
</html>
2.2.1switch语句
  1. 语法

switch(数据) {
case 值1：
代码1
break
case 值2：
代码2
break
default：
代码n
break
}

  1. 解释
  • 找到和小括号里数据全等的case值，并且执行里面对应的代码
  • 如果没有==全等==，就执行default里的代码
  1. 注意
  • switch case 语句一般用于等值判断，不适合用于区间判断
  • switch case一般需要配合break关键字使用，没有break会造成case穿透
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      switch (1) {
        case 1:
          console.log("我今天好困");
          break; //退出switch
        case 2:
          console.log("要疯了");
          break; //退出switch
        case 3:
          console.log("好想死");
          break; //退出switch
        default:
          console.log("没有符合条件的");
      }
    </script>
  </body>
</html>

3.循环语句

3.1断点调试

  • 作用：更好理解代码的运行，还可以快速查找到bug
  • 位置：检查里面的sources
  • 断点：在某一句代码上加的标记就叫断点，程序由上而下地执行到这句被标记的代码时，会暂停下来

3.2while循环

3.2.1循环

while循环就是在满足条件期间，重复执行某些代码

3.2.2while循环基本写法
  1. 语法

while（循环条件）{
要重复执行的代码（循环体）
}

  1. 解释
  • 要满足循环条件是true才会进入循环体执行代码
  • while大括号里面代码执行完毕之后不会跳出，而是继续回到小括号里判断是否满足条件，如果满足，则继续执行循环体，再回到小括号里判断是否满足条件；如果不满足，则跳出while循环
3.2.3while循环三要素

  1. 变量起始值

  2. 终止条件（没有终止条件会造成死循环）

  3. 变量变化量（一般用自增或者自减）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let i = 1;
      while (i <= 10) {
        document.write(
          "<h4>无关风月，我题序等你回，悬笔一绝，那岸边浪千叠</h4><hr>"
        );
        i++;
      }
    </script>
  </body>
</html>

3.3循环退出

3.3.1break
  1. 特点：
    退出整个循环
  2. 作用：
    一般用于结果已经得到，后续的循环不需要的时候可以使用
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let i = 1;
      while (i <= 5) {
        if (i === 4) {
          break;
          //   退出整个循环
        }
        console.log(`明天要上课${i}节课`);
        i++;
      }
    </script>
  </body>
</html>
3.3.2continue
  1. 特点：
    结束本次循环，继续下一次循环
  2. 作用：
    一般用于排除或者跳过某一个选项的时候可以使用
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let i = 1;
      while (i <= 5) {
        if (i === 4) {
          i++;
          // 先对变量i进行自增，如果没有，则会一直卡在这一步
          // 需要先对变量i进行自增，不能在continue之后，若在其之后，将不会执行代码
          continue;
          //   退出本次循环，下方的代码不会再执行
        }
        console.log(`明天要上课${i}节课`);
        i++;
      }
    </script>
  </body>
</html>

循环-for

1. for循环基本使用

1.1用处

重复执行某一部分代码

1.2好处

把声明起始值、循环条件、变量变化量写到一起，和while之下更简介，清晰

1.3语法

for (变量起始值; 终止条件; 变量变化量){
需要重复执行的代码（循环体）
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      for (let i = 1; i <= 10; i++) {
        // 一定会被执行，在判断i是否满足条件，满足则执行循环体代码，反之，退出循环
        alert(`今天上午没有课，${i}很高兴`);
        // 循环体代码
      }
    </script>
  </body>
</html>

1.4for循环的最大价值：循环数组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let names = ["梅", "兰", "竹", "菊"];
      console.log(names[0]);
      console.log(names[1]);
      console.log(names[2]);
      console.log(names[3]);
      for (let i = 0; i <= names.length - 1; i++) {
        // 必须从0开始，因为数组索引号是从0 开始的
        // 数组的长度减一
        //   第二种写法：for (let i = 0; i < names.length; i++) {
        // 遍历数组：从头到尾的取出数组中的每个元素，从第一个循环到最后一个
        // 如果找不到数组中的元素，则会出现未被定义的现象
        document.write(`四大君子之一是${names[i]}<br>`);
      }
    </script>
  </body>
</html>

1.5退出循环

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      for (let i = 1; i <= 5; i++) {
        if (i === 2) {
          continue;
          //   当i= 2 时候，那一次循环continue代码之下的代码不会再执行，即是退出那一次循环
        }
        document.write(`我今天要听${i}首歌！<br>`);
      }
    </script>
  </body>
</html>

1.6无限循环

  • while的无限循环语法
    while（true）
  • for的无限循环语法
    for（; ;）

2. for循环嵌套

2.1 语法

for（外部声明记录循环次数的变量；循环条件；变化值）{
for（内部声明记录循环次数的变量；循环条件；变化值）{
需要循环执行的代码
}
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      for (let days = 1; days <= 3; days++) {
        // 外层循环打印 第n天
        document.write(`第${days}天<br>`);
        for (let num = 1; num <= 5; num++) {
          // 内层循环打印 第n首歌
          document.write(`我听了${num}首歌<br>`);
        }
      }
    </script>
  </body>
</html>

数组

1. 定义

1.1定义

array是一种可以按照某种顺序保存数据的数据类型

1.2用处

可以用一个变量保存一个数组，而数组中可以保存多个数据

2. 数组的基本使用

2.1声明语法

2.1.1语法

let 数组名[数据1，数据2，数据3，…，数据n]

2.1.2注意
  • 数组是按照顺序保存，每一个数据都有自己的编号
  • 编号是从0开始的
  • 在数组中，数据的编号也叫索引或者下标
  • 数组可以存储任意类型的数据
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let names = ["无关风月", "我题序等你回", "悬笔一绝那岸边浪千叠"];
      //   用字面量声明数组
      let arr = new Array(1, 2, 3, 4, 5);
      //   使用new Array构造函数声明
      document.write(arr);
      document.write(names);
    </script>
  </body>
</html>

2.2取值语法

2.2.1语法

数组名 [ 下标 ]

2.2.2注意
  • 数组是通过下标来取数据
  • 取出是什么数据，就根据这种类型特点来访问

2.3一些术语

2.3.1元素

数组中保存的每个数据

2.3.2下标

数组中数据的编号

2.3.3元素长度

数组中数据的个数，通过数组的length属性获得

2.4遍历数组

2.4.1语法：

for（let i= 0；i<数组名。length；i++）{
数组名[i]
}

2.4.2找到数组中的最大值和最小值
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [2, 6, 1, 7, 4];
      let max = arr[0];
      let min = arr[0];
      for (let i = 1; i <= arr.length; i++) {
        if (arr[i] > max) {
          max = arr[i];
        }
        if (arr[i] < min) {
          min = arr[i];
        }
      }
      alert(`数组中最大的数是${max}`);
      alert(`数组中最小的数是${min}`);
    </script>
  </body>
</html>

3. 操作数组

3.1修改

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [2, 6, 1, 7, 4];
      document.write(arr);
      document.write(arr[5]);
      // 数组中没有下标为5的数据，所以会出现undefined
      arr[5] = 9;
      // 现在往下标为5的那个数据添加元素
      arr[6] = 10000009;
      // 现在往下标为6的那个数据添加元素
      arr[0] = 0;
      // 现在把下标为0的那个数据元素进行改变
      document.write(arr[5]);
      document.write(arr[6]);
      document.write(arr);
      let arr1 = ["li", "zhang", "liu", "zhao"];
      // 现在想要改成li老师，zhang老师，liu老师，zhao老师
      // 既然是所有的元素要修改，所以需要用到遍历
      for (let i = 0; i < arr1.length; i++) {
        arr1[i] = arr1[i] + "老师";
      }
      document.write(arr1);
    </script>
  </body>
</html>

3.2新增

3.2.1arr.push(新增加的内容)
  1. 定义
    将一个或者多个元素添加到数组的末尾，并返回该数组的新长度
  2. 语法
  • arr.push(新增加的内容)
3.2.2arr.unshift(新增加的内容)
  1. 定义
    将一个或者多个元素添加到数组的开头，并返回该数组的新长度
  2. 语法
  • arr.unshift(新增加的内容)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = ["li", "zhang", "liu", "zhao"];
      arr.push("yang", "hou");
      // 一次可以加很多个，在原来数组之后加
      arr.unshift("song");
      // 一次可以加很多个，在原来数组之前加
      document.write(arr);
      document.write(arr.length);
    </script>
  </body>
</html>

3.3数组筛选

3.3.1案例1
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [2, 0, 6, 1, 77, 52, 0, 25, 7];
      let arr1 = [];
      //   声明一个新的数组，来存放满足条件的内容
      for (let i = 0; i < arr.length; i++) {
        // 实现数组的遍历
        if (arr[i] >= 10) {
          arr1.push(arr[i]);
        //   满足条件的就在后面推入新的数组
        }
      }
      document.write(arr1);
    </script>
  </body>
</html>
3.3.2案例2
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [2, 0, 6, 1, 77, 52, 0, 25, 7];
      let arr1 = [];
      //   声明一个新的数组，来存放满足条件的内容
      for (let i = 0; i < arr.length; i++) {
        // 实现数组的遍历
        if (arr[i] !== 0) {
          arr1.push(arr[i]);
          //   满足条件的就在后面推入新的数组
        }
      }
      document.write(arr1);
    </script>
  </body>
</html>

3.4删除

3.4.1arr.pop()
  1. 定义
    从数组中删除最后一个元素，并且返回该元素的值
    注意：一次只能删除一个
  2. 语法
  • arr.pop()
3.4.2arr.shift()
  1. 定义
    从数组中删除第一个元素，并且返回该元素的值
  2. 语法
  • arr.shift()
3.4.3arr.splice(操作的下标，删除的个数)
  1. 定义
    可以删除指定的元素
  2. 语法
  • arr.splice(操作的下标，删除的个数)
    注意：
  • 起始位置：指定修改的开始位置（从0开始计数）
  • 删除的个数：表示要移除的数组的元素的个数
  • 如果没有给出删除的个数，那么就从指定的起始位置删除到最后
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let arr = [2, 0, 6, 1, 77, 52, 0, 25, 7];
      arr.pop();
      //   ()里面什么都不需要写，一次只能删除一个元素，并且是最后一个
      arr.shift();
      //   ()里面什么都不需要写，一次只能删除一个元素，并且是第一个
      arr.splice(3, 2);
      //   是从索引号3的位置开始删，只删除两个
      //   splice删除指定元素arr.splice(操作的下标(索引号)，删除的个数)
      //   如果没有给出删除的个数，那么就从指定的起始位置删除到最后，即索引号之后的数据会被全部删除
      document.write(arr);
    </script>
  </body>
</html>
帆高#
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Project-41:水果捕手part2
03-12
在本项目"Project-41:水果捕手part2"中，我们将专注于使用JavaScript来实现一个有趣的游戏——水果捕手。这个项目的第二部分可能涉及到游戏逻辑的深化、用户交互的增强以及可能的动画效果的添加。JavaScript是Web...
js-wired-part:了解javascript有线部分
04-18
这些是构建任何JavaScript应用的基础，无论是前端网页交互还是后端服务器逻辑。 首先，我们要理解JavaScript是一种动态类型的脚本语言，这意味着变量的数据类型在运行时可以改变。它提供了七种基本数据类型：...
前端——JavaScript基础学习【part 4】
qq_73958269的博客
05-19 280
目录第一部分Web API基本认知1.变量声明2.作用和分类3.DOM4.DOM树5.DOM对象获取DOM对象1.根据CSS选择器来获取DOM元素1.1选择匹配的第一个元素1.2选择匹配的多个元素2.其他获取DOM元素方法操作元素内容1.对象.innerText属性2.对象.innerHTML属性操作元素属性1.操作元素常用属性1.1语法2.操作元素样式属性2.1通过style属性操作CSS2.2操作类名（className）操作CSS2.3通过classList操作类控制CSS3.操作表单元素属性3.1获
前端——JavaScript基础学习【part 1】
qq_73958269的博客
05-02 77
是一种运行在客户端(浏览器)的编程语言,实现人机交互效果注意:JavaScript是一种编程语言,而HTML和CSS是一种标记语言在计算机中描述的事或者物10000 是个数字字面量'今天是五一’是字符串字面量[]是数组字面量{}是对象字面量变量就是一个在计算机中存储数据的容器数组是一种将一组数据存储在单个变量名的方式定义：只是声明一个变量而没有给这个变量赋值，这个变量的默认值为undefinedundefined表示没有赋值null表示赋值了，但是内容是空的let ud;
前端——JavaScript基础学习【part 5】
qq_73958269的博客
05-30 50
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式搜索模式可用于文本搜索和文本替换正则表达式是由一个字符序列形成的搜索模式当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容正则表达式可以是一个简单的字符，或一个更复杂的模式正则表达式可用于所有文本搜索和文本替换的操作例如：验证表单：用户名表单只能输入英文字母，数字或者下划线，昵称输入框中可以输入中文（匹配）
web前端学习笔记——Javascript（part 2）
wjsn520的博客
12-07 472
web前端开发基础 第四章——Javascript（part 2） 目录web前端开发基础第四章——Javascript（part 2）Javascript组成一、获取元素方法二二、字符串处理方法三、类型转换四、定时器五、变量作用域六、封闭函数七、常用内置对象 Javascript组成 1、ECMAscript javascript的语法（变量、函数、循环语句等语法） 2、DOM 文档对象模型 操作html和css的方法 3、BOM 浏览器对象模型 操作浏览器的一些方法 一、获取元素方法二 可以使用内置
web前端学习笔记——JavaScript（part 1）
wjsn520的博客
12-05 992
web前端开发基础 第四章——Javascript 目录web前端开发基础第四章——Javascript概述一、JavaScript嵌入页面的方式二、变量1.关键字2.变量类型3.javascript语句与注释4.变量、函数、属性、函数参数命名规范5.匈牙利命名风格：三、获取元素方法四、操作元素属性操作属性的方法属性写法通过“.”操作属性：通过“[ ]”操作属性：innerHTML1.css基本语法1.css基本语法1.css基本语法1.css基本语法1.css基本语法1.css基本语法1.css基本语法
前端——CSS基础学习【part 1】
qq_73958269的博客
03-25 82
1.CSS也是一种标记语言2.CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式3.CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单4.CSS语法规范CSS 规则由两个主要的部分构成：选择器以及一条或多条声明5.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式（1）属性和属性值以“键值对”的形式出现。
前端笔记——javaScript(3)
weixin_66327871的博客
07-08 905
他是运行在浏览器端的脚本语言，简称js。它能够让网页和用户实现交互功能。
前端——CSS基础学习【part 3】
qq_73958269的博客
04-09 86
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。
【前端基础】交互控制——JavaScript基础
weixin_44275259的博客
08-23 289
1
21天学通JavaScript源代码part4.rar 你用你知道
03-22
"21天学通JavaScript源代码part4.rar" 是一个针对初学者的教程资源，旨在帮助学习者在21天内逐步掌握JavaScript的核心概念和技术。Part4着重讲解了JavaScript的进阶内容，包括对象、函数、作用域、闭包等重要知识点...
GuessingGame-Part3
05-02
《全面解析jQuery猜谜游戏——GuessingGame-Part3》 在编程的世界里，互动性是提升用户体验的关键因素。在Fullstack Academy的Foundations程序中，一个基于jQuery的猜谜游戏"GuessingGame-Part3"应运而生。这个项目...
fullstackopen-part4：FullStackOpen的练习-第4部分
02-24
《全栈开发实战教程——...总结，FullStackOpen的第4部分是一次全面的JavaScript学习之旅，涵盖了从基础到进阶的各个层面。通过深入学习，你可以提升自己的全栈开发能力，为构建复杂、高性能的Web应用打下坚实基础。
Webkit简介以及工作流程
读心悦
07-10 310
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
最新发布
cc1314_工作、学习有感
07-12 188
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 309
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 165
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
JavaScript基础学习
06-29
JavaScript 是一种用于添加交互...学习 JavaScript 的基础知识对于任何想要从事前端开发的人来说都是非常重要的。通过选择好的教材和不断练习，我们可以逐渐掌握 JavaScript，并使用它来创建出更加交互丰富的网页应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值