JS基础学习

笨比2号

已于 2023-08-19 09:43:18 修改

阅读量58

点赞数 1

分类专栏：前端学习文章标签： javascript 学习开发语言

于 2023-08-15 14:24:17 首次发布

本文链接：https://blog.csdn.net/m0_62289159/article/details/132298084

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JS基础

一.基础语法

1.js简介

(1)是什么

js是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

(2)作用

1.网页特效：监听用户的一些行为让网页做出对应的反馈
2.表单验证：针对表单数据的合法性进行判断
3.数据交互：获取后台的数据，渲染到前端
4.服务端编程：node.js

(3)组成

1.ECMAScript：规定了js基础语法核心知识
比如：变量、分支语句、循环语句、对象等等

2.Web APIs：
DOM（页面文档操作模型）：操作文档，比如对页面元素进行移动、大小、添加、删除等操作
BOM（浏览对象模型）：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

(4)书写位置

1.内嵌式
将js代码嵌入到html文件中，在html文件中添加一个 script, script标签中的代码就是js代码，script标签的位置可以在任何地方 (推荐在 head标签中或者 /body标签上面)

我们将 < script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。
如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。
因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

2.外联式
先创建一个js文件后缀名是 xxxx.js，不能使用link标签引入js文件,使用script标签引入js文件

<body>
	<script src="my.js"></script>
</body>

3.内联式

<body>
    <button onclick="alert('111')">222</button>
</body>

注意：js严格区分大小写

(5)结束符

作用：使用 ; 代表语句结束

实际情况中，可写可不写

(6)输出语句

语法1

document.write('要输出的内容')

向body内输出内容
如果输出的内容写的是标签，也会被解析成网页元素

语法2

alert('要输出的内容')

页面弹出警告对话框

语法3

console.log('控制台输出')

控制台输出语法，程序员调试用的

(7)输入语句

语法1：

prompt('请输入您的姓名：')

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

语法2:

confirm('你确定吗')

只有确定和取消两个按钮

2.变量

(1)字面量

在计算机科学中，字面量（literal）是在计算机中描述事/物

(2)变量定义

变量: 不断变化的一个值

在程序中的变量: 在程序中变量类似于一个容器.保存数据的

(3)基本使用

1.声明变量

let  自定义变量名

let即关键字，是系统提供的专门用来声明变量的

2.赋值

let age;age=18
或者 let age=18

声明多个变量中间用 , 隔开。但是推荐分开声明

(4)本质

内存：计算机中存储数据的地方，相当于一个空间
本质：是程序在内存中申请的一块用来存放数据的小空间

(5)命名规范

规则：
1.不能使用关键字
2.只能下划线、字母、数字、$组成，且数字不能开头
3.字母严格区分大小写
4.不推荐使用汉字

规范：
1.起名要有意义
2.遵守小驼峰命名法。第一个单词首字母小写，后面每个单词首字母大写

(6)let和var的区别

在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let。
var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。
let 为了解决 var 的一些问题。

相同点:

let 和 var 都属于关键字
let 和 var 都是用来定义变量的

不同点：

let 定义变量的时候,必须先定义后使用
var 定义的变量,可以先使用后定义
let 定义的变量名不能重复(同一个作用域中)
var 定义的变量名可以重复

3.数组

数组的使用

数组的作用和变量一样的,也是在程序中用来保存数据的

1.声明

let 数组名 = [数据1,数据2,...]

let 数组名 = new Array(值,值...)

D:\VScode\Microsoft VS Code
2.使用

下标(索引): 数组中每一个值对应的一个编号, 编号从0开始的
获取数组中的值语法:
数组名[索引]

4.常量

1.概念

使用 const 声明的变量称为“常量”。

2.使用

const G=9.8

注意，常量不允许重新赋值，声明的时候必须赋值(初始化)

5.数据类型

(1)分类

数据类型: 用来在计算机中标记程序的运算规则的

