js基础:简介、变量与数据类型、流程循环控制语句、数组及其api

JS基础:简介、变量与数据类型、流程循环控制语句、数组及其api

一、简介

1、js概述

tip:JavaScript是什么? 有什么作用?

JavaScript(简称JS)是一种轻量级的、解释性的编程语言,主要用于在网页上实现交互式的效果,比如验证表单输入、改变页面内容等。但随着技术的发展,JavaScript已经变得更加强大和多样化,能够实现复杂的任务和功能,包括:

  1. DOM 操作:JavaScript 可以操作文档对象模型(DOM),使开发者能够动态地改变网页的结构和内容。
  2. 事件处理:通过监听用户的交互事件,比如点击、滚动、输入等,JavaScript可以触发相应的动作和功能。
  3. 异步编程:JavaScript 支持异步编程,通过回调函数、Promise 或者 async/await 等方式处理异步操作,比如网络请求、定时器等。
  4. 前端框架:出现了许多基于 JavaScript 的前端框架(比如React、Angular、Vue等),用于构建复杂的单页应用(SPA)和用户界面。
  5. 服务器端开发:Node.js 是一个基于 JavaScript 运行的服务器端环境,使得开发者能够使用 JavaScript 编写后端代码。

JavaScript 已经成为 web 开发中不可或缺的一部分,它的灵活性和功能丰富性使得开发者能够构建出各种各样交互丰富的网页和应用程序。


tip:JavaScript的组成有哪些?

  • ECMAScript:js的基础核心语法知识(变量、流程控制语句、对象、函数语法、箭头函数、模板字符串、Promise 等)
  • Web APIs
    • DOM(页面文档对象模型):
      • 用于操作文档,提供了访问和操作网页内容的方法和接口。
      • 它以树形结构表示文档,允许开发者使用 JavaScript 添加、删除、修改网页的元素和内容,实现动态交互效果。
    • BOM(浏览器对象模型):
      • 用于操作浏览器,BOM 提供了与浏览器窗口交互的方法和接口。
      • 它包括了操作浏览器窗口大小、处理浏览器历史记录、跟踪用户会话信息(比如 Cookie 和 Storage)、发起网络请求等功能。
JavaScript
ECMAScript
WebAPIs
DOM
BOM

demo:dom交互效果,对网页的元素和内容进行CRUD

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>按钮变色</title>
</head>
<style>.c_pink {background-color: pink;}
</style>
<body><button class="c_pink">按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><!-- js --><script>let bts = document.querySelectorAll('button')for (let i = 0; i < bts.length; i++) {bts[i].addEventListener('click', function () {document.querySelector('.c_pink').className = ''this.className = 'c_pink'})}</script>
</body>
</html>

JS的书写位置:

JavaScript 可以在 HTML 文档中的不同位置书写:内联式、内部式、外部式

<!DOCTYPE html>
<html><head><title>JavaScript Example</title><!-- 1.外部式:js代码也可以保存在外部文件中,并通过 `<script>` 标签的 `src` 属性引用。这种方式使得代码更易于维护和管理,并可以被多个页面共享 --><script src="path/to/your/script.js"></script><!-- 2.内部式:js代码也可以放置在 HTML 文件的 `<script>` 标签内部。这些 `<script>` 标签可以放在 `<head>` 或 `<body>` 中--><script>// 可以在这里放置JavaScript代码</script>
</head><body><!-- 3.内联式:js代码可以直接嵌入在 HTML 元素的事件属性中,比如在 onclick、onmouseover 等事件中--><button onclick="alert('Hello!')">Click me</button><script>// 可以在这里放置JavaScript代码</script>
</body></html>

JS注释:

//这是单行注释
/**
这是多行注释
这是多行注释
**/

2、js输入输出

JS输入输出语法

在这里插入图片描述

//1.输出:修改dom输出元素内容
document.write('<h1>我是JS我修改了dom,我是一级标题</h1>')
//弹窗输出
alert('页面弹出了警告框')
//控制台输出
console.log('按F12可以看到控制台输出的内容')//2.输入
var ipt = prompt('请输入你的年龄')

