web 开发之JavaScript基础
前言:从零开始介绍Javascript。
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。 我就从变量和常量开始吧.
1:常量:用于存储数据,声明后必须赋值,而且一旦赋值不能重新赋值.
const pai=3.1415962
变量:也可用于存储数据,声明后可以不用赋值,赋值后可以再次赋值.
var a
2:数据类型:分为原始类型和引用类型 (在后面再介绍引用类型)
原始类型分为:数值型,字符串型,布尔型,未定义型,空.
①数值型:分为
整型 8进制(以0开头的数值) 16进制(以0x开头的数字),
,浮点型 3.14e-1(小数点左移一位) 3.14e1(小数点右移一位) #可以用type of 检查数据类型
②字符串型 :被引号包含的数据就是字符串型,不区分单双引号 "字符串".charCodeAt()可以查看单个字符串的ascii码序号
③ 布尔型:只有两个值true 和false 可作为条件 可转换为数值1和0
④未定义型:undefined 表示一个空值 例如声明的变量未赋值
⑤ 空:null 常和引用类型的数据一起使用
3,数据类型的转换
（1）隐式转换
在运算过程中自动产生的转换
①数值+字符串 数值转为字符串
1+'2' //'12'
②数值+布尔型 布尔型转为数值，true -> 1 false->0
5+true //6
5+false //5
③字符串+布尔型 布尔型转为字符串
'2'+true //'2true'
'''
加号(+)的作用
执行加法运算
执行字符串之间的拼接，前提加号的两端有一个为字符串'''
所有的隐式转换为数值，自动调用函数Number来完成的
(2)强制转换
①强制转数值 Number()
5种类型转换结果如下：
Number('5') //5
Number('5a') //NaN
Number(true) //1
Number(false) //0
Number(undefined) //NaN
Number(null) //0
NaN：(Not a Number)，不是一个数字，这个是由于转换为数值失败得到的结果；NaN和任何的值执行数学运算结果还是NaN。但其类型为number
②强制转整型 parseInt（）
通常将小数和字符串转整型，其它的都返回NaN
转换结果如下
parseInt(3.14);//3
parseInt('5.87');//5
parseInt('5a');//5
parseInt('a5');//NaN
③强制转浮点型 parseFloat（）
通常用于将字符串转为浮点型，其它都是NaN
常见转换结果如下
parseFloat('5.1a');//5.1
parseFloat('7');//7
parseFloat('a5.3');//NaN
④数值和布尔型强制转字符串 toString（）
⑤强制转为布尔型
以下情况作为条件隐式转换为false
0 NaN '' undefined null
可以这样简写
4.运算符 (有6中运算符接下来一一介绍)
(1)算术运算符 + - * / % ++ --
% 取余
++ 自增，在原来的基础之上加1
-- 自减，在原来的基础之上减1
如题:
var x=3;
var y=5;
var z= x++ + ++y - --x + x++ - y--; //等价于3+6-3+3-6 (赋值前若等号右端是多个表达式则先运行表达式后再赋值,运算时看符号的先后进行运算,变量在前则先运算后赋值,否则反之)
console.log(z) //3
(2)比较运算符 > < >= <= ==(等于) !=（不等于） ===(全等于) !==(不全等于）
等于(==)： 比较两者的值是否相同，可能发生隐式转换 如(2=="2")返回的结果是true 就是将字符串进行了隐式转换为Number类型
全等于(===)：先比较类型，然后再比较值，只有两者都相同才是true
(3)逻辑运算符
&& 逻辑与，左右的两个条件都为true结果是true，否则false
|| 逻辑或，左右的两个条件有一个为true结果是true，否则false
! 逻辑非，取反！true=false
短路逻辑
&& 当第一个条件为false的时候，不再执行第二个条件
|| 当第一个条件为true的时候，不再执行第二个条件
（4）位运算符（了解）
模拟计算机底层的运算过程，首先将数字转为2进制然后运算，当运算完后再把结果转回成10进制。
& 按位与， 上下两位比较都是1结果是1，否则是0
| 按位或，上下两位比较含有1结果是1，否则是0 (按位或与上面类似 )
>> 按位右移，删除最后的n位 (同理这个也是将10进制数字转为2进制右移后转为10进制)
<< 按位左移，在最后补0 (类似按位右移)
(5)赋值运算符0
= += -= *= /= %= ...
运算赋值：先执行运算，然后再执行赋值
(6)三目运算符
三目运算符有两个运算符连接的三个操作数据或者表达式
条件表达式 ? 表达式1 : 表达式2
5.浏览器端函数
alert() 弹出警示(消息)框
prompt() 弹出提示(输入)框，需要使用变量保存用户输入的值，类型是字符串型；点击取消返回null
6.流程控制
(1)if语句
if(条件表达式){
语句块
}
如果大括号的语句块中只有一行语句，则大括号可以省略。
(2)if-else语句
if(条件表达式){
语句块1
}else{
语句块2
}
(3)if-else嵌套
if(条件表达式1){
语句块1
}else if(条件表达式n){
语句块n
}else{
语句块n+1 //以上所有的条件都是false
}
(4)switch-case
属于特殊的多项分支语句，根据表达式的值选择执行对应的语句
switch(表达式){
case 值1: //如果表达式的值和case后的值相同，则执行语句块
语句块1
break;
case 值n:
语句块n
break
default:
语句块n+1 //如果表达式和case后的每个值比较都是false执行default后的语句
}
表达式在和case后的值比较的过程中只能进行全等于(===)的比较，要求类型和值都相同
（5）
while(循环条件){
循环体
}
（6）
do{
循环体
}while(循环条件);
（7）break
在循环体中使用，表示跳出循环，不再执行任何循环的代码。
（8）
for(初始值;循环条件;增量){
循环体
}
执行过程为:声明初始值,判断是否满足循环条件,满足进入循环,结束后进行增量,在判断循环条件,满足再进入循环体否则退出循环
（9）break和continue
break 跳出，结束循环
continue 跳过循环体部分，还会执行下一次循环
（10）循环嵌套
一个循环体的内部出现了另一个循环，任意的两个循环都可以相互嵌套
7.函数 ：函数分为系统函数和自定义函数
函数：是一个功能体，提供若干个数据，返回处理的结果，用于封装重复执行的代码
(1)创建函数
function 函数名称(){
函数体 //重复执行的代码
}
调用：函数名称()
调用函数，就会执行函数体中的代码
(2)创建带有参数的函数
function 函数名称(参数列表){ //用于接收外部传递的数据
函数体
}
调用：函数名称(参数列表)
参数：创建函数时的参数称为形参，调用函数时的参数称为实参，实参会赋值给形参，实参的数量可以是0个或者多个，如果形参未赋值则为undefined
3)创建带有返回值的函数
function 函数名称(参数列表){
函数体
return 值; //返回值，函数调用后得到结果
}
调用：函数名称() #除了执行函数体以外，还会得到函数的返回值。
return的作用是返回函数调用后的结果；如果函数中没有return或者return后不加值返回的结果是undefined；函数调用后，就会跳出函数，结束函数的执行
对比break和return
break用于循环和switch-case语句，跳出循环或者switch-case
return用于函数体中，返回函数调用的结果，同时跳出函数
8.变量的作用域
作用域：起作用的范围
全局作用域：在函数的外部，声明的变量可以在任意的作用域下访问到，叫做全局变量。
函数作用域：在函数的内部，声明的变量只能在当前的函数中访问到，叫做局部变量。
在函数内不加var声明的变量是全局变量，#不推荐
程序执行前，会将var声明的变量提升到所在作用域的最前边，所赋的值不提升
9.函数的作用域
函数的可访问范围
全局函数：在全局作用域下创建的函数，可以在任意的作用域下调用
局部函数：在函数作用域下创建的函数，只能在当前的作用域下调用
函数提升:程序执行前，将整个函数提升到所在作用域的最前边，可以先调用再创建。
10.递归
在函数的内部调用自身这个函数，本身属于死循环
结合着return，还要有跳出的条件
实例：斐波那契数列
function bar(n){
if (n===1 || n===2)
{
return 1
}
return b(n)=b(n-1)+b(n-2);
}
console.log(5)
11.匿名函数function (){ }
(1)创建函数
函数表达式
var fun=function(){
}
变量名称就是函数的名称
函数声明
function fn(){
}
函数名称和函数名称()的区别
函数名称本质是一个变量，保存了一个函数。
函数名称()，在调用一个函数，执行函数体中的代码，得到函数的返回结果
函数声明和函数表达式的区别
函数声明创建的函数如function fun(){}存在函数的整体提升，可以先写调用再写创建。
函数表达式创建的函数如 var fun1=function(){}只提升变量声明的部分，赋值不提升，必须先写创建再写调用。
(2)匿名函数自调用 其作用可以防止全局污染（全局变量的出现带来的影响，在任意的作用域下都可以访问到。）
(function(){
#函数作用域，里边的变量是局部变量
})();
匿名函数的调用方式还可以用一下方式(让人觉得牛逼轰轰的)
(但不能用% * / 开头)
(3)回调函数
将函数以实参的形式传递给另一个函数
function 函数名1(形参a){
形参a() //通过形参来接收传递函数，并通过形参调用传递的回调函数
}
function 函数名2(){ }
函数名1( 函数名2 )
函数名1( function(){} ) #调用匿名函数
12.系统函数
parseInt()/parseFloat()/Number()
isNaN() 检测一个数据是否为NaN，首先会自动调用Number
是NaN -> true 不是NaN -> false
isFinite() 检测一个值是否为有限值 如1/0是个Infinity
Infinity 无限值
eval() 执行字符串中的表达式
13.对象
属于引用类型的数据
对象是一组属性和方法的集合
(1)JS中的对象
自定义对象，自己创建的对象 # var bar={}
内置对象，JS提供的对象 var foo=new Object（） 通过调用foo来对对象内的属性或方法增删改
宿主对象，根据不同的执行环境划分的
(2)使用对象字面量创建
使用大括号 { } 创建空对象
属性名和属性值之间用冒号隔开，多组属性之间用逗号隔开
如果属性名中含有特殊字符，需要加引号
（3）访问属性
对象.属性名
对象[ '属性名' ]
如果属性不存在，则返回undefined
（4）遍历属性
for(var k in 对象){
k 代表每一个属性名
对象[k] 代表每一个属性名对应的属性值
}
（5）对象中的方法对应的是一个函数
var person={
name:'huoji',
fun: function(){
console.log(this.name);
#this //指代当前的对象 this.name 可以得到对应属性内的值
}
};
调用方法 person.fun()
(6)对象中访问检测属性是否存在
对象.属性名===undefined true->不存在 false->存在
对象.hasOwnProperty('属性名') true->存在 false->不存在
'属性名' in 对象 true->存在 false->不存在
(7)假设变量1对应一个对象,如果将变量1赋值给变量2,通过变量2改变对象的属性,那么变量1对应的对象的属性也会跟着改变. 如图
这是因为数据的存储方式不同
原始类型：直接将数据存储在栈内存中
引用类型：在堆内存中创建数据，然后会生成一个16进制的地址，然后把地址保存到栈内存（变量）中(所以虽然是两个变量名,但是指向是同一个对象)
null：空地址，也是object类型，不指向任何的对象； 如果把一个对象设置为null，可以用于销毁引用类型的数据，释放内存空间，加快运行速度。
(8) 补充个小知识如何判断一个对象是否为空
①判断遍历+判断
②将对象转为数组通过长度判断
var obj={}; var arr = Object.key(obj); console.log(arr.length==0) //trun 证明为空否则反之
14.数组 是一组数据的集合，每个数据称为元素
(1)数组字面量创建数组
var arr=[ 元素1, 元素2.... ]
每个元素是一条数据，可以保存任意类型的数据。
(2)访问数组元素
下标：数组自动为每个元素添加的编号，从0开始
数组名[下标] //得到下标对应的数据
(3)数组的长度
数组.length 获取当前数组元素的个数
可以通过得到的长度在数组的末尾添加元素 数组[ 数组.length ]=值
(4)内置构造函数创建数组
var 数组名=new Array(元素1,元素2...) //创建数组添加元素
var 数组名2=new Array(3) //创建数组，并初始化长度为3，可以添加更多个元素
(5)数组的分类
索引数组：以0及以上的整数作为下标
关联数组：以字符串作为下标，需要单独的添加每个元素，无法使用length属性获取长度
补充:对象和数组存储数据的时候有什么区别
对象通常保存一条数据，包含有多个属性。
数组通常保存一组相同的数据(如 可以保存多个对象)
(6)遍历数组
依次访问数组中的每个元素
用 for--in
for(var k in 数组){
k 每个元素的下标
数组[k] 每个元素
}
------------------------------------
用循环
for(var i=0;i<数组.length;i++){
i 每个元素的下标
数组[i] 每个元素
------------------------------------
for ---of 遍历
var arr = ['张三','李四','王麻子','王钢蛋'];
for (var v of arr){
//v代表arr 内的元素
console.log(v);
}
(7)API
应用程序编程接口：JS中预定义好的一些函数或者方法
区分两个名字相同的方法是不是同一个方法：看所在的对象是不是同一个类型(例如对象.slice()和字符串.slice())
数组.toString() 将数组转换为字符串
数组. join( '分割符' ) 将数组转换为字符串，可以指定元素之间的分割符号
数组1.concat(数组2,数组3) 拼接多个数组
数组.slice(start, end) 截取数组中的元素，start开始的下标，end结束的下标，如果end为空截取到最后，如果下标为负数表示倒数；返回格式为数组
数组.splice(start, count) 删除数组中的元素，start开始的下标，count删除的数量，count为空表示删除到最后，下标为负数表示倒数；返回删除的元素，格式为数组；原数组会发生变化。
数组.reverse() 翻转数组元素
数组.sort() 对数组中的元素进行排序，默认是按照首个字符Unicode编码从小到大排序
sort( function(a,b){
return a-b;//按照数字从小到大
//return b-a;//按照数字从大到小
} )
数组.push() 往数组的末尾添加元素，返回数组的长度
数组.pop() 删除数组末尾的一个元素，返回删除的元素
数组.unshift() 往数组的开头添加元素，返回数组的长度
数组.shift() 删除数组开头的一个元素，返回删除的元素
数组.indexOf() 查找某个元素，如果存在返回下标，不存在返回-1
(8)
二维数组
对一组数据进行二次分类
[ [ 元素1,元素2 ], [元素1,元素2] ]
访问方式:
数组[下标][下标]
15.字符串对象
包装对象：为了让原始类型数据像引用类型数据，具有属性和方法，JS中有3种包装对象, 分别是字符串对象、数值对象、布尔对象
var str=new String( ) 将数据转为字符串，返回对象
String( 数据) 将数据转为字符串，返回字符串 // 推荐
（1）转义字符 \ 转换字符本身的意义
\' 斜杠单引号 讲单引号转义为普通字符
\n 转义为换行符
\t 转义为一个制表符（tab键），及多个连续空格
(2)字符串对象的API
str.length 获取字符串的长度
str.charAt(下标) 获取对于下标的字符 等价于 str[下标] 效果一样
str.charCodeAt() 获取首个字符的Unicode码
str.indexOf('查找内容') 查找某个字符串第一次出现的下标，找不到返回-1
str.lastIndexOf('查找的内容') 查找某个字符串最后一次出现的下标，找不到返回-1
str.toUpperCase() 将所有英文字母转大写
str.toLowerCase() 将所有英文字母转小写
str.slice(start, end) 截取字符串，start开始的下标，end结束的下标，end为空截取到最后，如果下标为负数表示倒数。
str.substr(start, count) 截取字符串，start开始的下标，count截取的长度，count为空截取的最后，下标为负数表示倒数。
str.split('分割符') 按照指定的分割符将字符串切割为数组
（3）.匹配模式
用于字符串的查找和替换
str.search(/规则内容/i) 查找满足条件的第一个，返回下标，找不到返回-1
str.match(/规则内容/ig) 查找满足条件的所有的，返回数组
str.replace(/规则内容/ig, 要替换的内容) 查找并替换
/ 两斜杠间用于写规则 /
i ignore 忽略大小写
g global 全局查找，找所有的
16.Math对象 不需要创建对象，可以直接使用API 直接得到值
Math.PI 获取圆周率
Math.abs() 获取绝对值
Math.ceil() 向上取整 如Math.ceil(3.14) 得到值为4 Math.ceil(-3.14) 得到值为-3
Math.floor() 向下取整 如Math.ceil(3.14) 得到值为3 Math.ceil(-3.14) 得到值为-4
Math.round() 四舍五入取整
Math.pow(x,y) x的y次方 如Math.(2,3) 2^3 二的3次方
Math.max() 获取一组数字的最大值
Math.min() 获取一组数字的最小值
Math.random() 获取一个0到1的随机数 不包含1,包含0
17. Date 对象 用于对日期的存储和计算
(1)创建
var d= new Date(''2020/12/16 10:50:30'') //得到的时间是相对于0时区的时间 '2020/12/16 02:50:30'
var d = new Date(2020,11,16,11,30,50) //其中的月份11代表12月份 若填12则代表下一年的1月 月份范围0~11 代表1~12月
var d= new Date() //得到当前操作系统的时间(相对于0时区的)
var d=new Date(1608336000000) //存储的是距离计算机元年的毫秒数，产生一个对应的日期时间 2020-12-19T00:00:00.000Z
(2)获取时间的方式
以var d=new Date(1608336000000) 得到的时间为例 2020-12-19T00:00:00.000Z
d.getFullYear() //获取年2020
d.getMonth() // 得到值为11 加1为真实的月份值
类似的d.Date/Hours/Minutes/Seconds/Milliseconds(毫秒)
getDay 获取星期，0~6 代表星期日~星期六
getTime 获取距离计算机元年的毫秒数
(3)转为本地字符串格式 //仅用于调试 有兼容性问题
d.toLocaleString() //显示当前（本地时间）包含年月日时分秒
d.toLocaleDateString() //显示当前的年月日
d.toLocaleTimeString() // 显示当前的时分秒
(4)设置
d.setFullYear/Month/Date/Hours/Minutes/Seconds/Milliseconds(毫秒) //设置年月日时分秒 但无法设置星期
setTime 设置距离计算机元年的毫秒数，会产生一个新的日期时间
var d1=new Date();
//拷贝Date对象
var d2=new Date(d1)
这样操作可以保留原来的时间操作变更时间 如直接将变量赋值 更改其一 另一个也会更改
18.Number对象
new Number() 将数据转为数值型，返回对象
Number() 将数据转为数值型，返回数值
toFixed(n) 将一个数字保留小数点后n位
19.Boolean对象
new Boolean() 将数据转为布尔型，返回对象
Boolean() 将数据转为布尔型，返回布尔型数据
20.错误处理
(1)常见错误
语法错误(SyntaxError)：不符合语法规范，出现中文符号，缺少括号...
引用错误(ReferenceError)：使用了未声明的变量，变量名称写错
类型错误(TypeError)：使用了未创建的函数或者方法，方法名字写错
范围错误(RangeError)：数据超出了规定范围
自定义错误： throw 错误内容
(2)错误处理
try{
尝试执行，可能出现错误；一旦出现错误，就执行catch中的语句，不再影响后续代码执行
}catch(err){
把错误赋给err
处理错误
}
21.ES6 全称 ECMAScript 6.0 ，是 JavaScript 的一个版本标准，2015.06 发版。2015年6月， ES6 正式通过，成为国际标准。(这里简单介绍下常用的知识点)
(1)块级作用域
块级作用域下let声明的变量是局部变量，不允许被外部访问.,与回调函数作用类似可以防止全局污染.
let 声明的变量,不存在变量提示而且同一作用域下不能重复声明同一变量
块级作用域:所有大括号{}之间的语句都可以称为块级作用域如while语句switch语句if else语句等等
(2)函数增强
可以个函数的形参设置默认值,若没有传递实参则会使用默认值
function ad(a,b,c=0){
return a+b+c;
}
ad(11,22) //这里没有传递c参数 默认为零.
(3)箭头函数()=>{}
类似于匿名函数,但是不等价于匿名函数
如数组arr的排序写法
arr.sort(function(a,b){return a-b}) 可以简写为
arr.sort((a,b)=>{
return a-b
})
还可以简写为 arr.sort((a,b)=>a-b)
这是因为:如果箭头函数的函数体之间只有一行代码并且是return形式，则可以简化为 sort( (a,b)=>a-b ).
(4)模板字符串
在调用console.log(` 这里可以写模板内容 ${引用内容} `)通过${} 在大括号内引用外部的变量,函数等等.
---------------------------------------------完
nodejs传送门https://www.cnblogs.com/CIBud/p/14169722.html
