【javascript入门笔记(4)表达式与运算符

简介: 【javascript入门笔记(4)表达式与运算符

个人名片:

😊作者简介:一名大一在校生,web前端开发专业

🤡 个人主页:python学不会

🐼第一次写博客,写的不好望指正
🎅
学习目标: 坚持每一次的学习打卡


什么是javascript表达式?

✨表达式是由运算元运算符构成,并产生运算结果的语法结构。

它也可以是各种类型的数据、变量和运算符的集合。

✨表达式分为简单表达式(Primary Expression)和复杂表达式(Member Expression)

✨复杂表达式:由简单的表达式和操作符(Operator)组成

复杂表达式(Member Expression)

1.属性访问表达式:

⏺️Member Expression.IdentifierName:表达式后跟随一个点和标识符,表达式指定对象,标识符指定需要访问的的属性的名称

⏺️Member Expression[Expression ]:方括号内是另外一个表达式(适用于对象和数组使用)指定要访问的属性名称或表达要访问数组元素的索引

举个🍐

//属性访问表达式
var o={x:1,y:{z:3}};//对象值
var a =[o,4,[5,6]];//包含对象的数组值
o.x;//表达式o的x属性,值为1
o.y.z;//表达式o.y的z属性,值为3
o['x'];//对象o的x属性,值为1
a[1];//表达式a中索引为1的元素,值为4

2.函数表达式

⏺️函数定义表达式

⏺️函数调用表达式:一种调用或执行函数或方法的语法表示

举个🍐

<!-- 函数表达式 -->
 <script>
    function squarel(x){
        return x*x;
    }
    var squarel2 = function(x){
        return x*x;
    }
    document.write(squarel(2));//输出结果4
    alert(squarel2(3));//输出结果为9,弹框显示

什么是算术运算符?

😄算术运算符:

✨对数值类型的变量及常量进行算术运算。

✨也是最简单和最常用的运算符号

注意:将运算符自加++或自减–放在操作数前面,先进行自增或自减运算,再进行其他运算。若运算符放在操作数后面,则进行其他运算,再进行自增或自减运算。

✨递增和递减运算符仅对数值型和布尔型数据操作,会将布尔值true当做1,false当做0.

✨四则混合运算,一般遵循“先乘除后加减”的原则

✨取模运算结果的正负取决于被模数(%左边的数)的符号

✨尽量避免利用小数进行运算

✨“+”和“-”在算数运算时还可以表示正数或负数

举个🍐

<script type="text/javascript">
//自加自减运算表达式
var x=10;
var y=++x;//x=11,y=11;
var z=x++;//x=12,z=11;
var t=--x;//x=11,t=11;
var p=x--;//x=10,p=11;
 </script>
<p onclick="alert(y);">显示y的值</p>
<p onclick="alert(z);">显示z的值</p>
<p onclick="alert(t);">显示t的值</p>
<p onclick="alert(p);">显示p的值</p>

✨注意:从左往右运算且只计算一次

什么是赋值运算符?

赋值运算符:是一个二元运算符,它有两个操作数

它将运算符右边的值赋给左边的变量

注意:

✨“=” 是赋值运算符,而非数学意义上的相等的关系

✨一条赋值语句可以对多个变量进行赋值

✨赋值运算符的结合性为“从右到左

举个🍐

var num1=2;

num1+=3;等价于num1=num1+3;

var num2=‘2’;

num2-=3;等价于:num2=num2-3;

什么是比较运算符?

比较运算符:

⏺️用来对两个数值或变量进行比较

⏺️结果是布尔类型的true或false

注意:

✨不相同类型的数据进行比较时,首先会自动将其转换成想同类型的数据后再进行比较

✨运算符“”和“!=”运算符在比较时,只比较数值是否相等
✨运算符“
=”和“!==”比较数值和其数据类型是否相等

什么是逻辑运算符?

逻辑运算符:是在程序开发中用于逻辑判断的符号

其返回值类型是布尔类型

举个🍐

//逻辑运算符
 var x=8,y=5
 alert(x<10 && y>1);//true
 alert(x==5||y==5);//true
 alert(a>10 && y>1);
 alert(x!=5||y==5); //true
 //逻辑运算符的结合性是从左到右

注意 :

✨逻辑运算符的结合性是从左到右

✨当使用“&&”连接两个表达式,如果左边表达式值为false,则右边表达式不会执行,逻辑运算结果为false。

✨当使用“||”连接两个表达式,如果左边表达式值为ture,则右边的表达式不会执行,逻辑运算结果为true

✨逻辑运算符可证对结果为布尔值的表达式进行运算

什么是三木运算符?

三目运算符:是一种需要三个操作数的运算符,运算结构根据给定条件决定

语法:条件表达式?表达式1:表达式2

✨先求条件表达式的值

✨如果为TRUE,则返回表达式1的结果

✨如果表达式为false,则返回表达式2的执行结果

举个🍐

//判断一个数的奇偶数
 var num =15;
 var result= (num%2==0?"是偶数":"是奇数");
 document.write(num+result);
//输出结果 15是奇数

运算符的优先级:在表达式中各个运算符参与运算的先后顺序

//运算符优先级
var i=100
i++;
var j =i++;
var y= ++j;
console.log(y,i,j)
//输出结果102,102,102

有什么问题可以发在评论区,有问题大家一起解决,互相进步😊

目录
相关文章
|
19天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
131 2
|
19天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
33 0
|
1天前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
10 2
|
7天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
31 10
|
5天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
22天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
23天前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
19 1
|
前端开发 JavaScript C++
Javascript学习2 - Javascript中的表达式和运算符
原文:Javascript学习2 - Javascript中的表达式和运算符 Javascript中的运算符与C/C++中的运算符相似,但有几处不同的地方,相对于C/C++,也增加了几个不同的运算符,包括in,instanceof,typeof,delete.
798 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
109 4