3、js字面量

🤖chatgpt:什么是JS的字面量?

JavaScript中的字面量是指直接表示固定值的符号表示法。它们是在代码中直接表示数据的方式,而不需要通过变量或计算来生成。JavaScript支持多种字面量,包括:

  1. 字符串字面量: 使用单引号(')或双引号(")括起来的文本值,例如:'Hello, World!'
  2. 数字字面量: 直接表示数字的值,可以是整数或浮点数,例如:423.14
  3. 布尔值字面量: 表示真(true)或假(false)的值,例如:truefalse
  4. 对象字面量: 表示创建新对象的方式,使用大括号({})括起来的键值对,例如:{ name: 'John', age: 30 }
  5. 数组字面量: 表示创建新数组的方式,使用方括号([])括起来的值列表,例如:[1, 2, 3, 4]
  6. 正则表达式字面量: 表示正则表达式模式,使用斜杠(/)括起来,例如:/pattern/

字面量提供了一种直接在代码中表示数据的方式,使得代码更易读、更直观。

二、变量、常量和数据类型

🤖chatgpt:什么是变量?什么是数据类型?

  • 变量是程序中用来存储数据值的容器(命名空间)。它们允许程序员在代码中引用这些值,并随着程序的执行而改变。

  • 每个变量都有一个名称(标识符)和一个与之关联的值,这个值可以是数字、字符串、对象、函数等各种类型的数据。

举个例子,你可以创建一个变量来存储一个人的年龄:

let age = 30;

在这里,age是变量的名称,而30是它的值。变量名是在程序中引用值的标签,使得我们可以轻松地操作和使用这些值,而无需每次都重复输入具体的数值。

而数据类型是编程语言中用来分类不同类型数据的分类方式。常见的数据类型包括:

  1. 数字(Number): 包括整数和浮点数。

  2. 字符串(String): 由字符组成的文本,比如"Hello, World!"

  3. 布尔值(Boolean): 代表真(true)或假(false)的值。

  4. 对象(Object): 包含键值对的集合,用于存储复杂的数据结构。

  5. 数组(Array): 一组按序排列的值的集合。

  6. 函数(Function): 可以被调用执行的代码块。

数据类型决定了数据可以进行的操作以及存储的方式。在很多编程语言中,还有更多复杂的数据类型或者可以自定义数据类型,这些类型能够更精确地表示程序中的数据。

1、变量

如何声明一个变量并赋值?

//1.声明: 声明的符号let、var、const;变量的名字自定义,此次为name
let name
//2.赋值: 将右边的值赋值给左边的变量
name = 'redvelet'//声明同时赋值
let age = 18

变量命名规范:

  1. 不能使用关键字
  2. 应以字母、下划线(_)或美元符号($)开头,不能以数字开头。
  3. 严格区分大小写

🤖chatgpt:var和let的区别?

在 JavaScript 中,varlet 都是用于声明变量的关键字,但它们之间有几个重要的区别:

  1. 作用域:

    • var 声明的变量存在函数作用域(function scope)。这意味着使用 var 声明的变量在函数内部是可见的,而在函数外部是全局可见的。
    • let 声明的变量存在块级作用域(block scope)。块级作用域意味着使用 let 声明的变量仅在其所在的块(大括号 {} 内)中可见。
  2. 变量提升:

    • 使用 var 声明的变量存在变量提升(hoisting)的特性。这意味着在作用域内的任何位置都可以访问变量的声明,但初始化的值会被提升至作用域顶部,未初始化时值为 undefined,也就是先使用后声明的情况。
    • 使用 let 声明的变量不会出现变量提升的情况。在使用 let 声明之前访问变量会导致 ReferenceError。
  3. 重复声明:

    • 使用 var 可以多次声明同一变量而不报错。这可能会引发意外的问题,因为变量可以被重复赋值。
    • 使用 let 在同一作用域内重复声明同一变量会引发语法错误。

示例:

//1.可以访问但是undifined
console.log('nums is ' + num)
var num = 10//2.变量提升,覆盖原来
for (let i = 0; i < 10; i++) {var num = i;
}
console.log('for num is ' + num)  //控制台输出:for num is 9let num2 = 10;
for (let i = 0; i < 10; i++) {let num2 = i;
}
console.log('for num2 is ' + num2)  //控制台输出:for num is 10

存储多个相同类型的变量 - 数组:

let redvelet = ['裴珠泫', '姜涩琪', "孙承完", "朴秀荣"]
console.log(redvelet)

在这里插入图片描述


console.log('redvelet is ' + redvelet)  //控制台输出:redvelet is 裴珠泫,姜涩琪,孙承完,朴秀荣
//使用索引访问: 数组名[索引号]
console.log(redvelet[0])  //控制台输出:裴珠泫
console.log(redvelet[3])  //控制台输出:朴秀荣

//数组的遍历
for (let i = 0; i < redvelet.length; i++) {console.log('redvelet[' + i + ']' + ':' + '索引:' + i + '/' + '内容:' + redvelet[i])
}

在这里插入图片描述

2、常量

什么是常量?

  • 使用const修饰的变量就是常量,一旦赋值不可再改变,除非修改源代码
const PI = 3.1415926;
console.log('PI is ' + PI)
PI = 3
console.log('PI is ' + PI) //控制台输出:Uncaught TypeError: Assignment to constant variable.at 5_常量.html: 14: 8

在这里插入图片描述

3、数据类型

数据类型分类:基本数据类型、引用数据类型

JavaScript有七种基本数据类型:

  1. 数字(Number):整数或浮点数。例如:423.14

  2. 字符串(String):文本类型,使用单引号或双引号、反引号表示。例如:'Hello, World!'

    • 模板字符串:

      //模板字符串:反引号包裹+${}
      let age = 18
      console.log(`刚满${age}`)
      //例子
      let question = prompt('你好请问你今年多大?')
      document.write(`刚满${question}`)
      
  3. 布尔值(Boolean):表示逻辑上的 true 或 false。

  4. 空(Null):表示一个空值或不存在的值。例如:null

  5. 未定义(Undefined):表示声明了变量但未赋值的情况。例如:undefined

  6. Symbol:ES6 新增加的数据类型,表示独一无二的值。

  7. BigInt:ES10 新增加的数据类型,用来表示更大范围的整数。

此外,JavaScript也有复杂数据类型:

  1. 对象(Object):用于存储多个值的集合,键值对的集合。

  2. 数组(Array):特殊类型的对象,按顺序存储多个值的列表。

这些数据类型在JavaScript中被广泛使用,不同的数据类型用于存储和操作不同种类的数据。

数据类型检测:typeof

let num = 1.1
console.log(typeof num) //控制台输出number
let obj = null
console.log(typeof obj) //控制台输出object
let redvelet = ['xxx', 'xxxx']
console.log(typeof redvelet) //控制台输出object

🤖chatgpt:JS是弱数据类型解释?

JavaScript被描述为一种弱类型或者动态类型的语言,这意味着在JavaScript中,变量的数据类型可以在运行时自动改变。弱类型语言相对于强类型语言而言,更容易隐式地转换变量的数据类型。

在强类型语言中,变量的数据类型是固定的,不同类型的数据需要明确的转换才能进行操作。但在JavaScript中,这种类型的转换通常是隐式的,例如:

let x = '10' //x是一个字符串
let y = 5 //y是一个数字let result = x + y //JavaScript隐式地将数字转换为字符串,结果是字符串'105'//如果是强数据类型-java-一定义就要明确类型
int num = 10;

在上面的例子中,JavaScript隐式地将数字 y 转换为字符串类型,然后将两个字符串进行连接,而不是进行数学上的加法运算。这种隐式类型转换可以方便编码,但有时也可能导致意外的行为。

弱类型语言的特性让开发者需要更加小心地处理变量类型,确保在操作数据时不会因为隐式的类型转换而引发错误。这也是JavaScript灵活性和易用性的一部分,但也需要谨慎使用以避免潜在的问题。

🤖chatgpt:js的算术运算符和执行的优先级顺序

JavaScript中的算术运算符用于执行数学运算。优先级越高约先被执行,优先级相同从左往右,以下是一些常见运算符的优先级顺序(从高到低):

  1. 括号: ()(括号内的表达式优先计算)
  2. 指数运算: **(ES7 新增的指数运算符,计算一个数的指数)
  3. 乘法、除法和求余运算: */%(取模运算,返回除法操作的余数)
  4. 加法和减法运算: +(用于加法运算或字符串拼接)、-

示例:

let result = 10 + 5 * 2; // 先乘法后加法,result 等于 20,因为乘法优先级高于加法

如果有相同优先级的运算符,运算顺序是从左到右。但是可以使用括号来明确运算顺序,确保表达式按照预期进行计算。

let result = (10 + 5) * 2; // 括号优先,result 等于 30,先执行括号内的加法

理解运算符的优先级和结合性对于正确编写复杂的表达式非常重要,这可以避免因为运算次序错误而导致意外的结果。

tip:数据类型转换:JS是弱数据类型,JS只有赋值了才知道是什么数据类型,且使用prompt和表单获取的数据默认是字符串类型,如果相加那么就是拼接,而不是相加。

隐式类型转换:

在这里插入图片描述

//+号单个使用可以使字符串转化为数字类型
//+号和字符串匹配使用,效果是拼接
//- * /等不同与+号,它们的效果是转换
let num1 = prompt('请输入一个数字1:') //输入:22
let num2 = prompt('请输入一个数字2:') //输入:22
console.log(`${num1}+${num2} = ` + ((+num1) + (+num2))) //控制台输出:44
console.log(`${num1}+${num2} = ` + ((+num1) + (num2)))  //控制台输出:2222
console.log(`${num1}+${num2} = ` + ((num1) + (num2)))  //控制台输出:2222
console.log(`${num1}-${num2} = ` + ((num1) - (num2)))  //控制台输出:0

**显式类型转换:**数据类型(变量)、parseInt(变量)、parseFloat(变量)

在这里插入图片描述

let num10 = '12000.001'
console.log(typeof num10)  //控制台输出:0
console.log(typeof +num10)  //控制台输出:0
console.log(typeof Number(num10))  //控制台输出:0
console.log(Number(num10))  //控制台输出:12000.001
console.log(parseInt(num10))  //控制台输出:12000
console.log(parseFloat(num10))  //控制台输出:12000.001

三、流程控制、循环语句和数组

1、流程控制语句

if(xxxx){}else{}
let key = 'xxx'
switch(key){case '1':xxxxbreakcase '2':xxxxbreakdefault:break
}

2、循环语句

循环语句:就是重复执行某些操作(具体的代码)

  • 循环三要素:循环起始条件、终止条件、变量变化量
  • break:推出当前循环
  • continue:跳过当前循环
//while循环
//1.循环起始站
let count = 5;
//2.循环终止条件
while (count > 0) {if (count === 4) {//跳过4count--continue}if (count === 1) {//为1的时候直接退出break}document.write(`count is ${count} &nbsp;`)//3.循环变量变化量count--
}//for循环
for (let i = 0; i < 10; i++) {document.write(`49年入国军 ${i} &nbsp;`)
}

在这里插入图片描述

3、数组

数组的CRUD操作:

  • 定义数组let 数组名 = [] / let 数组名 = {内容…..}
  • 添加元素:返回新增后的长度
    • push():头插
    • unshift():尾插
  • 删除元素:返回删除的内容
    • shift():头删
    • pop():尾删
    • splice(, ):删除指定区间(左闭右闭)
//1.新增 push unshift - 返回新增后的长度
let redvelet = []
console.log(redvelet.push('裴珠泫'))//尾插
console.log(redvelet.push('裴珠泫', '姜涩琪', '孙承完'))//尾插
console.log(redvelet.unshift('irene'))//头插
console.log(redvelet)//2.删除 shift splice - 返回删除的内容
console.log(redvelet.shift())//头删
console.log(redvelet.pop())//尾删
console.log(redvelet.splice(0, 2))//删除指定区间,左闭右闭
console.log(redvelet)

在这里插入图片描述

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

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

相关文章

React系列:实现子组件A->父组件-子组件B变量流传

🍁 作者:知识浅谈,CSDN博客专家,阿里云签约博主,InfoQ签约博主,华为云云享专家,51CTO明日之星 📌 擅长领域:全栈工程师、爬虫、ACM算法 💒 公众号:知识浅谈 🔥网站:vip.zsqt.cc React系列总结 🎈useState的使用 创建响应式变量的时候,在react是需要使用u…

手机网站支付有风险吗?

这是一个在当今数字化时代中&#xff0c;消费者们常常会提出的问题。随着科技的发展和移动设备的普及&#xff0c;越来越多的商家开始接受在线支付&#xff0c;这无疑为消费者提供了极大的便利。然而&#xff0c;与此同时&#xff0c;也伴随着一些潜在的风险。本文将探讨手机网…

0012Java程序设计-ssm医院预约挂号及排队叫号系统

文章目录 **摘** **要**目 录系统实现5.2后端功能模块5.2.1管理员功能模块5.2.2医生功能模块 开发环境 摘 要 网络的广泛应用给生活带来了十分的便利。所以把医院预约挂号及排队叫号管理与现在网络相结合&#xff0c;利用java技术建设医院预约挂号及排队叫号系统&#xff0c;实…

Nginx安装【保姆级别】

目录 1.Nginx开源版本安装&#x1f495;&#x1f495;&#x1f495; 2.传到linux&#x1f495;&#x1f495;&#x1f495; 3.在linux上安装 &#x1f495;&#x1f495;&#x1f495; 4.启动Nginx &#x1f495;&#x1f495;&#x1f495; 5.安装成系统服务 &#x1f495…

Dockerfile创建镜像INMP+wordpress

Dockerfile创建镜像INMPwordpress 需要哪些呢&#xff1a; Nginx 172.111.0.10 docker-nginx Mysql 172.111.0.20 docker-mysql PHP 172.111.0.30 docker-PHP 开始实验&#xff1a; 创建各级目录&#xff0c;他们各自的包和配置文件必须要在同一目录下才可以生效&…

Fiddler中AutoResponder的简单使用

AutoResponder&#xff0c;自动回复器&#xff0c;用于将 HTTP 请求重定向为指定的返回类型。 这个功能有点像是一个代理转发器&#xff0c;可以将某一请求的响应结果替换成指定的资源&#xff0c;可以是某个页面也可以是某个本地文件 1.使用 打开“Fiddler”&#xff0c;点击…

掌握iText:轻松处理PDF文档-高级篇-加密和解密

前言 iText作为一个功能强大、灵活且广泛应用的PDF处理工具&#xff0c;在实际项目中发挥着重要作用。通过这些文章&#xff0c;读者可以深入了解如何利用iText进行PDF的创建、编辑、加密和提取文本等操作&#xff0c;为日常开发工作提供了宝贵的参考和指导。 掌握iText&#…

【Vue】router.push用法实现路由跳转

目录 router.push用法 在Login.vue中 在Register.vue中 ​ 上一篇&#xff1a;登录与注册界面的制作 https://blog.csdn.net/m0_67930426/article/details/134895214?spm1001.2014.3001.5502 制作了登录与注册界面&#xff0c;并介绍了相关表单元素即属性的用法 在登录页面…

jQuery遍历与删除添加节点

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大二在校生 &#x1f921; 个人主页&#xff1a;坠入暮云间x &#x1f43c;座右铭&#xff1a;懒惰受到的惩罚不仅仅是自己的失败&#xff0c;还有别人的成功。 &#x1f385;**学习目标: 坚持每一次的学习打卡 文章…

手拉手探索JSONCrack数据可视化

JSON Crack数据可视化工具 官网&#xff1a;https://jsoncrack.com/ 项目地址&#xff1a;https://github.com/AykutSarac/jsoncrack.com SON Crack 是一个很方便的 JSON 数据可视化工具。 该项目不是简单的展示 JSON 数据,而是将其转化为类似思维导图的形式,支持放大/缩小、展…

技术资讯:VSCode大更新,这两个功能终于有了

大家好&#xff0c;我是大澈&#xff01; 本文约1200字&#xff0c;整篇阅读大约需要2分钟。 感谢关注微信公众号&#xff1a;“程序员大澈”&#xff0c;然后免费加入问答群&#xff0c;从此让解决问题的你不再孤单&#xff01; 1. 资讯速览 就在前阵子&#xff0c;前端人都…

Java LeetCode篇-二叉树经典解法(实现:判断平衡二叉树、找两个节点最近的祖先等)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 平衡二叉树 1.1 实现判断平衡二叉树的思路 1.2 代码实现判断平衡二叉树 2.0 二叉树的层序遍历 2.1 实现二叉树层序遍历的思路 2.2 代码实现二叉树层序遍历 3.0 …

苹果app应用ipa文件程序开发后如何运行到苹果iOS真机上测试?

在苹果应用程序开发过程中&#xff0c;将app安装于真机进行测试是一个不可或缺的步骤&#xff0c;它可以帮助你检测app在实际设备上的性能表现及存在的潜在问题。这篇文章将详细阐述如何将开发好的苹果app&#xff08;.ipa文件&#xff09;安装到真机上进行测试。 图片来源&…

文心一言 VS 讯飞星火 VS chatgpt (155)-- 算法导论12.3 2题

二、用go语言&#xff0c;假设通过反复向一棵树中插人互不相同的关键字来构造一棵二叉搜索树。证明&#xff1a;在这棵树中查找关键字所检查过的结点数目等于先前插入这个关键字所检查的结点数目加 1。 文心一言&#xff1a; 为了证明这个结论&#xff0c;我们可以使用二叉搜…

VisualSVN Server的安装全过程

目录 背景: 安装过程&#xff1a; 步骤1&#xff1a; 步骤2&#xff1a; 步骤3&#xff1a; 步骤4&#xff1a; 步骤5&#xff1a; 安装出现的bug&#xff1a; 问题: 解决办法: 总结: 背景: VisualSVN Server 是一款免费的 SVN (Subversion) 服务器软件&#xff0c…

2创建工程及点灯

1:软件安装&#xff1a; 1关注公众号“纸飞资”&#xff0c;键盘输入keil“”,按照文章要求安装编译软件 2芯片安装&#xff1a; 方式一&#xff1a;离线安装。去Keil公司官网的器件支持包下载页面选择对应的公司及器件型号&#xff0c;然后在Device Family Pack文本框中点击…

Python异常、模块和包

Python异常、模块和包 1.了解异常2.异常的捕获方法3.异常的传递4.Python模块5.Python包 1.了解异常 1.1什么是异常 当检测到一个错误是&#xff0c;Python解释器就无法继续执行了&#xff0c;发而出现了一些错误提示&#xff0c;这就是所谓的“异常”&#xff0c;也就是我们常…

【开源软件】最好的开源软件-2023-第26名 Accelerate

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

【精选】小白是如何挖漏洞的(技巧篇)

目录&#xff1a; 怎么找漏洞 找到后如何挖漏洞 关于通杀漏洞N day漏洞的挖掘 漏洞如何提交 每小结都有提供对应的案例&#xff0c;简直不要太nice&#xff01; 这个月的SRC活动也快开始了&#xff0c;看到群里的小伙伴在问如何找漏洞&#xff0c;SQL注入的漏洞咋找&#x…

慢SQL诊断

最近经常遇到技术开发跑来问我慢SQL优化相关工作&#xff0c;所以干脆出几篇SQL相关优化技术月报&#xff0c;我这里就以公司mysql一致的5.7版本来说明下。 在企业中慢SQL问题进场会遇到&#xff0c;尤其像我们这种ERP行业。 成熟的公司企业都会有晚上的慢SQL监控和预警机制。…