JavaScript【一】JavaScript变量与数据类型

简介: JavaScript【一】JavaScript变量与数据类型

🌟前言

哈喽小伙伴们,本文将收录在JavaScript【前端童子功】这个专栏里;这个专栏里边会收录一些JavaScript的基础知识和项目实战;希望大家可以多多支持,你们的支持就是我创作的动力;让我们一起来看看吧🤘

🌟变量

🌟 变量是什么?

变量是储存数据的容器

🌟 变量提升

先访问后声明就叫做变量提升。

console.log(num);

var num=10

🌟 声明变量

  • var(ES5):声明变量
  • 在函数循环里,循环完成后会释放一个全局变量。
  • let(ES6):声明变量
  • 可以识别块级作用域
  • 不存在变量提升 ,造成暂时性死区 console.log(num); let num=10;
  • 不支持重复声明 let num=10; let num=20;
  • const(ES6):声明常量
  • 可以识别块级作用域
  • 不存在变量提升
  • 不支持重复声明
  • 声明的同时要赋值 const num=20

🌟 JavaScript有三种声明方式

关键词 描述 版本
var 声明一个变量,可赋一个初始化值。 ES5
let 声明一个块作用域的局部变量,可赋一个初始化值。 ES6
const 声明一个块作用域的只读的命名常量。 ES6
  1. 先声明,后赋值
var a;a=10;
  1. 声明的同时赋值
var a=10;
  1. 一次性先声明多个变量再赋值
var x,y,z;
x=10,y=20,z=30
  1. 一次性声明多个变量并且赋值
var x=10,y=20,z=30;

🌟 命名规范

  1. 区分大小写;
  2. 命名要有意义;
  3. 常见命名法:驼峰命名法;首字母大写法;
  4. 不能使用关键字和保留字命名;
  1. 数字,字母,_,$组成,不能以数字开头。

🌟 注意

  • 变量未声明,会报错;
  • 变量声明但未赋值,会有一个默认值:undehined
  • 变量值的更新:直接给变量赋一个新的值。
var a=10;
a=20;
分类 类型
初始类型 undefined undefined
null 表明 null 值的特殊关键字。 JavaScript 是大小写敏感的,因此 null 与 Null、NULL或其他变量完全不同。

string
双引号引起来的数据
number 包括整型和浮点型。科学计数法。支持二进制、八进制、十进制、十六进制。
boolean true/false
Symbol 表示独一个一无二的值。(ES6新增)
引用类型 Object 包含相关属性和方法的一个集合。包含Function、Array、Object

🌟 检测变量数据类型的关键字:typeof

类型 检测结果
undefined undefined,变量声明未赋值 undefined
null null object
string 单双引号引起来的内容 string
number 整数,浮点数,十进制,二进制,八进制,十六进制,科学计数法,最大值,最小值 number
boolean true,false boolean
Symbol 独一无二的值
Object 数组(object),函数(function),对象(object) object,function,object
NaN number+undefined number

🌟 运算符:

🌟 算术运算符:

+-*/%** 幂运算 四则运算

  • null转换为0;
  • true转换为1;
  • false转换为0;
  • undefined 与任何数做运算都是NaN。

+

  • 加法:两个操作符都是number型做加法运算。
  • 拼接:只要一个操作符是字符串就做拼接。

++ 自增

  • ++var : ++在前,要先算++,在做其他运算。

var++ : ++在后,要先算其他,在做++运算。

-- 自减

  • --var: --在前,要先算--,在做其他运算。
  • var-- : --在后,要先算其他,在做--运算。

🌟 减法(-)

  1. 数字和字符串相减 :
  • 字符串全部由数字组成,将字符串转化为数字,再相减
  • 字符串不能转化为数字,结束是 NaN
  • null转化为0 undefined转化为NaN true为1 false为0
  1. 字符串和字符串相减 : 和数字和字符串相减规则相同
'11a'-1    //NaN
'11'-1     //10

🌟 加减法做数字与字符串的转换

  • 数字转化为字符串: num + ""
  • 字符串转化为数字: num - 0

🌟 乘法运算

  1. 数字与字符串运算:
  • 将字符串尝试着转化为数字,进行运算
  • 字符串不能转化为数字,结果是 NaN
  1. null转化为0 true为1 false为0 空字符串转为0
  2. Undefined乘所有数据类型的都为NaN
  3. 字符串和字符串运算 : 和数字和字符串运算规则相同
true*null      //0
'11'*'11'    // 121
'1a'*22    //NaN

