Javascript基础语法详解

news2025/3/12 20:17:30
  • 面向对象的语言.
  • 脚本语言,不需要编译,浏览器解释即可运行 .
  • 用于控制网页的行为.
  • 浏览器的source可以打断点调试, console输入代码可以执行
use strict指令:

在“严格模式”下运行js代码, 防止意外创建全局变量等, 提高代码安全性和执行效率.

使用:
  • 全局严格模式:在脚本的开头添加 "use strict".
  • 函数级严格模式: 在函数的开头添加 "use strict"
    function myFunction() {
        "use strict";
        // 仅该函数内部运行在严格模式下
    }
    
js的引入
1. 内部脚本
  • js可以放在任意位置,一般放在body标签底部.
<body>
    <h1>Hello, World!</h1>
    <script>
        console.log("Hello from inline script!");
    </script>
</body>
2. 外部脚本
<head>
    <script src="script.js"></script>
</head>

基础语法
  • js区分大小写,语句末尾的分号可有可无
  • 注释和java一样
输出语句

window.alert(): 弹出警告框, window.可省略.

document.write(): 显示在页面上.

console.log() : 打印在控制台.

基本数据类型
  • 原始数据类型是不可变的,存储在栈内存中,按值比较.
  • Number:数字
  • String:字符串,用单引号、双引号包裹
  • Boolean:布尔值
  • Undefined:变量未赋值.
  • Null:表示“无”或“空值”,类型是 object
引用数据类型
  • 引用数据类型是可变的,存储在堆内存中,按引用比较

  • Object:表示对象,可以存储键值对

    let person = {
        name: 'Alice',
        age: 30
    };
    
  • Array:数组

    let numbers = [1, 2, 3, 4, 5];
    
  • Function:函数也是对象

    function greet() {
        return 'Hello!';
    }
    
  • Date:日期和时间

    let now = new Date();
    
类型检查

typeof :检查数据类型。

console.log(typeof num1); // "number"
console.log(typeof str1); // "string"
console.log(typeof isActive); // "boolean"
console.log(typeof notAssigned); // "undefined"
console.log(typeof emptyValue); // "object"
console.log(typeof person); // "object"
console.log(typeof numbers); // "object"
console.log(typeof greet); // "function"
字符串

length : 字符串长度

charAt() : 返回指定位置的字符
indexOf() : 查找子字符串首次出现的位置
trim() : 去除字符串两边的空格
substring() : 截取字符串

变量
1. var
  • var定义的变量可以被覆盖.
  • 具有函数作用域, 在函数内声明的var变量在函数内有效:
function testVar() {
    if (true) {
        var x = 10; // 函数作用域
    }
    console.log(x); // 输出: 10
}
testVar();

//在函数外不能访问:
<script>  
    function testVar() {  
        if (true) {  
            var x = 10; // 函数作用域  
        }   
    }  
    alert(x);  
</script>
  • 不受块级作用域{}影响,即使声明在块内,块外也可以访问。
{
    var x = 10;
}
console.log(x); // 输出: 10

2. let
  • 具有块级作用域:变量只在声明的 {} 内有效,超出作用域不能访问
<script>  
    {  
        let a = 1;  
    }  
    alert(a);  //不会弹出警告框
</script>
  • 不能重复定义
{  
    let a = 1;  
    let a="s";  //报错
}
3. const
  • 作用域:和let一样,也不能重复定义

    {
      const d = 20;
      console.log(d); // 输出 20
    }
    console.log(d); // 报错: Uncaught ReferenceError: d is not defined
    
  • const 声明的变量必须初始化.

  • const修饰的原始数据类型不能重新赋值

  • const修饰的引用数据类型如对象,数组的内容可以修改,引用(地址)不能修改。

    const f = 30;
    f = 40; // 报错: TypeError: Assignment to constant variable.
    
    const arr = [1, 2, 3];
    arr.push(4); // 合法操作
    console.log(arr); // 输出 [1, 2, 3, 4]
    
显式类型转换
转换为字符串
console.log(String(123)); // 输出 "123"
console.log((123).toString()); // 输出 "123"
console.log(String(true)); // 输出 "true"
console.log(String(null)); // 输出 "null"
转换为数字
console.log(Number("123")); // 输出 123
console.log(Number("")); // 输出 0
console.log(Number("123abc")); // 输出 NaN
console.log(parseInt("123.45")); // 输出 123
console.log(parseFloat("123.45")); // 输出 123.45
转换为布尔值
  • 0NaNfalse;
  • 空字符串是false;
  • NullUndefinedfalse;
console.log(Boolean(1)); // 输出 true
console.log(Boolean(0)); // 输出 false
console.log(Boolean("")); // 输出 false
console.log(Boolean("hello")); // 输出 true

不要使用==比较,使用===等号,因为===不仅比较值,还会比较类型是否相等.

循环
for...in循环:
  • 可用于遍历对象,数组的属性,不能遍历字符串、SetMap.
  • 用于数组时,遍历的是数组的索引,不是数组的值。
