02.JS变量和JS数据类型

浏览器

• GecKo 火狐
• trdient ie
• webkit
  • 谷歌
  • 手机
  • 国产浏览器
  • 苹果浏览器
  • 谷歌浏览器
  • 欧朋 >=14
• Presto 欧朋浏览器 <=14

谷歌浏览器控制台

• Elements：查看结构样式，可以修改这些内容
• Console：查看输出结果和报错信息，是js调试的利器
• Sources：查看项目源码
• Network：查看当前网站所有资源的请求信息(包括和服务器传输的HTTP报文信息 )、加载时间等等
• Application：缓存

JS做客户端语言

按照js语法，去操作页面中 的元素，有时还要操作浏览器里面的一些功能

• ECMAScript js的语法规范(变量、数据类型、操作语句)
• DOM(document object model)
• BOM(browser object model)

js变量

变量：可变的量，在编程语言中，变量其实就是一个名字，用来储存和代表不同值的东西 ;

常量：不可变的值 const 创建的值不能被修改

创建变量的定义方式：var/ let /const / function / import class

 //ES3
 var a = 12;//输出的值a 代表的值12
 //ES6
 let b = 100 ;
 b = 200;
 const c= 1111; 
 c=2222; //报错：const创建的变量，储存的值不能被修改(可以理解为叫做常量)
 
 
// 创建函数也相当于在创建变量
 function fn(){}
//创建类也相当于创建变量
 class A{}
// ES6的模板导入也可以创建变量
 import Bfrom "./b.js"
// Symbol 创建唯一值
 let Symbol c=100;
 let Symbol d= 111;
 console.log(c === d) //false ; Symbol 创建的值不和其他东东相等
 

JS的数据类型

• 基本数据类型：number 、String、null、undfined、boolean
• 引用数据类型：object(数组、对象、正则)、function
• Symbol：唯一值

JS中的命名规范

• 严格区分大小写
• 使用数字、字符下划线、$，数字不能作为开头
• 使用驼峰命名法：首字母小写，其余给一个有意义单词的首字母都要大写(命名尽可能语义化明显，用英文单词)
• 不能使用关键词和保留字 如：this、var、let、function

JS常用的数据类型

• 基本数据类型 (按值操作)
  • 数字 number
    • 常规数字 和 NaN
  • 字符串 String
    • 所有单引号、双引号、反引号 包起来的都是字符串
  • 空对象 null
  • 未定义undfined
  • 布尔 boolean
    • true/false
• 引用数据类型 (操作的是堆内存的空间地址)
  • 对象数据类型 object
    • {} 普通对象
    • [] 数组对象
    • /¹/ 正则对象
    • Math 数据函数对象
    • 日期对象
  • 函数数据类型 function

---

number 数字类型

包含：常规数字、NaN

NaN

not a number ：不是一个数，但是是属于数字类型，

NaN 和任何值(包括自己) 都不相等: 
NaN === NaN  //false

isNaN

检测一个值是否为有效数字，如果不是有效数字返回true，反之是有效数字则返回false。

使用isNaN进行检测的时候，首先会验证检测的值是否为数字类型，如果不是，先基于Number() 这个方法，把值转化为数字类型，然后在检测

console.log(isNaN(123)) //false
console.log(isNaN('a123')) //true
console.log(isNaN(false)) //false
console.log(isNaN(true)) //false
先把其他类型转化为Number类型 ，判断是不是Number
Number(123) => 123
isNaN(123) => 

---

Number

把字符串转换为数字，只要字符串中包含任意一个非有效数字字符(第一个除外) 结果都是NaN，空字符串会变成数字零，
把引用数据类型转化为数字，是先把他基于toString 方法转化为字符串，然后在转化为数字

Number(null) //0
Number(undefined) //NaN
Number({name:‘123’}) //NaN;
Number({}) //NaN;

// {}.toString() => “[object Ojbect]” =>number("[object Ojbect]") => NaN
Number([]) //0;
[].toString() => “” => Number("") => 0
Number([12]) //12
[12].toString() => “12” => Number(“12”) =>12
Number([12,13]) //NaN
[12,13].toString() => “12,13” => Number(“12,13”) => 字符串里面有逗号 变成 NaN

parseInt 和 parseFloat

parseInt遇到非 数字返回结果
parseFolat 遇到除第一个小数点外，非数字返回结果

也是转换为数字的方法，对于字符串来说，它是从左到右依次查找有效数字字符串，直到遇到非有效数字字符，停止查找(不管后面是否有数字，不找了) 把找到的当做数字返回

let str = '12.5px';
parseInt(str) //12
parseInt(str)//12.5 

---

String

所有单引号、双引号、反引号包起来的都是字符串

• 把其他类型值转化为字符串

 [val].toString();

 null和undefined 是禁止直接toString 的
 (null).toString() //报错
 console.log([].toString()) // ""  空数组变成字符串 为空 ""
 
 普通对象.toString() 的结果是 "[object Object]" =>?
 Object.prototype.toString 方法不是转换为字符串的，而是用来检测数据类型的
 
===================== 字符串拼接
//四则运算法则中，除加法外，其余都输数据计算，只有加法可能存在字符串拼接
(一旦遇到字符串，则不是数据运算，而是字符串拼接) 


console.log('10' + 10);//1010
console.log('10' - 10);// 0
console.log('10px' + 10);//10px10
console.log('10px' * 10);//NaN
console.log('10px' - 10);//NaN


