[前端学习]js语法部分学习笔记，第一天

初识js

• 由网景公司开发，基于浏览器，基于面向对象，基于事件驱动的网页脚本语言。主要用来做表单验证、网页特效、网页小游戏、服务器异步交互。

js书写位置

• 内联式js的写法与css类似
  ,来进行引入。
• 拓展两个不常用的script标签属性
  • async="async" 设置外部js文件异步加载，相当于既加载html又加载js，当js加载完毕后立即执行
  • defer="defer" 设置文件最后加载，就是当其他的代码都加载完毕后，再加载js并运行。

JS-API介绍

• 应用程序编程接口。其实它就是一些预定于的函数。提供程序员基于某些硬件和软件访问一组程序的能力，无需访问源码，无需知道源码的运行机制
• 常见的接口：百度地图、豆瓣电影、爱奇艺影视等

js语法格式

• 推荐使用每行一句代码，并用分号结束
  var num = 1;
var string= "你好";
• 注意，在js中就要区分大小写了，和css不同

alert弹出警示框

• 语法：alert("内容");
• 写全是window.alert();也可以省略，为了方便一般会用简单的写法。
• 注意alert你写几个它就弹几次。由于兼容性问题，不同浏览器显示的弹出框样式不同，所以一般很少用，主要是用来调试程序的。

prompt弹出输入框

• 语法：prompt("参数1","参数2");
• 参数1是提示或者问题信息，参数2是输入框默认值，如果不写参数2输入框就为空。当用户点击了确定会返回输入框中的值，点击取消返回null

console.log控制台输出日志记录

• 语法： console.log("内容");
• 这个输出的结果是不在页面中显示的，只能在调试工具的控制台中看到。

document.write文档打印输出

• 语法：document.write("内容");
• 这个也是打印内容，但是和console.log不同的是，document.write输出的内容是直接显示到页面中，用户是可以看到的。

变量

• 声明方式：var string = "变量值";
• 可以看出，为了证明这是一个变量，要用var来声明，然后跟上变量名和赋值。并且变量只能存放一个值，前面的值会被后面的赋值替换掉。
• 想要获取变量存放的值，直接打印变量名就能取得。
• 总结：变量是一个存放最后一次赋值的容器。

变量命名规范

• 变量只能由字母、数字、下划线、$来组成，且不能由数字开头
• 变量名长度不能超过255字符
• 变量名中不能有空格
• 变量名不能使用关键字或者保留字（百度有表格），命名时应尽量用相同语义的英文单词，理论上可以用中文但是不建议。
• 变量名严格区分大小写
• 书写变量建议使用驼峰式写法

不通过第三个变量，让两个变量值互换

• 代码如下：
  var a=10, b=20;
a = a + b； 此时a的值是两个变量的和
b = a - b; 用两个值的和减去b的值，就剩下原来a的值，此时b就是原来a的值
a = a - b; 用两个值的和减去b（原a值），就剩下原来的b的值，这样就实现了互换
• 很有理解价值的案例

变量的类型

• js是弱类型语言，不用声明变量的类型，它会根据里面的内容来转换类型。
• 虽然可以通过给变量赋不同类型的值来转换类型，但是不推荐这么用。

数值型number

• 给变量放入数字或者浮点数（小数），这个变量就是数值型变量。
• 数值型变量有一个特殊的返回值NaN，如果数值型变量因为操作错误哦不能返回一个数值时，就会返回NaN（依然是数值型），这样代码运行就不会报错。如果变量值是NaN，那么它自己和自己都不相等。
• 使用isNaN()可以判断里面的值是否是有效数值，是有效数值返回false，不是有效数值返回true。Infinity是有效数值。
• number的直接量显示
  • 直接量也叫做字面量，有多种显示方式，只做认识
    • 十进制，10，这是最常见的不作说明
    • 八进制[0开头]，用八个字符来表示所有值（01234567）,想表示8时，因为没8就要进位用010来显示
    • 十六进制[0x开头]，用十六个字符来表示所有值（0123456789abcdef），0x10就是表示16
    • 科学计数法6e+5，实际上是6*(10的5次方)
  • 拓展
    • 浮点数因为精度的问题，所以千万不要用来做等于比较判断，只能作为范围条件判断。
• JS能显示数字的最大和最小值
  • Number.MAX_VALUE可以返回js能显示的最大正数，超过就Infinity（无穷大）
  • Number.MIN_VALUE可以返回js能显示的最小正数，再小就是0
  • 负数和正数返回方法是一样的，加个负号就行，负数小到超过限制就是-Infinity(负无穷大)

字符型string