let obj = { name: "Alice", age: 25, city: "NY" };
for (const key in obj) {
  console.log(key, obj[key]);
}
// 输出:
// name Alice
// age 25
// city NY

for...of循环:
  • 直接遍历值,可用于数组、字符串、SetMap 等,不能遍历对象
let arr = ["a", "b", "c"];

for (const value of arr) {
  console.log(value); // 输出 "a", "b", "c"(值)
}

forEach() 循环

用于遍历数组.

语法:

array.forEach(function(currentValue, index, array) {

});

//currentValue(必需):当前正在处理的元素。
//index(可选):当前元素的索引
//array(可选):调用 forEach() 的原数组

示例:

let fruits = ["apple", "banana", "orange"];

fruits.forEach(function(fruit, index) {
  console.log(index + ": " + fruit);
});

//输出:
/*0: apple
1: banana
2: orange*/

let numbers = [1, 2, 3, 4];

numbers.forEach(num => console.log(num * 2));

//输出:2 4 6 8

注意:

forEach() 无法中途退出循环(break无效),return 也不会停止循环:

let arr = [1, 2, 3, 4, 5];

arr.forEach(num => {
  if (num === 3) return; // 这里的 return 只会跳过当前迭代,不会终止循环
  console.log(num);
});

forEach() 不能直接修改原数组:

let arr = [1, 2, 3];

arr.forEach(num => num = num * 2); // 这样不会改变数组
console.log(arr);  // [1, 2, 3]

forEach() 不会跳过 undefined.

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

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

相关文章

【Go学习实战】03-3-文章评论及写文章

【Go学习实战】03-3-文章评论及写文章 文章评论注册valine获取凭证加载评论页面 写文章修改cdn位置完善功能查看页面 发布文章POST发布文章发布文章测试 查询文章详情查询详情测试 修改文章修改文章测试 写文章图片上传前端后端逻辑测试 文章评论 这里我们的博客因为是个轻量级…

从零开始用AI开发游戏(一)

1. 核心玩法设计 核心目标&#xff1a;玩家需在随机生成的3D迷宫中寻找出口&#xff0c;躲避陷阱、收集道具、解开谜题。核心机制&#xff1a; 随机生成迷宫&#xff1a;每次游戏生成不同结构的迷宫&#xff08;递归分割算法或深度优先搜索&#xff09;。第一人称视角&#xf…

AI-大模型中的流式输出与非流式输出

1.前言 在大模型API开发中&#xff0c;流式与非流式输出对应着两种不同的数据交互&#xff0c;在代码中stream中通过参数true与false来进行设定。 2.流式输出与非流式输出的原理 2.1.非流式输出-请求一次响应返回完整数据 非流式输出&#xff0c;传统的请求-响应模式&#xf…

【HarmonyOS Next】鸿蒙加固方案调研和分析

【HarmonyOS Next】鸿蒙加固方案调研和分析 一、前言 根据鸿蒙应用的上架流程&#xff0c;本地构建app文件后&#xff0c;上架到AGC平台&#xff0c;平台会进行解析。根据鸿蒙系统的特殊设置&#xff0c;仿照IOS的生态闭环方案。只能从AGC应用市场下载app进行安装。这样的流程…

蓝桥杯javaB组备战第二天 题目 区间次方和 编号3382

这是一个前缀和问题&#xff0c;但是不同于以为前缀和问题 前缀和问题求解思路&#xff1a; 创建一个前缀数组 s[] ,存储输入的元素的a[1]到a[n]的和 及&#xff1a;s[1] s[i-1]a[i] ,i>1 这样比暴力算法的复杂度要低很多可以将 时间复杂度从O(q*n*m)下降到 O(n*mq) …

《Android 平台架构系统启动流程详解》

目录 一、平台架构模块 1.1 Linux 内核 1.2 硬件抽象层 (HAL) 1.3 Android 运行时 1.4 原生 C/C 库 1.5 Java API 框架 1.6 系统应用 二、系统启动流程 2.1 Bootloader阶段 2.2 内核启动 2.3 Init进程&#xff08;PID 1&#xff09; 2.4 Zygote与System Serv…

强化学习(赵世钰版)-学习笔记(3.最优策略与贝尔曼最优方程)

这是本章在课程中的位置&#xff0c;属于基础工具中的最后一章&#xff0c;主要讨论了最优状态值&#xff08;Optimal State Value&#xff09;与最优策略&#xff08;Optimal Policy&#xff09;&#xff0c;并介绍了对应的计算方法-贝尔曼最优方程&#xff08;Bellman Optima…

六十天前端强化训练之第十一天之事件机制超详解析

欢迎来到编程星辰海的博客讲解 目录 一、事件模型演进史 1.1 原始事件模型&#xff08;DOM Level 0&#xff09; 1.2 DOM Level 2事件模型 1.3 DOM Level 3事件模型 二、事件流深度剖析 2.1 捕获与冒泡对比实验 2.2 事件终止方法对比 三、事件委托高级应用 3.1 动态元…

调试正常 ≠ 运行正常:Keil5中MicroLIB的“量子态BUG”破解实录

