[Web 前端] 022 js 的基本数据类型及使用

1. Javascript 基本数据类型

1.1 分类

类型 释义
boolean 布尔类型,分 true 与 false
number 整型,浮点型
string 字符类型
object 对象类型
function 函数类型
undefined “未定义”类型

1.2 举例

  • 补充:typeof() —— 可以获取变量类型的函数
/* 1. boolean
    Python: True, False
    JS:     true, false
*/
var B = true;
// alert(B);         // true
// alert(typeof(B)); // boolean

// 2. number
// 2.1 数字
var num_01 = 12;
var num_02 = 12.1;

/* 将结果打印到控制台
    一般不用 alert()
    而用 console.log()

    此外,document.write("Hello"); 可以将结果打印到 body 体
*/
console.log("num_01 =", num_01, "typeof(num_01) =", typeof(num_01));
console.log("num_02 =", num_02, "typeof(num_02) =", typeof(num_02));

/* 2.2 binary 二进制
    以 0b 开头
*/
var num_2 = 0b1011;
console.log("num_2 =", num_2, "typeof(num_2) =", typeof(num_2));

/* 2.3 Octal 八进制
    两种方式
        以 0 开头
        以 0o 开头
*/
var num_8_1 = 076;
var num_8_2 = 0o76;
console.log("num_8_1 =", num_8_1);
console.log("num_8_2 =", num_8_2);

/* 2.4 Hexadecimal 十六进制
    以 0x 开头
*/
var num_16 = 0xfe;
console.log("num_16 =", num_16);

// 2.5 NaN: not a number
var num_nan = NaN;
console.log("num_nan =", num_nan, "typeof(num_nan) =", typeof(num_nan));

// 3. string
// 3.1 单引号
var str1 = '123';
// 3.2 双引号
var str2 = "123";
// 3.3 将关键字放入引号内部
var str3 = "true";
// 3.4 单双引号可以相互嵌套,但三引号在 Js 中不好使
var str4 = "I am learning 'Python'!"
var str5 = 'I am learning "Python"!'
console.log("str1 =", str1, "typeof(str1) =", typeof(str1));
console.log("str2 =", str2, "typeof(str2) =", typeof(str2));
console.log("str3 =", str3, "typeof(str3) =", typeof(str3));
console.log("str4 =", str4, "typeof(str4) =", typeof(str4));
console.log("str5 =", str5, "typeof(str5) =", typeof(str5));

// 4, 5, 6
// 4. 对象
var obj = {name:'lisi', age:18}; // 像 Python 中的字典
console.log("obj =", obj, "typeof(obj) =", typeof(obj));

// 5. 数组
var list = [1, 2, 3, 4, 5];
console.log("list =", list, "typeof(list) =", typeof(list));

// 6. null
var obj = null;
console.log("obj =", obj, "typeof(obj)", typeof(obj));

// 7. 函数数据类型
var Func = function(){
    console.log("This is a function.");
}
console.log("Func =", Func, "typeof(Func) =", typeof(Func));

/* 8. undefined
    释义:未定义
    定义一个变量,若不赋值,则默认为 undefined
*/
var un1 = undefined;
var un2;
console.log("un1 =", un1, "typeof(un1) =", typeof(un1));
console.log("un2 =", un2, "typeof(un2) =", typeof(un2));
  • 运行结果
num_01 = 12 typeof(num_01) = number
num_02 = 12.1 typeof(num_02) = number
num_2 = 11 typeof(num_2) = number
num_8_1 = 62
num_8_2 = 62
num_16 = 254
num_nan = NaN typeof(num_nan) = number
str1 = 123 typeof(str1) = string
str2 = 123 typeof(str2) = string
str3 = true typeof(str3) = string
str4 = I am learning 'Python'! typeof(str4) = string
str5 = I am learning "Python"! typeof(str5) = string
obj = {name: "lisi", age: 18}age: 18name: "lisi"__proto__: Object typeof(obj) = object
list = (5)?[1, 2, 3, 4, 5]0: 11: 22: 33: 44: 5length: 5__proto__: Array(0) typeof(list) = object
obj = null typeof(obj) object
Func = ? (){
            console.log("This is a function.");
        } typeof(Func) = function
un1 = undefined typeof(un1) = undefined
un2 = undefined typeof(un2) = undefined

2. Javascript 数据类型转换

2.1 可供使用的函数

函数 释义
Number(value) 强转一个数值,包含整数和浮点数
parseInt(value) 强转整型
parseFloat(value) 强转浮点型
String(value) 强转换字符串类型
Boolean(value) 强转换 Boolean 类型

2.2 举例 1

/* 1. 数值类型转换
    Number()
    parseInt()
    parseFloat()
*/
var str1 = '123';
console.log("str1 =", str1, "typeof(str1) =", typeof(str1));

