JS-快速入门

news2024/11/24 2:24:57

目录

  • 变量
  • 原生数据类型
  • 模板字符串
  • 字符串的内置属性、方法
  • 数组
    • 数组创建方式
    • 数组值操作
      • 获取值
      • 添加值
      • 删除值
      • 判断是否是数组
      • 获取值的索引
  • 对象
    • 创建对象,为对象创建新属性
    • 对象值存到同名常(变)量中
  • 对象数组和JSON
    • 创建对象数组
    • 对象数组取值
    • 对象数组转JSON数据
  • if条件语句
  • 三目运算符
  • switch
  • for与while
    • for与while遍历对象数组
    • for循环另一种写法(let 变量名 of 对象)

变量

var let const
var是全局作用,所以基本不用
let是变量
const是常量,但是如果声明的是数组或对象时,是可以部分改变,但不能完全改变

原生数据类型

String Number Boolean null undefined
整型和浮点型都是Number类型
null和unfined区别为null是空,unfined是根本没有定义

const username = "Z";
const age = 30;
const isCool = true;
const rate = 4.5;
const x = unfined;
const y = null;

查看数据类型

const age = 30;
console.log(typeof age);

在这里插入图片描述

模板字符串

有两种方式
1.字符串+变量
2.使用`${变量}`

const age = 30;
console.log("My age is "+age);
console.log(`My age is ${age}`);

在这里插入图片描述

字符串的内置属性、方法

  • 字符串长度
  • 字符串转大小写
  • 字符串截取
  • 字符串转数组
const s = "Hello JavaScritp,yes";
console.log(s.length);
console.log(s.toUpperCase());
console.log(s.toLowerCase());
console.log(s.substring(1,3));
console.log(s.split(""));

在这里插入图片描述

数组

数组创建方式

1.使用newArray()

const numbers = new Array(1,2,3,4);
console.log(numbers);

在这里插入图片描述
2.使用[]声明

const fruits = ["apple","pears"];
console.log(fruits);

在这里插入图片描述

数组值操作

获取值

const fruits = ["apple","pears"];
console.log(fruits[1]);

在这里插入图片描述

添加值

1.在数组末尾添加值

const fruits = ["apple","pears"];
fruits.push("banana");
// console.log(numbers);
console.log(fruits);

在这里插入图片描述
2.在数组首部添加值

const fruits = ["apple","pears"];
fruits.unshift("banana");
// console.log(numbers);
console.log(fruits);
console.log(fruits[1]);

在这里插入图片描述

删除值

删除数组末尾元素

const fruits = ["apple","pears"];
fruits.pop();
console.log(fruits);

在这里插入图片描述

判断是否是数组

const fruits = ["apple","pears"];;
console.log(fruits);

在这里插入图片描述

获取值的索引

const fruits = ["apple","pears"];
console.log(fruits.indexOf("pears"));

在这里插入图片描述

对象

创建对象,为对象创建新属性

const person = {
	firstName: "Vincent",
	age: 26,
	hobbies: ["games","movies"],
	address: {
		street: "six road",
		city: "xian",
		state: "MA"
	}
};
console.log(person);

在这里插入图片描述

person.email = "123@163.com"
console.log(person.email);

在这里插入图片描述

对象值存到同名常(变)量中

const person = {
	firstName: "Vincent",
	age: 26,
	hobbies: ["games","movies"],
	address: {
		street: "six road",
		city: "xian",
		state: "MA"
	}
};
const {firstName,age} = person;
console.log(firstName);

在这里插入图片描述

对象数组和JSON

创建对象数组

const todos = [
{
	id : 1,
	text: "take out trash",
	isComplete: true
},
{
	id : 2,
	text: "meeting with boss",
	isComplete: false
},
{
	id : 3,
	text: "take out",
	isComplete: true
}
];
console.log(todos);

在这里插入图片描述

对象数组取值

const todos = [
	{
		id : 1,
		text: "take out trash",
		isComplete: true
	},
	{
		id : 2,
		text: "meeting with boss",
		isComplete: false
	},
	{
		id : 3,
		text: "take out",
		isComplete: true
	}
];
		console.log(todos[1].text);

在这里插入图片描述

对象数组转JSON数据

const todoJSON = JSON.stringify(todos)
console.log(todos);

在这里插入图片描述

if条件语句

const x = 11;
const y = 2;
if(x === 10 || y>1){
	console.log("x is 10");
}else if(x > 10){
	console.log("x > 10")
}else{
	console.log("x is not 10")
}

在这里插入图片描述

三目运算符

