【JavaScript】详解JavaScript语法

文章目录

    • 一、变量和数据类型
    • 二、运算符
    • 三、条件语句
    • 四、循环语句
    • 五、函数
    • 六、对象和数组
    • 七、ES6+新特性
    • 八、实际应用案例

JavaScript是一门广泛应用于Web开发的编程语言。掌握JavaScript语法是成为前端开发者的第一步。本文将详细介绍JavaScript的基本语法,包括变量、数据类型、运算符、条件语句、循环、函数、对象、数组、ES6+新特性等内容。通过本文,你将全面了解JavaScript语法,并能在实际开发中灵活应用。

一、变量和数据类型

  1. 变量声明

在JavaScript中,可以使用varletconst来声明变量。

// 使用var声明变量
var name = 'Alice';// 使用let声明变量
let age = 25;// 使用const声明常量
const country = 'USA';
  1. 数据类型

JavaScript有六种基本数据类型:numberstringbooleannullundefinedsymbol,以及一种复杂数据类型:object

let num = 10;          // number
let str = 'Hello';     // string
let isTrue = true;     // boolean
let empty = null;      // null
let notDefined;        // undefined
let symbol = Symbol(); // symbol
let obj = {            // objectname: 'Alice',age: 25
};

二、运算符

  1. 算术运算符

JavaScript支持基本的算术运算:加(+)、减(-)、乘(*)、除(/)、取模(%)。

let sum = 10 + 5;     // 15
let difference = 10 - 5; // 5
let product = 10 * 5; // 50
let quotient = 10 / 5; // 2
let remainder = 10 % 3; // 1
  1. 比较运算符

比较运算符用于比较两个值:等于(==)、严格等于(===)、不等于(!=)、严格不等于(!==)、大于(>)、小于(<)、大于等于(>=)、小于等于(<=)。

let isEqual = (10 == '10');    // true
let isStrictEqual = (10 === '10'); // false
let isNotEqual = (10 != '5');  // true
let isStrictNotEqual = (10 !== '10'); // true
let isGreater = (10 > 5);      // true
let isLess = (10 < 5);         // false
let isGreaterOrEqual = (10 >= 10); // true
let isLessOrEqual = (10 <= 5); // false
  1. 逻辑运算符

逻辑运算符用于逻辑判断:与(&&)、或(||)、非(!)。

let andResult = (true && false);  // false
let orResult = (true || false);   // true
let notResult = !true;            // false

三、条件语句

条件语句用于根据条件的真假执行不同的代码。

  1. if…else语句
let age = 18;
if (age >= 18) {console.log('You are an adult.');
} else {console.log('You are a minor.');
}
  1. switch语句
let color = 'red';
switch (color) {case 'red':console.log('Color is red.');break;case 'blue':console.log('Color is blue.');break;default:console.log('Color is not red or blue.');
}

四、循环语句

循环语句用于重复执行代码块。

  1. for循环
for (let i = 0; i < 5; i++) {console.log(i);
}
  1. while循环
let i = 0;
while (i < 5) {console.log(i);i++;
}
  1. do…while循环
let j = 0;
do {console.log(j);j++;
} while (j < 5);

五、函数

函数是可以重复使用的代码块。

  1. 函数声明
function greet(name) {return 'Hello, ' + name;
}
console.log(greet('Alice'));
  1. 函数表达式
const greet = function(name) {return 'Hello, ' + name;
};
console.log(greet('Bob'));

函数声明:使用function关键字直接定义一个有名字的函数,支持提升。

函数表达式:使用function关键字将函数赋值给一个变量,可以是匿名函数或具名函数,不支持提升。

  1. 箭头函数
const greet = (name) => 'Hello, ' + name;
console.log(greet('Charlie'));

六、对象和数组

  1. 对象

对象是键值对的集合。

let person = {name: 'Alice',age: 25,greet: function() {return 'Hello, ' + this.name;}
};
console.log(person.greet());
  1. 数组

数组是有序的元素集合。

let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Applefruits.push('Date');
console.log(fruits); // ['Apple', 'Banana', 'Cherry', 'Date']

七、ES6+新特性

  1. let和const

letconst是ES6引入的用于声明变量的关键字。与var不同,letconst具有块级作用域。

let x = 10;
const y = 20;if (true) {let x = 30; // 块级作用域内的xconsole.log(x); // 30
}console.log(x); // 10
  1. 模板字符串