var str2 = Number(str1);
console.log("str2 =", str2, "typeof(str2) =", typeof(str2));

var str3 = parseInt(str1);
console.log("str3 =", str3, "typeof(str3) =", typeof(str3));

var str4 = parseFloat(str1);
console.log("str4 =", str4, "typeof(str4) =", typeof(str4));

console.log("--------------------");
// var str5 = '123abc';
// var str5 = 'abc123';
// var str5 = 'abc123def';
// var str5 = '123abc456';
var str5 = '1.23abc';
console.log("str5 =", str5, "typeof(str5) =", typeof(str5));

var str6 = Number(str5); // 可以更换 str5 查看区别
console.log("str6 =", str6, "typeof(str6) =", typeof(str6));

var str7 = parseInt(str5); // 可以更换 str5 查看区别
console.log("str7 =", str7, "typeof(str7) =", typeof(str7));

var str8 = parseFloat(str5); // 可以更换 str5 查看区别
console.log("str8 =", str8, "typeof(str8) =", typeof(str8));

// 2. isNaN() 检测一个变量是否是 NaN
// var num = '1'; // 是 NaN
// var num = 'a'; // 不是 NaN
var num = '1a'; // 可以更换 num 查看区别
console.log("num =", num, "isNaN(num) =", isNaN(num));
  • 运行结果
str1 = 123 typeof(str1) = string
str2 = 123 typeof(str2) = number
str3 = 123 typeof(str3) = number
str4 = 123 typeof(str4) = number
--------------------
str5 = 1.23abc typeof(str5) = string
str6 = NaN typeof(str6) = number
str7 = 1 typeof(str7) = number
str8 = 1.23 typeof(str8) = number
num = 1a isNaN(num) = true

2.3 举例 2

/* 1. 字符串转布尔值
    '1' -> true
    '0' -> true
    ''  -> false
*/
var str1 = '1';
console.log("str1 =", str1, "\tBoolean(str1) =", Boolean(str1));

var str2 = '0';
console.log("str2 =", str2, "\tBoolean(str2) =", Boolean(str2));

var str3 = '';
console.log("str3 =", str3, "\tBoolean(str3) =", Boolean(str3));

/* 2. 数值类型转布尔值
    1   -> true
    0   -> false
    NaN -> false
*/
var num1 = 1;
console.log("num1 =", num1, "\tBoolean(num1) =", Boolean(num1));

var num2 = 0;
console.log("num2 =", num2, "\tBoolean(num2) =", Boolean(num2));

var num3 = 0.0;
console.log("num3 =", num3, "\tBoolean(num3) =", Boolean(num3));

var num4 = NaN;
console.log("num4 =", num4, "\tBoolean(num4) =", Boolean(num4));

/* 3. 对象转布尔值
    obj  -> true
    null -> false
*/
var obj1 = {name:"Tom", age:18};
console.log("obj1 =", obj1, "Boolean(obj1) =", Boolean(obj1));

var obj2 = {};
console.log("obj2 =", obj2, "Boolean(obj2) =", Boolean(obj2));

var obj3 = null;
console.log("obj3 =", obj3, "Boolean(obj3) =", Boolean(obj3));
  • 运行结果
str1 = 1    Boolean(str1) = true
str2 = 0    Boolean(str2) = true
str3 =      Boolean(str3) = false
num1 = 1    Boolean(num1) = true
num2 = 0    Boolean(num2) = false
num3 = 0    Boolean(num3) = false
num4 = NaN  Boolean(num4) = false
obj1 = {name: "Tom", age: 18} Boolean(obj1) = true
obj2 = {} Boolean(obj2) = true
obj3 = null Boolean(obj3) = false

3. Javascript 运算符

3.1 JS 运算符简介

运算符 举例
算术运算符 +, -, *, /, ++, --
字符串连接 +
赋值运算 =, +=, -=, %=
比较运算符 <, >, >=, <=, ==, ===, !=, !==
逻辑运算符 &&
位运算 ^, &
三元运算符 ? :

3.2 举例

// 1.1 自增 i++
var num1 = 1;
console.log("num1 =", num1);

num1++;
console.log("num1' =", num1);

// 1.2 自减 i--
var num2 = 1;
console.log("num2 =", num2);

num2--;
console.log("num2' =", num2);
console.log('\n');        

/* 2. 字符串连接
    1 + 2
    '1' + '2'

    '1' + 2
    '1' + 2 + 3

    1 + '2'
    1 + 2 + '3'

    字符串及其之后的运算用"拼接"
*/
console.log("1 + 2 ->\t\t", 1+2);
console.log("'1' + '2' ->\t", '1'+'2');
console.log('\n');

