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.调试代码的流程
- 看是否有报错
- 单词错误
- 输出调试各种数据（变量）
- 思考怎么解决（查看比较，百度，看文档）
3.关于注释
- 最讨厌别人让我写注释
- 最讨厌别人不写注释
代码如下（示例）：
// 单行注释，注释内容不可以换行 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 .赋值运算符
口诀:单目算术位关系，逻辑三目后赋值
来源：oschina
链接：https://my.oschina.net/u/4326858/blog/4910089