【前端从0开始】JavaSript——数据类型

news2024/10/7 18:24:50

数据类型

变量的声明和赋值

什么是变量?

  • 变量是用于存储信息的容器。
  • 变量是一段命名的存储空间。
  • 变量是在程序运行过程中值允许改变的量。
  • 变量是由变量名,变量值,和变量类型组成。

变量命名规则

  1. 第一个字符必须为字母,_或$,其后的字符还可以是数字。
  2. 严格区分大小写,要有一定的含义。
  3. 建议使用小驼峰规则来命名变量。如:redApple
  4. 不能使用关键词,保留字作为变量名。

变量的声明和赋值

javascript

var 变量名;
变量名 =;

var 变量名 =;

变量名 =;

var 变量1 =1, 变量2 =2, 变量3 =3;

注意:

  • 变量名是浏览器关闭后才释放的,在没关闭之前随时使用。
  • 重新声明的变量,不会丢失原始值,除非重新赋值。
  • 换行是语句的结束,最好结束时都加上“;”。

javascript

var n = 10;
if(n > 8) {
    alert('我是true');
} else {
    alert('我是false');
}

undefined

  1. 定义了一个变量但没有为该变量赋值,使用了一个并未赋值的变量。
  2. 使用了一个不存在的对象的属性时。

javascript

var n;
alert(n);

var people = new Object;
people.height = 162;
alert(people.height);
people.show = function() {
	alert(this.color);
	alert(this.height);
}
people.show();

null

  • null 表示一个空值。
  • null 不等于空字符串""、''或0。
  • nullundefined 的区别是,null 表示一个变量被赋予了一个空值,而 undefined 则表示该变量尚未被赋值。

javascript

console.log(null == null); // true

Array(数组)

创建数组

javascript

var 数组名 = new Array();
var cars = new Array("Audi", "BMW", "BYD");
var cars = ["Audi", "BMW", "BYD"];

获取数组中的值

javascript

var arr = ['少林寺', '龙门石窟', '二七塔', '华谊电影小镇'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);

循环遍历输出所有的数据

javascript

var cars = new Array("Audi", "BMW", "BYD");
for(i = 0; i < cars.length; i++) {
	document.write(cars[i] + "<br/>");
}

多维数组

javascript

var arr = [
  ['北京', '上海', '深圳'],
  ['合肥', '石家庄', '昆明'],
  ['', '', '']
];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);

Object 对象

对象是一种复杂的数据结构,它可以包含多个值。对象中的值可以是其他数据类型(包括字符串、数字、数组和其他对象)。

创建对象

javascript

var car = new Object();
car.color = 'red';
car.brand = 'BMW';
car.price = 28.5;
car.run = function() {
    console.log('我能跑');
};
car.stop = function() {
    console.log('我能停止');
};
car.setSpeed = function() {
    console.log('我能定速巡航');
};

console.log(car);
console.log(car['color']);
console.log(car['price']);
console.log(car.color);
console.log(car.price);
car.run();

使用第二种方式创建对象

javascript

var obj2 = {
    'name': 'jack',
    'sex': '男',
    'age': 18,
    'eat': function() {
        console.log('我能吃');
    },
    'sleep': function() {
        console.log('我能睡觉');
    }
};
console.log(obj2);
console.log(obj2.name);
obj2.eat();

JS的严格模式

使用 use strict 来定义严格模式,这个是ES5中新增加的。

javascript

"use strict";
x = 3.14;
console.log(x);

3.数据类型转换

转为字符串

自动转换

类型转换字符串型后的结果
numberNaN、0、或数值对应的字符串
null“null”
boolean“true”、“false”
undefined“undefined”
object若对象存在为其toString()方法的值,若对象不存在为"undefined"

强制转换

String();
object.toString();

转为数字类型

自动转换

类型转换为数字型后的结果
string若内容为数字则为相应数字,否则为NaN
null0
booleantrue转为1, false转为0
undefinedNaN
objectNaN

强制转换

Number();
parseInt();
parseFloat();
isNaN();

注意:parseInt 还可以接受第二个参数(2到36之间),表示被解析的值的进制,返回该值对应的10进制数。parseInt 的第二个参数为10,即默认是十进制转十进制。


parseInt('1000'); // 1000
// 等同于
parseInt('1000',10); // 1000
parseInt('1000'2); // 8
parseInt('1000'6); // 216
parseInt('1000'8); // 512

练习:

