当前位置: 首页 > news >正文

前端学习之JavaScript

对象

key:value{ }。无序的值列表

当属性名称包含空格时,需要将其用引号括起来。例如,以下address对象具有'building no'一个属性:

let address = {'building no': 3960,street: 'North 1st street',state: 'CA',country: 'USA'
};

要访问该'building no'属性,需要使用类似数组的表示法:

address['building no'];代码语言: CSS  (css )

如果使用点号表示法,将会出错:

address.'building no';
向对象添加新属性
person.age = 25;
删除对象的属性

要删除对象的属性,可以使用delete以下运算符:

delete objectName.propertyName;
delete person.age;
检查属性是否存在

使用in运算符:

propertyName in objectName
小结
  • 对象是键值对的集合。

  • 使用点号表示法(.)或数组表示法([])来访问对象的属性。

  • 使用delete运算符可以从对象中删除属性。

  • 使用in运算符检查对象中是否存在某个属性。

原始值和引用值
  • Javascript 有两种类型的值:原始值和引用值。

  • 你可以对引用值添加、更改或删除属性,但不能对原始值执行此操作。

  • 将一个变量中的原始值复制到另一个变量会创建一个单独的值副本,这意味着更改一个变量中的值不会影响另一个变量。

  • 将一个变量的引用复制到另一个变量,会创建一个新的引用,使得两个变量指向同一个对象。这意味着通过一个变量对对象进行更改,会反映到另一个变量中。

原始值primitive存在stack里;引用值reference存在heap里,用指针指向

与引用值不同,原始值不能拥有属性。

如果尝试向原始值添加属性,则不会生效

let name = 'John';
name.alias = 'Knight';
​
console.log(name.alias); // undefined
代码语言: JavaScript  (javascript )

输出:

undefined
复制值

当你将一个变量中的原始值赋给另一个变量时,JavaScript 引擎会创建该值的副本并将其赋值给目标变量。例如:

let age = 25;
let newAge = age;

在栈内存中,a``newAgeb``age是独立的变量。更改其中一个变量的值不会影响另一个变量。

当你将一个变量的引用值赋给另一个变量时,JavaScript 引擎会创建一个引用,使这两个变量指向堆内存中的同一个对象。这意味着如果你更改其中一个变量,它会影响另一个变量。因为他们是用指针指向堆,不是用内存直接保存

Array数组

  • 数组可以存储混合类型的值。例如,你可以创建一个数组,其中存储的元素类型包括数字、字符串、布尔值和null。

  • 数组的大小是动态的,并且会自动增长。换句话说,你不需要预先指定数组的大小。

创建数组

Array构造函数

let scores = new Array();

JavaScript 允许new在使用Array()构造函数时省略运算符。例如,以下语句创建 artists数组。

let artists = Array();

创建数组的更推荐方法是使用数组字面量表示法:

let arrayName = [element1, element2, element3, ...];

数组字面量形式使用方括号[]将以逗号分隔的元素列表括起来。

要创建一个空数组,可以使用方括号,而不指定任何元素,如下所示:

let emptyArray = [];
访问数组

JavaScript 数组的索引从零开始

arrayName[index]
数组基本操作
  1. push()数组末尾添加元素

    et seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
    seas.push('Red Sea');
    ​
    console.log(seas); 
  2. 向数组开头添加元素unshift()

    let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
    seas.unshift('Red Sea');
    ​
    console.log(seas);
  3. 从数组末尾删除元素pop()

  4. 从数组开头移除一个元素shift()

  5. 查找数组中的元素索引indexOf()

    let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
    let index = seas.indexOf('North Sea');
    ​
    console.log(index); // 2
  6. 检查值是否为数组Array.isArray()

console.log(Array.isArray(seas)); // true

setTimeout
  • setTimeout()是 window 对象的一个方法。

