前端从0单排之JS------Day1笔记

一、JavaScript
JS:轻量级的客户端脚本编程语言

1. 编程语言
   HTML+CSS是标记语言
   编程语言是具备一定逻辑的，拥有自己的编程思想(面向对象编程[OOP]、面向对象编程、面向过程编程[])

• 面向对象
  • C++
  • PHP
  • C# (.net)
  • JS
  • …
• 面向过程
  • C

2. 目前的JS已经不仅仅是客户端语言了，基于NODE可以做服务端程序，所以JS是全栈编程语言
3. 学习JS，我们学习它的几部分组成
   • ECMAScript(ES) : JS的核心语法
   • DOM： document object model 文档对象模型，提供各种API（属性和方法）让JS可以获取或操作页面中的HTML元素(DOM元素)
   • BOM: browser object model 浏览器对象模型,提供各种API让JS可以操作浏览器

二： ESMAScript
它是JS的语法规划，JS中的变量、数据类型、语法规范、操作语句、设计模式等等都是ES规定的

---

三、 变量(variable)

​ 它不是具体的值，只是一个用来存储具体值的容器或者代名词，因为它存储的值可以改变，所以称为变量

​ 基于ES语法规范，在JS中创建变量有以下方式

• var （ES3）
• function （ES3） 创建变量（函数名也是变量，只不过存储的值是函数类型的而已）
• let（ES6）
• const（ES6） 创建的是常量
• import （ES6） 基于ES6的模块规范导出需要的信息
• class（ES6） 基于ES6创建类

/*
	语法:
	var [变量名] = 值
	let [变量名]  = 值
	const [变量名] = 值
	function 函数名（） ｛
		代码块...
	｝
	...
*/

创建变量，命名的时候要遵循一些规范

• 严格区分大小写

• 遵循驼峰命名法：按照数字、字母、下划线来命名（数字不能作为名字的开头），命名的时候基于英语单词拼接成一个完整的名字（第一个单词字母小写，其余每一个有意义单词的首字母都大写）

• 不能使用关键字和保留字：在JS中有特殊含义的叫做关键词，未来可能会成为关键字的叫做保留字

  var studentInfo ;
  	_studentInfo(下划线在前的，都是公共变量)
  	$studentInfo(一般存储的是JQ元素)...
      
  语义化强一些
  add / create /insert
  del(delete) / update / remove (rm)
  info / detail
  log
  ...
  

四、 数据值是一门编程语言进行生产的材料，JS中包含的值有以下这些类型

• 基本数据类型（值类型）
  • 数字number
  • 字符串 string
  • 布尔值 boolean
  • null
  • undefined
• 引用数据类型
  • 对象object
    • 普通对象
    • 数组对象
    • 正则对象
    • 日期对象
    • …
  • 函数function
• ES6中新增的一个特殊类型：Symbol，唯一的值

[基本数据类型]
var n = 13; // =>0 -13 13.2 数字类型中有一个特殊的值NaN（not a number代表不是一个有效的数字，但是属于number类型的）

var s = ''; // =>"" "13" "{}" JS 中所有用单引号或双引号包裹起来的都是字符串，里面的内容是当前字符串中的字符（一个字符串由零到多个字符组成）

var b = true; // => 布尔类型只有两个值 true真 false假

[引用类型]
var o = {name:'Tail',age:9}; // => 普通的对象：由大括号包裹起来，里面包含多组属性名和属性值（包含多组键值对）{}空对象
var arr = [12,23,34,45]; // => 中括号包裹起来，包含零到多项内容，这种是数组对象 [] 空数组
var reg = /-？(\d|([1-9]\d+))(\.\d+)?/g; // => 由元字符组成一个完整的正则 // 不是空正则是单行注册
function fn() {
    
}
[Symbol]
创建出来的是一个唯一的值
var a = Symbol('Tail');
var b = Symbol('Tail');
a==b false

扩展：JS代码如何被运行以及运行后如何输出结果

[如何被运行]

• 把代码运行在浏览器中（浏览器内核来渲染解析）
• 基于NODE来运行（NODE也是一个基于V8引擎渲染和解析JS的工具）

[如何输出结果]

• alert:在浏览器中通过弹窗的方式输出（浏览器提示框）

var num = 12;
alert(num); // => window.alert 
var str = "Tail";
alert(str);
alert(1+1); // '2'
alert(true); // => 'true'
alert([12,23]) // => '12,23'
alert({name:'xxx'}) // => '[object Object]'

• confirm: 和alert的用法一致，只不过提示的框有确定和取消按钮，所以它是确认提示框

  var flag = confirm('确定要退出吗？');
  if(flag) {
      确认按钮
  }else {
      取消按钮
  }
  

