H5大前端（Web前端）学习笔记（三）-JavaScript部分(一)

30ring

于 2024-03-06 18:53:15 发布

阅读量1k

点赞数 26

分类专栏： Web前端文章标签：前端学习笔记 javascript

本文链接：https://blog.csdn.net/weixin_71370424/article/details/135425616

版权

Web前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

学习视频: https://www.bilibili.com/video/BV1gY4y1U78C/?p=40&vd_source=c096def4d5f55f1aab46258c0a27641b

前端Web

JavaScript

JavaScript

JavaScript介绍

JavaScript是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。
JavaScript是一种嵌入式（embedded）语言，它本身提供的核心语法不算很多。
JavaScript和ECMAScript的关系
ECMAScrip和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

JavaScript版本

在这里插入图片描述

JavaScript语句、标识符

语句

JavaScript程序的单位是行（line），也就是一行一行地执行，一般情况下，每一行就是一个语句

var num = 10;

语句以分号结尾，一个分号就表示一个语句结束

标识符

标识符（identifiter）指的是用来识别各种值的合法名称。最常见的标识符就是变量名
标识符是由：字母、美元符号（$）、下划线（_）和数字组成，其中数字不能开头

温馨提示
中文是合法的标识符，可以用作变量名（不推荐）

JavaScript有一些保留字，不能用作标识符

变量

① 变量的重新赋值
② 变量提升
JavaScript引擎的工作方式，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这里造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.log(num);
var num = 30;//运行结果：undefined

JS引入到文件

① 嵌入到HTML文件中

<body>
    <script>
        var num = 30;
    </script>
</body>

② 引入本地独立JS文件

<body>
    <script type="text/javascript" src="./xxx.js"></script>
</body>

③ 引入网络来源文件

<body>
    <script src="http://......"></script>
</body>

JS注释与常见输出方式

注释

源码中的注释是不被引擎所解释的，它的作用是对代码进行解释

单行注释
多行注释

<body>
    <!-- 嵌在HTML文件中的注释 -->
    <script>
        //单行注释
        /*
            这是
            多行
            注释
         */
    </script>
</body>

注释的快捷键：ctrl+/
/* */ CSS注释

输出方式

弹出框
页面输出
控制台输出

alert("弹出框输出。");
document.write("页面输出。")
console.log("控制台输出。")

都是把要输出的内容首先转换为字符串然后再输出。

数据类型

数值、字符串、布尔值、null、undefined、对象

数据类型的分类

JS语言的每一个值，都属于某一种的数据类型
JS的数据类型共有6种
ES6中新增了Symbol和BigInt

原始数据类型（基础类型）

数值：var num = 20;
字符串：var name = "hello"; （单引号或双引号包裹的）
布尔值：var flag = true; （true / false）

合成类型（复合类型）

Object（对象）：因为一个对象往往是多个原始数据类型的值的合成，可以看作是一个存放各种值的容器

var user = {
	name:"张三",
	age:20
}

至于undefined和null，一般将这两个看作特殊值。

typeof运算符

判断基本数据类型

类型	返回值
`typeof 123`	数值返回`number`
`typeof '123'`	字符串返回`string`
`typeof true`	布尔值返回`boolean`
`typeof {}`	对象返回`object`

**注：**返回Object的情况有很多种

null和undefined区别

null一般代表对象为空
undefined一般代表数值为“没有”

运算符

算数运算符

① 加减乘除运算符：+ - * /
② 余数运算符：%
③ 自增和自减运算符：++ -- （一元运算符）

++num和num++的区别

++在前：先自增再运算
++在后：先运算再自增

赋值运算符

用于给变量赋值

运算符	表达式
`=`	赋值运算符
`+=`	`x += y` →`x = x + y`
`-=`	`x -= y` →`x = x - y`
`*=`	`x = y` →`x = x y`
`/=`	`x /= y` →`x = x / y`
`%=`	`x %= y` →`x = x % y`

比较运算符

用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定条件

比较运算符	描述
`<`	小于
`>`	大于
`<=`	小于等于
`>=`	大于等于
`==`	相等
`===`	严格相等
`!=`	不等于
`!==`	严格不等于