基本数据类型: 数字类型, 字符串类型, 布尔类型, undefined类型, null类型(属于复杂类型)

引用数据类型(复杂类型): 对象 (object)

通过 typeof(变量) 获取当前变量的数据类型

(2)数字类型

数字类型(number): 只要变量的值是纯数字且没有引号, 那么当前变量就是数字类型

数字类型特点: 在计算机中计算规则完全按照数学计算方式进行

如果变量都是数字类型(变量中保存的都是纯数字),计算完全按照数学中的运算规则计算
先乘除后加减,如果有小括号先计算小括号中的结果 — 优先级

(3)字符串类型

只要变量的值带有引号(不管是单引号还是双引号),那么变量就是字串类型

只要变量中有一个数据类型是字符串类型,那么在计算的时候遇到加号,则直接拼接字符串
如果遇到除加号以外的符号,那么计算机先将字符串转换为对应的数字,然后再计算，如果不能计算，值为NaN，代表计算错误

单引号/双引号可以互相嵌套，但是不以自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号

(4)布尔类型

只要变量的值是 true 或者 false ,那么变量的数据类型就是布尔类型

(5)undefined类型

如果变量的值是undefined或者变量没有赋值,那么变量的数据类型就是undefined类型

undefined值本身表示的含义未定义

工作中的使用场景：
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

(6)null空类型（对象类型属于引用类型）

如果变量的值是null,那么变量的数据类型叫空类型 — 对象类型

null和undefined的区别:
undefined表示没有赋值
null表示赋值了，但是内容为空

使用场景：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

(7)字符串拼接

1.使用 + 来拼接字符串

2.使用模板字符串进行拼接
模板字符串用的是反引号``
内容拼接变量时，用${}包住变量

document.write(`姓名:${username}|年龄:${age}岁`);

(8)类型转换

①隐式类型转换

隐式类型转换(了解): 属于计算机自己的行为
计算机在数学运算过程中发生隐式类型转换

如果加号也希望隐式类型转换，将加号写在前面

let a='1'
let b=1
console.log(+a + b);

true会隐式转换为数字1，false会隐式转换为数字0

计算失败输出NaN，也是数字类型

②强制类型转换

强制类型转换(显示转换): 属于程序员自己的行为

1.强制转换成数字类型

Number(变量)
parseInt(变量)
parseFloat(变量)

区别：
1.parseInt转换数据类型后，变量只保留整数部分
2.默认Number和parseFloat转换结果一样
3.Number转换过程中如果值中有一个转换失败，得到NaN，parseFloat是一个一个转，转换失败直接退出，输出转换成功的部分

2.强制转换成字符串类型

String(变量)
可以将任何一种数据类型转换成字符串类型

变量.toString(变量)
不能将undefined类型和null类型转换成字符串类型

3.强制转换成布尔类型

Boolean()

转换成false:0，空字符串，null，undefined

二.流程控制

1.运算符

(1)赋值运算符

1.= : 给变量赋值
2.+=
3.*=
4./=
5.%=

(2)算术运算符

1.+
2.-
3.*
4./
5.%

(3)比较运算符

1.>
2.<
3.>=
4.<=
5.== 判断值是否相等 1==‘1’ null=undefined
6.=== 值和数据类型都要相等
7.!=/!==

得到的结果是布尔值(true,false)

(4)一元运算符

1.++
2.–

(5)逻辑运算符

在程序中用来连接多个比较条件时候使用

|| 或
&& 且
! 非

逻辑运算符之短路运算

规则:
如果是 && 运算只要遇到 false,就立即短路,不会再执行了,直接返回当前值
如果是 || 运算只要遇到 true,立即短路,不会再执行了,直接返回当前值
如果逻辑运算中既又且又有或, 先计算且最后计算或

代码演示 || 短路:
console.log(1 || 2); // 1
console.log(0 || ‘’ || 2 || 3); // 2