console.log(0x2f); 
console.log(061); 
console.log(Number(null)); 
console.log(Number(undefined)); 
console.log(Number('123.12')); 
console.log(true+123); 
console.log(Number('123abc')); 
console.log(parseInt('012.6a23b')); 
console.log(parseFloat('a12.6a23b'));
console.log(parseInt(true));

转为布尔类型【掌握】
自动转换

类型转换布尔型后的结果
“” 或 ‘’false
0 或 0.0false
NaNfalse
undefinedfalse
nullfalse
其它true
强制转换true
Boolean()true
!!true

练习:

if(0 || "" || '' || NaN || undefined || null){
	alert('true')
}else{
	alert('false')
}
!!123.11  // true
Boolean('abc') // true
console.log(Boolean([])); // true

特殊案例

console.log(Boolean([])); // true
console.log([] == false);	 // true; ==两边的数据类型不一致,需要转为数字进行比较;[]=>字符串''=>数字0
console.log(![] == false); // true	==的优先级比较低,肯定是先算左边 ![] 然后与后面进行比较,[]转为布尔值为true 取反 false false==false
console.log('0' == false); // true

在==比较的过程中,数据转换的规则
类型一样的几个特殊点:

{} == {} false,对象对比的是堆内存的地址
[] == [] false
NaN == NaN false

类型不一样的转换规则:

  1. null == undefined true,但是换成 === 结果是false(因为类型不一致),剩下null/undefined和其他任何数据类型值都不相等
  2. 字符串 == 对象,要把对象转为字符串
  3. 剩下如果 == 两边数据类型不一致,都是需要转换为数字再进行比较

4.运算符

表达式

常量 1.2   'str'  false
变量 x  y
复合 x+1

操作符:表达式 x+1中的x,1为操作符
运算符:表达式x+1的,+为运算符

算术运算符(+,-,*,/,%【重要】,++【重要】,–)

  1. “+”算数加和字符串想接
    i++ 先赋值,再加1;++i 先加1,再赋值
// 实现各行换色效果
for(var i=1;i<=10;i++){
	if(i%2==0){
		document.write("<font color='red'>"+i+"</font>");
	}else{
			document.write("<font color='green'>"+i+"</font>");
	}
}

注意:正号有隐式类型转换功能

alert(typeof(+'5'))  // number

思考题:

7%4=?
i=5
j=i++
j=?
k=++i
k=?
m=i--
m=?
n=--i
n=?

比较运算符(>,<,>=,<=,=,!=不等于,!==不全等于)【了解】
赋值运算符(=【掌握】,+=【掌握】,-=,*=,/=,%=)
= 赋值运算符

var a = 10;
var arr = ['张三','李四','王武','孙刘','马奇']

表示给num+1,再把相加之后的结果赋给num这个变量

var i=10;
i+=1 // i=i+1 效果一样  i++

使用场合:累加求和,字符串拼接

逻辑运算符(!,&&,||)【两边均为表达式】【重要】

逻辑运算符用于测定变量或值之间的逻辑
|| 存在断点问题,第一个式子成立,不在执行第二个式子;如果第一个式子不成立,执行第二个登式(真假为真,假假为假,真真为真)
&& 式子两边同时成立,执行的是if(true),只要有一个不成立。或两个都不成立执行false

||运算方法[真前假后]:

只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。

只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。

&&运算方法[假前真后]:

  只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;
  
  只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;

案例:

if(0 && 5){
  console.log('真');
}else{
  console.log('假');
}
console.log(10&&5);
console.log(0&&5);
var a=1;
console.log(a>5 && a++);
console.log(a<5 && a++);
console.log(a<5 && --a);

var a=10;
if(a<20||a++){
  console.log('真',a);
}else{
  console.log('假',a);
}

使用技巧:|| 或 运算符使用技巧

// 如果你必须给一个变量赋默认值,可以简单的这样写
var a;
console.log(a) // undefined

a = a||'default value';
console.log(a)  // default value

a = a||'new value';
console.log(a)  // new value

// 在函数中传參使用,如果传參就使用传递过来的参数,没有传參就使用默认值
function show(10){
  var shownum = num || 20;
  console.log(shownum);
}
show(10);

思考:

console.log( 0 || 1 ); // 1
console.log( 1 || 2 ); // 1
console.log( 0 && 1 ); // 0
console.log( 1 && 2 ); // 2

条件运算符【三元运算符/三目运算符】【重要】

条件表达式?结果1:结果2
如果条件表达式结果为true则返回结果1
如果条件表达式结果为false则返回结果2

var m=100>99?66:33
alert(m)

案例:判断某个年份是否为闰年

5.运算符的优先级