• 把字符串放入变量，该变量就是字符型变量。
• 只要被单引号或者双引号包裹的内容就是字符串，包括数字被包裹后就不是数值而是字符串了。
• \反斜杠是转义字符，它可以把普通字符转义为有意义的特殊字符，也可以把有意义的字符转义为普通字符。转义字符有很多，搜索去查。
• 字符串的不可变性
  • 在栈内层中，字符型变量重新赋值不是直接覆盖值，而是开辟一个新的空间，把新的字符串值引用给变量，原字符串不变，所以字符串值一旦创建是不能改变的。
  • 正因为这样，所以一旦大量拼接字符型变量非常消耗资源，不建议这么做。
• 字符串拼接小技巧：引号加加，可以迅速完成字符中加插入拼接变量的操作。

布尔型boolean

• 把两个逻辑判断值true和false放入变量，该变量就是布尔型，两个值都必须是小写
• true是真，false是假

未定义数据类型

• 当声明了变量却没有赋值，这个变量就是未定义数据类型
• 在调试工具中打印类型，会显示undefined

空类型

• var num = null;
• 当给变量赋值null后，变量就是空类型了，可以理解为清空变量。

typeof检测变量类型运算符

• typeof xxx;
• 要注意typeof是一个运算符不是方法，所以不用括号直接书写就行。他可以检测该变量或者该值是什么的类型。
• 返回的是类型英文名。
• 用typeof检测空类型，返回对象类型，这是错的。这个问题是js遗留的BUG，实际就是个空类型。
• 用typeof检测函数调用时，函数返回什么值，就是什么类型。

js操作符

基础运算符

• + - * / % 五个基础运算符，对应加、减、乘、除、取余数。
• 这里+号比较特殊要注意。当加法运算中出现了字符串时，它就不会再计算相加的结果（有字符串也加不了），而是把所有参与运算的值连接起来。
• 就是说在js中连接符号是+
• 例如"10" + 1，是一个字符串加一个数值，实际结果是101，它们被连起来了。
• 除了加号以外的基础运算符，如果字符串是数字正常运算，不是返回NaN
• 用有效数字除以空或者0，会返回Infinity（无穷大）
• 任何数%0都是NaN，取余比自己大的数返回自己

一元运算符

• 一元运算符就是只靠一个数就能完成运算操作的符号，常见的集中一元运算符：
• +正号。注意这里不是加号，是正号
• - 负号。注意这里不是减号，是负号
• ++自增符号，每写一次自己+1，例如num++就相当于num=num+1（只是相当于不是完全相同）
  • 自增符号可以前置也可以后置，都是自增的意思。
  • 前置和后置的区别：++前置是先自加再运算，++后置是先把值参与运算再自加。简单来说就是:后置参与运算的还是原值，到下一次运算时才自增（如果是自己加自己，那么第二个就是自增后的值了）；前置在运算过程中就自加了。

比较运算符

• 比较运算符用来判断条件是否成立，成立返回true，不成立返回false
  < 左边小于右边，条件成立
  > 左边大于右边，条件成立
  <= 左边小于或等于右边，条件成立
  >= 左边大于或等于右边，条件成立
  == 左边等于右边，条件成立（默认会做类型转换）
  === 左边全等于右边（值和类型都相等才是全等），条件成立
  !=左边不等于右边，条件成立（默认会做类型转换）
  !==左边不全等于右边（值和类型都不等才是不全等），条件成立
• 运算符优先级，< > <= >=高于== === != !==，先比较和后比较的区别。

逻辑操作符

• 逻辑操作符是用来判断多个条件结果的，比较对象是布尔值，返回的是决定结果的值
  && 逻辑与（并用）,需要多个条件都满足，才返回true，有一个false就返回false
  || 逻辑或，只要满足一个条件就返回true，全部为false才返回false
  ! 把结果取反
• 执行优先级： ！>&&>||
• 当执行短路运算时（即比较的值不是布尔值），虽然它会暂时隐式的转换为布尔值进行运算，但是返回的还是原值，具体返回的是起决定性作用的值，就是决定该次运算结果是true还是false的值。

赋值操作符

• 在JS中等于号是双等==，单等=是赋值符号，意思是把右边的结果赋值给左边。
• 赋值运算符的拓展：
  • num += 2 是 num = num + 2的简写
  • num -= 2 是 num = num - 2的简写
  • num *= 2 是 num = num * 2的简写
  • num /= 2 是 num = num / 2的简写
  • num %= 2 是 num = num % 2的简写
  • 实际上就是类似于一元运算符的简写方法。

逗号操作符

• 没什么好记的，就是css并集的意思，可以用于通用声明。

js操作符执行优先级总结

• 算式分隔符>一元运算符（!取反也算）>基础运算符（先*/%后+-）>比较运算符(先大小判断后等于判断)>逻辑操作符（先与后或）>赋值操作符>逗号操作符。
• 可以参考优先级表。