代码演示 && 短路
console.log(1 && 0 ); // 0
console.log( 1 && 2); // 2

代码演示 && 和 || 同时出现
console.log(0 && 1 || 2);
console.log(“” || 0 && 2); // 0

(6)运算符优先级

1.算术运算符中( )最高
2.一元运算符和逻辑非 ++ – !
3.算术运算符 * / % + -
4.关系运算符 > >= < <=
5.相等运算符 == != === !==
6.逻辑运算符先 && 后 ||
7.赋值运算符
8.逗号运算符

2.语句

(1)表达式和语句

表达式：是可以被求值的代码，可以得到具体结果

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

(2)单条件分支语句

程序在执行的时候，如果条件成立就执行某一行代码，如果条件不成立执行其他代码

if(条件){
	对应要执行的代码1
}else {
	对应要执行的代码2
}

(3)多条件分支语句

if () {

        }
        else if () {

        }
        else if () {

        }
        else {

        }

(4)swith分支语句

多条件分支语句另外一种写法

switch (变量) {
            case 值1:
                代码1;
                break;
            case 值2:
                代码2;
                break;
            default:
                代码3;
                break;
        }

不加break会依次往下执行

(5)三元表达式

条件 ? 代码1 : 代码2

条件成立执行代码1，不成立执行代码2

?相当于if，:相当于else

(6)while循环

while(条件){
	循环执行的代码
	循环变量的改变
}

(7)关键字

break：跳出一层循环

continue：结束本次循环，开始下一次

(8)for循环

for(初始化变量;条件;变量自增(自减)){
	循环代码
}

(9)向数组中增加数据

方法一：
数组名.push(新增内容)、
在数组末尾添加值

方法二：
数组名.unshift(新增内容)
在数组开始添加值

(10)删除数组的值

方法一：
数组.pop( )
删除最后一个值

方法二：
数组.shift( )
删除数组第一个值

方法三：
数组.splice(操作的下标，删除的个数)

(11)冒泡排序

js提供的方法：sort( )

使用语法：

a,b代表数组中相邻的两个值
数组名.sort(function(a,b)){ 
	return a-b;升序排列
	return b-a;降序排列
}

三.函数

1.函数的定义

function 函数名(变量名){
	代码
}

参数直接写就可以了，不用写let

1.函数名里面的变量称为形参
2.调用函数的时候()中的值为实参
3.多个形参之间用逗号隔开
4.函数中如果只有形参，没有实参，形参默认值就是undefined

2.返回值

可设可不设
如果希望在函数外部使用函数内部变量的值，要加返回值

1.在函数内部将需要返回的值前面加return
2.在函数外部定义一个变量接受函数内部的返回值
3.返回值可以是任何类型
4.如果函数只写了一个return，得到的结果是undefined

3.补充

1.两个相同的函数，后面会覆盖前面的函数
2.在js中，实参的个数和形参的个数可以不一致
如果形参过多，会自动填上undefined
如果实参过多，多余的实参会被忽略

4.匿名函数

function(){
	代码
}

调用匿名函数

1.将匿名函数赋值给变量，变量()来调用，函数表达式写法

let fn=function(){

}
fn()

2.让匿名函数自己调用自己

(函数体)();
自调用函数后面必须写分号
(function(){
	console.log(123)
})();

5.作用域

代码能起作用的区域

分类：

1.全局作用域：函数外部的区域，在全局作用域中定义的变量可以在任何地方使用

2.局部作用域：函数内部的区域，在局部作用域定义的变量只能在自己的作用域中用

全局作用域定义一个a，可以在局部作用域也定义，代码执行时，先从当前作用域找变量，再从全局作用域中找变量

四.对象

1.介绍

对象是一个容器，保存的是各种数据。

对象是一种数据类型，以键值对形式保存数据的一种数据类型，内容没有顺序。

