day01 初时Javascript

Javascript入门

概述：

Javascript是一门解释型语言，是一门脚本语言（web相关），需要浏览的支持（解析器 谷歌v8引擎）

Javascript是一门弱语言（没有绝对的语法 他的数据类型定义不是由对应的修饰符来定义，而是根据对应的值来定义的（值什么类型变量就是什么类型））

Javascript由三个内容构成：BOM（浏览器对象模型 操作浏览器） DOM（文档对象模型 操作html文档的） ECMAScript（语法规范 es.3 （兼容各大主流浏览器） es.5 （兼容普通版本浏览器） es.6 (兼容相关的高版本浏览器））

Javascript书写位置

内嵌js(不常用）：

<div onclik=(123)>点我弹窗</div>

内联js（写在script标签中 可以放在任何地方 建议放在html后面）

<script>
    var a = 10 //a被定义了 它的值是10 数值类型
    var b ='a' //b被定义了 值为a字符串 字符串类型
    alert(a)
</script>

外联js（通过script标签引入）

<script src="js文件路径"></script>

Javascript代码执行顺序

从上到下按照对应的文档流

JavaScript的变量
变量就是一个存储单位，他会根据你赋的值在内存中开启空间（根据赋值得到对应的类型）
内存空间

变量定义：

采用var关键词来修饰的（也可以不用 默认以var关键词修饰 变量提升 伪全局变量）

var 变量名 = 值

变量命名规范

1.语义化命名 见名知意

2.不能使用关键字和保留字、

3.使用驼峰命名法（首单词的首字母大写其余小写）

var userName = 值

4.不能以数字开头（可以由数字字母下划线以及$符号构成）

var user_name = 值

v8引擎的解析过程

var a = 1

分段（分为一个个token）
组成ast （抽象语法树）去掉无效的符号
根据抽象语法树声明字节码解析
关键词 var
名字 a
符号 =
数字 1

Javascript的数据类型（JavaScript的数据由他的值来决定）

基础数据类型（值类型 不能变的（常量）存储在栈上）

数值类型number

var number = 10

字符串类型string（单引号和双引号表示的都是字符串）

var str = '字符串'
var str = "字符串"

布尔类型boolean（true为真false为假）

var isTrue = true

未定义类型undefined（当前没有给值）undefind是null的派生

var a
console.log(a)

空类型null只有在null值的情况下才为null类型

var isNull = null
console.log（isNull）

引用数据类型（对象地址分配的 可以变的 存储在堆上）

object array function ...

JavaScript的注释

注释是用于标识当前的代码片段的意义 方便之后的开发者进行维护（不会被编译）

单行注释（注释一行）ctrl+/

//我是注释

多行注释（注释多行）shift+alt+a

/*
*这是一个多行注释
*
*
*/

typeof类型检测（原理二进制解析）

用于判断对应的数据类型（检索对应的数据类型）返回对应的数据类型的英文名（字符串）

typeof 变量//返回对应的数据类型的英文

//数值类型
var number = 10
//类型检测 typeof (原理二进制解析) 返回的是一个字符串
console.log(typeof number);
//字符串
var str = 'hello'
var str = '' //空字符串不是空
console.log(typeof str);
//布尔类型
var bool = true
console.log(typeof bool)
//null类型 (空对象引用 typeof值为object)
var obj = null
console.log(typeof obj);
//undefined 未定义
var un = undefined
console.log(typeof un);
// console.log(un == null);
console.log(typeof typeof un);//返回的是一个string

typeof null返回的是一个object的字符串 其他返回的是对应的类型的字符串

function返回的是function object返回的是object array返回的也是一个object

类型转换

基础值类型转换引用数据类型 （装箱）

• String
• Number
• Boolean

  var number = 10
  console.log(typeof number)
  //只要是被new都是引用数据类型
  var obj = new Number(number)
  console.log(typeof obj);
  //String
  var str = 'hello'
  console.log(typeof new String(str))
  //Boolean
  var bool = true
  console.log(typeof new Boolean(bool))
  

引用数据类型转为基础值类型 （拆箱）

• toString 转为字符串

  //obj对象转为字符串 对象中有东西 属性(方法)
  console.log(typeof obj.toString());//转为字符串
  console.log(typeof String(obj));//转为字符串
  //obj对象转为对应的数值
  console.log(typeof Number(obj))
  //obj对象转为对应的布尔类型
  console.log(typeof Boolean(obj))
  console.log(Boolean(obj));
  

基础值类型之间的转换
转为字符串（String 及 toString方法）

• 数值转字符串

• // 数值转换字符串
  var number1 = 10
  var str1 = String(number1)
  console.log(typeof str1);
  

• 布尔类型转为字符串

  //boolean类型转为字符串
  var bool = true
  var str2 = String(bool)
  console.log(typeof str2);

• null及undefined转为字符串

  //null转为字符串
  var nullObj = null
  var str3 = String(nullObj)
  console.log(typeof str3);
  //undefined转为字符串
  var un
  var str4 = String(un)
  console.log(typeof str4);

• toString转换

  //利用toString来转换
  console.log(typeof number1.toString());
  console.log(typeof bool.toString());
  //null和undefined没有toString方法
  // console.log(typeof nullObj.toString());
  // console.log(typeof un.toString());

转为数值类型 （Number 及 parseInt 和 parseFloat）

• 字符串转为数值 无法转换为NaN
• boolean类型转为数值 true为1 false为0
• null转为数值 值为0
• undefined转为数值 值为NaN

  console.log(Number('124345'))
  console.log(Number(null))//null转为数值为0
  console.log(Number(true))//true为1 false为0
  //NaN是数值类型
  console.log(typeof NaN)//number
  console.log(Number(undefined))//NaN Not a Number
  //任意类型转为数值的时候 无法进行转换就会出现NaN
  console.log(Number('abc'))//NaN
  console.log(Number('1234abc'))//NaN
  //parseInt 转整型 (切割前面的内容) parseFloat(保留小数) 转浮点型
  console.log(parseInt('1234.123abc'))
  console.log(parseInt('a123.123abc'))//NaN
  console.log(parseFloat('a123.123'))//NaN
  console.log(parseFloat('1234.123abc'))

转为boolean类型 （Boolean在条件表达式下自动转为布尔类型）

• 数值转为boolean类型 非0及NaN都是true
• 字符串转为boolean类型 非空字符就是true
• null和undefined转为boolean类型 都是false
   

//数值转为boolean类型 非0及NaN都是true
console.log(Boolean(123))
console.log(Boolean(0))
console.log(Boolean(NaN))
//字符串转为boolean类型 非空字符就是true
console.log(Boolean(''))
console.log(Boolean(' '))
console.log(Boolean('123'))
//null和undefined转为boolean类型
console.log(Boolean(null))
console.log(Boolean(undefined))

Number

• NaN 无法被转换为数值的时候出现的
• infinity 无穷大

  //常量值
  console.log(Number.MAX_SAFE_INTEGER)
  console.log(Number.MAX_VALUE)
  console.log(Number.MIN_SAFE_INTEGER)
  console.log(Number.MIN_VALUE)
  console.log(Number.NaN) //NaN的值
  console.log(Number.NaN,NaN)
  //无法被转换为数值的时候出现NaN abc 转为数值 dfg 转为数值
  console.log(NaN == NaN)//false
  //无穷大
  console.log(Number.NEGATIVE_INFINITY,-Infinity) //负无穷大
  console.log(Number.POSITIVE_INFINITY,Infinity) //正无穷大
  console.log(-Infinity == Number.NEGATIVE_INFINITY)

  
  
  数据类型大的转小的是显式转换 小的转大的是隐式转换（string>number>boolean>undefined）
  任意类型转字符串（toString方法调用（undefined和null不能使用） String方法调用）
  任意类型转number类型
  使用number方法转换
  使用parseInt 或者parseFloat （截取）

var number = 10
var str = number.toString()
var str1 = String(number)
console.log(typeof str)
console.log(typeof str1)
var bl = true
var strBl = bl.toString()
var strBl1 = String(bl)
console.log(typeof strBl);
console.log(typeof strBl1);
//undefined是不能调用toString
var un
// var unStr = un.toString() //报错
var unStr = String(un)
console.log(typeof unStr)
var str = '123'
var number1 = Number(str)
console.log(number1)
var str1 = '12.1a3a'
var number2 = Number(str1)
// not a number 当出现无法转换的内容的时候 会出现NaN NaN是属于number类型的
console.log(number2)
console.log(typeof number2)
// parseInt 转换为整型 parseFloat 转换浮点类型
//从前面开始截取能够转换的数值 如果前面没有可以转换的数值那么结果就是NaN
var number3 = parseInt(str1)
console.log(number3);
var number4 = parseFloat(str1)
console.log(number4);
//转换布尔类型的时候 true会转成1 false会转成0
var bool = false
var number5 = Number(bool)
console.log(number5);
//und无法转换为number 会出现NaN的值
var und
var number6 = Number(und)
console.log(number6)
//null转为number类型会出现0
var n = null
var number7 = Number(n)
console.log(number7);

注意事项
任意类型转number类型无法转换会出现NaN NaN属于数值类型
null转number结果为0 undefined转number结果为NaN
isNaN专门判断当前是否是NaN类型
出现NaN返回true 没有返回false
转换为boolean类型
Boolean方法
注意事项
string类型转boolean非空就是true 空字符串为false
number类型转boolean 非0和非NaN就是true 0和NaN为false
undefined和null转换boolean都是false
number的特殊值
NaN 当你需要转为number类型的时候转换不成功出现的值

console.log(isNaN(NaN));//ture
// 任意类型转boolean
var str = '' //非空则为true
console.log(Boolean(str))
var number = 0 //非0和非NaN则为true
console.log(Boolean(number))
// undefined和null转换为boolean都是false
console.log(Boolean(undefined))
console.log(Boolean(null))
var nan = NaN //表示当前无法转换为number类型
//无穷大 无穷小
var number1 = +Infinity //无穷大
var number2 = -Infinity //无穷小
console.log(typeof number1)
+ - * / % ++ --
//数值的运算
var number1 = 10
var number2 = 20
console.log(number1+number2);//30
console.log(number1-number2);//-10
console.log(number1*number2);//200
console.log(number1/number2);//0.5
//大数取小数得到的是余数 小的数取大的数得到的是本身(小的数)
console.log(number1%number2);//10
console.log(40%2);//0

运算符
算术运算符

+ - * / ++ --

+特殊的算术运算符

• 对于有字符串的值进行+ 那么对应的+号做的连接 返回的是字符串
• 如果没有字符串那么其他的会被转为number类型进行运算（其他类型还是会被转为number）
• 其他的算术运算 （会将对应的值转为number类型进行运算 如果出现NaN 那么结果就是NaN）
• ++
• 前置先执行+1操作再执行本行代码 ++后置就是先执行本行代码再执行++

console.log(40%3);//1
console.log(5%3);//2
console.log(3%5);//3
//+法运算 如果对应的有一个值的类型是字符串 那么得到就是字符串类型 (字符串进行拼接)
console.log('1'+2); //12
console.log('1'+true); //1true
console.log('1'+undefined); //1undefined
console.log('1'+null); //1null
//除此之外的所有都是会转为对应的数值然后进行运算 默认的转换用到的是number方法
console.log(null+true);//1
console.log(undefined+true);//NaN NaN进行任何数值运算得到的数值都是NaN
console.log(undefined*true);//NaN NaN进行任何数值运算得到的数值都是NaN
console.log(null*true);//0
console.log('123'/1);
console.log('123a'/1);
var number = 10
number++ //number=number+1
console.log(number)//11
var number = 10
number-- //number=number-1
console.log(number)//9
var number = 10
number++ //number=number+1
console.log(number) //11
number-- //number=number-1
console.log(number) //10
//++前置和后置 --前置和后置
//前置先执行 先+再执行其他的代码
//后置后执行 先走了对应的其他代码以后再执行++操作
console.log(number++);//10
console.log(number);//11
console.log(++number);//12
console.log(--number);//11
console.log(number--);//11
console.log(number);//10

逻辑运算符
&& || !

• &&都为真就是真(取得最后一个真) 只要有一个是假得就是假(第一个假)
• ||有一个是真就是真(取第一个真) 如果全部为假就是假(最后一个假)
• ！ 取反

// && 与 俩个都是true 则返回true(最后一个true) 有一个是false就返回false (第一个false)
console.log(true && 1)//1
console.log(0 && false)//0
console.log('0' && undefined && NaN)//undefined
console.log('undefined' && 10 && 20)//20
// || 或 有个true直接取第一个true 如果都是false取最后一个false
console.log(true || 1)//true
console.log(0 || false)//false
console.log('0' || undefined || NaN)//'0'
console.log('undefined' || 10 || 20)//'undefined'
// ! 非 取反操作 将对应的真的变假的 假的变真的 返回的结果是一个boolean类型
console.log(!1);//false
> < = >= <= == === != !==

注意事项
undefined==null为true undefined===null 为false
字符串和字符串相比较那么对应的比较的ascii码（先比首字母 大写字母比小写字母要小 排在前面
比后面的要小）
在对应的非数值的比较上会自动转为数进行比较
NaN==NaN为false 在正常比较中没有取反符号的情况下出现NaN就是false
恒等是基于==之上的 ==为false对应的恒等必定为false（==只比较值 ===要比类型）
条件运算符
返回的是一个boolean类型的值 （true或者false）

> < = >= <= == === != !==

• NaN ！= NaN
• 对象之间不能直接比对（比对的是地址值）

var a = 10
var b = 20
console.log(a>b);//false
console.log(a<b);//true
//不同类型的比较
// 字符串和对应的数值比较 比较的过程会进行数值类型的转换 NaN 出现NaN结果就是false
var str = 'abc'
var str1 = '123'
console.log(str>a);//false 出现了NaN
console.log(str1>a);//true
//其他的比较也是同样的
var bool = true
console.log(bool<2);//true
console.log(bool>null);//true
console.log(bool>undefined);//false undefined会转换NaN
//== 判断俩个值是否相等 进行转换操作
console.log('123'==123);//true 字符串的数值和普通数值进行比较他是返回true
console.log(true==1);//true
console.log(NaN==NaN);//false
console.log(undefined==null);//true
console.log(NaN!=NaN);//true
//=== 恒等 全等俩个类型以及值完全相等 基于==
console.log('123'===123);//false
console.log(NaN===NaN);//false
console.log(undefined===null);//false

赋值运算符
=  +=  -=  *=  /=  %= 

// 赋值运算 =
var a = 10
a+=10 //a=a+10 20
a*=10 //a=a*10 200
a/=10 //a=a/10 20
a-=10 //a=a-10 10
a%=2 //a=a%2 0
console.log(a);//0
<< >>
// 怎么快速把2变成8 后面补零
console.log(2<<2);
var number = 8
console.log(number.toString(2))
var str = '1f' //16进制的字符串
console.log(parseInt(str,16))//将16进制转为10进制

位移运算符 << >>
位移运算是将对应的数值转为二进制进行移位运算（将一个数值转为二进制使用除二取余法）

// 怎么快速把2变成8 后面补零
console.log(2<<2);

位运算符（解析成二进制进行运算）

& < > | ^

扩展内容（进制转换）
常用的进制分为 2进制 4进制 8进制 16进制（颜色设置 最的值为f）
将对应的10进制转为其他进制得到的是字符串 toString 除进制法

var number = 8
console.log(number.toString(2))

将其他进制转为10进制得到就是数值 parseInt 乘进制法

var str = '1f' //16进制的字符串
console.log(parseInt(str,16))//将16进制转为10进制