JavaScript基础语法

---

序言

1.JavaScript学习方法：
编程思维：更高效的解决问题、更全面的思考、更清晰的逻辑
布鲁姆教育将思维学习分六个层次：
记忆、理解、应用、分析、评价、创造


2.什么是JS：
JavaScript 直译式、动态类型、弱类型、基于原型的脚本语言
js跨平台 ==> windows linux ios 安卓 …


3.JS发展史：
==>1994年，网景公司(Netscape)发布了Navigator浏览器0.9版
==>发明一种全新的语言。
==> liveScript ==> javaScript ==> ECMAscript

• 1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运 行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。
• 网景公司动了心，决定与Sun公司结成联盟
• 34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他,他只用10天时间就把Javascript设计出来了。（多态语言）
  
  

4.JS组成部分：

ECMAScript语法
DOM文档对象模型(Document Object Model)
BOM浏览器对象模型(Browser Object Model)

---

一、JS用法

1.js引入方式，内嵌式

用法：内嵌式的 js 代码会在页面打开的时候直接触发
代码如下（示例）：

<!-- 在 html 页面书写一个script 标签，标签内部书写 js 代码 -->

<script type="text/javascript">
//type 书写值可写可不写
	alert("这是一个弹窗");
</script>

<!--
scirpt标签可以放在 head 里面也可以放在 body 里面
 -->

2.js引入方式，行内式

用法：写在标签上的 js 代码需要依靠事件（行为）来触发
代码如下（示例）：

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('这是一个弹窗');">点击试试</a>

<!-- 写在其他元素上 -->
<div onclick="alert('这是一个弹窗')">点击试试</div>

<!--
onclick(点击事件)：当点击元素的时候执行后面的 js 代码
-->

3.js引入方式，外链式

用法：新建一个 .js 后缀的文件，在文件里书写 js 代码，通过script标签的src引入外部js后缀的文件
代码如下（示例）：

//我是 index.js 文件
alert("这是一个弹窗");

<!--很多html页面都可以调用js4.js页面-->
<script src="../js/js4.js" type="text/javascript" charset="utf-8">

二、JS调试与注释

1.调试方法

代码如下（示例）：

alert(“123”) 	// 弹出提示框输出
console.log(”123“)  // 在控制台打印：
document.write('123')		//在页面中输出<不推荐使用>

2.调试代码的流程

1. 看是否有报错
2. 单词错误
3. 输出调试各种数据（变量）
4. 思考怎么解决（查看比较，百度，看文档）

3.关于注释

1. 最讨厌别人让我写注释
2. 最讨厌别人不写注释
   代码如下（示例）：

// 单行注释，注释内容不可以换行  ctrl+/

/* 多行注释  alt+shift+a			(Visual Studio Code)
注释内容
可以换行
 */

/**
* 文档注释
* 说明类、方法的参数及使用方式。。。
* 功能介绍
*/

三、JS变量

一个变量名只能储存一个值
当再次给一个变量赋值的时候，前面一次的值就会被覆盖掉
变量名严格区分大小写
代码如下（示例）：

var abc = 123
// 把123这个数据赋值给变量abc

1.使用关键字var

var str = 'abc'; 	// 显式声明变量

2.声明变量可以不给初始值

var num 			// 显式声明变量

3.声明变量可以不使用关键字var

age = 18 			// 隐式声明变量
console.log( age )	// 18  引用变量

4.但是不允许直接使用一个未声明的变量，会报错

console.log( word );
// Uncaught ReferenceError: hehe is not defined   at 4-变量.html:25
// 未捕获     引用错误     ：word 未定义 (报文)           报错位置

5.标识符（变量、函数、属性、参数，你自己命名的东西）命名规范：

/*
    1.第一个字符不能是数字，可以字母、下划线、美元符号$
    2.命名中不能包含空格
    3.从第二个字符开始可以是数字、字母、下划线、美元符号$
    4.标识符命名要语义化（有语义有含义）非必须
    5.不可以使用关键字和保留字命名
*/
var var = 123
console.log( var )
//Uncaught SyntaxError: Unexpected token 'var'    4-变量.html:37 
//            语法错误

6.语义化命名规范：