console.log(10 + null + true + [] + undefined + '今天' + null + [] + 10 + false);
//11undefined今天null10false
10 + null ->    10 + 0 = 10
10 + true ->    10 + 1 = 11
11 + [] ->      11 + '' = '11'   
//把空数组变为数字，先把空数组变为字符串，遇到字符串 直接变为字符串拼接，直接变为字符串拼接
"11"+ undefined ->  "11undefined" 
"11undefined" + "今天"  -> "11undefined今天"
"11undefined今天" + null+[] + 10 + false -> "11undefined今天null10false"

---

boolean

只有两个值 true /false

把其他类型转换为布尔类型

只有 0 、 NaN、""、null、undefined 五个值转换为false，其余都转换位true (没有其他特殊情况)

Boolean(0) //false
Boolean("") //false
Boolean(null) //false
Boolean(undefined) //false
Boolean(NaN) //false
除了以上其余都是true

!  :条件取反 (先转布尔值，然后取反)
!! :取反再取反，只相当于转为布尔 => Boolean
console.log(!!1)//true
console.log(!1)//false

---

null / undefined

null和undefined 都代表的是没有

null：意料之中(一般都是开始不知道值，我们手动先设置为null，后期在给予赋值操作)

let num = null ; //一般最好用null作为初始的空值，因为零不是空值，他在栈内存中有自己的储存空间（占了位置）

undefined：意料之外（不是我能决定的）

let num ; // 创建一个变量没有赋值，默认值是undefined

---

object 对象数据类型-普通对象

{[key]: [value],…} 任何一个对象都是由零到多组键值对(属性名：属性值)组成的 ( 并且属性名不能重复 )

获取属性名对应的属性值
对象.属性名 
对象[属性名] 属性名是数字或者字符串格式的
如果当前属性名不存在，默认的属性值是undefined
如果属性名是数字，则不能使用点的方式获取属性值

let person = {
    name: '张三',
    age: 20,
    befaut: ['a', 'b', 'c'],
    2:200
}

console.log(person.name);
console.log(person.name123);//undefined
console.log(person['age']);//20
console.log(person['befaut']);//(3) ["a", "b", "c"]
console.log(person['befaut'][0]);//a
console.log(person['2']);//200
console.log(person.2);//语法错误

// 设置属性名 属性值；
// 属性名不能重复，如果属性名已经存在，不属于新增属于修改属性值
// 新增属性名
person.abc = '哈哈哈'
console.log(person.abc); // 哈哈哈
// 修改属性值
person.abc = '呵呵呵';
console.log(person.abc); // 呵呵呵
// 删除属性

// 假删除
person.abc = null
console.log(person); //{2: 200, name: "张三", age: 20, befaut: Array(3), abc: null}

// 真删除
delete person['abc'];
console.log(person); //{2: 200, name: "张三", age: 20, befaut: Array(3)}

---

数组

• 数组是特殊的对象数据类型

  • 1.中括号中设置的是属性值，它的属性名是默认生成的数字，从零开始递增，而且这个数字代表每一项的位置，我们把其称为‘索引’ => 从零开始，连续递增， 代表每一项位置的数字属性名
  • 2.天生默认一个属性名 length，储存数组的长度

• 第一项索引是 0 ，最后一项索引

  let arr = [12, '哈哈', true, 14];
  console.log(arr.length - 1);//数组长度
  

• 向数组末尾追加内容

  let arr = [12, '哈哈', true, 14];
  arr[arr.length] = 100
  console.log(arr);
  

---

数据类型之间的区别

• 浏览器想要执行js代码：

  • 1.从电脑内存中分配出一块内存，用来执行代码(栈内存 => Stack) 【栈：一个餐厅】
  • 2.分配一个主线程 用来自上而下执行js代码 【服务员给依次进来的客人点餐】

• 基本类型：按值操作(直接操作的是值)，所以也叫值类型
  引用类型：操作的是堆内存的地址(按引用地址操作的)

  栈内存
  	变量储存空间
  		a
  	值储存空间
  		10
  -------------------------------
  ========== 简单类型：
  进栈 ：
  let a = 10;
  1.创建变量a，放到前栈内存变量储存区域中
  2.创建一个值12，把它存储到前栈内存值区域中(简单的基本类型值是这样存储的，复杂的引用类型值不是这样做的)
  3. = 为赋值，其实赋值是让变量和值相互关联的过程
  
  a 放在变量储存空间，10放在值储存空间 ， = 让a和12相等
  执行完出栈，下一行代码才能进栈
  
  客人来到餐厅，一个服务员同时把一位客人带到座位(进栈)，点完餐后(出栈)，在去服务第二位客人
  
  let a= 12 ;
  let b = a ;
  b = 14 ;
  console.log(b) //14 b刚开始地址指向a，然后b再指向新值14
  console.log(a) //12 因为b的值指向a，然后再指向14了，并没有修改a的值，a=12
  
  ========== 复杂类型：
  复杂值(引用类型值) 的储存，又分成了三个步骤：
  1.在内存中分类出一块心新内存，用来存储引用类型值 (堆内存=> heap) => 内存有一个16进制地址
  2.把对象中的键值对依次存储到堆内存中
  3.把堆内存地址和变量关联起来
  
  
  

---

---

1. ↩︎