键值对：一个键对应一个值，比如css代码就是一个键值对

对象可以解决更复杂的问题

2.定义

1.字面量写法(推荐)

let 自定义对象名 = {}

2.构造函数写法

let 自定义对象名 = new Object()

3.保存数据

属性：在对象容器中，用来描述对象基本特征的都叫属性，属性都是一个名词

方法：在对象容器中，用来描述对象具有什么功能或者对象会干什么事情叫方法

总结：对象中除了属性就是方法

在对象中通过属性或方法保存数据
格式：
自定义属性名：值
自定义函数名：function( ){}

4.对象操作

1.查

获取对象中的值：获取对象中的属性+对象中的方法

如何获取对象中属性的值: 对象名[‘属性名’] 或者对象名.属性名

如何获取对象中的方法: 方法的本质就是一个函数, 执行对象中的函数, 如何执行一个函数? ===> 函数名();
对象名[‘方法名’] () 或者对象名.方法名();

注意事项：
1.如果对象中没有属性,则得到的结果是undefined
2.如果对象中没有对应的方法,那么会报错: xxx方法 is not a function

2.改

修改对象中的值：本质上就是给对象中的属性和方法重新赋值

修改属性的值：对象名[‘属性名’] = 值或者对象名.属性名 = 值;

修改对象中的方法：对象[‘方法名’] = function(){} 或者对象.方法名 = function(){}

3.增

向对象中新增数据: 新增属性 + 新增方法
1.在对象中新增属性: 对象名[‘自定义属性名’] = 值或者对象名.自定义属性名 = 值;
2.在对象中新增方法: 对象名[‘自定义方法名’] = function() {} 或者对象名.方法名 = function(){}

4.删

delete 对象名.属性/方法

5.遍历对象

for(let 变量 in  要被遍历的对象) {

}

for in 语法也是一个循环,循环次数会自动根据对象中的属性个数进行遍历
for in 语法中变量就是对象中的属性名 (方法名)
哪个对象要被遍历,那么就将当前对象写到 in 后面
获取对象中的值,必须通过对象名[变量] 获取
遍历方法需要特殊处理

6.内置对象

js已经定义好了，我们只负责使用，

内置对象：Math

Math是js提供的一个数学对象

具体的数学运算方法如下：

1.获取一组数字中的最大值: Math.max(值, 值, 值);
console.log(Math.max(1, 2, 3, 43, 5));

2.获取一组数字中的最小值: Math.min(值, 值, 值);
console.log(Math.min(1, 2, 3, 43, 5));

3.求绝对值
console.log(Math.abs(-1.23));

4.求一个值的幂运算 Math.pow(底数, 指数(幂))
console.log(Math.pow(2, 5));

5.对数字进行向下取整: 得到的结果是一个整数且小于或等于当前值的一个整数
返回一个距离当前数字最近的一个整数
console.log(Math.floor(1.987));

6.对数字进行向上取整: 得到的结果也是一个整数且大于或等于当前值的一个整数
console.log(Math.ceil(1.0023)); // 2

7.生成0-1之间的随机数 [0, 1) 大于等于0且小于1
console.log(Math.random());

8.通过js提供的内置方法,生成任意范围内的随机整数
公式中n代表最小值, m代表最大值
Math.floor(Math.random() * (M - N + 1)) + N;

笨比2号

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础学习

变量: 不断变化的一个值在程序中的变量: 在程序中变量类似于一个容器.保存数据的function 函数名(变量名){代码参数直接写就可以了，不用写let1.函数名里面的变量称为形参2.调用函数的时候()中的值为实参3.多个形参之间用逗号隔开4.函数中如果只有形参，没有实参，形参默认值就是undefined对象是一个容器，保存的是各种数据。对象是一种数据类型，以键值对形式保存数据的一种数据类型，内容没有顺序。键值对：一个键对应一个值，比如css代码就是一个键值对。
复制链接

扫一扫