JavaScript之从头再来

引入文件

1. 引入外部文件

<script type="text/javascript" src="JS文件"></script>

2. 存放在HTML的<head>或<body>中

<script type="text/javascript">
    Js代码内容
</script>

HTML的head中

HTML的body代码块底部(推荐)

3. 为什么要放在<body>代码块底部？

HTML代码从上到下执行，先加载CSS，避免html出现无样式状态；

将JavaScript代码块放在<body>最后，可以让网页尽快的呈现给用户，减少浏览者的等待时间，避免因为JS代码块阻塞网页的呈现。

变量

需要注意的是：局部变量必须以 var 开头申明，如果不写 var 则为全局变量

<script type="text/javascript">
  
    // 全局变量
    name = 'nick';
  
    function func(){
        // 局部变量
        var age = 18;
  
        // 全局变量
        gender = "man"
    }
</script>

注：需要注意变量提升，就是把变量位置放到函数体的最上方

运算符

1. 算术运算符


+ 一元加，数值不会产生影响	对非数值应用一元加运算时，会调用Number()转型函数对这个值进行转换
- 一元减，转换为负数	~
++ 递增1	通过Number()转型为数字，再加1，再重新赋值给操作数值
-- 递减1	~
二元算术
+ 加法
- 减法
* 乘法
/ 除法
% 取模

1> 如果其中一个操作数是对象，则对象会转换为原始值：日期对象通过toString()方法执行转换，其他对象通过valueOf()方法执行转换。如果结果还不是原始值，则再使用toString()方法转换
2> 在进行了对象到原始值的转换后，如果其中一个操作数是字符串的话，另一个操作数也会转换成字符串，进行字符串拼接
3> 两个操作数都将转换成数字或NaN，进行加法操作

二元运算过程

2. 比较运算符

=== 严格运算符	比较过程没有任何类型转换
!== 严格运算符	===的结果取反
== 相等运算符	如果两个操作值不是同一类型，相等运算符会尝试进行一些类型转换，然后再进行比较
!= 不相等运算符	==的结果取反
> 大于运算符
>= 大于等于运算符
< 小于运算符
<= 小于等于运算符

1> 如果两个值类型不同则返回false
2> 如果两个值类型相同，值相同，则返回true，否则返回false
3> 如果两个值引用同一个对象，则返回true，否则，返回false
console.log([] === []);//false
console.log({} === {});//false
var a = {};
b = a;
console.log(a === b);//true

严格运算符比较过程

对象类型和原始类型比较：
1> 对象类型会先使用valueOf()转换成原始值，如果结果还不是原始值，则再使用toString()方法转换，再进行比较（日期类只允许使用toString()方法转换为字符串）
2> 在对象转换为原始值之后，如果两个操作数都是字符串，则进行字符串的比较
3> 在对象转换为原始值之后，如果至少有一个操作数不是字符串，则两个操作数都将通过Number()转型函数转换成数字进行数值比较

注：如果一个值是null，另一个值是undefined，则返回true;
console.log(null == undefined);//true
如果一个值是null，另一个值是0，则返回tfalse;
console.log(null == 0);//false
空字符串或空格字符串会转成0
console.log(null == []);//false
console.log(null == '');//false
console.log([] == ' ');//false，相当于'' == ' '
console.log([] == '');//true，相当于'' == ''
console.log(0 == '');//true

相等运算符比较过程

数字和字符串比较：
1> 如果操作值是对象，则这个对象将先使用valueOf()转换成原始值，如果结果还不是原始值，则再使用toString()方法转换
2> 在对象转换为原始值之后，如果两个操作数都是字符串，则按照unicode字符的索引顺序对两个字符串进行比较
3> 在对象转换为原始值之后，如果至少有一个操作数不是字符串，则两个操作数都转换成数字进行比较
console.log('B' > 'a');//false
console.log('b' > 'a');//true
console.log(9 > '2');//true

大于小于运算符比较过程

3. 逻辑运算符

! 非（两个!!表示Boolean()转型函数）	返回一个布尔值
&& 与	两个操作都为true时返回true，否则返回false（返回值不一定是布尔值），可以多个连用（..&&..&&..）
\|\| 或	两个操作都是false时返回false，否则返回true（返回值不一定是布尔值），可以多个连用（..\|\|..\|\|..）

//七个假值：
console.log(!!undefined);//false
console.log(!!null);//false
console.log(!!0);//false
console.log(!!-0);//false
console.log(!!NaN);//false
console.log(!!'');//false
console.log(!!false);//false
 