下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。
在这里插入图片描述
小括号>算术运算符>比较运算符>逻辑运算符>赋值运算符
思考

var a=5;b=3;
var c;
c=a+b>3 && a<a-b*2; 

//思考1
var i = 4=='4' ? 'A' : 'B';
alert(i);  

//思考2
var m = 3+4>7 || 4*0.25>0.09; 
alert(m);  

//思考3
var n = 1;
var s = 0;
if(p=--n||++s){
	n++;
	s++;
}
alert(n); 
alert(s)  

//思考4
var a=0;
var b=4;
if(c=a&&b<6){
	c=a+b;
}else{
	c=a-b;
}
alert(c);

6.JSON数据类型

JSON:JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
主要作用:
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
特性:
json的键不能重复,如果键是一个完整的单词,可以直接写,如果键里面包含了空格,要用引号引起来
格式:

{key: value, key: value}

数据为 键/值 对。
多个数据由逗号分隔
value可以为任意类型定义复杂的json格式

	var address = {
  "city":"成都",
  province:'四川',
  aaa:{
    name:'Test',
    value:{
      value:"123"
    }
  },
  bbb:[{
    name:"lisi"
  },{
    name:"zhangsan"
  },{
    name:"wangwu"
  }],
  say:function(){

  }
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/915977.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python Jail 沙盒逃逸 合集

原理 沙箱是一种安全机制&#xff0c;用于在受限制的环境中运行未信任的程序或代码。它的主要目的是防止这些程序或代码影响宿主系统或者访问非授权的数据。 在 Python 中&#xff0c;沙箱主要用于限制 Python 代码的能力&#xff0c;例如&#xff0c;阻止其访问文件系统、网…

微信怎么分享1个G以上的视频?跟我学视频压缩

微信是我们常用的一款社交软件&#xff0c;通过它给好友分享视频是再正常不过的事情了&#xff0c;但当视频体积过大时&#xff0c;就会受到传输的限制&#xff0c;我们都知道&#xff0c;微信发送给好友的视频大小不能超过25M&#xff0c;超过此大小时&#xff0c;我们可以通过…

选择靠谱商城系统的重要性

电子商务的蓬勃发展&#xff0c;越来越多的企业和商家开始进入电商领域&#xff0c;希望通过搭建自己的网上商城来实现业务增长和利润提升。然而&#xff0c;在选择合适的商城系统时&#xff0c;很多人往往会忽视靠谱性这一关键因素。下面就选择靠谱商城系统的重要性作一些简单…

react18+antd5.x(1):Notification组件的二次封装

antdesign已经给我们提供了很好的组件使用体验,但是我们还需要根据自己的项目业务进行更好的封装,减少我们的代码量,提升开发体验 效果展示 开起来和官网的使用没什么区别,但是我们在使用的时候,进行了二次封装,更利于我们进行开发 MyNotification.jsx,是我们的业务页面…

SpringBoot集成Mybatis-Plus 实现注册、登录和认证功能

一、前言 一个基于 Spring Boot 的包括登录、注册、用户认证完整的项目&#xff0c;我们可以学到以下内容&#xff1a; 实现基于 Spring Boot 的 Web 应用&#xff0c;包括定义接口、请求参数的处理、返回结果的封装等。实现基于 Mybatis-Plus 的数据库操作&#xff0c;包括定…

0基础学习VR全景平台篇 第89篇:智慧眼-安放热点

一、功能说明 安放热点&#xff0c;是智慧眼成员们正式进入城市化管理的第一步&#xff0c;即发现问题后以安放热点的形式进行标记&#xff0c;再由其他的角色成员对该热点内容作出如核实、处理、确认完结等操作&#xff08;具体流程根据项目实际情况而定&#xff09;。 二、…

cad怎样转换成jpg格式的图片?了解下这几种转换方法

JPG格式是一种图像格式&#xff0c;可以在各种设备和平台上轻松查看。这意味着可以将CAD文件转换为JPG格式&#xff0c;并在任何设备上查看它们&#xff0c;而无需安装额外的软件或插件。此外&#xff0c;JPG格式是一种常见的图像格式&#xff0c;可以更好地显示线条和轮廓。这…

基于串口透传模块,单片机无线串口空中下载测试

基于串口透传模块&#xff0c;单片机无线串口空中下载测试 ✨无线串口下载&#xff0c;其本质还是串口下载方式&#xff0c;只不过省去了单片机和ISP上位机工具之间的物理有线连接&#xff0c;中间的数据通过无线串口透传模块进行数据中转&#xff0c;传递到单片机串口上。串口…

ssm+Vue.js在线购物系统源码和论文

ssmVue.js在线购物系统源码和论文049 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势…

中小企业精细化仓库管理,WMS仓储管理系统必不可少

尽管传统中小企业的仓库管理并不需要建立大型全自动立体智能仓库&#xff0c;但为了确保企业运营的稳定性和后备支持&#xff0c;它们仍然需要在管理方面制定更多的标准和规范。而为了达到这些目标&#xff0c;WMS仓储管理系统解决方案是必不可少的。 中小企业WMS仓储管理系统…

VisualStudio调试时断点打不上

点击“文件”——高级保存选项&#xff08;如果没有这个选项需要手动去设置&#xff09;&#xff0c;正常编码格式是这样&#xff0c;如果不行&#xff0c;拷贝代码&#xff0c;把文件删除&#xff0c;重新建文件把代码拷进去。

Linux系统常用指令总结

目录 1.帮助指令 2.文件目录指令* 3.查找指令 4.时间日期指令 5.压缩和解压 1.帮助指令 ctrl c 取消命令&#xff0c;并且换行&#xff08;清空换行&#xff09;作用&#xff0c;单独清空为crtl u tab换行键 补全命令和文件名&#xff0c;快速按两下可以显示备选选项 …

【Spring面试题(35道)】

文章目录 Spring面试题(35道)基础1.Spring是什么&#xff1f;特性&#xff1f;有哪些模块&#xff1f;2.Spring 有哪些模块呢&#xff1f;3.Spring 有哪些常用注解呢&#xff1f;4.Spring 中应用了哪些设计模式呢&#xff1f; IOC5.说一说什么是IOC&#xff1f;什么是 DI&#…

时序预测 | Matlab实现SO-CNN-GRU蛇群算法优化卷积门控循环单元时间序列预测

时序预测 | Matlab实现SO-CNN-GRU蛇群算法优化卷积门控循环单元时间序列预测 目录 时序预测 | Matlab实现SO-CNN-GRU蛇群算法优化卷积门控循环单元时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 时序预测 | Matlab实现SO-CNN-GRU蛇群算法优化卷积门控循环单…

相机成像之3A算法的综述

3A算法是摄像机成像控制技术中的三大自动控制算法。随着计算机视觉的迅速发展,该算法在摄像器材领域具有广泛的应用和前景。 那么3A控制算法又是指什么呢? (1)AE (Auto Exposure)自动曝光控制 (2)AF (Auto Focus)自动聚焦控制 (3)AWB (Auto White Balance)自动白平衡控…

【数据库】连接查询

1 内连接查询 select 学员信息表.* 学员成绩表.* from 学员信息表 inner join 学员成绩表 on 学员信息表,学号 学员成绩表.学号; 2 左连接查询 select 学员信息表.*,学员成绩表.* from 学员信息表 left join 学员成绩表 on 学员信息表,学号 学员成绩表,学号&#xff1b; 3 右…

C++ LibCurl 库的使用方法

LibCurl是一个开源的免费的多协议数据传输开源库&#xff0c;该框架具备跨平台性&#xff0c;开源免费&#xff0c;并提供了包括HTTP、FTP、SMTP、POP3等协议的功能&#xff0c;使用libcurl可以方便地进行网络数据传输操作&#xff0c;如发送HTTP请求、下载文件、发送电子邮件等…

mysql mariadb 创建mysql mariadb用户,登录报错

mysql mariadb 创建energy普通用户&#xff0c;登录mysql报错 &#xff1a;access denied GRANT REPLICATION CLIENT,PROCESS,SELECT ON *.* TO mysqld_exporter% identified by 123;解决办法&#xff1a; 登录mysql 查看用户表 mysql -uroot -pPote123 select user,host,pa…

线程面试题-2

1、一般用什么作为HashMap的key? 一般用Integer、String 这种不可变类当 HashMap 当 key&#xff0c;而且 String 最为常用。 因为字符串是不可变的&#xff0c;所以在它创建的时候 hashcode 就被缓存了&#xff0c;不需要重新计算。这就是HashMap 中的键往往都使用字符串的原…

【vue3】vite工具创建vue3项目,遇到的坑及解决办法

1、在对应文件夹下执行npm create vite 报错如下&#xff1a; 解决步骤可看这篇文章&#xff1a;npm install报错 -&#xff1e; npm ERR! Unexpected token ‘.‘ 报错解决办法 主要是因为我的nvm版本是1.1.7&#xff0c;版本太低&#xff0c;里面没有集成高版本node导致的 将…