首页 > 分享 > 变量和运算符的自我修养

变量和运算符的自我修养

花匠小妙招
2024-12-16 01:41

学习前端页面中最重要的部分：页面分为三个部分：结构（HTML）、渲染（css）、行为（js），
其中行为（js）有独立的js语言组成。
Js语言是一种弱语言，必须在浏览器环境下才能运行。但是其中有这各种对象（万物皆对象）。
在开始学习时我们知道信息是需要有地方存放的，所以js语言也有对应存放信息的地方：变量和常量（常量为ES6版本更新）。有了这些地方就需要一些规定的好的命名方式来规范名字：由子母、数字、下划线 _ 、$ 符组成，同时不能由数字开头；再有就是不同的组成方式：
传统写法：var username=值；
Var username01=值；
小驼峰：var userName=值；
Var userName01=值
大驼峰：var UserName=值；
Var UserName01=值
下划线分割：var user_name=值
Varuser_name01=值

有了存放信息的变量名就需要规范信息的类型了
这时会发现数据类型有大的两种：基础数据类型和复杂数据类型
基础数据类型又分为：数值、字符、布尔、null、undefined
复杂数据类型分为：数组、对象、函数

数值类型（number）就是整数、小数等等，其中有个比较特别的NAN（都是大写的），这个NAN产生原因就是非数值型数据在强制类型转换的出现的结构，它的特点就是NAN不等于所有数据也包含它自己，但是它的数据类型属于数值，这个特点在日后有一定的应用范围。
字符型（string）就是有引号（“”、‘’）包裹的。
布尔类型（Boolen）就有两种true和false
Null类型就有一个null 表示空
Undefined类型就有一个undefined 表示未定义

复杂数据类型：
数组：由【】包裹整体，由逗号分隔元素的类型，每一个元素的数据类型不做规定可以是任意类型（这个就是出现了二维数组概念：数组的元素也是数组）。
对象：有 { } 包裹整体，由逗号分隔元素的样式类型，每个元素由变量和值组成，值得类型也是由任意类型构成。
函数：由function 命令定义，使用参数来执行复杂逻辑运算数据，同时他必须使用return来返回一个结果，这个结果类型不定。

创建数组的方式：
构造函数式：先定义数据长度再使用索引对应赋值、直接定义连续数据

Var arr=new Array（） Var arr1=new Array（4）//定义长度为4的数组 Var arr2=new Array（1,2,3,4）//定义一个由1,2，3,4组成的数组 123

字面式：直接创建空数组、直接定义连续数据

Var arr3=【】 Var arr4=【1,2,3,4,5】 12

数组拥有索引和长度两个属性。
长度：代表数组由多少个元素组成
索引：数组每一个元素都有的下标从0开始
最大值为长度 -1
最小值为0 如果数组长度小于0，就会报错

运算符
在程序中运算符的作用是非常强大的而且也是必须的。对运算符的合理使用可以使我们的程序变得更加灵动、精准。
Js中主要使用的的运算符如下：
类型运算符
赋值运算符 =
算术运算符 +、-、*、/、%（加、减、乘、除、求余）
比较（关系）运算符 > , < , >= , <= , == , === , != , !==
逻辑运算符 &&、||、!
三元（条件）运算符条件？表达式1：表达式2
自增自减运算符 num++ 、++num、num–、--num

赋值运算符
赋值运算符语法为: =，
执行的是赋值操作，一般情况下JS大妈的执行顺序都是从上往下、从左往右。但是如果语句中出现了赋值运算符那么该条语句就是赋值表达式，而赋值表达式的运行顺势从右往左执行的。

// 将数字10赋值给变量num var num = 10; // 将数字20赋值给变量num3 // 再将变量num3的值赋值给num2 // ... var num1 = num2 = num3 = 20; 123456'

算术运算符
算术运算符执行的就是普通的算术运算，这里我们需要注意的是单位吗使用算术运算符的是一定小心参数运算的项目是否都是number类型。
正常状态下的算术运算符：

var num1 = 10; var num2 = 5; var num3 = 3; num1+num2+num3; // 18 num1+num2-num3; // 12 num1+num2*num3; // 25 (num1+num2)*num3; // 45 (num1+num2)/num3; // 5 num1%num2; // 0 num1%num3; // 1 1234567891011'

以上代码都是一些常规的算术运算，但是如果参与运算的项目不仅仅都是number类型就会发生一些不可预知的后果：

10+'10';// '1010' 10+'hello';// '10hello' 10-'5';// 5 10- 'a' ;// NaN 10-undefined;// NaN 10* 'hello' ;// NaN 10/ 'hello' ;// NaN 1234567'