==和===的区别
===需要以下两种同时符合：

数值本身是否相同
类型本身是否相同

布尔运算符

① 取反运算符（!）

布尔值取反：!true → false，!false → true
非布尔值取反：转为布尔值再进行取反
- undefined、null、false、0、NaN、空字符串("")的布尔值为false，取反为true
- 其余值取反为false

② 且运算符（&&）

多个条件都要满足，返回true

③ 或运算符（||）

满足其中一个条件返回true

三元运算符（三目运算符）

(条件)?表达式1:表达式2

条件为真（true）执行表达式1
条件为假（false）执行表达式2

条件语句

if 语句

① if 语句

if(表达式){
    语句;
}

② if…else 语句

if(条件){
    //满足条件时执行
}else{
    //不满足条件时执行
}

③ if…else if…else 语句

if(条件1){
    //满足条件1时执行
}else if(条件2){
    //满足条件2时执行
}else if(...){
	//...
}else if(条件n){
	//满足条件n时执行
}else{
    //不满足条件时执行
}

④ if…else 嵌套

if(条件1){
    //满足条件1时执行
    if(条件2){
        //满足条件1且满足条件2时执行
    }else{
    	//满足条件1且不满足条件2时执行
    }
}else{
    //不满足条件时执行
}

if…else匹配规则
if总是找离它最近的一个else进行匹配

switch语句

switch(表达式){
    case 值1:
        //表达式满足值1执行
        break;
    case 值2:
        //表达式满足值2执行
        break;
    ...
    case 值n:
        //表达式满足值n执行
        break;
    default:
        //默认执行
}

不加break：从符合条件的语句开始，后面的每一条都执行

循环语句

for循环

for(初始化表达式; 条件; 迭代因子){
    语句块;
}

初始化表达式：确定循环变量的初始值，只在循环开始时执行一次
条件：每轮循环开始时，都要执行这个表达式，只有只为真时，才会执行循环
迭代因子：每轮循环的最后一个操作，通常用来递增循环变量

// 例如：打印0-100
for(var i = 0; i <=100; i++){
    console.log(i)
}

