js

JS 中常用的数据类型

• 基本数据类型
  • 数字number
    常规数字和NaN
  • 字符串string
    所有用单引号、双引号、反引号（撇）包起来的都是字符串
  • 布尔boolean
    true/false
  • 空对象指针null
  • 未定义undefined
• 引用数据类型
  • 对象数据类型object
    • {} 普通对象
    • [] 数组对象
    • 正则对象
    • Math数学函数对象
    • 日期对象
    • …
  • 函数数据类型function

number数字类型

包含：常规数字、NaN

NaN

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

NaN和任何值（包括自己）都不相等：NaN != NaN，所以我们不能用相等的方式判断是否为有效数字

isNaN

检测一个值是否为有效数字，如果不是有效数字返回TRUE,反之是有效数字返回FALSE
console.log(isNaN(10)) //false

console.log(isNaN(‘AA’)) //true
Number(‘AA’) => NaN
isNaN(NaN) => true

console.log(isNaN(‘10’)) //false
Number(‘10’) => 10
isNaN(10) => true

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

把其他类型值转换为数字类型

• Number([val])
  把字符串转换为数字，只要字符串中包含任意一个非有效数字字符（第一个点除外）结果都是NaN，空字符串会变为数字零
  console.log(Number(‘12.5’)) //12.5
  console.log(Number(‘12.5px’)) //NaN
  console.log(Number(‘12.5.5’)) //NaN
  console.log(Number(‘’)) //0

  布尔转换为数字
  console.log(Number(true)) //1
  console.log(Number(false)) //0
  console.log(isNaN(false)) //false

  null,undefined转换为数字
  console.log(Number(null)) //0
  console.log(Number(undefined)) //NaN

  把引用数据类型转换为数字，是先把他基于toString方法转换为字符串，然后再转换为数字
  console.log(Number({name:’10’})) //NaN
  console.log(Number({})) //NaN
  // {}/{xxx:’xxx’}.toString() => “[object Object]” => NaN
  console.log(Number([])) //0
  // [].toString() => ‘’
  console.log(Number([12])) //12
  // [12].toString() => ‘12’
  console.log(Number([12,23])) //NaN
  // [12,23].toString() => ‘12,23’

• parseInt/parseFloat([val],[进制]): 也是转换为数字的方法，遂于字符串来说，它是从左到右依次查找有效数字字符，直到遇到非有效数字字符，停止查找（不管后面是否还有数字，都不在找了），把找到的当作数字返回

  let str = ‘12.5px’;
  console.log(Number(str)) //NaN
  console.log(parseInt(str)) //12
  console.log(parseFloat(str)) //12.5
  console.log(parseFloat(‘width:12.5px’)) //NaN

• == 进行比较的时候，可能要出现把其他类型值转换为数字

string字符串数据类型

所有用单引号、双引号、反引号（撇 ES6模板字符串）包起来的都是字符串

把其他类型值转换为字符串

• [val].toString()
  //null和undefined是禁止直接toString的
  //(null).toString() // =>报错
  //但是和undefined一样转换为字符串的结果就是’null’/‘undefined’
  
  //普通对象.toString()的结果是”[object Object]” => Object.prototype.toString方法不是转换为字符串的，而是用来监测数据类型的
• 字符串拼接
  //四则运算法则中，除加法之外，其余都是数学计算，只有加法可能存在字符串拼接（一旦遇到字符串，则不是数学运算，而是字符串拼接）
  console.log(‘10’+10) // => ‘1010’
  console.log(‘10’-10) // => 0
  console.log(‘10px’-10) // => NaN

boolean布尔数据类型

只有两个值 true/false

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

只有 0、NaN、’’、null、undefined 五个值转换为false，其余转换结果都是true(而且没有任何特殊情况)

• Boolean([val])
• !/!! //!:取反(先转为布尔，然后取反) !!:取反再取反，只相当于转换为布尔<=> Boolean
  console.log(!1) // => false
  console.log(!!,) // => true
• 条件判断

null / undefined

null和undefined都代表的是没有

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

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

• undefined： 意料之外(不是我能决定的)

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

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

