学习笔记---1、JS

小蚂蚁t

已于 2024-04-16 18:05:38 修改

阅读量343

点赞数 5

分类专栏：前端文章标签： javascript

于 2024-03-19 17:38:31 首次发布

本文链接：https://blog.csdn.net/m0_60027682/article/details/136849920

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、初始JS

1、js的三种书写位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 3、外部JS文件 -->
		<script src="my.js"></script>
		<title></title>
		<!-- 2、内嵌JS -->
		<script>
			alert('hello2!');
		</script>
	</head>
	<body>
		<!-- 1、行内式JS -->
		<button onclick="alert('hello1!')">点我</button>
	</body>
</html>

2、JS的输入输出语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			alert('我是弹出的警示框');
			console.log('我是控制台才能看到的信息');
			prompt('请输入一个数字：');
		</script>
	</head>
	<body>
		<img src="img/JavaScript 输入输出语句.png"/>
	</body>
</html>

以下是效果图：

3、变量

3.1、声明、使用：

var age;//1、声明了age是一个变量名
age = 18;//2、将18存入age变量中
alert(age);//3、将age变量存的值输出
//4、变量的初始化
var name = '张三';

3.2、声明变量特殊情况

3.3、变量名命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while 、name（尽量不要直接使用）
变量名必须有意义。 nl（年龄） → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

二、数据类型

1、为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

2、变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10;        // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串

在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

3、数据类型的分类

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

3.1、简单数据类型（基本数据类型）

3.2、数字型Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

//数字型的最大值
console.log(Number.MAX_VALUE);//1.7976931348623157e+308
//数字型的最小值
console.log(Number.MIN_VALUE);//5e-324
//无穷大
console.log(Number.MAX_VALUE*2);//Infinity
//无穷小
console.log(-Number.MAX_VALUE*2);//-Infinity
//非数字
console.log('abc'-1);//NaN
//isNaN()用来判断一个变量是否为非数字的类型，返回 true 或者 false 
var num = 1,str = 'abc';
console.log(isNaN(num));//false
console.log(isNaN(str));//true

3.3、字符串型String

3.3.1、字符串型引号

可以是引号中的任意文本，其语法为双引号 "" 和单引号''。推荐使用单引号。

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

var str1 = "abc";
var str1 = '123';
console.log('123"abc"456');//123"abc"456

3.3.2、字符串转义符（需要包含在引号里面）

3.3.3、字符串长度length

var str3 = '大苹果！';
console.log(str3.length);//4

3.3.4、字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

只要有字符串和其他类型相拼接，最终的结果是字符串类型

+ 号总结口诀：数值相加，字符相连

console.log('hello' + ' ' + 'world!');//hello world!
console.log('100'+'100');//100100
console.log('10' + 100);//10100
console.log(100 + 100);//200

3.4、布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1); //2
console.log(false + 1); //1

3.5、Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);//undefined
console.log('你好' + variable);//你好undefined
console.log(11 + variable);//NaN  undefined和数字相加最后的结果是NaN
console.log(true + variable);//NaN

一个声明变量给 null 值，里面存的值为空

var vari = null;
console.log('你好' + vari);//你好null
console.log(11 + vari);//11
console.log(true + vari);//1

4、获取变量数据类型

var a1 = 1;
console.log(typeof a1); //number
var a2 = 'abc';
console.log(typeof a2); //string
var a3 = true;
console.log(typeof a3); //boolean
var a4 = undefined;
console.log(typeof a4); //undefined
var a5 = null;
console.log(typeof a5); //object

//prompt取过来的值是字符串类型
var age = prompt('请输入年龄：');
console.log(typeof age); //string

5、数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

转换为字符串类型
转换为数字型
转换为布尔型

5.1、转换为字符串类型

5.1.1、toString()

把数字型转换为字符串型。变量名.toString()

var num = 10;
console.log(typeof num); //number
console.log(typeof num.toString()); //string

5.1.2、String()

强制转换字符串

var num = 20;
console.log(typeof num); //number
console.log(typeof String(num)); //string

5.1.3、隐式转换：+ 号拼接字符串

和字符串拼接的结果都是字符串。

var num = 30;
console.log(typeof(num + ''));

5.2、转换为数字型

5.2.1、parseInt(string)函数

将string类型转成整数数值型。注意单词的大小写。

console.log(parseInt('3.14')); //3 取整
console.log(parseInt('3.99')); //3 取整
console.log(parseInt('120pxaaa')); //120 会去掉后面的其他字符
console.log(parseInt('abc120pxaaa')); //NaN

5.2.2、parseFloat(string)函数

将string类型转成浮点数数值型。注意单词的大小写。

console.log(parseFloat('3')); //3
console.log(parseFloat('3.99')); //3.99
console.log(parseFloat('120pxaaa')); //120 会去掉后面的其他字符
console.log(parseFloat('abc120pxaaa')); //NaN

5.2.3、Number()

将string类型转成数值型。

console.log(typeof Number('123')); //number

5.2.4、隐式转换（ - * / ）

在进行算数运算的时候，JS 自动转换了数据类型。

console.log('12' - 0); //12
console.log('12' * 1); //12
console.log('12' / 1); //12
console.log('12.9' - '2'); //10.9

5.3、转换为布尔型

Boolean()函数：

代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
其余值都会被转换为 true

console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean('1'));//true
console.log(Boolean('0'));//true

三、运算符（操作符）

1、运算符的分类

算术运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

2、算术运算符

3、递增和递减运算符

前置递增运算符

