javaScript变量-数据类型-运算符-分支循环

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量118 收藏
点赞数
分类专栏： 前端学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45436241/article/details/109495357
版权

文章目录

1.介绍

概念：基于对象和事件驱动，并且具有相对安全性的解释型的客户端脚本语言

2.组成

ECMAScript 、DOM、BOM

3.引入方式
3.1.内嵌式
<script type="text/javascript">
	alert("hello world!")
</script>
3.2.外链式

在外部创建js文件，通过src引入

<script type="text/javascript" src="./js/jso1.js">

./ 表示当前项目路径 …/表示当前项目的上级路径

3.3.事件属性
<div onclick="alert('hello world!')">click</div>
3.4.注意
  • type是可选属性，可写也可不写
  • script标签引入通常写在head或者body结束标签前
  • 内嵌式只能被一个文件使用
  • 外链式可以被多个文件使用
  • 外链式引入不能再在script标签内写js代码，会被引入的js代码覆盖掉
4.输出方式
4.1.网页输出
<script type="text/javascript">
	document.write("hello world!")
</script>
4.2.弹框输出
<script type="text/javascript">
	alert("hello world!")
</script>
4.3.控制台输出
<script type="text/javascript">
	console.log("hello world")
</script>
5.变量

变量：计算机内存分配的一块区域，用来保存变化的数据

5.1.声明变量：
var  : 可以重复声明和赋值
let  ：不能重复声明，可以再次赋值  es6
const：不能重复声明，不能再次赋值  es6
5.2.赋值
  • 不声明直接赋值
 		<script type="text/javascript">
            name = 'zs';
            age = '10';
            console.log(name+"--"+age);
        </script>
  • 声明后赋值
 		<script type="text/javascript">
            var name = 'zs';
            var age = '10';
            console.log(name+"--"+age);
        </script>
  • 同时声明多个变量
		 <script type="text/javascript">
            var name = 'zs',
            age = '10';
            console.log(name+"--"+age);
        </script>

  • 定义变量的区别

    • var声明的变量可以重复声明，可以再次赋值，值会被覆盖

      <script type="text/javascript">
        var name = 'zs';
        var name = 'ls';
        console.log(name); // ls
</script>

    • let声明的变量不能再次声明，可以再次赋值

      <script type="text/javascript">
            let name = 'zs';
            //let name = 'ls'; //抛错： Identifier 'name' has already been declared
            name = 'ls';
            console.log(name); // ls
</script>

    • const声明的变量不能再次声明，不能再次赋值

      <script type="text/javascript">
            const name = 'zs';
            //const name = 'ls'; //抛错： Identifier 'name' has already been declared
            //name = 'ls'; //抛错：Assignment to constant variable.
            console.log(name); // zs
</script>
6.数据类型

可以使用关键字typeof来查看类型

<script type="text/javascript">
            console.log(typeof 1);//number
            console.log(typeof 0.1);//number
            console.log(typeof null);//object
            console.log(typeof true);//boolean
            console.log(typeof undefined);//undefined
            console.log(typeof Symbol());//symbol
            console.log(typeof 'hello');//string
</script>
6.1.基本数据类型
  • Number：数值类型（int: 整数；float：小数；NaN: not a number；Infinity：除数为0）
  • String：字符串，可以用“ ”或者''表示
  • Boolean：布尔值，true或者false
  • Undefined：未定义，一个变量已经声明，但是还未赋值
  • Null：空值，可以给一个变量赋以null来清除变量内容
  • Symbol：唯一
6.2.引用数据类型
  • Object：对象
7.类型转换

不同数据类型的变量之间运算，需要转换为同一类型!

