备案控制台
开发者社区 开发与运维 文章 正文

JS基础 - 基础运算符

2023-09-27 26
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS基础 - 基础运算符

JS的三种书写方式

  1. 行内式 通过事件写在html标签内部,作为标签的一个属性使用
  1. 内嵌式 <script type="text/javascript"></script>
  2. 外链式 <script src=''></script>

注 ： 外部引用脚本时，script标签中不要写任何内容，写了也不执行！

如何输出？

  1. alert() : 以警告框的方式输出，缺点是会阻止后面语句的执行。

如果括号中是数字就不须要加引号

如果是其它非数字数据要加引号（不区分单引号或双引号），在JS中只要加上引号就叫做字符串。引号嵌套时要注意不能交叉使用引号 ' "" ' " '' "JS语言中，所有的标点符号都是英文半角状态

  1. document.write() : 在页面中输出，缺点是会影响现有布局。 实现页面中的部分是文档区document write : 写
  2. console.log() : 在控制台中输出，会输出对象的详细信息。 console 控制台

JS中的换行

  1. 页面中 <br>
  2. 非页面中 \n : 换行\t : 横向跳格（一次八个空格）\ : 转义符,将具有特殊含义的符号转成普通字符

JS中的注释

  1. 单行注释 //注释内容
  2. 多行注释 /*注释内容、多行注释、段落注释、块注释*/

JS中的数据类型

  1. 基本数据类型
  • Number (数字类型) 3 3.3 -4
  • String (字符串) '' ""
  • Boolean (布尔) true false
  • null (表示空的对象)
  • undefined (未定义)
  1. 复合数据类型
  • Object (对象)

JS中的命名规则

  1. 只能包含（字母、数字、下划线、$）
  2. 不能以数字开头
  1. 不能是关键字或保留字
  2. 要语义化
  3. 驼峰命名
  • 大驼峰 ： HowAreYou 常用于 类名或构造函数名
  • 小驼峰 : howAreYou 常用于 函数名 how_are_you 常用于 变量名
  1. 匈牙利命名法
  • 整数 int i_num 以i开头的变量存储整数
  • 小数 float f_num 以f开头的变量存储小数
  • 字符 char ch 以c开头的变量存储一个字符
  • 字符串 String str 以s开头的变量存储一个字符串
  • 布尔 Boolean bool 以b或bo开头的变量存储布尔变量
  • 对象 Object o_div 以o开头的变量存储对象
  • 数组 array arr 以arr开头的变量存储数组
  • 函数 function fn 以fn开头的变量存储函数

JS 变量

用于在内存中开辟空间，这个空间中存储数据，且随着程序的运行，空间中的数据会发生变化，所以称为变量。

  1. 声明变量
  • 显式声明 ： var 变量名,变量名,变量名;
  • 隐式声明 ： 变量名 = 值;
  1. 给变量赋值
  • 初始化变量： 在声明变量的同时给它赋值。
  • 先声明变量，再赋值。
  1. 注意：
  1. 一个变量名只能存储一个值
  2. 当再次给一个变量赋值的时候，前面一次的值就没有了
  3. 变量名称区分大小写（JS 严区分大小写）

JS 运算符

自增自减运算符 ++ --

规则：从左到右，如果遇到 变量 ++ 先取出变量中的值参与其它运算，再自加1。 如果遇到 ++ 变量，直接取加1后的值参与运算。

//声明一个变量
// var i = 3;
//    3  4
// // i ++;
// ++ i;
// console.log(i); //4
​
​
// var i = 3;
//   //        3  4
// console.log(i ++); //3
// console.log(i); //4
​
// var i = 3;
// //             4
// console.log(++ i); //4
// console.log(i); //4
​
​
// var i = 3;
// //         4   4  5   5  4
// var j = ++ i + i ++ + i --;
// //        4  +  4   +   5
// console.log(i,j);  //4  13
​
​
var i = 3;
//      3  4    5    5  6
var j = i ++ + ++i + i ++;
//      3   +   5    +  5  j = 13,i = 6
//       7    13 14  7  6
var k = ++i + j ++ + i --;
//       7   + 13   + 7  k = 27  j = 14 i = 6
console.log(i,j,k);  //6