该方法setTimeout() 设置一个定时器,并在定时器到期后执行[回调函数。

let timeoutID  = setTimeout(执行代码, 时间间隔);

setInterval()

函数function
  • 在 JavaScript 中,函数是一等公民。

  • 您可以将函数作为参数传递给其他函数,也可以将它们作为值从其他函数返回,还可以将它们存储在变量中。

匿名函数

没有名称的函数

() => { ... }

匿名函数在创建后无法访问。因此,通常需要将其赋值给一个变量。

如果你想创建一个函数并在声明后立即执行它,你可以像这样声明一个匿名函数:

(function() {console.log('IIFE');
})();

let myFunction = () => { ... } 👉 箭头函数本身是匿名的, 👉 但通过赋值给变量,它变成了一个具名的函数引用

按值传递

函数内部对参数所做的任何更改都不会反映到函数外部传递的变量上。换句话说,对参数所做的更改不会反映到函数外部。

通过创建原始值的副本,来实现

  • JavaScript 会按值将所有参数传递给函数。

  • 在 JavaScript 中,函数参数是局部变量。

递归函数

递归函数是指不断调用自身直到调用次数停止的[函数]

function recurse() {if(condition) {// stop calling itself//...} else {recurse();}
}

递归函数用于将大问题分解成小问题。递归函数常见于二叉树、图等数据结构以及二分查找、快速排序等算法中。

  • 递归函数总会有一个条件阻止函数调用自身。

终止:

  • 递归不断发生,将问题分解成更小的子问题,直到达到基本情况。

  • 一旦达到基本情况,该函数就开始回溯,将每一层递归的结果结合起来,直到得到最终结果。

参数

参数的默认值为undefined。这意味着,如果您不向函数传递参数,则其参数将具有默认值undefined

在 JavaScript (ES6) 中设置默认参数的正确方法是:

JavaScript

function greet(name = 'Guest') {console.log('Hello ' + name);
}

该语法 ( parameter = defaultValue) 允许您在函数定义中,为参数指定一个默认值。

  • 如果调用函数时提供了该参数,函数将使用您提供的值。

    • greet('Alice');// 输出:“你好爱丽丝”

  • 如果调用函数时未提供该参数(或确定undefined,函数将使用默认值Guest

    • greet();// 输出:“您好,客人”

Promise

要从函数返回的用户列表中按用户名查找用户getUsers(),可以使用findUser()如下函数:

function findUser(username) {const users = getUsers();const user = users.find((user) => user.username === username);return user;
}代码语言: JavaScript  (javascript )

findUser()函数中:

  • 首先,调用getUsers()函数获取用户数组。

  • username其次,利用对象find()的方法查找具有特定属性的用户Array

  • 第三,返回匹配的用户。

小结:1,JavaScript思维导图画出来了,用幕布做思维导图很方便,适合我这种视觉学习者。(脑子里想象不出画面)

2,对数据类型,对象,数组理解加深;函数一等公民这些也理解一些

3,明天看object对象,感觉JavaScript很快要看玩了,开心

http://www.dtcms.com/a/573196.html

相关文章:

  • CrewCut 项目 Alpha 阶段计划与分工
  • 湖南首条免费高速轨迹呈现:借助 Leaflet -Trackplayer 实现 WebGIS 可视化
  • NewStarCTF2025-Week5-Web
  • 0基础学前端:100天拿offer实战课(第4天)—— Flex布局实战:10分钟搞定网页“排版难题”
  • 苏州专业做网站的公司有哪些网站空间 控制面板
  • “AI+XR”赋能智慧研创中心:告别AI焦虑,重塑教师未来
  • 知识就是力量——气体检测传感器
  • Arbess零基础学习 - 使用Arbess+GitLab实现Python项目构建/主机部署
  • 建设银行手机银行下载官方网站下载wordpress资源搜索插件
  • 替代 TDesign Dialog:用 div 实现可拖拽、遮罩屏蔽的对话框
  • 【雪花算法与主键自增:场景适配指南,从分布式特性到业务需求】
  • 在Linux上实现Modbus RTU通信:一个轻量级C++解决方案
  • 【Go】P19 Go语言并发编程核心(三):从 Channel 安全到互斥锁
  • Node.js 环境变量配置全攻略
  • 基于 Kickstart 的 Linux OS CICD 部署(webhook)
  • 哪家网络公司做网站好全国免费信息发布平台
  • 《C++ 搜索二叉树》深入理解 C++ 搜索二叉树:特性、实现与应用
  • iOS 发布 App 全流程指南,从签名打包到开心上架(Appuploader)跨平台免 Mac 上传实战
  • 人工智能Deepseek医药AI培训师培训讲师唐兴通讲课课程纲要
  • 做网站需要学哪些语言鞍山市人力资源招聘信息网
  • Fastadmin中使用小程序登录
  • 网站功能优化的方法办一个购物网站要多少钱
  • SpringCloud+Netty集群即时通讯项目
  • 企业内容安全管理策略有哪些?
  • PPT处理控件Aspose.Slides教程:使用Java将PowerPoint笔记导出为PDF
  • 覆盖 DC50-1000V!AIM-D500-CA 绝缘监测仪,满足不同充电桩安全监测需求
  • 2025_11_5_刷题
  • 【数据结构与算法】手撕排序算法(二)
  • 网站开发做什么科目北京网站建设大概多少钱
  • 06.LangChain的介绍和入门