【JavaScript】JS核心语法及函数

一、初识 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

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

1. 首字母必须是(a-zA-Z)或者下划线_或者$（首字母尽量不要大写）

2. 其他字符可以是字母或者下划线或者数字或者$

3. 不可以用系统的关键字、保留字作为变量名

4. 多个单词—驼峰命名

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

变量声明

<script>var name; // 声明变量console.log("1",name); // 输出: 1var name = "天气"; // 声明变量并赋值console.log("2",name); // 输出: 2 天气// 声明赋值 window 对象下有 name:window.namevar age;console.log("1",age); // 输出: 1 undefinedvar 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); // 输出: 3arr.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"));     // NaNconsole.log("6" == 6);           // true
console.log("abc" == "abc");     // true
console.log("abc" == "Abc");     // falseconsole.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("这是函数");