Javascript之变量和数据类型

admin 2019-10-09 16:13:06 JavaScript 浏览(1880) 点赞(0)

简介

  • JavaScript 程序是用 Unicode 字符集编写的，Unicode 是 ASCII 和 Latin-1 的超集，并支持地球上几乎所有在用的语言
  • JavaScript 是区分大小写的，HTML 并不区分大小写。例如，在 HTML 中设置事件处理程序时，onclick 属性可以写成 onClick，但在 JavaScript 代码中，必须使用小写的 onclick
  • JavaScript 标识符必须以字母、下划线（_）或美元符号（$）开始，后续的字符可以是字母、数字、下划线或美元符号（数字是不允许作为首字符出现的）
  • JavaScript 标识符推荐采用驼峰大小写格式，也就是第一个字母小写，剩下的每个有意义的单词的首字母大写
  • JavaScript是弱类型语言，数据类型可以修改
var message = "hello";
message = 100;           // 有效的语句，不好的写法

JavaScript中有
6种简单数据类型（也称为「基本数据类型」或「原始数据类型」）：Undefined、Null、Boolean、Number、String、Symbol 。
1种复杂数据类型 Object

typeof运算符

检测给定变量的数据类型，可能返回下列字符串

  • undefined：如果这个值未声明或已声明但未初始化。
  • boolean：如果这个值是布尔值。
  • string：如果这个值是字符串。
  • number：如果这个值是数值。
  • object：如果这个值是对象或 null。
  • function：如果这个值是函数。
  • symbol：如果这个值是Symbol
var message = "some string";
console.log(typeof message);        // "string"
console.log(typeof(message));       // "string"
console.log(typeof 95);             // "number"
console.log(typeof null);           // "object" 这是遗留问题，一直没有纠正回null
console.log(typeof(undefined))      // undefined
console.log(typeof(NaN))            // number
console.log(typeof Symbol('x'))     // symbol
console.log(typeof(typeof(a)))      // string
console.log(typeof(typeof(123)))    // string

instanceof运算符

instanceof 运算符希望左操作数是一个对象，右操作数标识对象的类。
如果左侧的对象是右侧类的实例，则表达式返回 true；否则返回 false

var d = new Date();     // 通过 Date() 构造函数来创建一个新对象
d instanceof Date;      // true，d 是由 Date() 创建的
d instanceof Object;    // true，所有的对象都是 Object 的实例
d instanceof Number;    // false，d 不是一个 Number 对象

var a = [1, 2, 3];      // 通过数组字面量的写法创建一个数组
a instanceof Array;     // true，a 是一个数组
a instanceof Object;    // true，所有的数组都是对象
a instanceof RegExp;    // false，数组不是正则表达式

Undefined类型

未定义或者未初始化的值。系统级的、出乎意料的或类似错误的值的空缺
只有一个值undefined
使用var声明变量但未对其加以初始化时，这个变量的值就是undefined，直接使用未声明的变量会产生错误
对未声明或已声明但未初始化的变量执行typeof运算符会返回undefined值

var message;    // 这个变量声明之后默认取得了 undefined 值
// var age      // 这个变量并没有声明

console.log(message);           // "undefined"
console.log(age);               // 产生错误
console.log(typeof message);    // "undefined"
console.log(typeof age);        // "undefined"

Null类型

空值，表示值的空缺。程序级、正常的或在意料之中的值的空缺
只有一个值null

Boolean类型

只有两个字面量true和false

var message = "Hello world!";
if (message){
  console.log("Value is true.");  // 被执行
}
var messageAsBoolean = Boolean(message);
console.log(messageAsBoolean);  // true
数据类型 转换为true的值 转换为false的值
Undefined - undefined
Null - null
Boolean true false
String 任何非空字符串 空字符串""
Number 任何非零数字值（包括无穷大） 0和NaN
Object 任何对象 - 
console.log(Boolean(1))         // true
console.log(Boolean(null))      // false
console.log(Boolean(undefined)) // false
console.log(Boolean(NaN))       // false
console.log(Boolean(""))        // false
console.log(Boolean(" "))       // true
console.log(Boolean(0))         // false
console.log(Boolean([]))        // true
console.log(Boolean(![]))       // false
console.log(Boolean({}))        // true

Number类型

八进制第一位必须是0，后面跟八进制序列0到7，如果超出了范围，则忽略前导0，后面的数值当做十进制解析
十六进制前两位必须是0x或0X，后跟十六进制序列0~9、a~f（不区分大小写），如果超出了范围，则会报语法错误