当我们在使用一些非常规的项目参与算术运算的时候JS是允许的，但是结果却是让我们摸不着头脑的，其中最不明白的就是：NaN。
NaN
含义：Not a Number
在JS语言中NaN表示的是数字的一种不正常状态，一般会在计算出错时出现。然而有意思的是NaN表示的虽然是非数字，但他的数据类型却是number类型。
特点：NaN与任何职都不相等，包括自身。
检测NaN
因为NaN这种情况非常特殊而且与自身都是不相等的，所有我们需要通过JS给我们提供的函数用于检测我们的算术运算结构是否正常。该函数为：isNaN（）。
如果该函数的返回值为true表示被检测的参数为NaN
如果该函数的返回值为false表示被检测的参数为正常的数字。

var arg1 = 10-'hello'; isNaN(arg1);// true var arg2 = 10-5; isNaN(arg2);// false 12345'

算术运算符简写
在日常使用过程中我们会遇到很多变量需要先执行一些计算操作在重新赋值给自身的情况。所有对于这种情况我们一般会使用简写方式类简化代码，以方便阅读和书写：
他们分别是：+=，-=，*=，/=，%=。

var num = 10; num = num+5; // 简写 num += 5; num = num-3; // 简写 num -= 3; num = num-3; // 简写 num -= 3; 1234567891011'

比较运算符
由比较运算符组成的表达式为：比较表达式。比较表达式返回的结果为Boolean，也就是说程序只要执行了比较操作得到结果只能是true/false。

10>5;// true 10<5;// false 10>=5// true 10>=10// true 10<=5// false 10<=10// true 10==10;// true 10=='10';// true 等值判断，只判断值，不判断数据类型 10==='10';// false 全等判断，值和数据类型都会判断 10!='10';// false 不等值判断 10!=='10';// true 不全等判断 1234567891011'

上面的代码关于等值判断和全等判断稍微有点迷惑人，他们之间的区别就在于对于数据类型的判断，而因为等值判断其实是不够严谨的，所以我们一般都会在程序中使用更加严谨的全等判断。其实在没有特殊环境或者需要的情况下我们都应该使用全等判断。
// == 和 === 的区别？
// == 只判断值，会发生自动类型转换
// === 值和数据类型都会判断，不会发生自动类型转换

逻辑运算符
逻辑运算符有三个：&&：与（并且）；||：或（或者）；！：非（取反）。逻辑运算符组成的表达式叫做逻辑表达式，和上面的比较表达式想同的是逻辑表达式的结果也是Boolean。

// 同时判断多个表达式，必须是所有的表达式结果都是true才会得到true 10>5 && 10<20;// true 10>5 && 10<5;// false // 同时判断多个表达式，必须是所有的表达式结果都是false才会得到false 10<5 && 10>20;// false 10>5 && 10<5;// true // 逻辑非表示对结果的否定 !(10>5);// false !(10<5);// true 1234567891011'

逻辑运算符优先级
这三个运算符在实际使用过程中有一定的执行优先级：！>&&>||。但是我们可以通过使用（）来改变。
逻辑中断（短路）
逻辑与和逻辑或在程序中有一个叫做逻辑中断的特点，我们可以利用这个特点写出灵活的程序代码。
||：如果第一个为真就返回第一个表达式，否则返回第二个表达式
&&：如果第一个为假就返回第一个表达式，否则返回第二个表达式

function fn(num){ // 利用逻辑中断设置变量的默认值 var n = 10||num; console.log(n); } fn(15);// 15 fn();// 10 1234567'

三元运算符
也叫条件/三目运算符，该运算符其实就是一个简写的选择结构。
语法如下：
判断条件？当条件为真返回：当条件为假返回
var flag = 10>5 ? ‘ok’:‘no’;
fl ag; // ko
三元运算符的结果是写在“：”两边的，我们需要注意的是：
三元的结果不能是一条语句，只能是一个基础值或一个表达式
实例：

自增自减运算符
程序在运行过程中我们需要执行一些记录次数的操作，这时候我们就可以使用自增/自减运算符。

var num = 10; num += 1; // 等价于 num++; num -= 1; // 等价于 num--; 12345678'

num++/++num的区别？
关于自增/自减运算符我们可以把他们放在变量的前开你或者后面，但是他们之间是有明显的区别的。

//num++：先执行，再计算 //++num：先计算，再执行 var num 10; console.log(num++);// 10 console.log(num++);// 11 console.log(num);// 12 console.log(++num);// 13 console.log(++num);// 14 12345678

运算符的优先级问题：
算术运算符>关系运算符>逻辑运算符>赋值运算符