const x = 1;
const color = x>10 ? "red" :"blue";
console.log(color);

在这里插入图片描述

switch

注意要带break

const color = "yellow";
switch (color){
	case "red":
		console.log("color is red");
		break;
	case "bule":
		console.log("color is bule");
		break;
	default:
		console.log("color is not found");
}

在这里插入图片描述

for与while

for与while遍历对象数组

const todos = [
	{
		id : 1,
		text: "take out trash",
		isComplete: true
	},
	{
		id : 2,
		text: "meeting with boss",
		isComplete: false
	},
	{
		id : 3,
		text: "take out",
		isComplete: true
	}
];
for(let i=0; i<todos.length; i++){
	console.log(`x值为:${i}`);
	console.log(todos[i]);
}
let y = 0;
while(y<todos.length){
	console.log(`y值为:${y}`);
	console.log(todos[y]);
	y++;
}

在这里插入图片描述

for循环另一种写法(let 变量名 of 对象)

for(let todo of todos){
	console.log(todo.text);
}

在这里插入图片描述

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

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

相关文章

ELK技术堆栈(yum安装部署)

ELK技术堆栈&#xff08;yum安装部署&#xff09; 目录 ELK技术堆栈可以应用于各种场景 ELK的工作原理如下&#xff1a; 它由三个核心组件组成&#xff1a; 部署步骤&#xff1a;&#xff08;单台部署&#xff09; 环境部署&#xff1a; 安装JAVA环境&#xff1a;&#…

数据库系统概述——第十章 数据库恢复技术(知识点复习+练习题)

&#x1f31f;博主&#xff1a;命运之光 &#x1f984;专栏&#xff1a;离散数学考前复习&#xff08;知识点题&#xff09; &#x1f353;专栏&#xff1a;概率论期末速成&#xff08;一套卷&#xff09; &#x1f433;专栏&#xff1a;数字电路考前复习 &#x1f99a;专栏&am…

单页面应用是什么?优缺点?如何弥补缺点

文章目录 导文单页面应用是什么&#xff1f;优点&#xff1a;缺点&#xff1a;弥补缺点的方法&#xff1a; 导文 Web单页应用就是指只有一个Web页面作为入口的应用 在浏览器中运行期间不会重新加载页面。也就是说浏览器一开始会加载它必需的thml、css和js 之后所有的交互操作都…

Godot 4 源码分析 - 命令行参数

粗看Godot 4的源码&#xff0c;稍微调试一下&#xff0c;发现一大堆的命令行参数。在widechar_main中 Error err Main::setup(argv_utf8[0], argc - 1, &argv_utf8[1]); Main::setup中&#xff0c;各命令行参数加入到List<Stirng> args中&#xff0c;并通过OS::get…

技术引领 踏浪而行 2023 A+CLUB 北京峰会 | 活动回顾

6月10日&#xff0c;“技术引领 踏浪而行”2023 ACLUB 北京峰会活动圆满举办&#xff0c;近70家机构超百人参会&#xff0c;其中北京及周边地区优秀私募占比八成。私募、券商、专家学者、业内先进解决方案&#xff08;包括算力、存储、网络、软件&#xff09;供应商从不同角度分…

【2023unity游戏制作-mango的冒险】-7.玩法实现

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

0805曲面及其方程-向量代数与空间解析几何

文章目录 1 曲面研究的基本问题2 旋转曲面3 柱面4 二次曲面4.1 定义4.2 研究方法4.3 九种二次曲面 结语 1 曲面研究的基本问题 曲面研究的两个基本问题&#xff1a; 已知一曲面作为点的几何轨迹时&#xff0c;建立这曲面的方程&#xff1b;已知x,y和z直接的一个方程时&#x…

如何在 Ubuntu 上实现 Nuxeo 与 ONLYOFFICE 文档集成

1. 概览 我们持续提供一系列易于使用的教程&#xff0c;向大家介绍如何将开源办公套件 ONLYOFFICE 文档集成到第三方 Web 服务中。ONLYOFFICE 文档根据 AGPLv.3 许可分发&#xff0c;包含处理文本文档、电子表格和演示文稿的编辑器&#xff0c;提供全套编辑及格式设置工具&…

Linux之进程间通信之管道

进程间通信的目的: 1、数据传输&#xff1a;一个进程需要将它的数据发售那个给另外一个进程。 2、资源共享&#xff1a;多个进程之间需要共享同样的资源。 3、通知事件&#xff1a;一个进程需要向另外一个或者一组进程发送消息&#xff0c;通知它们发生了某种事件(比如&…

java中避免使用“isSuccess“作为变量名的原因和解决方法

