前端学习——JS学习

文章目录

  • 1. 定义变量,关键字 var、let、const
  • 2. 定义变量,数据类型
  • 3. 数组变量的操作
  • 4. 对象的操作
  • 5. JSON 字符串

1. 定义变量,关键字 var、let、const

这里主要是对var、let做比较

/** 1. var存在变量提升、let不存在变量提升 
**/
console.log(a); // undefined(通过)
var a = 10;console.log(a); // ReferenceError: a is not defined(报错)
let a = 10;/** 2. var可以多次声明、let不可以多次声明 
**/
var a = 10;
var a = 20;
console.log(a); // 20let a = 10;
let a = 20; // Uncaught SyntaxError: Identifier 'a' has already been declared

简单说一下const的使用

/**1. const声明一个只读的变量,声明后,值就不能改变
**/
const a = 10;
a = 20;  // TypeError: Assignment to constant variable./**2. const必须初始化
**/
const a;  // SyntaxError: Missing initializer in const declaration
const a = 10; // ok/**3. const并不是变量的值不能改动,而是变量指向的内存地址所保存的数据不得改动
**/
const obj = {age: 17
}
obj.age = 18;  // okobj = {		//  SyntaxError: Identifier 'obj' has already been declaredage: 18
}

2. 定义变量,数据类型

var length = 16;                                  // Number 通过数字字面量赋值 
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

3. 数组变量的操作

1. 添加元素

let arr=[1,2,3,4];
arr.push(5);
console.log(arr);	//得到[1,2,3,4,5]

4. 对象的操作

1. 创建对象

let person = {firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"
};

2. 访问对象属性

let name=person.lastname;
let name=person["lastname"];

3. 添加新属性

//创建obj对象
let obj = {};
//为对象添加动态属性
obj.userName = "admin";
obj.passWord = "123456";
//输出
console.log(obj);    

在这里插入图片描述
4. 删除属性

//创建obj对象
let obj = {};
//为对象添加动态属性
obj.userName = "admin";
obj.passWord = "123456";
//移除属性
delete obj.passWord;
//输出
console.log(obj);   

在这里插入图片描述
5. 两个对象合并

let arr1 = {a:1,b:2,c:3
};
let arr2 = {d:4,e:5,a:6
};
// 拓展运算符,后面相同的属性覆盖前一个
let arr3={...arr1,...arr2};

5. JSON 字符串

let text = '{ "sites" : [' +'{ "name":"Runoob" , "url":"www.runoob.com" },' +'{ "name":"Google" , "url":"www.google.com" },' +'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';// JSON字符串转换JS对象
obj = JSON.parse(text);// JS对象转JSON字符串
let text2 = JSON.stringify(obj);

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

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

相关文章

Minimize Inversions

先来看看官方题解的做法,他一反常态的没有在逆序对题目里面考虑每个位置的贡献,而是直接回到定义考虑每对数是否是逆序对 我们考虑原数列中任意的一组数\((a_i,a_j)\)和\((b_i,b_j)\)。如果最开始两个都不是逆序对,那么交换之后两个都是逆序对…

NXP实战笔记(八):S32K3xx基于RTD-SDK在S32DS上配置LCU实现ABZ解码

目录 1、概述 2、SDK配置 2.1、IO配置 2.2、TRGMUX配置 2.3、LCU配置 2.4、Trgmux配置 2.5、Emios配置 2.6、代码实现 1、概述 碰到光电编码器、磁编码器等,有时候传出来的位置信息为ABZ的方式,在S32K3里面通过TRGMUX、LCU、Emios结合的方式可以实现ABZ解码。 官方…

HCIA(11)OSPF 数据包构成(Hello、DBD、LSR、LSU、LSAck包)、状态机、工作流程(建立邻居关系、主从关系协商、LSDB同步)

OSPF(Open Shortest Path First)是IETF组织开发的一个基于链路状态的内部网关协议(Interior Gateway Protocol)。 目前针对IPv4协议使用OSPF Version 2,针对IPv6协议使用OSPF Version 3。 在OSPF出现前,网络…

C++的list容器->基本概念、构造函数、赋值和交换、大小操作、插入和删除、数据存取、反转和排序、排序案例

#include<iostream> using namespace std; #include <list> //list容器构造函数 void printList(const list<int>& L) { for (list<int>::const_iterator it L.begin(); it ! L.end(); it) { cout << *it << "…

研究生摆烂摆烂的一个寒假

寒假&#xff1a;27-24&#xff0c;不到一个月 刚回家&#xff0c;不想学习&#xff0c;摆烂 想学了&#xff0c;又过年了&#xff0c;于是又开摆 又想学了&#xff0c;家里面有有点小事&#xff0c;于是又开摆 摆完&#xff0c;没想到就返校啦 期末作业没完成&#xff08…

【深入理解设计模式】原型设计模式

原型设计模式 原型设计模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它允许通过复制已有对象来创建新对象&#xff0c;而无需直接依赖它们的具体类。这种模式通常用于需要频繁创建相似对象的场景&#xff0c;以避免昂贵的创建操作或初始化过…

【办公类-16-10-02】“2023下学期 6个中班 自主游戏观察记录(python 排班表系列)

背景需求&#xff1a; 已经制作了本学期的中4班自主游戏观察记录表 【办公类-16-10-01】“2023下学期 中4班 自主游戏观察记录&#xff08;python 排班表系列&#xff09;-CSDN博客文章浏览阅读398次&#xff0c;点赞10次&#xff0c;收藏3次。【办公类-16-10-01】“2023下学…