7.1.强制转换
  • 转换为int，只有首字母是数字的才可以转换，其他的为NaN
		<script type="text/javascript">
            console.log(parseInt('1'));//1
            console.log(parseInt('1.111'));//1
            console.log(parseInt('1abc'));//1
            console.log(parseInt('0.1abc'));//0
            console.log(parseInt('abc520'));//NaN
            console.log(parseInt(null));//NaN
            console.log(parseInt(true));//NaN
            console.log(parseInt(undefined));//NaN
            console.log(parseInt('hello'));//NaN
        </script>
  • 转换为float，只有首字母是数字的才可以转换，其他的为NaN
		<script type="text/javascript">
            console.log(parseFloat('1'));//1
            console.log(parseFloat('1.111'));//1.111
            console.log(parseFloat('1abc'));//1
            console.log(parseFloat('0.1abc'));//0.1
            console.log(parseFloat('abc520'));//NaN
            console.log(parseFloat(null));//NaN
            console.log(parseFloat(true));//NaN
            console.log(parseFloat(undefined));//NaN
            console.log(parseFloat('hello'));//NaN
        </script>
  • 转换为Number，只有纯数字字符串的才可以转换，其他的为NaN，true–1，null–0
		<script type="text/javascript">
            console.log(Number('1'));//1
            console.log(Number('1.111'));//1.111
            console.log(Number('1abc'));//NaN
            console.log(Number('0.1abc'));//NaN
            console.log(Number('abc520'));//NaN
            console.log(Number(null));//0
            console.log(Number(true));//1
            console.log(Number(undefined));//NaN
            console.log(Number('hello'));//NaN
        </script>
  • 转为Boolean值，0，false，’’(空字符串)，null，undefined, NaN为false，其他都为true
		<script type="text/javascript">
            console.log(Boolean('1'));//true
            console.log(Boolean(0));//false
            console.log(Boolean(''));//false
            console.log(Boolean('1abc'));//true
            console.log(Boolean('0.1abc'));//true
            console.log(Boolean('abc520'));//true
            console.log(Boolean(null));//false
            console.log(Boolean(true));//true
            console.log(Boolean(undefined));//false
            console.log(Boolean(NaN));//false
        </script>

7.2.隐式转换

	<script type="text/javascript">
            let a = '2',b = '3';
            let c = null;
            let d = NaN
            let e = undefined;
            let f = true;
            let g = "a";
            console.log(a-b) //-1
            console.log(a+b)//23 字符串的拼接
            console.log(a*c);//0 null--0
            console.log(a/e);//NaN
            console.log(a/d);//NaN
            console.log(a/f);//2 true--1
            console.log(a-g);//NaN
        </script>
8.运算符

①　算术运算符： + - * / % ++ –

②　比较运算符：== != > >= < <= =(全等于) !(不全等于)

③　条件运算符：(expr1) ? (expr2) : (expr3)

④　逻辑运算符：&&（与） ||（或） ! (非)

⑤　字符串运算符：+

⑥　赋值运算符： = += -= *= /= %=

8.1.算数运算符

取模运算：%，取余数，除不尽的取后面整数

		<script type="text/javascript">
            let a = '33';
            console.log(a%3);//0 
            console.log(a%5);//3
        </script>

a++：先参与运算，再自增1

++a：先自增1，再参与运算

 		<script type="text/javascript">
            let a = 1,b = 2;
            console.log(a++ + 1);//2
            console.log(a);//2
            console.log(++a +1);//4
            console.log(a);//3
        </script>
8.2.比较运算符

所有比较的结果都为Boolean值

==(不严格等于): 比较值的大小，不比较值的类型 (比较大小)

===(严格全等于): 既比较值的大小，又比较值的类型.(比较大小，类型)

!=(不等于)：结果和==相反

!(不全等于)：结果和=相反

		<script type="text/javascript">
            let a = '1',b = 1;
            console.log(a==b);//true
            console.log(a===b);//false
            console.log(a!=b);//false
            console.log(a!==b);//true
        </script>
