JavaScript - 运算符与表达式
2024-05-09 11:42:38
运算符与表达式
1.运算符只是一种运算的符号，单独使用无意义，通常与需要计算的数据在一起组成表达式2.表达式一定有结果，要么直接打印要么存入变量中
1.1-js中+号的作用
1.字符串连接符 ： 连接字符串
* 条件 ： +号两边只要有一边是string类型2.算术加法
* 条件 : +号两边都是number类型
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>js中+号的作用</title></head><body><script>/* js中 +号 两个作用 1. 字符串连接符 ： 连接字符串* 条件 ： +号两边只要有一边是string类型2. 算术加法* 条件 : +号两边都是number类型*///1 字符串连接符：将 + 号 两边的字符串连接在一起组成一个新的字符串//前提条件： + 号的两边，只要有一边是string类型let name = "张三";//console.log ( "我的名字是name" );//此时name是字符串的一部分，无法取到变量的值console.log("我的名字是:" + name);//示例：let res1 = "10" + 10;console.log(res1); //1010//2.数学加法//前提条件： 当 + 号两边都是number类型的时候，代表数学加法运算let res2 = 10 + 10;console.log(res2); //20</script></body>
</html>
1.2-算术运算符与算术表达式
运算符只是一种运算的符号，由运算符参与的式子称之为表达式表达式一定会得到一个运算的结果：要么直接打印这个结果（直接量），要么用变量保存
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>算数运算符与算数表达式</title></head><body></body><script>/*1.算术运算符：数学中的算术运算+：加法-：减法*：乘法/：除法%：求余（求模运算）2.运算符只是一种运算的符号，由运算符参与的式子称之为表达式3.算术表达式（运算式）：由算术运算符组成的式子 例如： 数字1 + 数字24.表达式一定会得到一个运算的结果：要么直接打印这个结果（直接量），要么用变量保存5.算术运算符的优先级与小学数学学的一致：小括号>乘除模>加减*//**加法*/console.log(1 + 1); //直接打印算术表达式的结果let add = 100 + 50; //用变量保存表达式的结果console.log(add); //150/**减*/console.log(2 - 1); //1 数值let subtract = 100 - 60;console.log(subtract); // 40/**乘法*/console.log(20 * 3); //60let multiply = 3 * 10;console.log(multiply);/**除法* 1.如果两数相除的结果是一个无理数（无限不循环小数）或者无限循环小数，则无法完整的表示所有的小数一般这种情况不影响开发，可以忽略* 2.数学中0不能作为除数，JS里也一样如果作为除数会得到一个关键字：Infinity，代表无穷大的意思*/console.log(10 / 3); //3.333333console.log(10 / -2); //-5console.log(10 / 0); //Infinity无穷大/**除余*/console.log(10 % 3); //1// 10 / 3 = 3 余 1</script>
</html>1.3-复合算术运算符
- 符合算术运算符是算术运算符的一种简写形式
num += 5只是num = num + 5的简写形式，他们之间完全等价
+=: 在自身值的基础上再加多少-=：在自身值的基础上减多少*=: 在自身值的基础上乘多少/=: 在自身值的基础上除多少%=：在自身值的基础上模多少
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>复合算数运算符</title></head><body><script>/**复合算术运算符：简化算术运算的代码+=: 在自身值的基础上再加多-=：在自身值的基础上减多*=: 在自身值的基础上乘多/=: 在自身值的基础上除多%=：在自身值的基础上模多少*/// +=let num1 = 10;num1 += 10; //这行代码相当于 num1 = num1 + 10 的简写形式console.log(num1); //20// -=let num2 = 70;num2 -= 10; //相当于 num2 = num2 - 10;console.log(num2); //60// *=let num3 = 20;num3 *= 4; //相当于 num3 = num3 * 4;console.log(num3); //80// /=let num4 = 90;num4 /= 3; //相当于 num4 = num4 / 3console.log(num4); //30// %=let num5 = 10;num5 %= 3; // num5 = num5 % 3;console.log(num5); //1// 注意：不管是哪种复合运算，都是左边与右边的结果进行运算let num6 = 10;num6 -= 10 - 5; //相当于 num6 = num6 - (10 - 5)console.log(num6); //5</script></body>
</html>1.4-自增/自减运算符
- 1.自增/自减都称之为自操作运算
- ++：自增，自己+1
- –：自减，自己-1
- 2.自操作运算都是
一元表达式，即只有一个变量参与运算 - 3.自操作运算不能用于
直接量
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>自增自减运算符</title></head><body><script>//1.自增运算符 ++//后置自增表达式: num++let num1 = 10;num1++; //这行代码相当于 num1 = num1 + 1 的简写形式console.log(num1); //11//2.前置自增let num2 = 20;++num2; //这行代码相当于 num2 = num2 + 1 的简写形式console.log(num2); //21//注意：以上内容说明：如果自操作是独立一行代码，不参与其他运算或者输出，那么// *** 前置和后置没有区别//3.前置和后置区别let num3 = (num4 = 1); //1赋值给num4，然后赋值给num3，相同值的不同变量简写初始化console.log(num3++); //1 先保留num3的原始值1，用于输出，然后自增为2console.log(++num4); //2 先运算num4自增，num4为2，然后2用于输出console.log(num3, num4); //2 2//注意：以上内容说明：如果自操作是与其他操作一起运算，那么// ***前置会先改变自己，后参与其他运算；后置是先保留自己参与运算，后改变自己/*自减运算符*///自减表达式： num--let num5 = 20;num5--; //这行代码相当于 num2 = num2 - 1 的简写形式console.log(num2); //19//2.前置自减let num6 = 40;--num4;console.log(num6); //39//3.自减操作参与其他运算let num7 = (num8 = 1);console.log(num7--, --num8); //1 0let a = 10;let b = a++ + a++;console.log(b); //21</script></body>
</html></html>
1.5-Math高级数学计算
- 内置的内容要懂得记重点：当前重点Math，其他的不用特别记
- MDN官网：https://developer.mozilla.org/zh-CN/
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>/** 1. Math作用 ： 高级数学计算2. 常用a. Math.ceil(数字) ：向上取整 b. Math.floor(数字) ：向下取整 c. Math.max(数字1,数字2,...) ：求最大值d. Math.min(数字1,数字2,...) ：求最小值e. Math.random() ：返回 (0,1) 之间的小数*///1.圆周率let pi = Math.PI;console.log ( pi ); //3.1415926.....//2.绝对值:一个数字与坐标原点的距离console.log ( Math.abs ( - 2 ) ) //2//3.天花板函数：向上取整console.log ( Math.ceil ( 10 ) ); //整数得到自身console.log ( Math.ceil ( 10.1 ) ); //11,小数则向上取整console.log ( Math.ceil ( -10.1 ) ); //-10//4.地板函数: 向下取整console.log ( Math.floor( 8 ) ); //8 整数得到自身console.log ( Math.floor ( 7.9 ) ); //7,小数则向下取整console.log ( Math.floor ( -7.9 ) ); //-8//5.四舍五入取整console.log ( Math.round ( 4.5 ) ) //5console.log ( Math.round ( 3.3 ) ) //3console.log ( Math.round ( - 9.9 ) ) //-10//6.求最大值。 数值数量不限使用逗号分割console.log ( Math.max ( 50, 99, 888, 123 ) ) //888//7.求最小值。 数值数量不限使用逗号分割console.log ( Math.min ( 50, 99, 888, 123 ) ) //50//8.生成一个随机数 范围 0 - 1 之间的小数console.log ( Math.random () );//如果想得到0-100之间的整数 可以乘以一百然后向下取整即可console.log ( Math.floor ( Math.random () * 100 ) );//9.幂运算 Math.pow(x,y) 返回x的y次幂console.log ( Math.pow ( 2, 8 ) ); //256 2的八次方</script>
</body>
</html>
1.6-常量const关键字【ES6】
- 1.let关键字定义的叫做变量，变量的值可以随时随地随便改变
- 2.有的数据希望一开始定义好，后面就不发生变化，那就需要用到const关键字
- const是ES6的语法规范（为大型项目而生）
- const声明的叫做常量（固定量）
- 常量在声明的时候就必须赋值，且后续不再可以改变（只能使用）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title></head><body><script>/** 1. const定义常量，固定不让变化（只能使用）*///1.圆周率let pi = Math.PI; // pi为3.141592653589793pi = 3.14; // pi改为3.14const PI = Math.PI;//PI = 3.14; // 语法错误,不能再次赋值变化</script></body>
</html>1.7-模板字符串【ES6】
ES6提供了一种新的写描述字符串的方式：反引号（数字键1旁边的英文状态下的符号）
作用
- 和引号标记字符串的效果一样
- 可以解决引号字符串过长不能换行的问题
- 可以解决字符串连接需要使用
+号的问题
`${数据}`
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>模板字符串</title></head><body><script>//1.引号字符串，不方便换行（保留结构）/*使用引号字符串实现div输出<div class="goods"><a href="#">华为mate40</a></div>*///写在一行太长，且没有结构感，所以一般使用+号连接字符串let str1 = '<div class="goods">';str1 += '<a href="#">使用引号字符串实现 div 输出</a>';str1 += "</div>";document.write(str1);//2.模板字符串就可以直接换行保护结构let str2 = `<div class="goods"><a href="#">模板字符串实现 div 输出</a></div>`;document.write(str2);//3.模板字符串里面可以方便解析变量，简化字符串的拼接let data = "华为mate40pro";let html = `<div class="goods"><a href="#">${data}</a></div> `;document.write(html);</script></body>
</html>1.8-关系运算符和关系表达式
- 1.关系运算符：八种
>：大于，左边大于右边<：小于，左边小于右边>=：大于等于，左边大于或者等于右边<=：小于等于，左边小于或者等于右边==：等于，左边等于右边!=：不等于，左边不等于右边===：全等，左边等于右边且类型一致!==：不全等，左边不等于右边或者类型不一致
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>关系运算符和关系表达式</title></head><body></body><script>/**1.关系运算符（比较运算符）：比较两个数据之间的关系（某种条件是否成立）* 八种： > >= < <= == != ===全等 !== 不全等* 2.关系表达式：由关系运算符组成的式子 例如: 2 > 1* 只要是表达式，就会有运算结果* 3.关系表达式的结果一定是布尔类型：true代表成立，false代表不成立*///1.基本使用console.log(5 > 3); //true 成立console.log(100 < 1); //false 不成立//2.相等与不等:只比较数据的值，不比较数据的类型//
JavaScript - 运算符与表达式相关推荐
- 第5章 运算符和表达式
第5章 运算符和表达式 在计算机语言中,运算通过运算符来实现,运算符和运算数(或称操作数)组合在一起就形成了表达式.本章将详细介绍JavaScript运算符和表达式的基本知识和用法,并通过大量示例代码 ...
- JavaScript深入【表达式和运算符（上集）】你能过我8关js运算符的题目吗？
博主留言 (茗洋芳竹) 每一个高手成功之路,都要学会怎样与孤独打交道 .我是个傻孩子,孤独竟然是我的夫人,每天晚上都会坐在我旁边看我学习,写博客.马上要离开ASP.NET生涯,投奔PHP了,一切都是那 ...
- JavaScript运算符（二）相等、全等、赋值、关系操作符、条件操作符（即三元表达式）
JavaScript运算符 相等操作符 相等操作符再JavaScript中主要用于判断等号两边的内容是否相等,使用'=='来表示. null和undefined可以相等,(null==undefine ...
- JavaScript语法详解：运算符和表达式
本文首发于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 我们在上一篇文章里讲到了JS中变量的概念,本篇文章讲一下运算符和表达式. 比 ...
- JavaScript中的运算符和表达式
2.1常规数据类型与变量 2.1.1现实生活中的数据 比方说淘宝的商品描述: 数据的几个属性:名称.值.类型 数据 名称 值 类型 价格 1399.00 数值类型 累计评论 345 数值类型 是否支持 ...
- javascript基础语法——表达式
前面的话 一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...
- JavaScript运算符：递增递减运算符前置和后置的区别
从两段代码说起 var num1 = 2; var num2 = 20; var num3 = --num1 + num2; var num4 = num1 + num2; console.log(n ...
- Python 学习笔记（2） - 基本概念、运算符与表达式
字符串 - 可以使用 3 种形式 - 单引号 :「'your string'」 - 双引号 :「"your string"」 - 三引号 :「'''your string''' 或 ...
- javascript运算符_JavaScript中！=或！==运算符之间的区别
javascript运算符 We can perceive the differences between these two operators as the same difference tha ...
最新文章
- 重写浏览器alert解决ios端原生alert出现当前网址的URL
- 基站定位LAC,CID转经纬度
- php 发送邮件乱码
- 剑指Offer——不用加减乘除做加法
- J2EE中的各种工程的介绍
- 探索C++的秘密之详解extern C
- 电脑任务管理器快捷键_电脑知识小常识
- 微信开发者工具 wxmi修改模版颜色_十款高效好用的在线网页工具，提升你的办公效率...
- Python 快速入门
- Solr 基础性能调优讲解
- python获取局域网在线主机_pythond的icmp广播报获取局域网主机IP
- Tensorflow模型变量保存
- 计算机专业老师水平,计算机评价老师的评语
- redis-trib功能实现详解(转)
- web前端网页设计期末课程大作业：中华传统文化题材网页源码——基于HTML实现中国水墨风书画艺术网站(12个页面)
- java+单子_Java单子模式
- 关于浏览器加载不出图片的问题
- NIM Duilib的基础知识点
- FSA（有限状态自动机）python代码实现 自然语言处理作业
- OpenGL实验2：图形的旋转、平移、缩放
热门文章