for语句的三个表达式，可以省略任何一个，也可以全部省略
全部省略会导致死循环： for( ; ; ){//死循环}

while循环

while(条件){
    语句块;
}

所有的for循环，都可以改写成while循环
while(true){} ：死循环

break语句和continue语句

break：用于跳出代码块或循环
continue：用于立即终止本轮循环，返回循环结构的头部，进行下一轮循环

字符串

0个或多个排列在一起的字符，放在单引号或双引号中间

单引号内部可以嵌套双引号
双引号内部可以嵌套单引号
如果要在单引号字符串内使用单引号，必须进行转义，在引号前加上转义字符\，例如：\' \"

注意
字符串默认只能写在一行，如果需要换行，需要进行转义，\

length属性

返回字符串的属性，该属性无法改变
在这里插入图片描述

字符串方法：charAt()

返回指定位置的字符，参数是从0开始编号的
如果参数为负数，或大于等于字符串的长度，则返回空字符串

字符串方法：concat()

连接两个字符串，返回一个新字符串，不改变原字符串
该方法接受多个参数
如果参数不是字符串，会将参数先转化为字符串，再进行连接

可以使用+连接字符串
concat和+的区别

concat不做运算直接连接
+会先进行运算

字符串方法：substring()

从原字符串取出子字符串返回，不改变原字符串
它的第一个参数表示子字符串的开始位置，第二个参数表示结束位置（返回结果不含该位置）
- 如果省略第二个参数，表示子字符串一直到原字符串结束
- 如果第一个参数大于第二个参数，会自动更换两个参数的位置
- 如果参数是负数，会自动将参数转化为0

字符串方法：substr()

从原字符串取出子字符串返回，不改变原字符串，类似substring()
第一个参数是子字符串的开始位置（从0开始），第二个参数是子字符串的长度
- 如果省略第二个参数，表示子字符串一直到原字符串的结束
- 如果第一个参数是负数，表示倒数计算的字符位置
- 如果第二个参数是负数，将被自动转化成0，因此会返回空字符串

在这里插入图片描述

字符串方法：indexOf()

用于确定一个字符串在另一个字符串中第一次出现的位置
返回的结果是匹配开始的位置
如果返回-1，则表示不匹配
该方法还可以存在第二个参数，表示从对应位置开始查找

在这里插入图片描述

字符串方法：trim()

去除字符串两端的空格，返回一个新字符串，不改变原字符串
不仅仅去除空格还包括制表符（\t \v），换行符（\n），回车符（\r）
ES6扩展方法：
- trimEnd()：去掉尾部空格
- trimStart()：去掉头部空格

在这里插入图片描述

字符串方法：split()

按照给定规则分割字符串，返回一个由分割出来的字符串组成的数组
如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符
如果省略参数，则返回数组的唯一成员就是原字符串
该方法还可以接受第二个参数，限定返回数组的最大成员数

在这里插入图片描述

数组

array：按次序排列的一组值，每个值的位置都有编号（下标，从0开始），整个数组用方括号表示

var arr = [1, 2, 3];

除了在定义时赋值，数组也可以先定义后赋值

var arr = [];
arr[0] = 1;
arr[1] = 2;

任意类型的数据都可以放入数组中
下标：赋值、读取

length属性

获取数组的成员数量
数组越界：undefined

数组的遍历

使用for循环

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for(var i=0; i<arr.length; i++){
    console.log(arr[i]);
}

使用while循环

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var i = 0;
while(i < arr.length){
    console.log(arr[i]);
    i++;
}

for…in遍历数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for(var i in arr){
    console.log(arr[i]);
}

数组静态方法：Array.isArray()

返回一个布尔值，表示参数是否为数组
可以弥补typrof运算符的不足（数组的关键字：Array）

数组方法：push()/pop()

push()方法用于在数组末端添加一个或多个元素，并返回添加新元素后数组的长度，该方法会改变原数组
pop()方法用于删除数组的最后一个元素，并返回该元素，该方法会改变原数组

数组方法：shift()/unshift()

shift()方法用于删除数组的第一个元素，并返回该元素，该方法会改变原数组
- 该方法可以遍历并清空一个数组

//清空数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var item;
while(item = arr.shift()){
    console.log(item);
}
console.log(arr);

在这里插入图片描述

unshift()方法用于在数组的第一个位置添加元素，返回添加新元素之后的数组长度，该方法会改变原数组
- 可以接受多个参数，这些参数都会添加到原数组的头部

数组方法：join()

以指定参数作为分隔符，将所有数组成员连接为一个字符串返回，如果不提供参数，默认用逗号分隔
如果数组成员是undefined或null或空位，会被转为空字符串
数组的join配合字符串的split可以实现数组与字符串的互换

数组方法：concat()

用于多个数组的合并，它将新数组的成员添加到原数组成员的后部，返回一个新数组，不改变原数组
除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组的尾部

应用场景
上拉加载，合并数据

数组方法：reverse()

用于颠倒排列数组元素，返回改变后的数组，该方法会改变原数组
实现字符串翻转

var str = "HelloWorld";
var arr = str.split("");
arr.reverse();
var result = arr.join("");
console.log(result)

数组方法：indexOf()

返回给定元素在数组中第一次出现的位置，如果没有则返回-1
该方法还可以接受第二个参数，表示搜索开始的位置

函数

函数是一段可以反复调用的代码块

函数的声明

function命令：function命令声明的代码区块，就是一个函数
function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数
函数体放在大括号中

function print(num){
	//函数体
    console.log(num);
}
print(5);//调用函数

函数名的提升

JavaScript引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部

函数的参数

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数

函数的返回值

JavaScript函数提供两个接口实现与外界的交互，其中参数作为入口，接收外界信息；返回值作为出口，把运算结果返回给外界

return 后面不能添加任何代码，因为不会执行

30ring

关注

26
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5大前端（Web前端）学习笔记（三）-JavaScript部分(一)

JavaScript是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。JavaScript是一种嵌入式（embedded）语言，它本身提供的核心语法不算很多。JavaScript和ECMAScript的关系ECMAScrip和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
复制链接

扫一扫