【JavaScript】JS核心语法及函数

一二__

于 2024-10-08 17:04:20 发布

阅读量893

点赞数 28

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

本文链接：https://blog.csdn.net/m0_66584716/article/details/142764166

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、初识 JS

JavaScript 是一种基于对象和事件驱动的、并具有安全性能的脚本语言。

JavaScript 特点

向 HTML 页面中添加交互行为
脚本语言，语法和 Java 类似
解释性语言，边执行边解释

JavaScript 组成

ECMAScript：基础语法

DOM：操作 HTML 元素

BOM：操作浏览器（前进后退刷新）

JavaScript 执行原理
在这里插入图片描述

JavaScript 引用方式

内部 JS：使用 <script> 标签

<script type="text/javascript">...</script>

外部 JS：引入文件

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

行内 JS：在 HTML 标签中，使用触发属性

<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>

JavaScript 注释

单行注释

alert("恭喜你！注册会员成功"); // 在页同上弹出注册会员成功的提示框

多行注释

/*
使用 for 循环运行 “document.write("<h3>Hello World</h3>");” 5次
使用 document.write 在页面上输出 “Hello World” 
*/

JavaScript 输入输出

// alert() 警告框或信息框
[window.]alert("提示信息");

// prompt() 输入框
[window.]prompt("提示信息", "输入框的默认信息");

// confirm() 询问框
[window.]confirm("询问信息");

JavaScript 核心语法

变量、数据类型、数组、运算符号、控制语句、注释、输入/输出、语法约定

二、JS 核心语法

2-1 变量

声明变量的三种方式

var : ESCMScript5

let : ESCMScript6

const : ESCMScript6

变量命名规则（严格区分大小写）

首字母必须是(a-zA-Z)或者下划线_或者$（首字母尽量不要大写）
其他字符可以是字母或者下划线或者数字或者$
不可以用系统的关键字、保留字作为变量名
多个单词—驼峰命名

var userName;
var userLoginFlag;
// 关键字 var 可省略（但不建议）

变量声明

<script>
    var name; // 声明变量
	console.log("1",name); // 输出: 1
	var name = "天气"; // 声明变量并赋值
	console.log("2",name); // 输出: 2 天气

    // 声明赋值 window 对象下有 name:window.name
    
    var age;
	console.log("1",age); // 输出: 1 undefined
	var age = 18;
	console.log("2",age); // 输出: 2 18
</script>

<script>
    // 先声明变量再赋值
    var age;
    age = 18;
    console.log(age); // 输出: 18
    
    // 声明并赋值后修改(覆盖)
    var age = 18;
    age = 24;
    console.log(age); // 输出: 24
    
    // 单一 var 模式
    var a,
        b = 18,
        c,
        d = 20;
    console.log(a,b,c,d); // 输出: undefined 18 undefined 20
	
    // 只声明变量不赋值
    var a; 
	console.log(a);
    
    // 不声明变量只赋值(隐式声明)
	b = 10;
	console.log(b); // 输出: 10 --> window.b = 10
    
    // 不声明变量也不赋值
    c;
	console.log(c); //报错
</script>

2-2 数据类型

数据类型分类

基本数据类型（栈stack）:

数据类型	名称	描述
number	数字	包括整数和浮点数
string	字符	一组被引号（单引号或双引号）括起来的文本数据
boolean	布尔	true / false
undefined	未定义	变量声明了但未赋值
null	空值	表示空值或无值
Symbol	唯一值	ES6 引入唯一且不可变的值通常用于对象属性的唯一标识
BigInt	整数	ES11 引入表示任意精度的整数

undefined：表示变量已声明但尚未赋值，或者函数没有返回值。它通常是 JavaScript 引擎自动赋给未初始化变量的值。
null：表示空的对象指针，通常用来指示“没有值”或“无对象”。开发者在代码中显式地将变量设置为 null，表示变量当前没有实际的对象或值。

引用数据类型（堆heap）:

数据类型	描述
Object	包括普通对象、数组、函数、日期等
Array	特殊类型的对象，用于存储有序数据
Function	特殊的对象，用于封装可调用的代码块
Date	用于处理日期和时间
RegExp	用于正则表达式

基本类型包装类

Boolean ----> 基本数据类型包装成 Boolean 对象

Number ----> 基本数据类型包装成 Number 对象

