前端学习——JS学习

news2024/9/21 14:52:20

文章目录

  • 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); // 20

let 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;  // ok

obj = {		//  SyntaxError: Identifier 'obj' has already been declared
	age: 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.coloradmin.cn/o/1464676.html

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

相关文章

办理布基纳法索(Burkina Faso)ECTN认证

布基纳法索ECTN认证 一. 什么是布基纳法索(Burkina Faso)ECTN认证? 根据布基纳法索(Burkina Faso)签发于 11/07/2006法令编号 00557的规定: 自2006年11月07 日起所有出口至布基纳法索(Burkina Faso)的货…

ChatGPT调教指南 | 咒语指南 | Prompts提示词教程(一)

在我们开始探索人工智能的世界时,了解如何与之有效沉浸交流是至关重要的。想象一下,你手中有一把钥匙,可以解锁与OpenAI的GPT模型沟通的无限可能。这把钥匙就是——正确的提示词(prompts)。无论你是AI领域的新手&#…

Vue响应式状态ref()与reactive()

1. ref()声明响应式状态 <template><!--在DOM元素调用变量时,不需要指定输出变量的value,因为Vue会帮你输出.value但是注意,这个帮助只会帮助顶级的ref属性才会被解包--><div>{{ count }}</div><div>{{ object }}</div><div>{{ arr…

vue Threejs实现任意画线(鼠标点击画线)

Threejs实现任意画线(鼠标点击画线) 鼠标左键单击添加点鼠标右键回退到上一个点,并继续画按住shift可以画平行于x轴或平行于z轴的线按Esc完成画线

如何把视频转换成mp4格式?总结4种转换方法【全】

随着视频在我们生活中的普及&#xff0c;我们常常需要将视频文件转换成不同的格式以适应不同的播放设备或应用场景。而MP4格式作为一种广泛兼容且高质量的视频格式&#xff0c;常常是人们的首选。因此&#xff0c;掌握将视频转换成MP4格式的方法变得至关重要。 在本文中&#…

消息队列MQ 保证消息不丢失(消息可靠性)

文章目录 概述RabbitMQ 怎么避免消息丢失&#xff08;可靠传输&#xff09;RocketMQ 怎么确保消息不丢失Kafka 怎么保证消息不丢失activeMQ 怎么避免消息丢失MQ 宕机了消息是否会丢失线上服务宕机时&#xff0c;如何保证数据100%不丢失吗&#xff1f;消息队列消息持久化 概述 …

如何做bug分析 ?bug分析什么 ? 为什么要做bug分析 ?

每当我们完成一个版本测试时&#xff0c;总会在测试报告中添加一些分析bug的指标 &#xff0c;主要用于分析在测试过程中存在的问题 。但是在分析的过程中你就可能遇到如下的问题 &#xff1a; 我应该分析那些指标呢 &#xff1f;每一个具体的指标该如何分析 &#xff1f;它能说…

软件性能测试和功能测试有何联系和区别?第三方软件检测机构简析

软件性能测试和功能测试是软件开发过程中非常重要的两个环节。从根本上说&#xff0c;它们都是为了保证软件质量和可靠性&#xff0c;但它们的目标和方法却有所不同。 软件性能测试是评估软件在特定负载下的性能表现&#xff0c;包括响应时间、吞吐量、并发能力等指标。它通过…

1.deeplabv3+网络结构及原理

这里的网络结构及原理可以看这篇博客&#xff0c;DeepLabV3: 在DeepLabV3基础上引入了Decoder_matlab deeplabv3resnet101-CSDN博客该博客翻译原论文解释得很清楚。 一、引言 语义分割的目标是为图像中的每个像素分配语义标签。在这项研究中&#xff0c;考虑了两种类型的神经网…

Flink ML 的新特性解析与应用

摘要&#xff1a;本文整理自阿里巴巴算法专家赵伟波&#xff0c;在 Flink Forward Asia 2023 AI特征工程专场的分享。本篇内容主要分为以下四部分&#xff1a; Flink ML 概况在线学习的设计与应用在线推理的设计与应用特征工程算法与应用 一、Flink ML 概况 Flink ML 是 Apache…

Python自动化UI测试之Selenium基础实操

1. Selenium简介 Selenium 是一个用于 Web 应用程序测试的工具。最初是为网站自动化测试而开发的&#xff0c;可以直接运行在浏览器上&#xff0c;支持的浏览器包括 IE&#xff08;7, 8, 9, 10, 11&#xff09;&#xff0c;Mozilla Firefox&#xff0c;Safari&#xff0c;Googl…

(done) 矩阵的对角化,以及是否可对角化的判断、还有对角化的本质。相似对角化计算过程

相似对角化 和 对角化 很大程度上是一回事 甚至判断两个矩阵的相似性&#xff0c;也跟对角化有很大关系 参考视频1&#xff1a;https://www.bilibili.com/video/BV1PA411T7b5/?spm_id_from333.788&vd_source7a1a0bc74158c6993c7355c5490fc600 参考视频2&#xff1a;http…

node 之 初步认识

思考&#xff1a;为什么JavaScript可以在浏览器中被执行 代执行的js代码——JavaScript解析引擎 不同的浏览器使用不同的JavaScript解析引擎 Chrome 浏览器 》 V8 Firefox浏览器 》OdinMonkey(奥丁猴&#xff09; Safri浏览器 》JSCore IE浏览器 》Chakra(查克拉&#xff09; e…

【算法分析与设计】

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位…

Vue 图片轮播第三方库 介绍

Vue图片轮播是一种在网页上以自动或手动方式展示图片的组件&#xff0c;常用于产品展示、网站banner等场景。有许多第三方库可以帮助Vue开发者轻松实现图片轮播功能。以下是一些流行的Vue图片轮播第三方库的介绍&#xff1a; 1. Vue-awesome-swiper - **简介**&#xff1a;V…

activeMq将mqtt发布订阅转成消息队列

1、activemq.xml置文件新增如下内容 2、mqttx测试发送&#xff1a; 主题&#xff08;配置的模糊匹配&#xff0c;为了并发&#xff09;&#xff1a;VirtualTopic/device/sendData/12312 3、mqtt接收的结果 4、程序处理 package comimport cn.hutool.core.date.DateUtil; imp…

【Vue】本地使用 axios 调用第三方接口并处理跨域

前端处理跨域 一. 开发准备 开发工具&#xff1a;VScode框架&#xff1a;Vue2项目结构&#xff1a;vue脚手架生成的标准项目&#xff08;以下仅显示主要部分&#xff09; 本地已搭建好的端口&#xff1a;8080要请求的第三方接口&#xff1a;http://1.11.1.111:端口号/xxx-api…

免费文档比对方案 基于Draftable的文档比对功能实现 避免key30天到期问题

一、需求说明 目前在通用文档系统中存在【文档比对】的功能&#xff0c;这里最好是支持word->word、pdf->pdf、word->pdf等形式的通用型比较。 二、首先说明下pdf pdf文件比较特殊&#xff0c;它实际上文字的坐标映射&#xff0c;没有常规文本的段落、句子等含义。所以…

C语言翻译环境:预编译+编译+汇编+链接详解

目录 翻译环境和运行环境 翻译环境 预处理&#xff08;预编译&#xff09; 编译 词法分析 语法分析 语义分析 汇编 链接 运行环境 ⭐翻译环境和运行环境 在ANSI C的任何⼀种实现中&#xff0c;存在两个不同的环境。 第1种是翻译环境&#xff0c;在这个环境中源代码被…

使用Streamlit构建纯LLM Chatbot WebUI傻瓜教程

文章目录 使用Streamlit构建纯LLM Chatbot WebUI傻瓜教程开发环境hello Streatelit显示DataFrame数据显示地图WebUI左右布局设置st.sidebar左侧布局st.columns右侧布局 大语言模型LLM Chatbot WebUI设置Chatbot页面布局showdataframe()显示dataframeshowLineChart()显示折线图s…