永远不要测试某个特定的浮点数值

// 进制
var a = 10;         // 十进制
var b = 023;        // 八进制
var c = 0x12ac;     // 十六进制
console.log(b);     // 19
console.log(c);     // 4780

// 浮点数
var a = 1.1;
var b = 0.1;
var c = .1;      // 有效，但不推荐

// JavaScript 会不失时机的将浮点数转换成整数
var a = 5.;      // 解析成整数5
var b = 5.0;     // 解析成整数5

// 科学计数法
var a = 3.14e7;             // 等于31400000
var b = 3.14E-7;            // 等于0.000000314
console.log(0.0000003);     // 3e-7

// 浮点数精度不高
console.log(0.1 + 0.2);     // 0.30000000000000004

// 最大数、最小数
console.log(Number.MAX_VALUE);       // 最大数 1.7976931348623157e+308
console.log(Number.MIN_VALUE);       // 最小数 5e-324

// 正无穷、负无穷
console.log(Number.POSITIVE_INFINITY);    // 正无穷  Infinity
console.log(Number.NEGATIVE_INFINITY);    // 负无穷 -Infinity

console.log( 1 / 0);     //  Infinity
console.log(-1 / 0);     // -Infinity

// isFinite() 函数，确定一个数是不是有穷的
console.log(isFinite(100));         // true
console.log(isFinite(Infinity));    // false

NaN是一个特殊的数值，不能参数算数运算，任何涉及NaN的操作都返回NaN。并且NaN与任何值都不相等（包括自身）
使用isNaN()来确定一个数是否是NaN

console.log(typeof NaN);      // "number"

console.log(0 / 0);                 // NaN
console.log(NaN - NaN);             // NaN
console.log(Infinity - Infinity);   // NaN

var a = NaN;
console.log(a === a);   // false
console.log(NaN == NaN);  // false
// isNaN() 函数在接收到一个值之后，会尝试使用转型函数 Number() 将这个值转换为数值
console.log(isNaN(100));        // false
console.log(isNaN("100"));      // false："100"转成数字后是100
console.log(isNaN(true));       // false：true转成数字后是1
console.log(isNaN("sss"));      // true："sss"转成数字后是NaN
console.log(isNaN(NaN));        // true
console.log(isNaN(null))        // false
console.log(isNaN(undefined))   // true
console.log(isNaN([]))          // false
console.log(isNaN(![]))         // false
console.log(isNaN({}))          // true

Number()转换规则

  • undefined 转换为 NaN；
  • null 转换为 0；
  • true 转换为 1、false 转换为 0；
  • number 整数转换为十进制，小数不变；
  • string 如果只包含十进制数和小数，则返回对应的数值，如果只包含八进制数，则忽略前导0返回剩余部分，如果只包含十六进制，则返回十进制数，空字符串转换为0，其它字符串转换为 NaN；
  • 如果 object 具有 valueOf() 方法，且返回一个原始值（5种简单数据类型），则将这个原始值转换为数字，并返回这个数字；否则，如果 object 具有 toString() 方法，且返回一个原始值，则将这个原始值转换为数字，并返回这个数字；否则，抛出一个类型错误异常
console.log(Number('true'))     // NaN 字符串，转Number失败
console.log(Number(true))       // 1
console.log(Number(false))      // 0
console.log(Number(null))       // 0
console.log(Number(undefined))  // NaN
console.log(Number([]))         // 0
console.log(Number(![]))        // 0
console.log(Number({}))         // NaN
console.log(Number('a'))        // NaN
console.log(Number(' '))        // 0
console.log(Number(' 23'))      // 23
console.log(Number('1a'))       // NaN
console.log(Number('3.14'))     // 3.14
console.log(Number(3.14))       // 3.14

parseInt()转换规则

  • 忽略字符串前面的空格，直至找到第一个非空格字符
  • 只要第一个非空格字符不是数字或者正负号，一律返回 NaN
  • 如果第一个非空格字符是数字字符，parseInt() 会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非数字字符
