【11.0】JavaScript之数据类型

【零】JS代码的书写位置

【0】行内写法

<div onclick="(alert('Surprise!'))">click me !</div>

【1】写在script标签内部

<script>
    console.log("Hello World!");
</script>

【2】JS文件

• 可以单独开设JS文件书写

// 注意在引入外链的script标签内部不能书写JS代码
<script src="test.js"></script>

【3】浏览器窗口支持运行JS代码

• 还可以直接在浏览器提供的 console 界面书写

  • 在用浏览器书写JS的时候 左上方的清除按钮这是清空页面 不能清空已经写完的代码的残留问题

  • 如果想重新开始，推荐新建页面书写

• 建议用自己写的html页面书写js代码

【一】常用的调试语句

• alert：警告，在浏览器中弹出一个警告框，内容为alert里面的内容

alert(内容);

alert("Surprise");

• prompt：对话框，第一个参数是询问内容，第二个参数是提示摊入的实例值

prompt(问题,值);

prompt("你的年龄是",18);

• console：控制台，在控制台内输出一些内容

closole.log(内容);

console.log("Surprise");

【二】数据类型引入

【1】JS中的数据类型

• 简单数据类型：Number、String、undefined、Boolean、null
• 复杂数据类型：Object

【2】数据类型检测

• typeof方法

console.log(typeof("Surprise"));

• null的数据类型为 object

console.log(typeof(null));

【3】字面量

• 字面量是用于表达固定值的方法，又叫常量
• 所见即所得
• 比如：数字、字符串、布尔值等

【4】数字字面量

• 这里指数学意义上的数字
• 数字字面量区分：整数、浮点数、特殊值
• 书写时直接写字面量，不需要加任何符号

【5】特殊值

• Infinity 无穷：无穷大Infinity ,无穷小-Infinity
• NaN：不是一个正常的数，是数字类型，可以通过isNaN来判断

【6】字符串

• 组成：字母，汉字，特殊符号，空白等
• 字符串的字面量写法：是用一对单引号或者一对双引号
• 如果字符串中含有单引号那么字面量写法就必须用双引号，反之也一样
• 转义符号：\n换行 ，\t缩进 ，' 单引号 ，" 双引号，\反斜杠

【三】变量和常量

• js是一门拥有动态类型的语言

var name = "dream";
var name = 123;
var name = [];

• name可以指向任意类型
• 但是在某些语言中。变量名只能指向其中一种，不支持做更改

【1】变量

（0）介绍

• 变量（variables），是计算机内存中存储数据的标识符，可以根据变量名称获取存储的值
• 变量相当于一个容器，内部可以存储任意的数据，使用变量时，用的是内部存储的数据
• 使用变量可以方便的获取或者修改

（1）变量声明

• 变量声明又称创建变量

• 在变量使用前必须先定义，如果没有定义就会出现引用错误

• 在js中 首次定义一个变量名时需要用关键字声明

// 关键字 var
var 变量名=变量值;
var name = "dream";

// es6新语法
let 变量名=变量值;
let name = "dream";

• 如果编译器版本是 5.1 则无法使用let
• 如果是6.0 则向下兼容，二者都可以

（2）var和let的区别

• var 在循环内定义也会影响到全局
• let 在局部定义只会在局部生效

（3）变量命名规范

• 变量名只能是 数字/字母/下划线/$
• 变量名命名规范(js中推荐驼峰式命名法、私有成员以_开头)
• 变量民不能用关键字作为变量名
• 变量名不能用数字开头

（4）变量赋值

• 定义完变量后，初始没有进行赋值，内部会有一个默认的存储值叫做 undefined

var name; // undefined

console.log(name);

• 变量赋值通过 = 赋值 等号左边是变量名 右边是变量值

var name="dream";

• 书写时习惯在等于号两边各加一个空格
• 变量可以在定义时直接赋值
• 变量可以赋值给另一个变量，只是把变量的值赋值给另一个变量
• 变量可以多次赋值
• 多个变量可以同时声明中间用，号分隔

var name="dream",age=19;

【2】常量

• 在Python中没有真正意义上的常量，默认全大写就是常量

• 在js中有真正意义上的常量

  const pi=x;
  

const i =10;
var i =11;
// VM296:1 Uncaught SyntaxError: Identifier 'i' has already been declared

js也是一门面向对象的编程语言，一切皆对象

【四】数值类型(Number)

【1】演示

var a= 11;
var b = 11.11;

【2】查看数据类型