String ----> 基本数据类型包装成 String 对象

typeof

typeof 检测变量的返回值

console.log(typeof 123); // 输出: number
console.log(typeof("测试")); // 输出: string

String 对象

string 字符串类型

//单双引号
var str1 = "双引号"；
var str2 = '单引号';

//反引号(es6模板字符串)
var str3 = `北京市朝阳区`;   
var msg = `
我还可以
多行输出`;

string 基本数据类型和 String 对象之间的关系

// 基本数据类型 string
let str = "hello";

// 使用基本数据类型调用方法时，JavaScript 会将其临时转换为 String 对象
console.log(str.toUpperCase()); // 输出: "HELLO"

// 也可以显式地创建一个 String 对象
let strObj = new String("world");

// 使用 String 对象的方法
console.log(strObj.toLowerCase()); // 输出: "world"

// 比较基本数据类型 string 和 String 对象
console.log(typeof str);    // 输出: "string"
console.log(typeof strObj); // 输出: "object"

// 基本数据类型 string 和 String 对象的比较
console.log(str === strObj); // 输出: false

方法名称	说明
charAt(index)	返回在指定位置的字符
indexOf(str, index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1, index2)	返回位于指定索引之间的字符串前闭后开
split(str, limit)	将字符串分割为字符串数组

// charAt(index)
let str = "hello";
console.log(str.charAt(1)); // 输出: "e"

// indexOf(str, index)
let str = "hello world";
console.log(str.indexOf("l")); // 输出: 2

// substring(index1, index2)
let str = "hello world";
console.log(str.substring(0, 5)); // 输出: "hello"

// split(str, limit)
let str = "one,two,three,four";
let arr = str.split(",", 2);
console.log(arr); // 输出: ["one", "two"]

2-3 数组

创建数组

var 数组名称 = new Array(size);

示例

var fruit = new Array("apple", "orange", " peach","banana");

var fruit = new Array(4);
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " banana ";

var fruit = ["apple", "orange", " peach","banana"]

常用属性方法

类别	名称	描述
属性	length	设置或返回数组中元素的数目
方法	join()	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
	sort()	对数组排序
	slice(start, end)	返回数组的一部分，前闭后开
	push(…elements)	向数组末尾添加一个或更多元素，返回新长度
	unshift(…elements)	向数组开头添加一个或多个元素，返回新长度
	pop()	从数组末尾移除最后一个元素，返回该元素
	shift()	从数组开头移除第一个元素，返回该元素

let arr = [1, 2, 3];
console.log(arr.length); // 输出: 3

arr.push(4);
console.log(arr); // 输出: [1, 2, 3, 4]

console.log(arr.pop()); // 输出: 4
console.log(arr); // 输出: [1, 2, 3]

console.log(arr.shift()); // 输出: 1
console.log(arr); // 输出: [2, 3]

arr.unshift(1);
console.log(arr); // 输出: [1, 2, 3]

console.log(arr.slice(0, 2)); // 输出: [1, 2]

// forEach(callback):对数组的每个元素执行一次 callback 函数
arr.forEach((item) => console.log(item));
// 输出: 1 2 3

2-4 运算符号

类型	运算符
算术运算符	+ - ***** / % ++ –
赋值运算符	= += -=
比较运算符	> < >= <= == != === !==
逻辑运算符	&& \|\| !

加号运算符 +

// 加法运算
var num = 1 + 2;      // 3
var flag = true + 1;  // 2

// 加号拼接
var str = "1" + 2;              // "12"
var a = "aa" + true + "1";      // "aatrue1"
var b = "aa" + true + (2 + 2);  // "aatrue4"
var b2 = "aa" + true + 2 + 2;   // "aatrue22"

// 一元加号将数据转化为数字类型
var c = +"2";       // 2 (number)
var d = +"false";   // NaN
var e = +"你好";    // NaN

减号运算符 -

var a1 = 2 - 1;      // 1 (number)
var a2 = "2" - 1;    // 1 (number)
var a3 = "true" - 3; // NaN (number) // 能转换为 number 的 string 就转，不能转就 NaN
var a4 = -3;         // -3 (number)
var a5 = - "5";      // -5 (number) // 调用 number 进行转换
var a6 = - true;     // -1 (number)
var a7 = - false;    // -0 (number)

比较运算符