console.log(parseInt(""));          // NaN（Number("")返回 0）
console.log(parseInt("123S"));      // 123
console.log(parseInt("12.4"));      // 12
console.log(parseInt('true'))       // NaN
console.log(parseInt(true))         // NaN
console.log(parseInt(false))        // NaN
console.log(parseInt(null))         // NaN
console.log(parseInt(undefined))    // NaN
console.log(parseInt([]))           // NaN
console.log(parseInt(![]))          // NaN
console.log(parseInt({}))           // NaN
console.log(parseInt('a'))          // NaN
console.log(parseInt(' '))          // NaN
console.log(parseInt(' 23'))        // 23
console.log(parseInt('12abc56'))    // 12
console.log(parseInt('abc56'))      // NaN
console.log(parseInt('1f', 16))     // 31 ---> 要解析的数字的基数，以十六进制算，1f转成十进制就是31
  • parseInt()是取整数部分；位操作| 0、^ 0和~~也都可以直接取整数部分
const a = '3.24'
const b = '-3.24'
const c = 3.24
const d = -3.24
console.log(parseInt(a))  // 3
console.log(parseInt(b))  // -3
console.log(parseInt(c))  // 3
console.log(parseInt(d))  // -3

// | 0：取整数部分
console.log(a | 0)        // 3
console.log(b | 0)        // -3
console.log(c | 0)        // 3
console.log(d | 0)        // -3

// ^ 0：取整数部分
console.log(a ^ 0)        // 3
console.log(b ^ 0)        // -3
console.log(c ^ 0)        // 3
console.log(d ^ 0)        // -3

// ~~：取整数部分
console.log(~~a)          // 3
console.log(~~b)          // -3
console.log(~~c)          // 3
console.log(~~d)          // -3

parseFloat()转换规则

  • 忽略字符串前面的空格，直至找到第一个非空格字符
  • 只要第一个非空格字符不是数字或者正负号或者小数点，一律返回 NaN
  • 如果第一个非空格字符是上述字符之一，parseFloat() 会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非浮点数值
console.log(parseFloat("098.2"));       // 98.2
console.log(parseFloat("123.23.23"));   // 123.23

String类型

转义字符可出现在字符串中的任意位置，且长度为1
大部分值都可以使用继承而来的 toString()方法转换为字符串，但 undefined 和 null 值没有这个方法
对数值使用 toString() 方法时，可以传入一个数字基数，以此输出对应进制的字符串值

String()转换规则

  • 如果值有 toString() 方法，则调用该方法（没有参数）并返回相应的结果；
  • 如果值是 undefined，则返回字符串undefined；
  • 如果值是 null，则返回字符串null。
console.log("\n\\".length);     // 2
console.log("\\hello");         // "\hello"（长度为6）

// toString()
console.log(true.toString());   // "true"
var num = 10;
console.log(num.toString());    // "10"
console.log(num.toString(2));   // "1010"
console.log(num.toString(8));   // "12"
console.log(num.toString(16));  // "a"

let str = null
let str1 = undefined
str = str.toString()            // TypeError: Cannot read property 'toString' of null
str1 = str1.toString()          // TypeError: Cannot read property 'toString' of undefined

// String()
var value;
console.log(String(10));        // "10"
console.log(String(true));      // "true"
console.log(String(null));      // "null"
console.log(String(value));     // "undefined"

// String & new String
var s0 = 'hello';
var s1 = new String(s0);        // 生成字符串对象
var s2 = String(s0);            // 生成普通的字符串
console.log(s1 === s2);         // false
console.log(s1 === s0);         // false
console.log(s2 === s0);         // true
s1.foo = 'bar';
s2.foo = 'bar';
console.log(s1.foo);            // bar
console.log(s2.foo);            // undefined

Object类型

JavaScript 中所有对象都继承自 Object 类型

var obj = new Object();
var obj = {};   // 对象字面量，好的写法
// 定义一个对象
var obj = {
  name: "Carrot",
  "for": "Max",
  details: {
    color: "orange",
    size: 12
  }
}
// 链式操作
obj.details.color;       // orange
obj["details"]["size"];  // 12
// 访问、赋值
obj.name = "Simon"      // 赋值
var name = obj.name;    // 访问

obj["name"] = "Simon";  // 赋值
var name = obj["name"]; // 访问

关卡

  • 变量名
var class = 'person';
console.log(class);     // 无效，因为 class 是关键字。

var Class = 'person';
console.log(class);     // 无效，虽然 Class 是合法的标识符，但是输出的是 class。

var True = false;
console.log(True);      // false，有效，True 是合法的标识符。

var $_$ = 'stone';
console.log($_$);       // 'stone'，有效，$_$ 是合法的标识符。

