JS的数据类型和访问/流程控制/JSON格式字符串和js对象相互转换
1. JS的数据类型和访问
1.1. 原始类型JS中的原始数据类型有: number , string , boolean ;
声明变量使用 var 关键字.
/* 数字类型 */
varyear=2020;
/* 字符串类型 */
varname='zhangsan';
/* 布尔类型 */
varisUpdate=false;
获取变量的数据类型使用 typeof . 使用方式: typeof 变量名 .
varsite='php.cn';
// 使用typeof来获取变量的数据类型
vardataType=typeofsite;
document.write(dataType);
/* result: string */
1.2 特殊类型JS中两个特殊的值类型: null , undefined .
当只声明变量, 没有初始化变量值时, 此时变量的值是 undefined . 即, var param; 等效于 var param = undefined; .
varparam;
document.write(param);
/* result: undefined */
varparam1=null;
document.write(param1);
/* result: null */
特别的: null == undefined 返回的是 true ; 而 null === undefined 则返回 false
document.write(null==undefined);
/* result: true */
document.write(null===undefined);
/* result: false */
null 和 undefined 的区别: null 表示空对象; undefined 表示非对象类型的变量值为空/无.
// 获取null的数据类型
vardataType=typeofnull;
document.write(dataType);
/* result: object */
null / undefined 转换为原始类型数据的值
null / undefined 转换为布尔值, 值转为为 false ;
if(!null)document.write('我被输出了
');
if(!undefined)document.write('我被打印了');
/* result:
我被输出了
我被打印了 */
null / undefined 转换为字符串时, 值转为: "null" / "undefined" .
document.write(null+'
');
document.write(undefined+'
');
/* result:
null
undefined */
null 转为数值时, 值为: 0 ; undefined 则不能转为数字(输出: NaN).
document.write(null+100);
document.write(undefined+100);
/* result:
100
NaN
*/
1.3 对象类型: array , object , function在js中, 除开 null 和 undefined , 所有数据类型都是对象, 包括原始类型.
// 证明原始类型数据也是对象: 都能通过他们调用内置方法
varnum=3.1415926;
varname='zhangsan';
// 把num的值四舍五入, 保留3位小数
console.log(num.toFixed(3));
console.log(name.toUpperCase());
/* result:
3.142
ZHANGSAN
*/
1.3.1 数组类型JS中的数组跟PHP中的索引数组类似
// 定义数组
varplayer=['James','Davis','Green','Rondo','Kuzma'];
document.writeln(player);
/* result: James,Davis,Green,Rondo,Kuzma James */
// 获取数组的中的元素
document.writeln(player[0]);
/* result: James */
判断变量是否为数组类型, 用 Array.isArray(变量名) , 因为 typeof 变量名 的返回值是 object , 不够具体.
// 定义数组
varplayer=['James','Davis','Green','Rondo','Kuzma'];
document.writeln('"typeof player" 的值是:'+(typeofplayer));
document.writeln('变量"player"的值'+(Array.isArray(player)?'是':'不是')+'数组');
/* result:
"typeof player" 的值是:object
变量"player"的值是数组
*/
数组循环
for 循环
varplayer=['James','Davis','Green','Rondo','Kuzma'];
for(varindex=0;index
document.write(player[index]+", ");
}
/* result: James, Davis, Green, Rondo, Kuzma, */
forEach 循环
使用格式: array.forEach(function(当前遍历到的元素, 当前遍历到的元素在数组中的索引[可选], 受遍历的数组[可选]) {...})
varplayer=['James','Davis','Green','Rondo','Kuzma'];
player.forEach(function(p,index){
document.write("第"+(index+1)+"位出场的是"+p+'
');
});
/*
第1位出场的是James
第2位出场的是Davis
第3位出场的是Green
第4位出场的是Rondo
第5位出场的是Kuzma
*/
数组函数
array.slice 函数
用法: targetArr.slice(起始位置, 结束位置 + 1) : 获取JS数组中的”起始位置”到”结束为止”之间的元素
varplayer=['James','Davis','Green','Rondo','Kuzma'];
// 返回前3个球员
document.write(player.slice(0,3));
/* result : James,Davis,Green */
array.splice 函数
类似PHP中的数组函数 splice , 可以用它实现对数组元素的增删改.
使用语法: array.splice(起始位置, 元素个数[可选], 替换元素1[可选], 替换元素2[可选]...) ; 其中 替换元素1, 替换元素2... 可以以数组的形式传入: [替换元素1, 替换元素2...]
实现向当前数组中插入元素: targetArr.splice(起始位置, 0, 插入元素1, 插入元素2...)
varplayer=['James','Davis','Green','Rondo','Kuzma'];
// 在Davis后面插入Bradley, McGee
player.splice(2,0,['Bradley','McGee']);
document.write(player);
/* result: James,Davis,Bradley,McGee,Green,Rondo,Kuzma */
-2.实现删除当前数组中的元素:`targetArr.splice(起始位置, 元素个数)`
varplayer=['James','Davis','Green','Rondo','Kuzma'];
// 删除Green, Rondo
player.splice(2,2);
document.write(player);
/* result: James,Davis,Kuzma */
-3.实现更新当前数组中元素的值:`targetArr.splice(起始位置, 元素个数, 替换后的值1, 替换后的值2[可选]...)`
varplayer=['James','Davis','Green','Rondo','Kuzma'];
// 把Davis, Green, Rondo更新为中文名
player.splice(1,3,['戴维斯','格林','隆多']);
document.write(player);
/* result: James,戴维斯,格林,隆多,Kuzma */
1.3.2 对象JS中的对象跟PHP中的关联数组相似.
定义对象
// 创建对象-1
varplayer1={
name:'James',
team:'湖人',
age:35,
// JS中, 如果属性名含有非法字符, 则用双引号 `"` 将其括起来
"player info":{
height:'203',
weight:'113',
position:'F-G'
}
};
// 以表格的形式打印对象
console.table(player1);
// 另一种定义对象属性的方式见下面的例子
执行结果：
访问对象属性, 有两种方式一种是: 对象名.属性名 ; 另一种是类似PHP中的关联数组: 对象名[属性名] . 还有非法字符的属性名, 只能用第二种方式访问.
// 创建对象-2
varplayer2={};
player2.name="James";
player2.team='湖人';
player2.age=35;
player2["player info"]={
height:'203',
weight:'113',
position:'F-G'
};
// 访问对象属性
document.write('姓名:'+player2.name+'
');
document.write('球队:'+player2.team+'
');
document.write('年龄:'+player2['age']+'
');
document.write('身高:'+player2['player info'].height+'
');
document.write('体重:'+player2['player info']['weight']+'
');
document.write('司职:'+player2['player info']['position']+'
');
/*
姓名:James
球队:湖人
年龄:35
身高:203
体重:113
司职:F-G
*/
遍历对象属性
遍历对象方法1: 使用 for 属性名 in 对象 . 语法: for(对象键名 in 对象), 在遍历中, 用 对象名["属性名"] 的方式获取元素值更稳一些, 避免出现非法字符遍历报错.
varplayer1={
name:'James',
team:'湖人',
age:35,
// JS中, 如果属性名含有非法字符, 则用双引号 `"` 将其括起来
"player info":{
height:'203',
weight:'113',
position:'F-G'
}
};
// for...in...遍历对象属性.
for(prop in player1){
varvalue=player1[prop];
if(typeofvalue!='object')
document.write(prop+': '+value+'
');
else// 如果属性值是对象, 继续遍历
for(prop1 in value){
varvalue1=value[prop1];
document.write(prop1+': '+value1+'
');
}
}
/* result
name: James
team: 湖人
age: 35
height: 203
weight: 113
position: F-G
*/
遍历对象方法2: 使用 Object.keys(对象) 获取对象的属性名组成的数组, 再借助数组的 forEach 进行遍历.
varplayer1={
name:'James',
team:'湖人',
age:35,
// JS中, 如果属性名含有非法字符, 则用双引号 `"` 将其括起来
"player info":{
height:'203',
weight:'113',
position:'F-G'
}
};
// 获取属性名数组
varprops=Object.keys(player1);
props.forEach(function(prop){
varvalue=player1[prop];
if(typeofvalue!='object')
document.write(prop+': '+value+'
');
else{
// 如果属性值是对象, 继续遍历
varprops1=Object.keys(value);
props1.forEach(function(prop1){
varvalue1=value[prop1];
document.write(prop1+': '+value1+'
');
});
}
});
/* result:
name: James
team: 湖人
age: 35
height: 203
weight: 113
position: F-G
*/