算术运算符

* (乘) /(除) %(模) -(减)

规则：

  1. Numbber类型，直接运算


Number与String类型运算，先将String类型转为Number类型，如果是纯数字字符串，则转为数字，直接运算。如果不是纯数字字符串，则转为NaN，与NaN计算的结果，都是NaN


true(1) false(0) null(0) undefined(NaN)

console.log(2 * 3); //6
console.log(2 * '3'); //6
console.log('2' * '3'); //6
console.log(2 * '3a'); //NaN (Not a Number)
console.log(2 * true); //2
console.log(2 * false); //0
console.log(2 * null); //0
console.log(2 * undefined); //NaN
​
console.log(10 / 2); //5
console.log(10 / '2'); //5
console.log(10 / '2a'); //NaN
console.log(true / 2); //0.5
console.log(false / 2); //0
console.log(2 / null); //Infinity 无穷
console.log(0 / 0); //NaN
console.log(2 / undefined); //NaN
​
console.log(5 % 2); //1
console.log(5 % 5); //0
console.log(5 % '2'); //1
console.log(5 % '2a'); //NaN
console.log(5 % true); //0
console.log(5 % false); //NaN
console.log(2 % 5); //2
console.log(3 % 5); //3
​
console.log(5 - 3); //2
console.log(5 - '2'); //3
console.log(5 - '2a'); //NaN
console.log(5 - true); //4
console.log(5 - false); //5
console.log(5 - null); //5
console.log(5 - undefined); //NaN
  • (加) 规则：
  1. 如果+号两边有字符串，则将两个数据连接成新的字符串。
  2. true(1) false(0) null(0) undefined(NaN)

关系运算符

> (大于) <(小于) >= (大于或等于) <= (小于或等于)

规则：

  1. Number类型之间比较，直接比较类型之间比较，直接比较
  1. String类型之间比较，从左到右依次比较字符，直到比出结果。
  2. Number与String类型之间比较，先将String转为Number,再比较
  1. true(1) false(0) null(0) undefined(NaN)
  2. 任何值与NaN比较,结果都为false

=大于或等于只要满足> 或者满足 = 中的一项, 就是true

  1. 两个字母之间比较的是编码值(是数字)ASCLL
console.log(3 > 2); //true
console.log(1 >= '1'); //true  Number与string之间比较,现将字符串转为数字,在比较
console.log(0 >= 'false') //false 
console.log(0 <= false); //true   在比较的时候,false自动转为0进行比较 在比较的时候,true自动转为1进行比较
console.log(0 >= null); //true    
console.log('100' > '2') //false  string之间比较,从左到右依次比较一个字符
console.log(2 > NaN); //false

== (等于) != (不等于) === (恒等于) !== (不恒等)

区别： == 和 != : 只比较结果，不比较类型。 === 和 !== : 先比较类型，如果类型相同，再比较结果。

console.log(2 == '2'); //true  '1'自动转换为1
console.log(2 === '2'); //false  先比较类型 ,Number 1  string 1  类型不同
console.log(2 != '2'); //false   转换为1 相等   1．如果类型相同，结果也相同，则为true. 2．如果类型不相同﹐结果为false 3．如果类型相同，结果不相同，结果为false
console.log(2 !== '2'); //true   先比较类型,Number 1  string 1  类型不同 ,不恒等 // !== 1．如果类型不相同，结果为true 2．如果类型相同，结果不相同，为true 3．如果类型相同，结果也相同，为false
面试题
//切记：切记：切记：
//null在判断相等关系时，不再做类型转换
console.log(null == 0); //false  null(空)不占用内存空间o常量占空间不相等
console.log(null == false); //false  null(空)不占用内存空间o常量占空间不相等
console.log(null == ''); //false null(空)false 0 空间
console.log(null == undefined); //true null(空)undefined(空）都为空，所以是true
console.log(null === undefined); //false  null(object)  undefined(undefined)  object不等于undefined false
console.log(NaN === NaN); //false  NaN不等于任何值，包含自己