8.3.逻辑运算符
  • a&&b(并且)：逻辑与，当a和b都为true时，返回值为true，否则返回false
  • a||b(或者)： 逻辑或，只要a与b中有一个为真，结果为真
  • !a(取反)：逻辑非，当a为true时，返回值为false，否则返回true
		<script type="text/javascript">
            let a = '1',b = 0;
            console.log(a&b);//0 -- false
            console.log(a|b);//1 -- true
            console.log(a||b);//1 -- true
            console.log(a&&b);//0 --false
            console.log(!b);//true
        </script>
9.分支
9.1.单分支 if
if(条件A){
	代码块B //如果条件A成立(为真),才执行代码块B ， 否则不执行
}


		<script type="text/javascript">
            let flag = true
            if(flag){
                console.log("hello")
            }
        </script>
9.2.双分支 if - else
	if( 条件A ){
		//条件A为真： 执行代码块B，并结束
	}else{
		//条件A为假： 执行代码块C，并结束
	} 


		<script type="text/javascript">
            let flag = true
            if(flag){
                console.log("hello")
            }
            else{
                console.log("hi")
            }
        </script>
9.3.多分支 if - else if
if(条件A){	
		//条件A为真： 执行代码块A,并结束
	}esle if(条件B){
		//条件B为真： 执行代码块B,并结束
	}esle if(条件C){
		//条件C为真： 执行代码块C,并结束
	}else{
		//以上条件都不成立： 执行代码块D
	}


let score = prompt("输入成绩", 0);

    //判断考试成绩
if (score >= 90) {

        console.log("国外旅游");

} else if (score >= 70 && score < 90) {

        console.log("国内旅游")

} else if (score >= 60 && score < 70) {

        console.log("省内旅游")

} else {

        console.log("家里蹲")

}

else可以省略

prompt：提示用户输入的对话框。

9.3.多分支 switch…case
switch(表达式/变量){
		case 值1:
		全等于值1,执行代码块A;
		break;//结束

		case 值2:
		全等于值2,执行代码块B;
		break;

		default: 
		以上都不等于,执行代码块N
		break;
	}


	<script type="text/javascript">
            let month = prompt("请输入数字",1)
            month = Number(month)
            switch (month){
                case 1:
                alert("春天")
                break;
                case 2:
                alert("夏天")
                break;
                case 3:
                alert("秋天")
                break;
                case 4:
                alert("冬天")
                break;
            }
        </script>
  • switch适用于对某个状态值的判断，可以与if - else if 互换
  • default可以省略，可以写在case之前或者之后
10.循环
for(初始化循环变量; 循环条件; 更新循环变量){
		循环体;
}

  1. 循环变量的初始值可以是任意值

  2. 更新循环变量： 步长可以是任意值 可加可减，更新循环变量表达式一定是赋值运算

  3. 循环条件为真 ： 执行循环体

  4. 循环条件为假 ： 结束循环

		<script type="text/javascript">
            for(let i = 0; i<10 ; i++){
                document.write("hello world!");
            }
        </script>

  1. 初始化循环变量： let i=0;

  2. 判断是否满足循环条件：i<10

  3. 不满足： 结束循环

  4. 满足： 执行循环体： document.write(“hello world!”);

  5. 更新循环变量： i++

  6. 回到第2步

10.1.死循环

循环条件表达式永远为真

		<script type="text/javascript">
            for(; ;){
                console.log("go on...")
            }
        </script>
10.2.双重嵌套
		<script type="text/javascript">
            for(let i = 0;i<4;i++){
                for(let i = 0;i<5;i++){
                    document.write("★");
                }
                document.write("<br>")//换行
            }
        </script>
10.3.终止循环
  • break 终止当前循环和后面所有循环
		<script type="text/javascript">
            for(let i = 1;i<=10;i++){
                if(i===5){
                    break;
                }
                console.log(i) //1,2,3,4
            }
        </script>
  • continue 终止当前循环，继续后面的循环
		<script type="text/javascript">
            for(let i = 1;i<=10;i++){
                if(i===5){
                   continue;
                }
                console.log(i) //1,2,3,4,6,7,8,9,10
            }
        </script>

  1. i的每个取值就是一次循环 === i从1取到10 所以有10次循环

  2. break : 终止了当前循环(i=5)，还终止了后面所有循环(i=6-10)

  3. continue: 终止了当前循环(i=5)， 继续后面的所有循环(i=6-10)