• prompt: 在confirm的基础上增加输入框

• console.log：在浏览器控制台输出日志（按F12（FN+F12）打打开浏览器的控制台）

  • Elements:当前页面中的元素和样式在这里都可以看到，还可以调节样式修改结构等
  • Console：控制台，可以在JS代码中通过.log输出到这里，也可以在这里直接的编写JS代码
  • Soures:网站源文件
  • …

• console.dir： 比log输出的更加详细一些（尤其是输出对象数据值的时候）

• console.table：把一个JSON数据按照表格的方式输出

• …

五、数据类型的详细剖析

1. number 数字类型

   NaN: not a number 但是它是数字类型的

   isNaN: 检测当前值是否不是有效数字，返回true代表不是有效数字，返回false是有效数字

   语法：isNaN([value])
   var num = 12;
   isNaN(num); // =>false
   isNaN(true) // =>false
   isNaN(false) // =>false
   isNaN('12') // =>false
   isNaN('Tail') // =>false
   isNaN(null) // =>false
   isNaN(undefined) // =>true
   isNaN({name:'tail'}) // =>true
   isNaN([12,23]) // =>true
   isNaN([12]) // =>false
   isNaN(/^g/) // => true
   isNaN(function(){}) // => true
   
   

   PS：isNaN检测的机制
   1、首先验证当前检测的值是否为数字类型的，如果不是，浏览器会默认把值转换为数字类型
   把非数字类型的值转换为数字

   • 其他基本类型转换为数字：直接使用Number这个方法转换的
     [字符串转数字]

     Number('12') // =>12
     Number('12px') // => NaN 如果当前字符串中出现任意一个非有效数字字符，结果则为NaN
     Number('13.5') // => 13.5 可以识别小数
     Number('13.5.0') // => NaN
     

     [布尔转数字]

     Number(true) // => 1
     Number(false) // => 0
     

     [其它]

     Number(null) // =>0
     Number(undefined) // =>NaN
     

   • 把引用数据类型值转换为数字：先把引用值调用toString转换为字符串，然后再把字符串调用Number转换为数字

     [对象]

     ({}).toString() // =>'[object Object]' => NaN
     

     [数组]

     [12,23].toString() => '12,23' => NaN
     [12].toString() => '12' = >12
     

     [正则]

     /^$/.toStrng() => '/^$/' => NaN
     

     PS:

     Number('') => 0
     [].toStrng() => '' 
     

   2、当前检测的值已经是数字类型，是有效数字返回false，不是返回true(数字类型只有NaN不是有效数字，其余都是有效数字)

2. parseInt / parseFloat

   等同于Number ， 也是为了把其它类型的值转换为数字类型

   和Number的区别在于字符串转换分析上

   Number：出现任意非有效数字字符，结果就是NaN

   parseInt：把一个字符串的整数部分解析出来，parseFloat是把一个字符串中小数（浮点数）部分解析出来

   parseInt('13.5px') // => 13
   parseFloat("13.5px") // => 13.5
   parseInt('width:13.5px') // => NaN 从字符串最左边字符串开始查找有效数字字符，并且转换为数字，但是一旦遇到一个非有效数字字符，查找结束
   

3. NaN的比较

   NaN == NaN // false NaN和谁都不相等，包括自己
   

   思考题：检测一个变量是否是有效数字

   if(Number(num)==NaN) {
       alert('num不是有效数字')
   }
   NaN和谁都不相等，条件永远不成立（即使num确实不是有效数字，转换的结果确实是NaN，但是NaN！=NaN）
   方法：
   if(isNaN(num)) {
       alert('num不是有效数字')
   }
   

   布尔类型

   只有两个值：true/false

   如何把其它数据类型转换为布尔类型？

   • Boolean

   • !

   • !!

     Boolean(1) // => true
     !'Tail' // => 先把其它数据类型转换为布尔类型，然后取反
     !!null => 取两次反，等价于没有取反，也就剩下转换为布尔类型了
     
     

     规律：** 在JS中只有“0/NaN/空字符串/null/undefined”这五个值转换为布尔类型的false，其余都转换为true **

---

null && undefined

都代表空或者没有

• null：空对象指针

• undefined：未定义

  null 一般都是意料之中的没有（通俗理解:一般都是人为手动的先赋值为null，后面的程序中我们会再次给他赋值）

  var num = null; // => null是手动赋值，预示着后面我会把num变量的值进行修改
  

  undefined代表的没有一般都不是人为手动控制的，大部分都是浏览器自主为空（后面可以赋值也可以不赋值）

var num ; // => 此时变量的值浏览器给分配的就是undefined