JavaScript变量、数据类型、运算符及类型转换

简介: JavaScript变量、数据类型、运算符及类型转换

一、变量

JavaScript中var关键字(varlable的缩写)来声明变量

var test = 20;
test = "张三";

JavaScript是一门弱类型的语言,变量可以存放不同类型的值


变量名需要循序如下规则:

组成字符可以是任何字母、数字、下划线(_)或美元符号($)

数字不能开头

建议使用驼峰命名


ECMAScript 6 新增 let 关键字来定义变量,它的用法类似于var,但所声明的变量,只在let关键字所在的代码块内有效,且不允许重复声明


ECMAScript 6 新增了count关键字,用来声明一个只读的常量,一旦声明,常量的值就不能改变。


var的特点:1、作用域:全局变量 2、变量名可以重复定义

二、数据类型

JavaScript中分为:原始类型和引用类型


5种原始类型:

number:数字(整数,小数,NaN(Not a Number))

string:字符、字符串,单双引号即可

boolean:布尔。true,false

undefined:当声明的变量未初始化时,该变量的默认值是undefined


使用typeof运算符可以获取数据类型

alert(typeod age);

number:数字(整数,小数,NaN(Not a Number)):

<script>
  //number
  var age = 20;
  var price = 99.8;
  alert(typeof age);
  alert(typeof price);
</script>

运行结果两次重复弹出(number):

31dc649a495847088990760370bb9b33.png

string:字符、字符串,单双引号即可:

<script>
  //String
  var ch = 'a';
  var name = '张三';
  var addr = "北京";
</script>

运行结果三次重复弹出(string):

a1ab552027c5454fa06d87f68f4df9dc.png

boolean:布尔。true,false:

<script>
  //boolean
  var flag = true;
  var flag2 = false;
  alert(typeof flag);
  alert(typeof flag2);
</script>

运行结果两次重复弹出(boolean):

0e90370d69ed4a42aed3db8dbd091018.png

undefined:当声明的变量未初始化时,该变量的默认值是undefined:

<script>
  //undefined
  var a;
  alert(typeof a);
</script>

运行结果为(undefined):

ad81643126ea47e4bda38397ec44af6c.png

Object:


注释:您也许会问,为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值

<script>
  // null
  var obj = null;
  alert(typeof obj);
</script>

运行结果为(object):

2c29f966b2ef4d4bad60cfc4eb85c47c.png

三、运算符

一元运算符:++,--

算术运算符:+,-,*,/,%

赋值运算符:=,+=,-=...

关系运算符:>,<,>=,<=,!=,==,===...

逻辑运算符:&&,||,!

三元运算符:条件表达式?true_value:false_value


==:判断类型是否一样,如果不一样,则进行类型转换 ,再去比较其值


===:判断类型是否一样,如果不一样,连接返回false,再去比较其值

<script>
    var age1 = 20;
    var age2 = "20";
    alert(age1 == age2);//true
    alert(age1 === age2);//false
</script>

运行结果:==为true,===为false

四、类型转换

类型转换:

   其他类型转为number:

       1、string:按照字符串的字面值,转为数字,如果字面值不是数字,则转为NaN

          一般使用parseInt

       2、boolean:true转为1,false转为0


   其他类型转为boolean

       1、number:0和NaN会转为false,其他的数字转为true

       2、string:空字符串转为false,其他的字符串转为true

       3、null:false

       4、undefined:false


健壮性判断:

<script>    
var flag = undefined;
    //
    //健壮性判断
    //if(str != null && str.length > 0)等价与下面
    if(flag){
        alert("转为true");
    }else{
        alert("转为false");
    }
</script>

运行结果:

4f08ea94cf3f431fb418c32ed10f924e.png

目录
相关文章
|
10天前
|
存储 JavaScript 前端开发
JavaScript中的数据类型以及存储上的差别
通过本文的介绍,希望您能够深入理解JavaScript中的数据类型及其存储差别,并在实际编程中灵活运用这些知识,以提高代码的性能和稳定性。
37 3
|
1月前
|
存储 JavaScript 前端开发
js中的数据类型
JavaScript 中的数据类型包括五种基本类型(String、Number、Undefined、Boolean、Null)和三种引用类型(Object、Array、Function,以及ES6新增的Symbol)。基本类型直接存储值,引用类型存储的是指向实际数据的内存地址。了解它们的区别对于掌握 JavaScript 的变量赋值和函数传参至关重要。
24 1
|
1月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
1月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
1月前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
115 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
2月前
|
JavaScript 前端开发
局部 JavaScript 变量
JavaScript 中,函数内部使用 `var` 声明的变量为局部变量,仅在函数内可见,函数执行完毕后被删除。全局变量则在函数外部声明,整个页面的脚本和函数均可访问,页面关闭后才被删除。未声明的变量赋值会自动成为 `window` 对象的属性,且在非严格模式下可被删除。
|
2月前
|
JavaScript 前端开发 安全
如何处理 JavaScript 中的类型转换错误?
【10月更文挑战第9天】处理类型转换错误需要综合运用多种方法和策略,同时要保持对潜在问题的警惕性。通过合理的错误处理,可以提高程序的健壮性,减少因类型转换错误带来的负面影响。
37 0
|
2月前
|
JavaScript 前端开发
JS隐式类型转换规则
【10月更文挑战第9天】 不同的 JavaScript 引擎可能在隐式类型转换的具体实现上存在一些细微差别。理解这些隐式类型转换规则对于正确处理数据和避免错误非常重要。
21 0
|
2月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
52 0