运算符	名称	描述
==	相等运算符	比较不同类型时先把数据进行转换然后比较
===	全等运算符	比较过程比较严格时没有任何数据类型的相互转换
!=	不相等	强制转换
!==	全不等	要求严格相等运算得到的结果然后取反

console.log(true == false);      // false
console.log(true == "true");     // false
console.log(Number("true"));     // NaN

console.log("6" == 6);           // true
console.log("abc" == "abc");     // true
console.log("abc" == "Abc");     // false

console.log("6" === 6);          // false
console.log("6" !== 6);          // true
console.log(undefined == null);  // true
console.log(undefined === null); // false

逻辑运算符

运算符	名称	描述
&&	逻辑与	遇到 true 通过 false 停止全为 true 时返回最后一个操作数
\|\|	逻辑或	遇到 false 通过 true 停止

&& 优先级高于 ||

var num = "false" && 1;
	// 1
var num1 = "false" && 1 || "abc" && 0 || false && "false";
	// 1 || 0 || false
    // 1
var num2 = 0 || false || "false" && 1 && "真的" && "还是真的";
	// 0 || false || "还是真的"
	// "还是真的"
var num3 = "false" && "" || "abc" && 0 || false && "false" && true || "abc";
	// "" || 0 || false || "abc"
	// "abc"

在 JavaScript 中，&&（逻辑与）运算符会首先对其左操作数进行类型转换，判断其布尔值。如果左操作数为 false 或转换为 false，则短路，直接返回左操作数。如果左操作数为 true，则返回右操作数。 ||（逻辑或）运算符则相反。

在 JavaScript 中，假值（falsy values）包括：

false
0（包括 -0 和 +0）
""（空字符串）
null
undefined
NaN（非数值）

2-5 控制语句

for-in

var fruit = [ "apple", "orange", "peach","banana"]; 
for(var i in fruit){
    document.write(fruit[i] + "<br/>");
}

break

<script type="text/javascript">
    var i = 0;
	for(i = 0; i <= 5; i++){
    	if(i == 3){
        	break;
    	}
    	document.write("这个数字是：" + i + "<br/>");
	}
</script>
<!--
这个数字是：0
这个数字是：1
这个数字是：2
-->

continue

<script type="text/javascript">
    var i = 0;
    for(i = 0; i <= 5; i++){
        if(i == 3){
			continue;
		}
		document.write("这个数字是："+i+"<br/>");
	}
</script>
<!--
这个数字是：0
这个数字是：1
这个数字是：2
这个数字是：4
这个数字是：5
-->

三、函数

3-1 常用系统函数

函数	描述	使用示例
parseInt(“str”)	将字符串转换为整型数字	`parseInt("86"); // 86`
parseFloat(“str”)	将字符串转换为浮点型数字	`parseFloat("34.45") // 34.45;`
isNaN()	判断值是否为NaN（非数值）	`isNaN("abc"); // true`
isFinite()	判断值是否为有限数字	`isFinite(123); // true` `isFinite(Infinity); // false`
Number()	将值转换为数字	`Number("123.45"); // 123.45`
String()	将值转换为字符串	`String(123); // "123"`

3-2 自定义函数

函数声明

// 声明函数
function 函数名(形参1, 形参2, 形参3...) {
    // JavaScript 语句
    [return 返回值]
}

// 调用函数
函数名(实参1, 实参2, 实参3...);

函数调用

调用无参函数，输出 5 次 " 欢迎学习 JavaScript "

function study( ){
    for(var i = 0; i < 5; i++){
        document.write("<h4>欢迎学习JavaScript</h4>");
    }
}

<input name="btn" type="button"
       value="显示5次欢迎学习JavaScript"  onclick="study( )" />

单击此按钮时，调用函数 study( )，执行函数体中的代码

调用有参函数，根据输入的次数，显示 " 欢迎学习 JavaScript "

function study(count){
    for(var i = 0; i < count; i++){
        document.write("<h4>欢迎学习JavaScript</h4>");
    }
}

<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
       onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />

单击此按钮时，调用函数 study(count)，执行函数体中的代码

3-3 创建对象

function student(n,a){
    this.name = n;
    this.age = a;
    this.show = function(msg){
        document.write(this.name + " : " + msg);
    }
}
var stul = new student("张三",18);
var stu2 = new student("李四",17);
stu1.show("这是函数");