目录
1、什么是JavaScript
JavaScript在Web中起着至关重要的作用,它用于创建交互式网页和动态网页。通过JavaScript,可以实现表单验证、动画效果、弹出窗口、动态内容等功能,极大提升用户体验。它与HTML和CSS紧密集成,并且易于部署和分享。
-
解释执行:JavaScript是一种解释型语言,这意味着它不需要预先编译成机器代码就可以运行。在浏览器中运行JavaScript代码时,JavaScript引擎会逐行读取代码并立即执行它。这与编译型语言(如C++或Java)不同,后者需要先编译成机器代码才能执行。
-
动态类型:JavaScript是一种动态类型语言,不需要在声明变量时指定其类型。变量的类型会根据赋给它的值自动确定。例如,可以将一个数字赋给一个变量,稍后又可以将一个字符串赋给同一个变量。这种灵活性使得JavaScript在编程时更加灵活和便捷。
-
可以直接嵌入HTML页面:JavaScript代码可以直接嵌入到HTML页面中,通常放在
<script>
标签内,能够直接与HTML元素和CSS样式交互,创建动态和交互式的网页。可以使用JavaScript修改页面内容、响应用户操作、发送网络请求等。 -
通过浏览器进行解释执行:在浏览器中打开一个包含JavaScript代码的HTML页面时,浏览器内置的JavaScript引擎(如Google Chrome的V8引擎)解析和执行这些代码。不需要安装任何额外的运行环境或编译器,浏览器上都可以运行。
2、基本语法
1)变量
1.1)使用var声明变量(variable 的缩写)
- var 变量名 = 数据值;
- 可以存放不同类型的值:
var genius = 11;
genius = "Sheldon";
- 变量名由字母、数字、下划线或美元符号组成,不能以数字开头,使用驼峰命名
- 是全局变量(在代码块中定义的变量,在代码块外边还可以使用)
- 可以重复声明(后一个值会覆盖前一个)
1.2)使用let声明变量
- 例如 let age = 20;
- 只在 let关键字所在的代码块内有效
- 不允许重复声明
1.3)使用const声明变量
- 声明一个只读的常量,例如:const PI = 3.14;
- 声明之后不能被重新赋值
- const声明的并不是传统意义上的“常量”。使用const声明的变量实际上是指向某个值的引用,这个引用本身是不可变的,即不能再指向另一个值。
- 对于基本类型,const确实提供了“常量”的效果,因为基本类型的值是不可变的。但对于引用类型,const只保证引用本身不变,仍然可以修改这个对象或数组的内部状态。
2)数据类型
JavaScript是一种动态类型语言,意味着不需要在声明变量时指定其数据类型。它会自动根据赋值确定变量的类型。
- typeof 是一个一元运算符,用于获取数据类型,如:
let m = true;
console.log(typeof m); // 输出boolean
// console对象是JavaScript中的一个全局对象,
// 主要用于在浏览器的控制台窗口中输出调试信息、警告和错误消息。
2.1)基本类型
- Number:数字:整数、小数、NaN(Not a Number)。
- String:字符、字符串,单双引号皆可。
- Boolean:
true
或false
。 - Null:空值,对象为空。
- Undefined:当声明的变量未初始化时,该变量的默认值是 undefined。
- Symbol:表示唯一的、不可变的原始值,通常用作对象的属性键。
2.2)引用类型
- Object:JavaScript中所有非原始类型的基类。可以使用它创建自定义对象,或者使用它的内置子类型,如
Array
、Function
、Date
等。 - Array:数组,是有序的元素集合,可以通过索引访问或修改其元素。
- Function:可执行的代码块,可以调用以执行某些操作。在JavaScript中,函数可以作为参数传递,也可以作为其他函数的返回值。
- Date:表示特定的瞬间,精确到毫秒。
- RegExp:正则表达式,用于匹配字符串中的字符组合。
- 其他内置对象:如
Math
(用于数学运算)、Global
(全局对象,在浏览器环境中通常是window
)等。
由于引用类型的数据存储的是对实际对象的引用,因此当把一个引用类型的变量赋值给另一个变量时,实际上复制的是引用,而不是对象本身。这意味着两个变量现在指向内存中的同一个对象,对其中一个变量的修改也会影响到另一个变量,在对象的传递和赋值时需要注意。
3)运算符
大部分和Java语言一样,区别是JS中的 == 和 === 。
- 一元运算符:++ --
- 算术运算符:+ - * / %
- 赋值运算符:= += -=
- 关系运算符:> < >= <= != == ===
- 逻辑运算符:&& || !
- 三元运算符:条件表达式 ? true_value : false_value
var age1 = 20;
var age2 = "20";
alert(age1 == age2);// true 判断类型是否一样,如不一样,进行类型转换,再比较值
alert(age1 === age2);// false 全等于:先判断类型是否一样,如不一样,直接返回false,再比较值
类型转换
- String 转换为 Number 类型:按照字符串的字面值,转为数字。如果字面值不是数字,则转为NaN:
- 使用 + 正号运算符: var str = +"20";
- parseInt() 函数(方法):var str = "20"; 推荐使用
- Boolean 转换为 Number 类型:
- true 转为1,false转为0
- 其他类型转换为 Boolean类型:
- Number转换为Boolean:0和NaN转为false,其他的数字转为true
- String 类型转换为 Boolean:空字符串转为false,其他的字符串转为true
- Null类型转换为 Boolean:false
- Undefined 转换为 Boolean:false
4)流程控制语句(同Java)
- 条件语句:
- 根据条件执行不同的代码块
if...else
switch
举例:
var count = 3;
if (count == 3) {
alert(count);
}
- 循环语句:
- 重复执行一段代码,直到满足某个条件为止
for循环
while循环
do...while循环
举例:
var sum = 0;
for (let i = 1; i <= 100; i++) { //for循环小括号中定义的变量推荐使用let
sum += i;
}
alert(sum);
var sum = 0;
var i = 1;
while (i <= 100) {
sum += i;
i++;
}
alert(sum);
5)函数
-
执行特定任务的代码块(就是Java中的方法)
- 使用
function
关键字定义函数: - 可以接收参数(输入)并返回值(输出)
- 函数调用:方法名称(实际参数列表); 可以传递任意个数参数
- 形式参数、返回值不需要类型
- 使用
function greet(name) {
// 或者 var greet = function(name) {
return "Hello, " + name + "!";
}
const greeting = greet("Sheldon"); // greeting现在是"Hello, Sheldon!"
-
箭头函数
箭头函数在JavaScript中非常常用。它提供了一种更简洁、更直观的方式来编写函数,特别是在需要回调函数或者需要保持this
上下文不变的场合。
- 使用示例:
-
简单的箭头函数:
当箭头函数体只有一条语句时,可以省略大括号和
return
关键字。const add = (a, b) => a + b; console.log(add(1, 2)); // 输出 3
-
没有参数的箭头函数:
const sayHello = () => console.log('Hello, world!'); sayHello(); // 输出 "Hello, world!"
-
只有一个参数的箭头函数:
const double = x => x * 2; console.log(double(5)); // 输出 10 // 当箭头函数只有一个参数时,圆括号是可选的
-
带有函数体的箭头函数:
const greet = name => { const message = `Hello, ${name}!`; console.log(message); return message; }; console.log(greet('Sheldon')); // 输出 "Hello, Sheldon!" 并返回该字符串
-
返回对象字面量的箭头函数:
const getPerson = () => ({ name: 'Bob', age: 30 }); const person = getPerson(); console.log(person.name); // 输出 "Bob" //注意:如果函数体直接返回一个对象字面量,则需要将对象字面量包裹在圆括号中, //以避免与函数体的花括号混淆。
-
- 应用场景举例:
-
回调函数:箭头函数经常用作回调函数,特别是在处理异步操作、事件监听器、数组方法(如
map
、filter
、reduce
等)时,箭头函数可以使得代码更加清晰。const array = [1, 2, 3, 4, 5]; // 使用箭头函数作为数组的map方法的回调 const doubledArray = array.map(num => num * 2); console.log(doubledArray); // 输出 [2, 4, 6, 8, 10] // 使用箭头函数作为setTimeout的回调 setTimeout(() => { console.log('This will run after 1 second.'); }, 1000);
-
保持
this
上下文:在普通函数中,this
的指向取决于函数的调用方式,这常常导致this
指向问题。而箭头函数不绑定自己的this
,它会捕获其所在上下文的this
值,这使得在处理this
时更加直观和可靠。function MyObject() { this.value = 5; this.increment = () => { this.value++; }; } const obj = new MyObject(); obj.increment(); console.log(obj.value); // 输出 6,因为increment箭头函数中的this指向了MyObject的实例