++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
使用口诀：先自加，后返回值

后置递增运算符

num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。
使用口诀：先返回原值，后自加

4、比较运算符

5、逻辑运算符

拓展：短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

1、逻辑与（有0为0）

表达式1 && 表达式2

console.log(123 && 456); //456
console.log(0 && 456); //0
console.log(123 && 0); //0
console.log(123 && 456 && 789); //789

如果第一个表达式的值为真，则返回表达式2

如果第一个表达式的值为假，则返回表达式1（短路）

2、逻辑或（全0为0）

表达式1 || 表达式2

console.log(123 || 0); //123
console.log(0 || 456); //456
console.log(0 || 0); //0
console.log(123 || 456 || 789); //123

如果第一个表达式的值为真，则返回表达式1（短路）
如果第一个表达式的值为假，则返回表达式2

6、赋值运算符

7、运算符优先级

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

四、流程控制

流程控制就是来控制代码按照一定结构顺序来执行。
流程控制主要有三种结构，分别是**顺序结构**、**分支结构**和**循环结构**，代表三种代码执行的顺序。

1、顺序结构

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

2、分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS 语言提供了两种分支结构语句：if 语句、switch 语句。

2.1、if语句

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

2.2、switch 语句

switch ：开关转换， case ：小例子选项
关键字 switch 后面括号内可以是表达式或值，通常是一个变量
关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
switch 表达式的值会与结构中的 case 的值做比较

switch( 表达式 ){
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

2.3、switch 语句和 if else if 语句的区别

一般情况下，它们两个语句可以相互替换
switch...case 语句通常处理 case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
当分支比较少时，if… else语句的执行效率比 switch语句高。
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

2.4、三元表达式

类似于 if else （双分支）的简写

表达式1 ? 表达式2 : 表达式3;

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

3、循环结构

3.1、for循环

for (初始化变量; 条件表达式; 操作表达式) {
	//循环体
}

3.2、while循环

while(条件表达式) {
    //循环体
}

3.3、do...while循环

do{
    //循环体
} while(条件表达式);

3.4、continue关键字

跳出本次循环，继续下一次循环。

3.5、break关键字

跳出整个循环，循环结束。

五、数组

1、概念：

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

2、创建数组

2.1、利用 new 创建数组

var 数组名 = new Array();

2.2、利用数组字面量创建数组

var 数组名 = ['值1', '值2', '值3'];

2.3、数组元素的类型

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arr = [1, 'abc', true];

3、获取数组元素

//元素下标从0开始
var arr = [1, 'abc', true];
console.log(arr[1]); //abc
console.log(arr[3]); //undefined 没有这个数组元素

4、遍历数组

把数组的元素从头到尾访问一次。

for (var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

5、数组中新增元素

5.1修改length长度

var arr1 = [1, 'abc', true];
arr1.length = 4;
console.log(arr1); //[1, 'abc', true, empty]
console.log(arr1[3]); //undefined

5.2修改索引号

var arr2 = [1, 'abc', true];
arr2[4] = 'red';
console.log(arr2); //[1, 'abc', true, empty, 'red']

六、函数

1、函数的概念

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

2、函数的使用

//2.1声明函数
function sayHi() { // function:声明函数的关键字
	console.log('hi');
}
//2.2调用函数
sayHi();

3、函数的参数

function 函数名(形参1,形参2...) { // 形式上的参数
}
函数名(实参1,实参2...); // 实际的参数

拓展：函数的形参和实参个数匹配问题

function getSum(num1, num2) {
	console.log(num1 + num2);
}
// 1、实参个数多余形参个数：会取到形参的个数
getSum(1, 3, 5); // 4
// 2、实参个数小于形参个数：
getSum(1); // NaN    多的形参定义为underfined，结果为NaN

4、函数的返回值

4.1、return语句

4.4.1、函数只是实现某种功能，最终的结果需要通过 return 返回给函数的调用者。

4.4.2、格式

function 函数名() {
	return 需要返回的结果；//遇到 return ，就把结果返回给函数调用者 函数名() = return 后面的结果。
}

4.4.3、验证

function getResult(num1, num2) {
	return num1 + num2;
}
console.log(getResult(1, 2)); // 3（数字）
console.log(getResult('1', 2)); // 12 (字符串)

4.2、return 终止函数

function getTest1() {
	return console.log('可以看到第一条语句的输出哦！'); // 可以看到第一条语句的输出哦！
	console.log('return 后面的语句将不会被执行，因此在控制台看不到这第二条语句的输出');
}
console.log(getTest1()); // undefined

4.3、return 返回值

4.3.1、只能返回一个值，返回的结果是最后一个值

function getTest2(num1, num2, num3) {
	return num1, num2, num3; // 只能返回一个值，返回的结果是最后一个值
}
console.log(getTest2(1, 2, 3)); // 3

4.3.2、返回一个数组

function getTest3(num1, num2) {
	return [num1 + num2, num1 - num2]; // 返回一个数组
}
console.log(getTest3(1, 2)); // (2) [3, -1]

4.4、函数没有 return 返回 undefined

function getTest4(num1, num2) {
}
console.log(getTest4(1, 2)); // undefined

4.5、break ,continue ,return 的区别

break ：结束当前的循环体（如 for、while）。
continue ：跳出本次循环，继续执行下次循环（如 for、while）。
return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码。

5、arguments的使用

6、函数案例

7、函数的两种声明方式

小蚂蚁t

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
学习笔记---1、JS

js基础学习笔记
复制链接

扫一扫

专栏目录