var 00_name = 'stone';
console.log(00_name);   // 无效，标识符不能以数字开头。

var Array = 'null';
console.log(Array);     // 'null'，有效，虽然 Array 是全局变量，但可以被重写，Array 被重写之后就不能再用当做构造函数使用了。

var undefined = 'null';
console.log(undefined); // undefined，有效，虽然没报错，但是没有赋值成功。
  • 换行
var result = 1 + 2
+ 3 + 4
console.log(result);    // 10，有效。
  • typeof
console.log(typeof "undefined");  // "string"
console.log(typeof null);         // "object"

var message = "some string";
console.log(typeof massage);    // "undefined" 注意打印的是massage，不是message
message = 10000;
console.log(typeof message);    // "number"
  • 布尔值判断
var a;
var b = null;
var c = {};
if (a && b && c) {
  console.log("true.");
} else {
  console.log("false.");      // false undefined和null转成布尔型都是false，{}转成布尔型是true
}
  • number
console.log(typeof (0 / 0));    // "number" NaN也是Number类型
console.log(023 + 123);         // 142 023是八进制，转成十进制是19 19+123 = 142

console.log(Number("1234S"));   // NaN
console.log(parseInt("1234S")); // 1234

console.log(3.14E-7 === 0.000000314);   // true
console.log(0.1 + 0.6 === 0.7);         // true  浮点数精度不高，不要测试某个特定的浮点数值，有时候是对的
console.log(0.1 + 0.7 === 0.8);         // false 浮点数精度不高，不要测试某个特定的浮点数值，有时候是错的
console.log(NaN === NaN);               // false
  • 转义字符
console.log("\right\now");          // ight 字符转义了 \r回车   \n换行
                                    // ow
console.log("\right\now".length);   // 8 转义字符算一个
console.log(010.toString(2));       // "1000" 八进制数转成二进制，再转成字符串
  • 隐式转换
const a = 1 - '1'
const b = '1' - '1'
console.log(a, typeof(a))     // 0 number 数值类型才能减
console.log(b, typeof(b))     // 0 number


let c = '123'
c++
console.log(c, typeof c)      // 124 'number'  ++也是转成数值类型
console.log(1+5*'3' === 16)   // true


const d = 'abc' + 1
console.log(d, typeof d)      // abc1 string


console.log(false + 1)        // 1


const e = '123'
console.log(typeof(+ e) + '-' + +e) // number-123  +e将字符串转成了number


console.log('3' > 20)         // false 先转成number再比较
console.log(1 == '1')         // true
console.log(1 === '1')        // false 绝对相等，也会判断类型
console.log(NaN == NaN)       // false NaN !== NaN


console.log(4 > 3 > 2)        // false  4 > 3 ---> true   true > 2 ---> false
console.log(2 > 1 == 1)       // true   2 > 1 ---> true   true == 1 ---> true


console.log(false == 1) // false
console.log(-true)      // -1
console.log(+undefined) // NaN
if(typeof(k) && (-true) + (+undefined) + ''){
  console.log(1);
}else{
  console.log(0);
}
console.log(typeof(-'123'))               // number
console.log((-true) + (+undefined) + '')  // NaN


console.log(!!' ')    // true
console.log(!!'')     // false
console.log(!!' ' + !!'' - !!false || '未通过')   // 1  ---> 1 + 0 - 0 = 1   1 是true 就不走后面了


window.a || (window.a = '1')     // window.a 有的话 就是 window.a  没有的话 window.a = 1
console.log(window.a)


var str = 89 > 9? ('89' > '9'? '通过了': '内层未通过') : '外层未通过';
console.log(str);       // 内层未通过
/**
 * 89 > 9 ----> true   走('89' > '9'? '通过了': '内层未通过')
 * '89' > '9' 两个字符串比较，根据ASCII码比较 ----> false  '内层未通过'
 */
  • undefined、null
console.log(undefined > 0)            // false
console.log(undefined == 0)           // false
console.log(undefined < 0)            // false
console.log(undefined == undefined)   // true
console.log(undefined == null)        // true
console.log(undefined === undefined)  // true
console.log(null === null)            // true
console.log(undefined === null)       // false
console.log(null > 0)                 // false
console.log(null == 0)                // false
console.log(null < 0)                 // false

创作不易，若本文对你有帮助，欢迎打赏支持作者！

 分享给好友：