阿里巴巴Java开发手册的说法 在阿里巴巴Java开发手册中关于这一点&#xff0c;有过一个『强制性』规定&#xff1a; 其他原因 另外根据Java命名约定&#xff0c;方法名应该以动词开头&#xff0c;而变量名应该以名词或形容词开头。使用"isSuccess"作为变量名可能…

AAAI 2023 | 语言模型如何增强视觉模型的零样本能力 ?

文章链接&#xff1a;https://arxiv.org/abs/2207.01328 项目地址&#xff1a;https://github.com/zjukg/DUET 该论文设计了一种新的零样本学习范式&#xff0c;通过迁移语言模型中的先验语义知识&#xff0c;与视觉模型的特征感知能力进行对齐&#xff0c;以增强后者对于未见过…

nacos集成springcloud实现配置中心功能

1. 在nacos控制台创建namespace 2. 创建SpringCloud项目 大家注意springboot和springcloud的版本对应&#xff0c;可以去官网查看。 https://spring.io/projects/spring-cloud#learn <properties><java.version>11</java.version><poi.version>5.2.…

VSCode使用CodeWhisperer(AI编程)

安装AWS Toolkit插件&#xff0c;点击侧边插件搜索并安装 2.点击aws ->CodeWhisperer ->Start 3.在下拉菜单中点击Use a personal email to sign up and sign in with AWS Builder ID 4.点Copy Code and Proceed&#xff0c;这会自动复制一些东西 5. 收到提示打开外部网…

高德API JS 地图获取多个坐标点的中心点

高德API JS 地图获取多个坐标点的中心点 一、需求 我需要&#xff1a; 在地图上展示多个地点地图缩放到合适的大小&#xff0c;要求刚好能显示全部点位边缘留有一部分间隔。 做成如图所示这样。 二、需要用到的 AMap 类库 经过一下午的研究&#xff0c;弄出来了。 需要以…

【计算机网络自顶向下】简答题习题总结(一)

计算机网络是什么 两个及以上具有独立操作系统的计算机通过某些介质连接成的相互共享软硬件资源的集合体。 计算机网络两大功能 连通性和共享 如何描述Internet 分为两方面 具体构成 计算机互连设备、通信链路、分组交换设备 提供服务&#xff1a; 提供网络应用基础架构为分布式…

计网第二章实验2:DNS

DNS实验pdf下载地址(科学上网)&#xff1a;Wireshark_DNS_v7.0 (umass.edu) 实验前置知识 nslookup命令 nslookup –option1 –option2 host-to-find dns-server 如果dns-server不指定的话那么就是默认的&#xff1a;本地DNS服务器 选项其一 -typeNS or -typeA 所代表的意思不…

文心一言 VS 讯飞星火 VS chatgpt (43)-- 算法导论5.4 7题

七、为使特征序列长度的下界变得更精确&#xff0c;请说明在 n 次硬币的公平抛掷中&#xff0c;不出现比Ign - 2lglgn 更长的连续正面特征序列的概率小于 1/n。 文心一言&#xff1a; 在 n 次硬币的公平抛掷中&#xff0c;每个硬币正、反面朝上的概率均为 1/2。让我们考虑一个…

【人工智能技术专题】「入门到精通系列教程」零基础带你进军人工智能领域的全流程技术体系和实战指南(LLM、AGI和AIGC都是什么)

零基础带你掌握人工智能全流程技术体系和实战指南&#xff08;LLM、AGI和AIGC都是什么&#xff09; 前言专栏介绍专栏说明学习大纲前提条件面向读者学习目标核心重点三连问核心学习目标和方向 什么是LLM大语言模型概念定义训练方式机器学习的类型LLM与无监督学习什么是无监督学…

视频剪辑培训班要学多久 视频剪辑的培训班有用吗

视频剪辑培训班要学多久&#xff1f;视学员的基础而定&#xff0c;零基础的学员可能需要花费较多的时间&#xff0c;而有基础的学员则更快上手。另外&#xff0c;学习的内容也会影响到学习周期。视频剪辑的培训班有用吗&#xff1f;靠谱的培训班会比自学更有用&#xff0c;效率…

为什么老板宁愿招年轻测试员?

测试员&#xff0c;30岁是一个分水岭&#xff0c;年龄越大越难找工作&#xff0c;为何&#xff1f;下面通过几方面来谈谈&#xff0c;为什么老板宁愿招年轻测试员。 可塑性强 年老的测试员可塑性不强了&#xff0c;通俗来讲&#xff0c;不会被老板画的大饼忽悠了。 而年轻人&…