JS基础包括:JS简介、变量、常量、数据类型、数据类型转换、运算符和表达式。
大家都知道前端的三大语言:HTML、CSS、JS。HTML:专门编写网页内容。CSS:专门编写网页样式。JS:专门编写网页交互行为。所以,对于一个网页来说,JS是网页的灵魂,是重中之重。JS典型的用途:1、客户端表单验证 2、客户端数据计算 3、客户端动画效果。
目录
JS简介
JS由哪些部分组成
JS由 ESMAScript、DOM、BOM
ESMAScript:ECMA制定的JavaScript语言国际标准 规定JS语言的核心语法
DOM:专门操作网页内容的程序标准
BOM:专门操作浏览器窗口的程序
JS语言特点
1、运行在脚本解释引擎中
脚本解释引擎:专门解析js语言,并执行js程序的小软件
1、浏览器自带脚本解释引擎
浏览器包括了两个小软件:
内容排版引擎:专门解析HTML和CSS,并显示网页内容和样式的小软件。
脚本解释引擎:专门解析JS
2、独立安装的脚本解释引擎 Node.js
2、解释执行
边解释边执行,后解释的相同内容会覆盖先解释的
3、弱类型
声明变量时,不必提前规定变量的数据类型。 一个变量,先后可保存不同类型的数据
4、基于对象:CORE
如何使用JS
1、页面中的script标签里 一旦进入script标签内,就要使用js的语法
问题: 不符合内容与行为分离的原则——不便于维护和共用
2、独立的js文件中:引入: <script src="js文件的url"></script>
注意:script标签不同同时引入外部js和包含内部js。——结果:内部js自动失效
基本语法
1、向页面中添加内容 document.write("html代码段");
问题:向页面中随意输出内容会破坏页面的布局
解决: 调试程序时,不轻易使用document.write
2、弹出对话框 alert("提示消息");
问题:浏览器预定好的样式,不可修改
解决:对话框都用div+css模拟
3、向控制台中输出内容
控制台:console,专门用于调试程序,临时显示调试结果的小窗口
何时:只要调试程序,都要在控制台进行
如何:F12->console
console.log("Hello console!");
注意:每log一次,都自动换行
更多控制台操作:
1、编写多行代码:Shift+Enter 仅换行暂不执行
2、左上角圆形叉号: 清空控制台
3、调出刚写过的代码段: 上下键切换
输入:输入框 专门请用户输入一个数据的对话框
如何:prompt("输入提示");
变量
什么是变量
内存中存储一个数据的存储空间,再起一个名字
只要一个数据,可能被反复使用,都要先保存在变量中
如何使用变量
一个变量在使用前,必须先声明,才能使用
如何:var 变量名;
强调:一切变量都用var声明,不必提前规定数据类型
默认值:变量的默认值为undefined
undefined:专门表示一个从未使用过的变量
命名规则:
1、字母,数字或下划线组成,不能以数字开头
2、不能使用保留字: js语言已经提前占用的有特殊意义的名字
3、见名知义
4. 驼峰命名:首字母小写,之后每个单词首字母大写
比如:backgroundColor listStyleType
简写:可用一个var同时声明多个变量, 用逗号分隔
var 变量1,变量2,...;
赋值:将等号右边的值保存入等号左边的变量中
如何:变量名=值;
强调: 1、只有等号才能改变变量中的值 2、 = 会覆盖变量中的原值 3、变量赋值前,必须先声明
特殊:给为声明过的变量赋值:
普通js模式下:自动创建新变量并保存值
ES5 严格模式:比普通js模式要求更严格的模式
规定:禁止给未声明的变量赋值
结果:报错: ReferenceError
如何启用:在script顶部插入"use strict"
简写: 声明同时就初始化变量的值:
var 变量=值;
强烈建议: 每个变量都要赋初值
var 也可声明并初始化多个变量:
var 变量=值, 变量=值, ...;
比如: var a,b=2; a:undefined b:2
取值:取出变量中的值做运算
如何:只要使用变量名,等效于直接使用变量中的值
特殊:试图从未声明过的变量中取值,会报错!ReferenceError
常量
常量就是一旦创建后,值不能改变的量
什么时候用到常量:只要一个变量的值创建后不希望被篡改
如何使用常量:
声明:const 常量名=值;
注意:声明常量时,必须初始化其值 常量名通常全大写
赋值:常量不允许赋值
普通模式:强行赋值,不报错,但也无法修改 ——静默失败
ES5 严格模式:将所有静默失败升级为错误
取值:常量的用法和普通变量完全一样
数据类型
什么是数据类型:数据在内存中的存储结构
不同的数据类型,擅长执行的操作不一样,就需要配套何时的存储结构,给操作提供便利
数据类型包括两大类:原始类型、引用类型
原始类型:值直接保存在变量本地的数据类型 包括5个:number string boolean null undefined
引用类型:值无法直接保存在变量本地的复杂数据类型
如何查询数据类型:typeof x 返回变量x中存储的数据的类型名
number类型
number类型:专门用于存储数字
什么时候会用到number类型:只要一个数值经常用于算术计算或比较时
注意:程序中不加引号的数值,默认就是number类型
存储结构:number类型的数值在内存中采用二进制存储
功能:n.toString(2) 将n中的数值转为内存中的二进制形式。
存储空间:整数 4字节, 浮点数 8字节 1字节 = 8位二进制
数值大小和存储空间,无关!
特殊: 舍入误差: 计算机中也有计算不尽的数值
原因: 底层二进制计算导致
解决: 四舍五入: n.toFixed(2) 将n按2位小数四舍五入
string类型
string类型:专门存储一串字符的数据类型
什么时候用到string类型:只要用于显示或记录一个数据,不用做计算和比较大小,都要用 " " 包裹
注意:只要程序中用 " " 包裹的自动就是string类型
存储结构:js中一切文字都是用unicode编码存储的
unicode编码:对全球主要语言的每个字编一个号原因是计算机只认数字,不认字符
如何查看: c.charCodeAt();查看变量c中字符的unicode号
存储空间:1个字母或数字 1字节 1个汉字 2字节
转义字符
转义字符:字符串中具有特殊功能的字符
什么时候用到转义字符:
1、如果字符串中包含和js语法冲突的 " ,' 等,都要用 \ 转义为普通字符
2、希望在字符串中插入某些特殊功能:\n 换行 \t 制表符
问题:路径: windows操作系统中的路径使用 \ 作为上下级分隔,结果 \ 会和js字符串中的转义字符混淆
解决:
1、\ 变为 \\
2、将 \ 换成 / ——最优
boolean类型
boolean类型:只有两个值的类型: true/false
什么时候用boolean类型:只要表示一个判断的结论时
undefined
空 由程序自动使用,给变量赋初值
null
空 让程序员主动清空一个变量的值
数据类型转换
数据类型转换:将不需要的数据类型,转化为需要的数据类型
数据类型转换有两种:隐式转换、强制转换
隐式转换:不需要程序员干预,由js自动完成的数据类型转换
什么时候进行隐式转换:只要给定的数据类型和js程序需要的类型不相符,js就会根据自己的需要,自动转化数据类型
比如:算数计算中:
默认:一切都转为number类型,再做计算
原因是因为number类型最适合计算
bool:true = 1 false = 0
特殊:+ 运算中,只要碰到一个字符串,那么一切都转为字符串,+ 运算变为字符串拼接
强制转换:程序员主动调用函数完成的数据类型转换
其他类型转number
1、Number(x) 将x转为number类型
什么时候会用到Number(x):都是隐式转换,其实相当于自动调用Number(x),很少主动使用
缺点:只能转换纯数字组成的字符串和bool类型 如果转不了,就返回NaN
NaN:不是一个数字的任何值 Not a Number NaN参与任何运算结果只能是NaN
2、parseFloat/parseInt(str) 将str转为number类型,自动去除末尾非数字字符
parseFloat可保留小数部分 parseInt 去掉小数部分
什么时候会用到:只要将字符串转number,首选parseFloat 如果确实需要去掉小数,才选parseInt 如果转不了,也返回NaN
注意:参数应该是string类型,如果给定的值不是string类型,则先执行隐式转换,转为string类型,再转number
比如:parseFloat(true) parseFloat("true") -> NaN
其他类型转string
1、 x.toString() 将x转为字符串类型
x不能是null或undefined ——不是万能
2、String(x) 将x转为字符串类型——万能
隐式转为string时,都是自动调用String
其他类型转boolean
Boolean(x)
规则:只有5个值会被转为false: 0 , " " , NaN , null , undefined 其余都转为true
其实, 隐式转为boolean时,都是自动调用Boolean(x)
运算符和表达式
程序是人的想法在计算机中的执行
运算符:程序中模拟人的想法的特殊符号
表达式:由数据,变量和运算符组成的完成一项单一任务的语句
算数运算:+ - * / %
%:模运算/取余数: 被除数/除数,不要商,要除不尽的余数部分
什么时候会用到:
1、取余数
2、判断能否整除
3、判断奇偶 判断偶数: 能被2整除 n%2==0 判断奇数: 不能被2整除 n%2!=0
隐式转换:
默认:都转number
特殊:+运算中,碰到字符串,都转字符串,+运算变为字符串拼接
舍入误差:计算机中,也有计算不尽的数值
解决:
1、按指定位数四舍五入:n.toFixed(2) 今后几乎所有显示钱数的地方都要toFixed(2)
2、存储:保存很长位数的小数: 0.39999999
关系运算:用两个值做比较,做判断 > < >= <= == !=
返回值:boolean
隐式转换:
默认:都转number
特殊:
1、两个值都是字符串, 则不再转数字,而是依次比较每个字符的unicode号
2、判断NaN:
NaN和任何值做 > < >= <= == 5种比较时,永远false
NaN和任何值做 != 比较时,永远是true
问题:NaN==NaN =>false 用普通的==无法判断NaN
解决:isNaN(num) 专门代替==,用来判断num是不是NaN
何时:只要判断是不是NaN,都用isNaN(num)
反用:判断一个值是不是数字: !isNaN(num)
3、区分null和undefined
问题:==比较时,会自动将undefined隐式转为null
null==undefined 结果是 null=null
解决: === 全等: 类型必须先相同,值再相等
其实===就是不带隐式转换的 ==
逻辑运算:将多个关系运算,综合起来得到最终结论 && 且 || 或 !非
什么时候会用到:只要根据多个条件,综合得出最终结论时
条件1&&条件2...:
要求所有条件都为true,结果为true 只要一个条件为false,结果为false
条件1||条件2...:
只要一个条件为true,结果为true 除非所有条件都为false,结果才为false
! 条件: 颠倒条件的判断结果
隐式转换: 默认将每个条件都转为bool类型
短路逻辑: 如果前一个条件已经可以得出最终结论,则后续条件不再执行。
&&: 只有前一个条件为false时,后续条件才不执行
||: 只要前一个条件为true时,后续条件不再执行
利用短路:
1、简单分支结构: 1个条件,1件事,只有满足才做
如何:条件&&(操作)
运算符优先级: 优先级高的运算,先计算 改变优先级: 用()
2、实现默认值/备用值
如何:值1||值2
如果值1可以被转为true,就选择值1使用
如果值1不能转为true,就选择值2使用
位运算
1、左移/右移
1<<3=8 1左移3位 相当于1* 2的3次方
2<<3=2* 2的3次方=16
8>>3=1 8右移3位 相当于8/ 2的3次方
2、取整:
n^0 n|0 n>>>0 代替/简化Math.floor(n)
3、交换两变量的值
var a=3,b=5;
方法一: var t=b; b=a; a=t;
方法二: a+=b; b=a-b; a=a-b;
方法三: a^=b; b^=a; a^=b;
赋值运算
扩展赋值运算:对特殊赋值运算的简写
a=a+b 将a的值+b的值,再存回a中 ——将b的值累加到a上
可简写为a+=b;
a=a-b a-=b;
a=a*b a*=b;
a=a/b a/=b;
a=a%b a%=b;
更简化: 递增递减运算: 如果每次累加1/累减1
a+=1 -> a++
a-=1 -> a--
前 ++ 和后 ++:
1、如果单独使用, 前后都一样
2、如果参与到其他表达式中时
相同:变量中的值一定都会+1
不同:前 ++,返回+1后的*新*值
后 ++,返回未+1的*旧*值
例子:
var n=3;
console.log(n++ + ++n + n++);
console.log(n);//6
提示:所有表达式都是从左向右依次执行 如果前一个表达式修改了变量的值,则会影响后续表达式的执行。