🌟 除法运算

  1. 字符串类型 数字类型与 null 相除 结果为 Infinity
  2. 字符串类型、数字类型 null与 Undefined 相除 结果为 NaN
  3. 字符串类型 数字类型 null与 字符串类型、数字类型 null相除进行相应转换做除法运算
  • 字符串不能转为数字则结果为NaN
  • 空字符串转为0
11/null              //Infinity
'11'/'11'            // 1
'11a'/'11'            // NaN

🌟 取余(%)

取余,即取余数,如 10 % 3 则指 10除以3的余数

用于取一段范围的值

一般不用于小数,因为结果不确定(不精确)。

  1. Undefined 与所有数据类型的 取余 都为NaN
  2. 其余数据类型先进行转换,能转为数字则进行取余运算,否则为NaN
''%1        // 0
11%0        // NaN
11%null     // NaN

判断数字num是否是偶数:

if(num%2==0){
 alert(num + "是偶数")
}

🌟 求幂运算

x**y 取x的y次方,同Math.pow(x, y)

3 ** 2  //9
效果同
Math.pow(3, 2) //9

🌟 关系(比较)运算符:

关系运算符的运算结果为boolean。(true/false)

  • == 数值相等
  • 0!=null(true)
  • 0!=undefined(true)
  • undefined==null(true)
  • NaN==NaN(false)
  • ===数值相等,数据类型相同
  • > < >= <=
  • 两个操作数都是number型,按照数据大小进行比较。
  • 一个是number型,另一个是字符串,会先将字符串转换为数字型,能转换成功按照数字大小比较,转换不成功,返回false。
  • 任何数与NaN比较,返回的都是false。


  • 两个操作数都是字符串,按位按照ASCII码表进行比较。

🌟 赋值运算符:

=;+=;-=;*=;/=;%=;**=

var a=23;a+=5;  //a=28
运算符 实例 等价于
= a=25 a=25
+= a+=25 a=a+25
-= a-=25 a=a-25
*= a*=25 a=a*25
/= a/=25 a=a/25
%= a%=25 a=a%25
**= a**=3 a=a^3

🌟 逻辑运算符:

在JavaScript逻辑运算中,0、“”、null、false、undefined、NaN都会判为false,其他都为true。

  1. 与:希望得到一个假值
&&
  • 只要有一个是假,结果就是假
  • &&左侧是真,结果取右侧; 左侧假,结果取左侧值
  • 两侧都为真时,返回右侧
  1. 或:希望得到一个真值
||
  • 只要有一个是真,结果就是真
  • ||左侧是真,结果取左侧; 左侧假,结果取右侧值
  • 两侧都为假时,返回右侧
!


  • 取反
  • 结果是boolean

总结: 与或运算,哪一侧能决定表达式真假性,则结果取哪一侧,结果不转换。

🌟 逻辑运算符的应用:短路原则


与或运算左侧结果已经确定整个表达式真假性,则右侧不再计算

  • &&与运算:左侧是假,右侧不进行计算
  • ||或运算:左侧是真,右侧不进行计算

🌟 一元运算符:

只能操作一个操作符的运算符叫做一元运算符。

  • typeof
  • new
  • delete
  • +-
  • instanceof

🌟 特殊运算符:

  • , :逗号 —— 分隔数据
var num1 = 1, num = 2, num3 = 3;
```
  • () :小括号运算符 —— 提升算术优先级
var i = 1 + 3 * 5;
console.log(i);   // 16
var l = (1 + 3) * 5;
console.log(l);   // 20
```

🌟 三元运算符:

基于某些条件对变量进行赋值的条件运算符。

var 变量=表达式?值1:值2
当表达式的结果为真时,将值1的值赋值给变量;当表达式的结果为假时,将值2赋值给变量.


🌟写在最后

更多JavaScript知识以及API请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

目录
相关文章
|
2月前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
137 59
|
2月前
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-变量的声明提前
关于JavaScript变量声明提前特性的基础知识介绍。
42 0
JavaScript基础知识-变量的声明提前
|
4天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
4天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
4天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
20天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
41 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
2月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
41 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
1月前
|
JavaScript 前端开发 开发者
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
20 1
|
16天前
|
JavaScript 前端开发
局部 JavaScript 变量
JavaScript 中,函数内部使用 `var` 声明的变量为局部变量,仅在函数内可见,函数执行完毕后被删除。全局变量则在函数外部声明,整个页面的脚本和函数均可访问,页面关闭后才被删除。未声明的变量赋值会自动成为 `window` 对象的属性,且在非严格模式下可被删除。