var userAgeNumber = 23		//驼峰命名法
var UserAgeNumber = 23		//帕斯卡命名法
var user_age_number = 23		//下划线命名法

var num_user_age = 23
var nUserAge = 23			//匈牙利命名法

四、JS数据类型

• ES3 有 5 种基本数据类型：number、null、undefined、boolean、string；1 种复杂数据类型 object。ES6+ 后面新增了两种基本数据类型：Symbol, Bigint。如果把函数 function 也算作一种数据类型，就是 9 种。

---

1.number数字类型

• 一切数字都是数值类型（包括二进制、十进制、十六进制）
• NaN：非数字类型
• 正数、负数、整数、浮点数、NaN 都叫 number
• NaN ： Not a Number 非数字，代表错误的计算结果
  NaN特性：

1. 任何与NaN进行计算结果都是NaN

console.log( 1 + NaN )// NaN
console.log( 1 - NaN )// NaN

2. NaN与任何值都不相等，包括它自己也不相等

console.log( NaN === NaN )// false

isNaN() 判断一个数据是否为NaN，返回布尔值

console.log( isNaN(NaN) )		//true
console.log( isNaN(123-'a') )		//true
console.log( isNaN(123) )		//false
console.log( isNaN('123') )		//false
console.log( isNaN('a123') )	//true
console.log( isNaN( Number('123') ) )
console.log( isNaN( Number('a123') ) )
console.log( Number('123') )	//123
console.log( Number('a123') )	//NaN

isNaN 判断一个值是否为纯数字字符串

var qq = '2437325196'
console.log( isNaN(qq) )

小数加减出现的系统bug

console.log( 0.1 + 0.2 )// 0.30000000000000004
console.log( 0.1 + 0.7 )// 0.7999999999999999

产生原因：

10进制小数转2进制：小数位乘以2，取整数部分，如果还有小数部分继续
于是出现了无限循环小数

解决方案：转成整数计数

var val = 0.1+0.2;
//转成整数计数，转成字符串输出
var price = (0.1*100 + 0.2*100)/100
//将数字转成字符串，并保留2位小数
var v = price.toFixed(2)
console.log( v )// '0.30'

Number类型常用的两种解析方法：

1. parseInt 解析整数

从左往右解析，如果第一个字符是非数字，则返回NaN
从左往右解析，一直解析到非数字，解析结束，并返回前面解析到的整数

console.log( parseInt(23.45) )// 23
console.log( parseInt('23.45') )// 23
console.log( parseInt('200px') )// 200
console.log( parseInt('a200px') )// NaN

2. parseFloat 解析浮点数，解析规则基本同上

console.log( parseFloat(23.45) )// 23.45
console.log( parseFloat('23.45') )// 23.45
console.log( parseFloat('200px') )// 200
console.log( parseFloat('a200px') )// NaN

2.string字符串（用双引号或单引号括起来的都会被解析成字符串）

var str1 = '123'
var str2 = "abc"
var str3 = '你好'
var str4 = 'str1'

//变量.toString()中null 和 undefined 数据类型不能使用
//String()所有数据类型都可以使用
//使用加法运算符
//在 JS 里面，+ 由两个含义
//字符串拼接：只要+任何一边是字符串，就会进行字符串拼接
//加法运算：只有+两边都是数字的时候，才会进行数学运算

3.boolean 布尔值

var bool1 = true;
var bool2 = false;

//在 js 中，只有''、0、null、undefined、NaN，这些是false，其余都是true

4.undefined 值未定义

var a
var b = undefined
console.log( a ) // undefined
console.log( b ) // undefined

5.null 空值/空对象的引用

var obj = null
obj = {
     }

6.Object 对象类型 （Array {} function）

Array数组

var arr = [1,2,3]//数组

对象{}

var obj = {
     key:'value'}// 键值对

函数

var fun = function (){}

typeof 运算符(返回运算数据的数据类型)，返回有6种：

console.log( typeof 123 )// 'number'
console.log( typeof 'abc' )// 'string'
console.log( typeof true )// 'boolean'
console.log( typeof undefined )// 'undefined'
console.log( typeof [1,2,3] )// 'object'
console.log( typeof {
     a:123} )// 'object'
console.log( typeof function (){
     } )// 'function'  ECMA规定
console.log( typeof null )// 'object'