模板字符串使用反引号(`` `)来定义,可以包含表达式。

let name = 'Alice';
let greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Alice!
  1. 解构赋值

解构赋值允许从数组或对象中提取值,赋值给变量。

let [a, b] = [1, 2];
console.log(a, b); // 1 2let {name, age} = {name: 'Alice', age: 25};
console.log(name, age); // Alice 25
  1. 默认参数

默认参数允许在函数参数中设置默认值。

function greet(name = 'Guest') {return `Hello, ${name}!`;
}
console.log(greet()); // Hello, Guest!
console.log(greet('Alice')); // Hello, Alice!
  1. 箭头函数

箭头函数语法更简洁,并且不会绑定this

const add = (a, b) => a + b;
console.log(add(1, 2)); // 3

八、实际应用案例

案例一:计算数组中所有元素的总和

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

案例二:使用对象和数组管理用户数据

let users = [{name: 'Alice', age: 25},{name: 'Bob', age: 30},{name: 'Charlie', age: 35}
];users.forEach(user => {console.log(`${user.name} is ${user.age} years old.`);
});

案例三:创建一个简单的计时器

function startTimer(duration) {let timer = duration, minutes, seconds;setInterval(() => {minutes = parseInt(timer / 60, 10);seconds = parseInt(timer % 60, 10);minutes = minutes < 10 ? "0" + minutes : minutes;seconds = seconds < 10 ? "0" + seconds : seconds;console.log(`${minutes}:${seconds}`);if (--timer < 0) {timer = duration;}}, 1000);
}startTimer(5 * 60); // 启动一个5分钟的计时器

推荐:

  • JavaScript
  • react
  • vue

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/51763.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python技能达到这个水平,高薪就业不是梦

一&#xff0c;高薪就业的必备基础 要达到高薪就业的水平&#xff0c;Python开发者通常需要具备以下几方面的技能和经验&#xff1a; 如需Python籽料直接戳&#xff1a; 2024年最新python教程全套&#xff0c;学完即可进大厂&#xff01;&#xff08;附全套视频 下载&#xf…

TypeScript基础【学习笔记】

一、TypeScript 开发环境搭建 下载并安装 Node.js使用 npm 全局安装 typescript 进入命令行输入&#xff1a;npm i -g typescript 创建一个 ts 文件使用 tsc 对 ts 文件进行编译 进入命令行进入 ts 文件所在目录执行命令&#xff1a;tsc xxx.ts 二、基本类型 类型声明 通过类型…

Appium: 手机应用自动化测试(二)

前言 上一篇文章地址&#xff1a; Appium: 手机应用自动化测试(一)-CSDN博客 下一篇文章地址&#xff1a; 暂无 一、元素定位 通过上一节&#xff0c;我们了解到可以通过adb获取当前界面的元素信息&#xff0c;获取如下&#xff1a; This XML file does not appear to h…

差速解算程序,基于C++语言

下面是一个简单的 C 程序示例&#xff0c;用于计算两轮差速机器人的运动学解算。这个程序包括了运动学正解和逆解的实现。 我们将定义一个类 DiffDriveSolver&#xff0c;其中包含了正解和逆解的函数。此外&#xff0c;我们还将定义一个简单的测试函数来演示如何使用这个类。 …

Fusion360点击登录后没有跳转至浏览器

今日Fusion360崩溃后重启程序&#xff0c;点击“登录”之后没有跳转到浏览器登陆界面。搜了一下找到解决方案&#xff1a; 访问 http://login.autodesk360.com/ 并登录Autodesk账号。重新启动Fusion 360.

软件测试必备 - 14个接口与自动化测试练习网站

随着互联网和移动应用的快速发展,接口和自动化测试的重要性日益凸显。越来越多的企业开始重视API测试,因为它不仅能提升开发效率,还能确保系统的稳定性和安全性。这些练习网站为测试人员提供了宝贵的资源,帮助他们掌握必要的技能,应对日益复杂的测试需求。 在软件测试的世…

如何将远程修改同步到个人fork仓库

1、添加 远程上游仓库 // git remote add <remote-name> <url> git remote add upstream https://github.com/Soft/someproject.git //远程主干仓库 git remote add origin https://github.com/Demodevelop/someproject.git //远程仓库的fork 仓库 需要将远程…

【Linux】TCP全解析:构建可靠的网络通信桥梁

文章目录 前言1. TCP 协议概述2. TCP报头结构3. 如何理解封装和解包呢&#xff1f;4. TCP的可靠性机制4.1 TCP的确认应答机制 4.2 超时重传机制5. TCP链接管理机制5.1 经典面试题&#xff1a;为什么建立连接是三次握手&#xff1f;5.2 经典面试题&#xff1a;为什么要进行四次挥…

第10章、dva介绍与环境搭建;

一、介绍与环境搭建; 1、介绍; dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。 2、特性; 易学易用:仅有 6 个API,对 redux 用户尤其友好,配合 umi 使用…

探索 Laravel 事件工厂:构建测试数据的高效工具

探索 Laravel 事件工厂&#xff1a;构建测试数据的高效工具 引言 Laravel&#xff0c;作为一个优雅而强大的PHP框架&#xff0c;提供了许多令人惊叹的功能来简化开发过程。其中&#xff0c;事件工厂&#xff08;Event Factories&#xff09;是Laravel测试工具箱中一个非常有用…

Java每日一题 ~ 盛最多水的容器

. - 力扣&#xff08;LeetCode&#xff09; 1.题目解析 本题的要求就是&#xff1a;给定数组索引之间的差值为宽&#xff0c;元素值中小的为边长求面积。 2.算法分析 思路一&#xff1a;暴力枚举 暴力法的思路是对所有可能的容器组合进行穷举&#xff0c;计算它们能容纳的水…

[硬件]—电感传感器

电感传感器 1.概述 工作基础&#xff1a;电磁感应&#xff0c;即利用线圈自感或互感的改变来实现非电量测量。工作原理&#xff1a; 被测物理量&#xff08;非电量&#xff1a;位移、振动、流量&#xff09;&#xff1b;线圈自感系数L/互感系数M&#xff1b;电压或电流&#…

自定义Laravel Artisan风格:打造个性化命令行体验

自定义Laravel Artisan风格&#xff1a;打造个性化命令行体验 引言 Laravel的Artisan命令行工具是开发过程中不可或缺的一部分&#xff0c;它提供了一个强大的接口来执行各种开发、维护、测试等任务。除了执行命令&#xff0c;Artisan还允许开发者自定义命令行输出的风格&…

设计模式实战:订单处理系统的设计与实现

问题描述 设计一个订单处理系统,支持订单的创建、处理、取消和通知功能。系统需要确保订单处理流程的灵活性和可扩展性。 设计分析 命令模式 命令模式用于将请求封装成对象,从而使我们可以用不同的请求、队列或日志来参数化其他对象。订单处理系统中的每个操作(创建订单…

0729作业+梳理

一、作业 1.写一个日志文件&#xff0c;将程序启动后的每一秒时间写入到文件中 代码&#xff1a; #include<myhead.h> #include<time.h> //判断原本文件中的行数 int len_txt(FILE *fp) { char buf0; int count 1; while(1) { buffgetc…

计算是守恒与对称的,谋算(算计)是变通与破缺的

计算通常涉及到严格的数学或逻辑规则&#xff0c;这些规则保证了信息或量的守恒和对称性。例如&#xff0c;数学运算如加减乘除都遵循特定的规律&#xff0c;确保了结果的准确性和一致性。相比之下&#xff0c;谋算&#xff08;或称算计&#xff09;更多指策略性的考虑或具有权…

Redis 缓存中间件

目录 概念 安装redis redis基本命令 给redis添加密码 基础数据类型 string类型 list列表类型 set创建&#xff08;一个键对应一个值&#xff09; set 创建数据 get 获取数据 keys * 展示所有的键 exists 判断键值是否存在 type 查看数据的类型 del 删除键 rename…

学习008-02-04-03 Group List View Data(组列表查看数据)

Group List View Data&#xff08;组列表查看数据&#xff09; This lesson explains how to group the Employee List View data by department and position. 本课介绍如何按部门和职位对员工列表视图数据进行分组。 Note Before you proceed, take a moment to review the …

机械学习—零基础学习日志(高数15——函数极限性质)

零基础为了学人工智能&#xff0c;真的开始复习高数 这里我们将会学习函数极限的性质。 唯一性 来一个练习题&#xff1a; 再来一个练习&#xff1a; 这里我问了一下ChatGPT&#xff0c;如果一个值两侧分别趋近于正无穷&#xff0c;以及负无穷。理论上这个极限值应该说是不存…

2024下《系统架构设计师》案例简答题,刷这些就够了!

2024年软考下半年已经越来越近了&#xff0c;不知道今年备考架构的同学们准备得怎么样了呢&#xff1f; 简答题一直是架构拿分的重点区域&#xff0c;对于许多考生来说&#xff0c;也往往是最具挑战性的部分。今天我就把那些重要的案例简答题类型整理汇总给大家&#xff0c;希望…