Stable Diffusion 3的到来巩固了 AI 图像对抗 Sora 和 Gemini 的早期领先优势

Stability AI 将其更改为 Stable Diffusion 3。VentureBeat 报道称&#xff0c;Stability AI 的下一代旗舰 AI 图像生成模型将使用类似于 OpenAI 的 Sora 的扩散变压器框架。其当前模型仅依赖于扩散架构。虽然尚未发布&#xff0c;但您可以在等候名单中注册。 官方网址链接&am…

Linux:Jenkins:GitLab+Maven+Jenkins的部署

1.环境 我这里准备了三台centos7 1.用于部署gitlab 运行内存&#xff1a;6G 名字&#xff1a;Jenkins-GitLab 192.168.6.1 2.用于部署jenkins 运行内存&#xff1a;2G 名字&#xff1a;Jenkins-server 192.168.6.2 3.用于打包测试…

【YOLO系列算法人员摔倒检测】

YOLO系列算法人员摔倒检测 模型和数据集下载YOLO系列算法的人员摔倒检测数据集可视化数据集图像示例&#xff1a; 模型和数据集下载 yolo行人跌倒检测一&#xff1a; 1、训练好的行人跌倒检测权重以及PR曲线&#xff0c;loss曲线等等&#xff0c;map达90%多&#xff0c;在行人跌…

.net6 webapi log4net完整配置使用流程

前置&#xff1a;为项目安装如下两个依赖 1.创建文件夹cfgFile 2.创建log4net.Config <?xml version"1.0" encoding"utf-8" ?> <log4net><appender name"ConsoleAppender" type"log4net.Appender.ConsoleAppender"…

月之暗面:Moonshot AI接口总结

前言&#xff1a; 开发者们只需访问 platform.moonshot.cn&#xff0c;便能创建自己的 API Key&#xff0c;进而将 Kimi 智能助手背后的同款 moonshot 模型能力&#xff0c;如长文本处理和出色的指令遵循等&#xff0c;集成至自己的产品中。这不仅增强了现有产品的功能&#x…

大离谱!AI写作竟让孔子遗体现身巴厘岛,看完笑不活了

大家好&#xff0c;我是二狗。 这两天我在知乎上看到了一个AI写作大翻车的案例&#xff0c;看完简直笑不活了&#xff0c;特地分享给大家一起 happy happy&#xff5e; 知乎网友“打开盒子吓一跳”一上来就抛出来了一个“孔子去世”的王炸。 首先&#xff0c;下面是一条真实新…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的犬种识别系统(附完整代码资源+UI界面+PyTorch代码)

摘要&#xff1a;本文介绍了一种基于深度学习的犬种识别系统系统的代码&#xff0c;采用最先进的YOLOv8算法并对比YOLOv7、YOLOv6、YOLOv5等算法的结果&#xff0c;能够准确识别图像、视频、实时视频流以及批量文件中的犬种。文章详细解释了YOLOv8算法的原理&#xff0c;并提供…

【Java程序设计】【C00286】基于Springboot的生鲜交易系统(有论文)

基于Springboot的生鲜交易系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的生鲜交易系统 本系统分为系统功能模块、管理员功能模块、用户功能模块以及商家功能模块。 系统功能模块&#xff1a;在系统首页可以…

【第七天】C++模板探秘:函数模板、类模板以及类型转换的深入解析

一、模板的概述 c面向对象编程思想&#xff1a;封装、继承、多态 c泛型编程思想&#xff1a;模板 模板的分类&#xff1a;函数模板、类模板 函数模板&#xff08;类模板&#xff09;&#xff1a;将功能相同&#xff0c;类型不同的函数&#xff08;类&#xff09;的类型抽象成虚…

聊聊Sora这个AI大神和中美技术赛跑那些事儿

最近有个叫Sora的AI模型火得一塌糊涂。它就像个魔法师&#xff0c;你给它一段话描述&#xff0c;它就能变出一段60秒的高清视频来&#xff0c;这可比之前咱们看过的那些文字转图片的AI厉害多了。想象一下&#xff0c;以后拍电影预告片、做广告宣传啥的&#xff0c;可能直接让So…

Ansible 更换aliyun 镜像 并下载tree

目录 查看系统版本找到对应 的版本对当前镜像进行备份下载aliyuan更换成功安装扩展源更换源之后 的三个命令 这里安装一个aliyun 的镜像 本案例 仅供实验参考 生产环境中请谨慎使用 查看系统版本 先查看linux 的系统 版本 ansible slave -m shell -a uname -a找到对应 的版本…

【Spring面试题】

目录 前言 1.Spring框架中的单例bean是线程安全的吗? 2.什么是AOP? 3.你们项目中有没有使用到AOP&#xff1f; 4.Spring中的事务是如何实现的&#xff1f; 5.Spring中事务失效的场景有哪些&#xff1f; 6.Spring的bean的生命周期。 7.Spring中的循环引用 8.构造方法…

FFmpeg解析之avformat_find_stream_info函数

avformat_find_stream_info 的主要作用就是&#xff1a;解析媒体文件并获取相关的流信息 整体的逻辑如下图所示&#xff1a; /*** Read packets of a media file to get stream information. This* is useful for file formats with no headers such as MPEG. This* function…