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

最新推荐文章于 2024-06-02 21:27:33 发布

程皮

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量90

点赞数

分类专栏：前端从0开始文章标签：前端 javascript

本文链接：https://blog.csdn.net/a1137588003/article/details/132389485

版权

前端从0开始专栏收录该内容

30 篇文章 1 订阅

订阅专栏

数据类型

变量的声明和赋值

什么是变量？

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

变量命名规则

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

变量的声明和赋值

javascript

var 变量名;
变量名 = 值;

var 变量名 = 值;

变量名 = 值;

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

注意：

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

javascript

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

undefined

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

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。
null 和 undefined 的区别是，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.数据类型转换

转为字符串

自动转换

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

强制转换

String();
object.toString();

转为数字类型

自动转换

类型	转换为数字型后的结果
string	若内容为数字则为相应数字，否则为NaN
null	0
boolean	true转为1, false转为0
undefined	NaN
object	NaN

强制转换

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.0	false
NaN	false
undefined	false
null	false
其它	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

类型不一样的转换规则：

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

4.运算符

表达式

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

操作符：表达式 x+1中的x，1为操作符
运算符：表达式x+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(){

  }
};

程皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端从0开始】JavaSript——数据类型

如果第一个式子不成立，执行第二个登式(真假为真，假假为假，真真为真)&& 式子两边同时成立，执行的是if（true），只要有一个不成立。json的键不能重复，如果键是一个完整的单词，可以直接写，如果键里面包含了空格，要用引号引起来。还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的10进制数。比较运算符（>,<,>=,<=,=,!==不全等于）【了解】赋值运算符（=【掌握】，+=【掌握】，-=，*=，/=，%=）{} == {} false,对象对比的是堆内存的地址。
复制链接

扫一扫