console.log("'1' + 2 ->\t\t", '1'+2);
console.log("'1' + 2 + 3 ->\t", '1'+2+3);
console.log('\n');

console.log("1 + '2' ->\t\t", 1+'2');
console.log("1 + 2 + '3' ->\t", 1+2+'3');
console.log('\n');

/* 3. === 全等
    !=  不等于
    !== 不全等
*/
var num3 = 1 == 1;
console.log("(num3 = 1) == 1?", num3);

var num4 = 1 === 1;
console.log("(num4 = 1) === 1?", num4);

console.log("1 === 1?\t", 1===1);
console.log("'1' == 1?\t", '1'==1);
console.log("'1' === 1?\t", '1'===1);
  • 运行结果
num1 = 1
num1' = 2
num2 = 1
num2' = 0

1 + 2 ->         3
'1' + '2' ->     12

'1' + 2 ->       12
'1' + 2 + 3 ->   123

1 + '2' ->       12
1 + 2 + '3' ->   33

(num3 = 1) == 1?    true
(num4 = 1) === 1?   true
1 === 1?     true
'1' == 1?    true
'1' === 1?   false

原文地址:https://www.cnblogs.com/yorkyu/p/11291344.html

时间: 2024-10-13 01:32:28

[Web 前端] 022 js 的基本数据类型及使用的相关文章

Web前端开发——JS技术大梳理

什么是JS JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称 为javascript引擎,为浏览器的一部分,广泛用于客户端的脚本语言.JavaScript 是一种具有面向对象能力的.解 释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 因为他不需要 在一个语言环境下运行,而只需要支持它的浏览器即可.它的主要目的是,验证发往服务器端的数据.增加 Web互 动.加强用户体验度等. 下面对js从整体的角

Web前端-Vue.js必备框架(一)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue js</title> </head> <body> <div id="app"> <h1>{{ message }}</h1> <input type="

【全站工程师练习笔记】Web前端 自定义JS对象 object_list

function object_list(){ return new object_list.fn.init(arguments); } object_list.fn = object_list.prototype = { constructor:object_list, init:function(args){ this.useDefaultList = true; this.object = {}; return this; } }; object_list.fn.init.prototyp

[Web 前端] React Js img 图片显示默认 占位符

cp from : https://blog.csdn.net/wyk304443164/article/details/77093339 没有考虑到兼容性,因为我们暂时只适配了webkit. 也没有考虑到懒加载,因为项目比较紧有需要加的朋友看react-lazyload,也比较简单,现成的轮子 /** * Created by wuyakun on 2017/8/11. * 会显示默认图片的image */ import React from 'react'; class DefaultIma

[Web 前端] 023 js 的流程控制、循环和元素的获取、操作

1. Javascript 流程控制 用于"基于不同条件执行不同的动作"的场合 1.1 if 语句 三种形式 // 第一种 if... // 第二种 if... else ... // 第三种 if... else if... else... 支持 单分支 双分支 多分支 注意 else if 中间必须要有空格 对第二种形式举例 if(1+1=2){ console.log("true"); } else{ console.log("false"

web前端node.js常用命令

1.npm install moduleNames:安装Node模块安装完毕后会产生一个node_modules目录,其目录下就是安装的各个node模块. node的安装分为全局模式和本地模式.一般情况下会以本地模式运行,包会被安装到和你的应用程序代码的本地node_modules目录下.在全局模式下,Node包会被安装到Node的安装目录下的node_modules下. 全局安装命令为$npm install -g moduleName.获知使用$npm set global=true来设定安

web前端知识大纲:系列一 js篇

web前端庞大而复杂的知识体系的组成:html.css和 javascript           一.js           1.基础语法 Javascript 基础语法包括:变量声明.数据类型.函数.控制语句.内置对象等. 在ES5 中,变量声明有两种方式,分别是  var 和 function ,var用于声明普通的变量,接收任意类型,function用于声明函数.另外,ES6 新增了 let.const.import 和 class等四个命令,分别用以声明 普通变量.静态变量.模块 和

Silence.js高效开发移动Web前端类库

基于Zepto的轻量级移动Web前端JavaScript类库. 编写这个类库原因及目的: 采用MVC设计模式,使代码工程化结构化. 使用RouterJS,提升前端交互性能,延长页面使用时间,并通过Ajax实现交互,避免页面跳转的交互中断糟糕体验. 使用LocalStorage前端离线缓存,实现缓存时间有效期,从而带给用户极致的响应效率. 基于ZetpoJS,移动端的JQuery,兼容JQuery大部分语法,体积更小,效率更高. 基于Touch.js,支持移动端触摸事件('swipe', 'swi

工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. FireBug: inline code 不能格式化 外部 js 可以格式化 Chrome: 点完这对大括号,会新生成一个文件,是格式化过的. 工