逻辑运算符 （false/0/''/null/undefined/NaN 天然为假值)

  1. ! : 非

规则： 非真即假、非假即真

console.log(!0); //true  0天然为假 !不是假的,结果为true
console.log(!false);  //true  false !不是假的, 结果为true
console.log(!''); //true   ''天然为假 !不是假的,结果为true
console.log(!null); //true  null 天然为假 !不是假的,结果为true
console.log(!undefined); //true  天然为假 !不是假的,结果为true
console.log(!NaN); //true  天然为假 !不是假的,结果为true
console.log(!' '); //false  空格为真 ,!不是真,即为假
console.log(!8); //false    8是真,!不是真,即为假
console.log(!-8); //false   -8是真,!不是真,即为假
console.log(!!8); //true    8是真,!不是真,即为假,双重否定表肯定,即为真
  1. && : 与

规则 逻辑与&& and 两侧都为true 结果为true 只要一侧为false 结果就为 false 如果&&左边表达式的值为true时，返回右边表达式的值。 如果&&左边表达式的值为false时，发生短路，返回左边表达式的值。

var i = 3;
var j = !i >= 0 && (i = 4);
console.log(i,j); //4  4
​
​
var k = 3;
// 3%5=3  3-3=0 为假 返回上一级
var m = k % 5 - 3 && (k = 4);
console.log(k,m);  //3 0
​
var a = 3;
// 3-(12/2=0)=3 为真
var b = 3 - 3 * 4 % 2 && (a = 4);
console.log(a,b);  //4   4
  1. || : 或

规则 逻辑与|| or 两侧都为false 结果为false 只要一侧为true 结果就为 true 如果||左边表达式的值为true时，发生短路，返回左边表达式的值。 如果||左边表达式的值为false时，返回右边表达式的值。

 var i = 3;
var j = i - i % 4 || (i = 4);
console.log(i,j); //4  4
​
var k = 3;
var m = 3 - 3 % 2 || ( k = 4);
console.log(k,m); //3   2
练习：
// 1. number 等于或大于 90，但小于 100
   number>=90 && number < 100
// 2. ch 不是字符 q 也不是字符 k   
   ch!= 'q' && ch != 'k'
// 3. number 界于 1 到 9 之间（包括 1 不包括 9），但是不等于 5  
   1<= number && number < 9 && number !=5     
// 4. number 不在 1 到 9 之间
   number <1 || number > 9
// 5. 判断这个字符是空格，是数字，是字母 
   ch === ' ' || ch >= '0' && ch <= '9'|| ch >= 'a' && ch <= 'z' || ch >= -'A' && ch <= 'z'
// 6. 有 3 个整数 a,b,c，判断谁最大，列出所有可能
   a > b && a > c
   b > a && b > c
   c > a && c > b
// 7. 判断 year 表示的某一年是否为闰年，用逻辑表达式表示。
// 闰年的条件是符合下面二者之一：
// 1) 能被 4 整除但不能被 100 整除
// 2) 能被 400 整除
// 被4整除  不能被100整除  能被 400整除
// 余数0 但是0为假，所以得让0变为true  0===0   !0
// 余数不为0，不为0的数天然为true  如:如果余数为1 天然为true 1 !== 0
​
   year % 4 === 0 && year % 100 !== 0 || year % 400=== 0!
   !(year % 4)&& year % 100 || !(year % 400)