调试正常 ≠ 运行正常&#xff1a;Keil5中MicroLIB的“量子态BUG”破解实录——从勾选一个选项到理解半主机模式&#xff0c;嵌入式开发的认知升级 &#x1f4cc; 现象描述&#xff1a;调试与烧录的诡异差异 在线调试时 程序正常运行 - 独立运行时 设备无响应 ! 编译过程 0 Err…

基于SpringBoot实现旅游酒店平台功能八

一、前言介绍&#xff1a; 1.1 项目摘要 随着社会的快速发展和人民生活水平的不断提高&#xff0c;旅游已经成为人们休闲娱乐的重要方式之一。人们越来越注重生活的品质和精神文化的追求&#xff0c;旅游需求呈现出爆发式增长。这种增长不仅体现在旅游人数的增加上&#xff0…

ArcGIS Pro中字段的新建方法与应用

一、引言 在地理信息系统&#xff08;GIS&#xff09;的数据管理和分析过程中&#xff0c;字段操作起着至关重要的作用。 无论是进行地图制作、空间分析还是数据统计&#xff0c;字段都是承载属性信息的基本单元。 ArcGIS Pro作为一款功能强大的GIS软件&#xff0c;为用户提…

c#面试题12

1.ApplicationPool介绍一下 c#里没有 2.XML 可扩展标记语言&#xff0c;一般以.xml文件格式的形式存在。可用于存储结构化的数据 3.ASP.NET的用户控件 将原始的控件&#xff0c;用户根据需要进行整合成一个新的控件 4.介绍一下code-Behind 即代码后置技术&#xff0c;就是…

Matlab中快速查找元素索引号

1、背景介绍 在算法设计过程中&#xff0c;有时候需要从一维/二维数组中&#xff0c;快速查找是否某个元素&#xff0c;以及该元素所在的位置。如一维矩阵[1 2 3 4 5 6 6 7 8]所示&#xff0c;元素6所在的位置为6 7。 2、函数测试 matlab中函数find()可以快速查找到指定元素所…

LabVIEW非线性拟合实现正弦波参数提取

LabVIEW的Nonlinear Curve Fit.vi基于Levenberg-Marquardt算法&#xff0c;能够实现非线性最小二乘拟合&#xff0c;包括正弦波三参数&#xff08;幅值、频率、相位&#xff09;的精确求解。该工具适用于非均匀采样、低信噪比信号等复杂场景&#xff0c;但需注意初始参数设置与…

S19文件格式详解:汽车ECU软件升级中的核心镜像格式

文章目录 引言一、S19文件格式的起源与概述二、S19文件的核心结构三、S19在汽车ECU升级中的应用场景四、S19与其他格式的对比五、S19文件实例解析六、工具链支持与安全考量七、未来趋势与挑战结语引言 在汽车电子控制单元(ECU)的软件升级过程中,S19文件(也称为Motorola S-…

Redis 缓存穿透、缓存击穿与缓存雪崩详解:问题、解决方案与最佳实践

目录 引言 1. 缓存穿透 1.1 什么是缓存穿透&#xff1f; 示例&#xff1a; 1.2 缓存穿透的原因 1.3 缓存穿透的解决方案 1.3.1 缓存空对象 1.3.2 布隆过滤器&#xff08;Bloom Filter&#xff09; 1.3.3 参数校验 2. 缓存击穿 2.1 什么是缓存击穿&#xff1f; 示例&…

Qt入门笔记

目录 一、前言 二、创建Qt项目 2.1、使用向导创建 2.2、最简单的Qt应用程序 2.2.1、main函数 2.2.2、widget.h文件 2.2.3、widget.cpp文件 2.3、Qt按键Botton 2.3.1、创建一个Botton 2.3.2、信号与槽 2.3.3、按键使用信号与槽的方法 2.4、文件Read与Write-QFile类 2…

C语言每日一练——day_4

引言 针对初学者&#xff0c;每日练习几个题&#xff0c;快速上手C语言。第四天。&#xff08;连续更新中&#xff09; 采用在线OJ的形式 什么是在线OJ&#xff1f; 在线判题系统&#xff08;英语&#xff1a;Online Judge&#xff0c;缩写OJ&#xff09;是一种在编程竞赛中用…

下降路径最⼩和(medium)

题目描述&#xff1a; 给你一个 n x n 的 方形 整数数组 matrix &#xff0c;请你找出并返回通过 matrix 的下降路径 的 最小和 。 下降路径 可以从第一行中的任何元素开始&#xff0c;并从每一行中选择一个元素。在下一行选择的元素和当前行所选元素最多相隔一列&#xff08…

redux_旧版本

reduxjs/toolkit&#xff08;RTK&#xff09;是 Redux 官方团队推出的一个工具集&#xff0c;旨在简化 Redux 的使用和配置。它于 2019 年 10 月 正式发布&#xff0c;此文章记录一下redux的旧版本如何使用&#xff0c;以及引入等等。 文件目录如下&#xff1a; 步骤 安装依…