【JavaScript】JavaScript基础详解(文末送书)
👉博__主👈:米码收割机
👉技__能👈:C++/Python语言
👉公众号👈:测试开发自动化【获取源码+商业合作】
👉荣__誉👈:阿里云博客专家博主、51CTO技术博主
👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。
系列文章目录
目录
一、变量声明
在 JavaScript 中,可以使用三种方式来声明变量:
-
var
: 这是传统的方式,但在 ES6 (ECMAScript 2015) 之后,它的使用开始逐渐被限制在函数作用域。var name = "ChatGPT";
-
let
: 从 ES6 开始引入,允许你声明块级作用域的变量。let age = 5;
-
const
: 同样从 ES6 开始引入,用于声明不可变的变量(常量)。一旦给它赋值,你就不能再更改它。const PI = 3.141592653589793;
二、数据类型
-
Number:表示数值。
let x = 123;let y = 3.14;
-
String:表示文本。
let greeting = "Hello, World!";
-
Boolean:表示真或假。
let isTrue = true;let isFalse = false;
-
Object:用于存储键值对。
let person = {firstName: "John", lastName: "Doe"};
-
Array:用于存储元素的列表。
let fruits = ["Apple", "Banana", "Cherry"];
-
null:表示没有值。
let emptyValue = null;
-
undefined:表示变量已声明但尚未赋值。
let testVar;console.log(testVar); // 输出: undefined
三、控制结构
-
If 语句:
if (age > 18) { console.log("Adult");} else { console.log("Child");}
-
For 循环:
for (let i = 0; i < 5; i++) { console.log(i);}
-
函数声明:
function greet(name) { console.log("Hello, " + name);}
四、函数
JavaScript 中的函数是其核心概念之一。函数允许将代码块组织在一起并在需要的地方调用它。
1. 函数声明
这是定义函数的一种方式,使用 function
关键字 followed by the function’s name:
function sayHello() { console.log("Hello, World!");}
2. 函数表达式
函数也可以使用表达式来定义,并赋值给一个变量。这样的函数通常是匿名的(没有名称):
const sayGoodbye = function() { console.log("Goodbye, World!");};
3. 箭头函数(ES6)
从 ES6 开始,JavaScript 引入了箭头函数,为我们提供了定义函数的另一种简洁方式:
const add = (a, b) => a + b;
4. 参数
你可以将值传递给函数,这些值称为参数。函数可以接受多个参数:
function greet(firstName, lastName) { console.log("Hello, " + firstName + " " + lastName);}
5. 默认参数(ES6)
如果调用函数时缺少参数,你可以为函数参数设置默认值:
function greet(name = "World") { console.log("Hello, " + name);}
6. 返回值
使用 return
语句从函数返回一个值:
function square(number) { return number * number;}
7. 函数作为参数
在 JavaScript 中,函数是第一类对象,这意味着你可以将函数作为另一个函数的参数:
function calculate(x, y, operation) { return operation(x, y);}const result = calculate(5, 3, (a, b) => a + b); // 8
8. 立即调用的函数表达式(IIFE)
这是一个定义后立即执行的函数:
(function() { console.log("This function runs as soon as it's defined!");})();
9. 闭包
闭包是一个函数与其相关的词法作用域捆绑在一起。这使得函数可以访问其外部函数的变量,即使外部函数已经完成了执行:
function outerFunction() { let outerVariable = "I'm from outer function!"; return function() { console.log(outerVariable); };}const innerFunction = outerFunction();innerFunction(); // 输出: "I'm from outer function!"
五、类
JavaScript 支持面向对象编程,并且在 ES6 (ECMAScript 2015) 之后,正式引入了 class
语法来模拟经典的面向对象语言中的类的概念。尽管之前的版本中 JavaScript 使用了基于原型的继承,但 ES6 的 class
提供了一种更直观和结构化的方式来创建对象和处理继承。
以下是使用 JavaScript class
的一些基本概念:
1. 类的声明
你可以使用 class
关键字来声明一个类:
class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); }}const john = new Person('John', 30);john.greet(); // 输出: Hello, my name is John and I am 30 years old.
2. 继承
使用 extends
关键字可以从另一个类继承:
class Employee extends Person { constructor(name, age, jobTitle) { super(name, age); this.jobTitle = jobTitle; } introduce() { console.log(`Hello, my name is ${this.name}, I am ${this.age} years old and I work as a ${this.jobTitle}.`); }}const jane = new Employee('Jane', 28, 'Software Developer');jane.introduce(); // 输出: Hello, my name is Jane, I am 28 years old and I work as a Software Developer.
3. 静态方法
使用 static
关键字,你可以在类上定义静态方法,而不是它的实例:
class Utility { static addNumbers(a, b) { return a + b; }}console.log(Utility.addNumbers(2, 3)); // 输出: 5
4. getter 和 setter
你可以使用 get
和 set
关键字为类定义访问器和设置器:
class Circle { constructor(radius) { this._radius = radius; } // getter get diameter() { return this._radius * 2; } // setter set diameter(value) { this._radius = value / 2; }}const circle = new Circle(5);console.log(circle.diameter); // 输出: 10circle.diameter = 14;console.log(circle._radius); // 输出: 7
本期好书推荐《JavaScript从入门到精通(第5版)》
【书籍介绍】
JavaScript入门经典,42万Web前端程序员的入行选择。配备Web前端开发资源库,在线答疑,学习1小时,训练10小时,从入门到项目上线,打造全新学习生态。
【购买链接】
京东:https://item.jd.com/13791889.html
当当:http://product.dangdang.com/29594970.html
来源地址:https://blog.csdn.net/weixin_44244190/article/details/133998563
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341