<!-- =:赋值号给变量中存储数据用的，将值存储在一个空间内 ==:判断相等关系（只判断结果是否相等〉 ===:判断相等关系（先判断类型是否相同，类型相同的情况下，再判断结果是否相等) -->


赋值运算符

  1. 简单赋值 =

赋值号左边，只能变量 赋值号右边，可以常量、变量、表达式。

  1. 复合算术赋值 += -= *= /= %=

规则：先取运算符左边变量中的值 与 右边表达式的值 进行相应的 算术运算，最后将运算的结果再赋值给左边的变量。

特殊运算符

  1. new : 用于创建对象 new 类名()
var i = 3; //Number
var o_num = new Number(3);
// typeof :用于检测数据类型
console.log(typeof i,typeof o_num); //'number'    'object'
var o_bool = new Boolean();
var o_str = new String();
var obj = new Object();

typeof : 用于检测数据类型

console.log(typeof 3); //'number'
console.log(typeof '3'); //'string'
console.log(typeof true); //'boolean'
console.log(typeof null); //'object'  不是对象的对象。
console.log(typeof undefined); //'undefined'  基本数据类型的数据为空
console.log(typeof NaN); //'number'  不是数字的数字
console.log(typeof typeof false);//'string'
// typeof 检测时遇到typeof 字符串必须等到后面数值才反馈 所以反馈出带引号的数值  'number'   所以为string

数据类型的转换

  1. 自动类型转换
  2. 强制类型转换
  • parseInt('字符串',2~36进制范围) : 将字符串中开头有效的数字部分转为整数。

当省略第二个参数或第二个参数为0时，表示十进制。 当第二个参数是< 2 || > 36时，结果为NaN 如果第二个参数是2~36中的范围时，判断第一个参数是否符合第二个参数的进制范围，如果符合，则正常转为整数，如果不符合进制范围，则直接返回NaN

// 进制  :  满几进一
  //  十进制:0-9
  //  八进制:0-7
  //  二进制:0-1
  //  十六进制:0-9 a b c d e f
console.log(parseInt('1.2.3'));  //1
console.log(parseInt('3 42')); //3
console.log(parseInt('   3'));  //3
console.log(parseInt(''));  //NaN
console.log(parseInt('a23')); //NaN
​
console.log(parseInt('2',0)); //2
// 如果parseint的第二个参数省略或为0是,默认十进制
// 第二个参数是限制第一个参数的进制范围
console.log(parseInt('2',1)); //NaN
// 如果第二个参数不在2-36中,直接返回NaND的结果
console.log(parseInt('2',37)); //NaN
// 如果第一个不符合第二个参数的进制范围,直接返回NaN
console.log(parseInt('2',2)); //NaN
console.log(parseInt('2',3)); //2

parseFloat('字符串') : 将字符串中开头有效的数字部分转为小数。

console.log(parseFloat('1.2.3.5')); //1.2
console.log(parseFloat('2 34')); //2
console.log(parseFloat('')); //NaN
console.log(parseFloat('a2.3')); //NaN

Number('字符串') : 将纯有效数字字符串转为数字。

console.log(Number('1.2.3')); //NaN
console.log(Number('2 34'));  //NaN
console.log(Number('')); //0  ''表示假false  
console.log(Number('a23')); //NaN
​
​
console.log(Number('')); //0  ''表示假false 
console. log(parseInt('')); //NaN
console. log (parseFloat('')); //NaN

运算符的优先级

!(非)  ++(递增) -- (递减) new(创建对象)  typeof(测试类型)  +(正号)  -(负号)

*(乘)  /(除) %(模)

+(加)  -(减)

>(大于)  <(小于)   >=(大于或等于)   <=(小于或等于)

== (等于) !=(不等于) === (恒等) !== (不恒等)

&& (与)

11 (或)

?: (三元运算符)