typeof a;

【3】注意NaN

• 特殊的 NaN ：数值类型
• 表示的意思是不是一个数字， Not A Number

【4】类型转换

var e = parseInt("11.11");
var f = parseFloat("11");           
console.log(e); 
// 11
console.log(f); 
// 11

console.log(typeof(e)); 
// number
console.log(typeof(f)); 
// number

• parseInt方法

console.log(parseInt("11asdasdada33336669932adsada"))
// 只要开头有数字就可以转，如果开头不是数字则是NoN
// 11

console.log(parseInt("aasdads444564546"))
// NaN  

• parseFloat方法

console.log(parseFloat("11.11"))
// 只要开头有数字就可以转，如果开头不是数字则是NoN
// 11

console.log(parseFloat("11.11"))
// NaN  

console.log(typeof(e)); 

【五】字符类型(String)

【1】演示

var a = "dream";
// undefined
typeof a;
// 'string'
var s1 = "meng";
// undefined
typeof s1;
// 'string'
var s2 = '''name''';
// VM332:1 Uncaught SyntaxError: Unexpected string

不支持三引号

【2】模版字符串

（1）书写多行字符串

var s3 = `
as
df
ce
gh
`

（2）格式化字符串

• 书写 ${} 会向前找定义过的变量值
  • 如果找不到会报错

模板字符串除了可以定义多行文本，还可以实现格式化字符串操作

var name = "dream";
// undefined
var age = 18;
// undefined
var str = `my name is ${name} my age is ${age}`;
// undefined
str
// 'my name is dream my age is 18'

（3）拼接字符串

• 在js中推介用 + 号 做拼接

【3】常用方法

（1）统计字符长度

var name1 = "  dream  ";
name1
// '  dream  '
name1.length
// 9

（2）移除空白

var name1 = "  dream  ";
// undefined
name1
// '  dream  '

// （1）去除两端空白
name1.trim()
// 'dream'

// （2）去除左边的空白
name1.trimLeft()
// 'dream  '

// （3）去除右边的空白
name1.trimRight()
// '  dream'

（3）返回索引

// （1）返回索引为n的字符
name1.charAt(5)
// 'a'

// （2）返回字符所在的索引(r的索引)
name1.indexOf("re");
// 3

（4）切片

var name2="$$dream$$";
// undefined

name2
// '$$dream$$'

// （1）substring 取索引 0~5的内容
name2.substring(0,5)
// '$$dre'

// （2）slice 取索引 0~5的内容
name2.slice(0,5)
// '$$dre'

// （3）区别 slice 可以用 -1 取值
name2.substring(0,-1); // 废除
''
name2.slice(0,-1);
'$$dream$'

（5）字符大小写转换

var name3 = "NiHao,Dream,521"
// undefined

name3
// 'NiHao,Dream,521'

// （1）字符转全小写
name3.toLowerCase();
// 'nihao,dream,521'

//（2）字符转全大写
name3.toUpperCase();
// 'NIHAO,DREAM,521'

（6）切分

var name4 = "dream|music|18|斋藤飞鸟|";
// undefined
name4
// 'dream|music|18|斋藤飞鸟|'

// 以指定字符切分字符串
name4.split("|");
// (5) ['dream', 'music', '18', '斋藤飞鸟', '']

// 参数 2 意思是拿前两个参数，如果大于目标个数，有几个拿几个
name4.split("|",2);
// (2) ['dream', 'music']

（7）字符串拼接

// 字符串拼接 可以自动转换数据类型，进行拼接
name1.concat(name2,name3,name4);
// '$$dream$$NiHao,Dream,521dream|music|18|斋藤飞鸟|'

【4】转换成字符串

• 可以通过toSrting方法、通过+''运算、String构造函数

console.log(6 + '');

console.log(String(6));

console.log([1,2,3].toString());

【四】布尔类型(Boolean)

【1】引入

• 在Python中布尔值是首字母大写的
• 但是在js中布尔值是全小写的

【2】演示

var a = true
// undefined
typeof a
// 'boolean'

【3】布尔值是false

• 空字符串
• 0
• null
• undefined
• NaN

除了上述为 false 的情况，其他情况均为 true

【4】类型转换

var a=Boolean(null);

console.log(a);
// false

【五】null 和 undefined

【1】null

• 表示值为空，一般都是指定或者清空一个变量时使用

【2】undefined

• 表示声明了一个变量，但是没有做初始化操作
• 函数没有指定返回值的时候也是返回的undefined