{[key]:[value],…} 任何一个对象都是由零到多组键值对(属性名：属性值)组成的(并且属性名不能重复)
//获取属性名对应的属性值
// => 对象.属性名
// => 对象[属性名] 属性名是数字或者字符串格式的
// => 如果当前属性名不存在，默认的属性值是undefined
// => 如果属性名是数字，则不能使用点的方式获取属性值

// 删除属性
=>真删除：把属性彻底干掉
delete 对象['属性名']
=>假删除：属性还在，值为空
属性名.属性值 = null/undefined

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

JS中的数据类型检测

• typeof[val]: 用来检测数据类型的运算符
• instanceof： 用来检测当前实例是否属于某个类
• constructor： 基于构造函数检测数据类型(也是基于类的方式)
• Object.prototype.toString.call(): 检测数据类型最好的办法

基于typeof检测出来的结果
1.首先是一个字符串
2.字符串中包含对应的类型
局限性
1.typeof null => ‘object’ 但是null不是对象
2.基于typeof无法细分出当前值是普通对象还是数组对象等，因为只要是对象数据类型，返回的结果都是’object’

JS中的操作语句: 判断、循环

判断

条件成立做什么？不成立做什么？

• if/else if/else
• 三元运算符
• switch case

1.if/else

1
2
3
4
5
6
7

if(条件){
    条件成立执行
}else if(条件2){
    条件2成立执行
}else{
    以上条件都不成立执行
}

2.三元运算符：简单if/else的特殊处理方式
条件?条件成立处理的事情：不成立处理的事情；
1.如果处理的事情比较多，我们用括号抱起来，没一件事情用都好分隔
2.如果不需要处理事情，可以使用null/undefined占位

3.switch case
一个变量在不同值情况下的不同操作
1.每一种case情况结束后最好都加上break，不加break，当前条件执行完成后，后面条件不论是都成立都要执行，直到遇到break为止
2.default等价于else，以上都不成立干的事情
3.每一种case情况的比较用的都是===“绝对相等”

== vs ===

==：相等(如果左右两边数据值类型不同，是默认先转换为相同的类型，然后比较)
===：绝对相等(如果类型不一样，肯定不相等，不会默认转换数据类型)

循环

重复做某些事情就是循环

• for循环
• for in循环
• for of循环(ES6新增)
• while循环
• do while循环

函数 function

函数就是一个方法或者一个功能体，函数就是把实现某个功能的代码放到一起进行封装，以后想要操作实现这个功能，只需要把函数执行即可 => ‘封装’：减少页面中的冗余代码，提高代码重复使用率(低耦合高内聚)

• 创建函数
  • 形参
  • 返回值
• 执行函数
  • 实参
• arguments
• 函数的底层运行机制

创建函数

1
2
3
4
5

function [函数名]([形参变量1]，...){
    函数体：基于JS完成需要实现的功能
    return[处理后的结果];
}
[函数名]([实参1]，...)

//形参：
//创建函数的时候我们设置了形参变量，但如果执行的时候并没有给传递对应的实参值，那么形参变量默认的值是：undefined，此时若遇到计算，则会出现转换为NaN，因此一般形参会提供默认值

//函数中的返回值：
//函数执行的时候，函数体内部创建的变量我们是无法获取和操作的，如果要想获取内部的信息，我们需要基于return返回值机制，把信息返回才可以，没有写return，函数默认返回值是undefined

//匿名函数：
//匿名函数之函数表达式:把一个匿名函数本身作为值赋值给其它东西，这种函数一般不是手动触发执行，而且靠其它程序驱动触发执行(例如:触发某个事件的时候把它执行等)
document.body.onclick = function () {}|
setTimeout(ffunction(){},1000)
(function(n){})(100); //匿名函数之自执行函数：创建完一个匿名函数，紧接着就把当前函数加小括号执行

浏览器常用的输出方式

1.console.log/dir/table…在控制台输出
.dir : 输出一个对象的详细的键值对信息
.table : 把一个多维json数组在控制台按照表格的方式呈现出来

2.浏览器窗口弹窗 alert/confirm/prompt
=> 三种方式输出的结果就都必先经过toString转换为字符串
=> 三种方式会阻断JS代码执行，只有当窗口关掉，JS才会继续执行

3.document.write在页面中写入信息
=> 先经过toString转换为字符串