文章标签：
云数据库 ClickHouse
JavaScript
存储
前端开发
关键词：
JavaScript运算符
秃头请走开
目录
相关文章
泡芙-草莓
|
1月前
|
JavaScript 前端开发 开发者
混淆赋值运算符（=）和相等比较运算符（==, ===）（js的问题）
混淆赋值运算符（=）和相等比较运算符（==, ===）（js的问题）
泡芙-草莓
10 0
极客李华
|
4月前
|
JavaScript 前端开发 Java
JavaScript基础语法（运算符）
JavaScript基础语法（运算符）
极客李华
33 0
晓之以理的喵~~
|
5月前
|
JavaScript 前端开发 开发者
从0开始学习JavaScript--JavaScript 表达式与运算符
JavaScript中的表达式和运算符是构建逻辑、进行计算的基础。本文将深入研究JavaScript中各类表达式，包括算术表达式、关系表达式、逻辑表达式，以及运算符的使用方法，并通过丰富的示例代码来帮助读者更全面地了解和运用这些概念。
晓之以理的喵~~
28 0
桃李春风一杯酒
|
13天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门：变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识，包括变量（var、let、const）、数据类型（Number、String、Boolean、Undefined、Null及Object、Array）和运算符（算术、赋值、比较、逻辑）。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要，是进阶学习JavaScript的关键。
桃李春风一杯酒
17 0
风与烈酒
|
5天前
|
JavaScript 前端开发
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
风与烈酒
6 1
小华qvq
|
7天前
|
JavaScript
js的一些运算符规则
js的一些运算符规则
小华qvq
11 1
小华qvq
|
7天前
|
JavaScript
js的比较运算符
js的比较运算符
小华qvq
13 1
小华qvq
|
7天前
|
JavaScript 前端开发
js的运算符
js的运算符
小华qvq
13 2
桃李春风一杯酒
|
14天前
|
JavaScript 前端开发 数据安全/隐私保护
【专栏】JavaScript中的`==`和`===`运算符有重要区别，本文将从三个部分详细探讨
【4月更文挑战第29天】JavaScript中的`==`和`===`运算符有重要区别。`==`进行类型转换后比较，而`===`不转换类型，要求完全相等。在比较对象时，`==`只比较引用，`===`比较内容。推荐使用`===`以确保准确性，但在需要类型转换时可谨慎使用`==`。注意特殊值如`null`和`undefined`的比较。在数据验证、类型判断和条件判断等场景中，应根据需求选择合适的运算符。理解两者差异能提升代码质量和稳定性。
桃李春风一杯酒
23 1
wscwdie
|
17天前
|
JavaScript 前端开发 开发者
解密 JavaScript 中的三元运算符：简洁而强大的条件表达式
解密 JavaScript 中的三元运算符：简洁而强大的条件表达式
wscwdie
18 0

热门文章

最新文章

  • 1
    想做JavaScript开发者，但不知道如何成长，来看看这个吧
  • 2
    JavaScript中的Prototypes
  • 3
    js弹出层/框 收集
  • 4
    JavaScript理解(转载)
  • 5
    SharePoint 2013 使用JavaScript对象模型配置智能提示
  • 6
    【转】javascript弹出固定大小的窗口页面
  • 7
    那些相见恨晚的 JavaScript 技巧
  • 8
    javascript 中的innerHTML的用法
  • 9
    [Tips]:JavaScript命名空间
  • 10
    Ext JS 4的倒数：程序员预览 Countdown to Ext JS 4: Developer Preview
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    145
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    18
  • 3
    描述 JavaScript 中的垃圾回收机制。
    21
  • 4
    如何使用 JavaScript 操作 DOM？
    20
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    22
  • 6
    JavaScript 中的数组方法有哪些？
    11
  • 7
    JS设置日期为0时0分0秒
    36
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    27
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    22
  • 10
    深入理解JavaScript中的闭包与作用域链
    10

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Node.js 入门教程文档
  • Node.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 函数计算入门-HelloWorld应用开发
  • 搭建Node.js编程环境
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）