console.log(!!{});//true
console.log(!![]);//true

1> 取代if语句
//前面条件成立则运行后面操作
(a == b) && dosomething();

2> 用于回调函数
//若没有给参数a传值，则a默认为undefined假值，所以不执行a()。
function fn(a){
    a && a();
}

&& 常用操作

1> 变量设置为默认值
//如果没有向参数a传入任何参数，则将该参数设置为空对象
function func(a){
    a = a || {};
}

|| 常用操作

数据类型

特殊值：

null　　　　　　表示一个空对象指针，常用来描述"空值"；

undefined　　表示变量未定义

1、数字(Number)

JavaScript中不区分整数和浮点数，所有数字均用浮点数值表示。

转换：

parselnt()　　　将某值转换成整数，不成功则NaN

parseFloat() 将某值转换成浮点数，不成功则NaN

特殊值：

NaN，非数字。可以使用isNaN(num)来判断。

Infinity，无穷大。可以使用isFinite(num)来判断。

Number	对数字的支持
Number.MAX_VALUE	最大数值
Number.MIN_VALUE	最小数值
Number.NaN	非数字
Number.NEGATIVE_INFINITY	负无穷大
Number.POSITIVE_INFINITY	正无穷大
Number.toExponential( )	返回四舍五入的科学计数法，加参数为保留几位
Number.toFixed( )	小数点后面的数字四舍五入，加参数为保留几位
Number.toPrecision( )	四舍五入，自动调用toFixed()或toExponential()
Number.toLocaleString( )	把数字转换成本地格式的字符串
Number.toString( )	将数字转换成字符串
Number.valueOf( )	返回原始数值

2、字符串（String）

String.length	字符串的长度
String.trim()	移除空白
String.trimLeft()	移除左侧空白
String.trimRight()	移除右侧空白
String.concat(value, ...)	拼接
String.slice(start, end)	切片
String.split( )	分割
String.search( )	从头开始匹配，返回匹配成功的第一个位置(g无效)
String.match( )	全局搜索，如果正则中有g表示找到全部，否则只找到第一个
String.replace( )	`替换，正则中有g则替换所有，否则只替换第一个匹配项；` `$数字：匹配的第n个组内容；` `$&：当前匹配的内容；` $`：位于匹配子串左侧的文本； `$'：位于匹配子串右侧的文本` `$$：直接量$符号`
String.charAt( )	返回字符串中的第n个字符
String.charCodeAt( )	返回字符串中的第n个字符的代码
String.fromCharCode( )	从字符编码创建—个字符串
String.indexOf( )	查找子字符串位置
String.lastIndexOf( )	查找子字符串位置
String.localeCompare( )	用本地特定的顺序来比较两个字符串
String.substr( )	抽取一个子串
String.substring( )	返回字符串的一个子串
String.toLocaleLowerCase( )	把字符串转换小写(针对地区，在不知道程序在哪个语言环境中运行时用)
String.toLocaleUpperCase( )	将字符串转换成大写(针对地区)
String.toLowerCase( )	小写
String.toUpperCase( )	大写
String.toString( )	返回原始字符串值
String.toString()	返回原始字符串值
String.valueOf( )	返回原始字符串值

 空字节

 换行
	 制表
 空格

 回车
f 进纸
\ 斜杠
' 单引号
" 双引号

转义字符

3、布尔类型（Boolean）

true（真）和false（假）

toString()	返回Boolean的字符串值('true'或'false')
toLocaleString()	返回Boolean的字符串值('true'或'false')
valueOf()	返回Boolean的原始布尔值(true或false)

4、数组（Array）

var name = Array("nick","jenny");
var name = ["nick","jenny"];

Array.length	数组的大小
Array.push()	尾部添加元素
Array.pop()	删除并返回数组的最后一个元素
Array.unshift()	在数组头部插入一个元素
Array.shift( )	在数组头部移除一个元素
Array.slice( )	切片
Array.reverse( )	反转
Array.join( )	将数组元素连接起来以构建一个字符串
Array.concat( )	拼接
Array.sort( )	排序
Array	对数组的内部支持
Array.splice( start, deleteCount, value, ...)	插入、删除或替换数组的元素 `obj.splice(n,0,val) 指定位置插入元素` `obj.splice(n,1,val) 指定位置替换元素` `obj.splice(n,1) 指定位置删除元素`
Array.toLocaleString( )	把数组转换成局部字符串
Array.toString( )	将数组转换成一个字符串