10.4.while 循环
while (条件)
{
    需要执行的代码
}

<script type="text/javascript">
	let i = 0;
	while(i<5){
	console.log("hello world:"+i);
	i++ ;
	}
</script>

只要变量i小于5，循环就会一直执行

10.5.do-while循环
do
{
    需要执行的代码
}
while (条件);

		<script type="text/javascript">
            let i=0;
            do{
                console.log("hello world"+i);
                i++;
            } 
            while(i<5)
        </script>

do结构体内优先执行，循环至少会执行一次，即使条件为 false 它也会执行一次

CODE IN JULY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
StepToFrontEndDev:从2021-03-30
04-06
1. **JavaScript基础**：变量声明、数据类型、运算符、控制流程（条件语句、循环）、函数、对象和数组、异步编程（Promise和async/await）。 2. **DOM操作**：理解文档对象模型，如何使用JavaScript操作DOM元素，...
JavaScript-Basics-Teamwork-Assignment
06-15
JavaScript 基础是所有JavaScript开发者必须掌握的核心概念，它包括变量、数据类型、操作符、控制流程、函数、对象和数组等。在这个“JavaScript-Basics-Teamwork-Assignment”中，团队成员通过共同开发基于...
JavaScript基础-数据类型、变量、运算符
student66666666的博客
04-13 601
web的组成 html：网页的结构 css：网页的样式 js 网页的样式 浏览器的组成 浏览器的组成分为两部分：渲染引擎 和 js引擎 渲染引擎俗称浏览器内核，可以解析html和css js引擎：负责读取网页中的js代码 js的引入方式 行内式 将js直接写在html标签的开始标签上 - 非a标签 将少量的js代码写在标签的事件属性上（以on开头的属性） <div id="123" style="color:red" onclick="alert('你好吗')"
js基础-变量-数据类型-分支语句-逻辑运算符-函数
qq_61697873的博客
07-26 126
js基础知识点
JavaScript 表达式-运算符-分支-循环结构
weixin_68829057的博客
09-15 172
JavaScript表达式-运算符-分支-循环结构
JavaScript学习笔记01-数据类型-运算符-循环语句
czttaotao的博客
10-13 412
一、js初体验
JavaScript-demo-practical
04-28
- 数据类型（基本类型：字符串、数字、布尔、null、undefined；复杂类型：对象、数组） - 运算符（算术、比较、逻辑、赋值） - 控制流（条件语句 if/else、switch，循环语句 for、while、do...while） 2. **函数...
03-JavaScript-Password-Generator
03-06
1. **JavaScript基础**：首先，我们需要了解JavaScript的基本语法，包括变量声明、数据类型、控制流（如if语句和循环）以及函数的使用。 2. **随机数生成**：JavaScript中的`Math.random()`函数是密码生成的关键，...
五、JavaScript-jQuery
08-04
4. 数据类型：js 中有多种数据类型，包括： * 数字/数值类型：例如 `var a = 10;` * 字符串类型：例如 `var s = 'hello';` * 布尔类型：例如 `var b = true;` * 特殊的类型：null 代表空，undefined 代表未定义，NaN...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 220
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 98
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 877
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 305
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 201
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 89
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 304
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 153
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
什么是vue的计算属性
weixin_56187723的博客
07-12 164
Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。
前端学习笔记-黑马程序员JS
01-09
这篇前端学习笔记主要涵盖了JavaScript的基础知识，包括变量、数据类型、流程控制、数组、函数、对象、内置对象等方面的内容。以下是详细的解释： 1. 变量与数据类型： - 变量的声明与赋值：在JavaScript中，变量...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值