五、运算符

运算符

1. 赋值运算符：= += -= *= /= %=

var abc = 8
abc += 2		
//等价于：abc = abc + 2

abc %= 3
//等价于：abc = abc%3
//其余同理

2. 算术运算符：+ - * / %

易错点：
//一个小的数模大的数，余小的数
2%7 == 2              
(-2)%7 == -2          
2%(-7) == 2           
(-2)%(-7) == -2       

//余数的正负号取决于前面数字的正负号
7%4 == 3
(-7)%4 == -3
(7)%(-4) == 3
(-7)%(-4) == -3

3. 关系运算符（比较运算符），始终返回布尔值

等于: ==

只比较值是否相等，不考虑数据类型

console.log( 2 == '2' )		//true

全等: ===

既要值相等也要数据类型相等（对于引用类型则比较内存地址）

console.log( 2 === '2' )// false
console.log( {
     } === {
     } )//false

比较规则

// 两个数字比较，正常比较大小
console.log( 2 > 3 )// false

// 一个数字和纯数字字符串比较，把纯数字字符串转成number再比较
console.log( 2 > '12' )// false

// 两个字符串比较，先比较第一个字符的ASCII码值，不能区分大小再比较后一位
console.log( '3' > '21' )//true
console.log( 'abc' > 'abd' )//false
0 -- 48   a -- 97   A -- 65

// 非正常比较都返回false
// 一个数字和非纯数字字符串无法比较，返回false
console.log( 2 > 'a12' )// false
console.log( 2 < 'a12' )// false

自增（++）自减（–）运算符

var i = 1
var num = 2
num = i++ 			// ++后置，先取值，再自增
num = ++i 			// ++前置，先自增，再取值
console.log( num )	// 1  2


var k = 0
console.log( k++ + ++k + k * 2 + k++ )// 8
//            0  +  2  + 2 * 2 + 2

逻辑运算符:与 &&、或 ||、 非 !

返回值：布尔值

//&&运算符
console.log( true&&true )// true
console.log( false&&true )// false
console.log( true&&false )// false
console.log( false&&false )// false
console.log( true||true )//true
console.log( true||false )//true
console.log( false||true )//true
console.log( false||false )//false
console.log( !true )//false
console.log( !false )//true

//短路操作:如果判断前一个结果就能决定整体的结果，
//那么程序不会去执行后续的语句
//符号左边必须为true并且右边也是true，才会返回true
//只要有一边不是true，那么就会返回false
var a = 3
var b = 4
var c = 5
a>b&&(c=6)
console.log( c )//5
//a>b为false,逻辑表达式的结果已经确定（false），所以不会执行后续的赋值语句：(c=6)
a<b&&(c=6)
console.log( c )//6

a<b&&console.log(123)
//等同于：
if (a<b) {
     
  console.log(123)
}



//||运算符
a>b||(c=7)
console.log(c)//7

a<b||(c=7)
console.log(c)//5
console.log( 0||2 )//2
console.log( 1||2 )//1
console.log( a<b||2 )//true
console.log( a>b||2 )//2
//符号左边为true或者右边为true，都会返回true
//只有两边都是false，那么就会返回false




//!运算符
//进行 取反 的运算
//本身是true的，会变成false
//本身是false的，会变成true
!true   //false
!false   //true

三元运算符（三目运算符）

格式：(逻辑表达式) ? (为true执行此代码) : (为false执行此代码)

逗号运算符: ,

var a = 1, b = 2, c = 3
console.log( a,b,c )// 1 2 3
console.log( (a,b,c) )// 3 返回一个整体的最后一个值

var num = 0
for( var i = 0,v = 0; i < 5,v < 9; i++,v++){
     
  num = i + v// 8+8
}
console.log( num )// 16

console.log( (2>3,4<5) )
//等价于
console.log( (2>3||4<5) )

注意：优先级的使用

结合优先级从高到低
1. () 优先级最高
2 .一元(单目)运算符:++,–,!
3 .算术运算符: 先*,/,% 再+,-
4. 关系运算符:>,>=,<,<=
5 .相等运算符:== === != !==
6 .逻辑运算符:先&&，再||
7 .赋值运算符
口诀:单目算术位关系，逻辑三目后赋值

---