本文已参与「新人创作礼」活动，一起开启掘金创作之路。
目录
一.学前基础
1.JS可以实现的功能
1.实现表单的账号密码检测，比如输入的格式不合格，就没有必要发送给服务器，在浏览器内部用js解决。
2.浏览器如何执行JS
浏览器分为两部分：渲染引擎和JS引擎
渲染引擎：解析HTML和CSS，俗称内核
JS引擎：也称为JS解析器，读取JS代码，对其处理再运行。
3.JS组成
编辑
4.JS输出语句
编辑
<script> prompt("输入年龄"); alert("您未满18，该网站不适合你"); console.log("我是控制台"); </script>
二.变量
变量的使用
<script> var age = prompt("输入你的年龄"); if(age<18){ alert("小于18岁，不适合浏览该网站"); }else { alert("欢迎"+age+"岁的你"); } </script>
扩展
1.声明了变量，如果不赋值，该变量的值为undefined。
2.不声明，直接赋值使用是可以的，默认自动声明。不声明会变成全局变量。
3.不要用name作为变量名，它在浏览器中有特殊含义。
三.数据类型
1.介绍
介绍
1.js是弱类型语言，不用提前声明变量的类型，在程序运行过程中，类型会根据等号右边的值被自动确定。
2.变量的数据类型是可以变化的。
如var x = 10； x = 'zzz';
分类
编辑
编辑
2.Number
Number中的最大值最小值
编辑
三个特殊值
编辑
判断是不是数值
<script> alert(isNaN(10)); alert(isNaN('zz')); </script>
3.String
String 字符串型
字符串的嵌套
var nickNmae = "新‘秋十’二";
特殊字符的表示
编辑
字符串的API
判断字符串的长度 var nickNmae = "新‘秋十’二"; alert(nickNmae.length);
4.布尔，未定义，null
布尔类型
true参加运算看作1，false参加运算看作0
alert(true+1); //2
未定义类型
var v = undefined; alert(v + 'comz'); //字符串类型 ‘undefinedcomz’ alert(v + 1); //NAN
null类型
var v = null; alert(v + 'comz'); //字符串类型 ‘nullcomz’ alert(v + 1); //1
获取变量数据类型
var a = 'a'; alert(typeof a);
5.数据类型转换
数据类型转换
转为字符串类型
编辑
转为数字型
比如将表单中拿到的参数该为数字
编辑
+表示字符串拼接，结果是字符串类型。
-，*，/会先变成number类型，再进行运算。
转换为布尔型
编辑
四.运算符
这里只记录一些陌生的运算符知识点
等号
alert(18=='18');
返回true，==会将等式两边的表达式先转为number类型
全等号
alert(18==='18');
返回false，全能符号要求两侧的值和数据类型要完全一致
&&
alert(123&&456);//456 alert(0&&456);//0
如果表达式1不为0，那么返回第二个表达式
如果表达式1为0，那么返回0
'' NAN null undefined 都视为假的
||
alert(123||456);//123 alert(0||456);//456
第一个为真，则返回第一个，否则返回第二个
var num = 0; alert(123||num++); alert(num); //0
遇到123，就逻辑中断，后面的num++不再执行，所以num为0
五.数组
声明数组
var arr = new Array();//创建了一个空数组 var arr = new Array(2);//创建了一个长度为2的数组，数组是空的 var arr = new Array(2，3);//里面有两个数组元素2和3 var arr = [1,'two',3.0,4];
获取数组中的元素
var arr = [1,2]; alert(arr[0]);
遍历数组
var arr = [1,'two',3.0,4]; alert(arr);
或用for循环和下标来遍历
数组的长度
var arr = [1,'two',3.0,4]; alert(arr.length);//4
添加数组元素
var arr = [1,'two',3.0,4]; alert(arr.length);//4 arr.length = 5; alert(arr[4]);//undefined arr[4] = 5; alert(arr[4]);//5
编辑
var arr = [1,2,3]; arr.push(4); alert(arr); arr.pop(); alert(arr); arr.unshift(0); alert(arr); arr.shift(); alert(arr);
检测是否为数组
var arr = []; alert(arr instanceof Array); alert(Array.isArray(arr));
数组反转
var arr = [1,2,3]; arr.reverse();
数组排序
//只能排位数相同的数组元素的顺序 var arr = [1,3,2,5]; arr.sort(); //位数不同，升序排列 var arr = [1,3,2,5]; arr.sort(function(a,b){ return a-b; }); //位数不同，降序排列 var arr = [1,3,2,5]; arr.sort(function(a,b){ return b-a; });
数组的索引
编辑
var arr = ['one','two','three']; alert(arr.indexOf('one'));
数组转为字符串
var arr = [1,2,3]; alert(arr.toString());//用逗号进行分割 "1,2,3" alert(arr.join('-'));//可以指定分隔符 "1-2-3"
六.函数
声明和调用函数
function add(){ alert("hi"); } add();
var add = function(){ console.log(1); } add();
下面这种函数没有名字，add是变量名，所以这种函数称为匿名函数
带参数的函数
function add(character){ alert(character); } add("hi");
形参和实参的匹配问题
实参多于形参
function add(character1,character2){ alert(character1+character2); } add("hi","hello","oops");//hihello
形参多于实参
function add(character1,character2){ alert(character1+character2); } add("hi");//hiundefined add(1);//NAN
函数的返回值
function add(character1,character2){ var result = character1+character2; return result; } var result = add(1,2); alert(result);
只能返回一个值，要返回多个值可以用数组
function add(c1,c2){ return [c1+c2,c1-c2,c1*c2]; } var result = add(1,2); alert(result);
函数如果没有return，则返回undefined。也就是说所有的函数都有返回值。
arguments的使用
当不确定有多少个参数传递的时候，可以用arguments来获取，arguments对象中存储了传递的所有参数。
function add(){ console.log(arguments); } add(1,2);
arguments是伪数组，不是真正意义上的数组。
伪数组的特点：
1.具有length属性
2.按照索引方式进行存储
3.没有数组的一些方法，如pop（），push（）
七.作用域
全局作用域
在js文件中的变量或在script标签中的变量的作用域
注意：在函数中如果定义一个变量时没有用var，而是直接给一个变量赋值，那么这个变量就是全局变量。
局部作用域
在函数中的变量的作用域
函数的形参也是局部变量
对比
全局变量只有浏览器关闭的时候才会销毁，比较占内存。
局部变量当我们程序执行完毕就会销毁。
注意
现阶段没有块级作用域
if(1){ var a = 1; } alert(a);
不会报错
JS在es6的时候新增了块级作用域，在花括号里面的内容
八.预解析
js引擎运行js，分为两步。
1.预解析：js引擎会把js里面所有var的变量还有function提升到当前作用域的最前面。
变量提升就是把所有的变量声明提升到当前的作用域最前面。不提升赋值操作。
//1. alert(num1);//会报错 //2. alert(num2); var num2 = 10;//输出undefined //3. fn(); function fn(){ alert(1); //正常输出 } //4. fn(); var fn = function (){ alert(1); //会报错 }
第二个例子中，预解析时num2被提到最前面，然后alert（num2）会输出未定义，再给num2赋值。
第四个例子中，先将var fn提到前面，再执行fn();因为fn没有赋值，所以报错。
函数提升是把所以的函数声明提升到当前作用域的最前面
第三个例子就是把函数提到了fn()前面。赋值形式的函数不能提升。
九.对象
1.自定义对象
创建对象
1.利用字面量创建对象
var obj = { uname : '周', age : 18, sex : '男', sayHi:function (){ alert("hi"); } }; //创建了一个空的对象 //跟数组的区别：数组是中括号，创建对象是大括号 alert(obj.uname); alert(obj['sex']);
2.利用new关键字创建对象
var obj = new Object(); obj.uname = '周'; obj.age = 18; obj.sex = '男'; obj.sayHi = function (){ alert("hi"); } alert(obj.uname); obj.sayHi();
3.利用构造函数来创建对象
function Star(uname,age,sex){ this.uname = uname; this.age = age; this.sex = sex; } var star = new Star('周',18,'男');
遍历对象
for in 语句对数组或对象属性进行循环操作
得到属性名
var obj = { name : "zhou", age :18, sex : '男' } for( k in obj){ alert(k); }
得到属性值
var obj = { name : "zhou", age :18, sex : '男' } for( k in obj){ alert(obj[k]); }
2.内置对象
Math
alert(Math.PI); alert(Math.max(1,20,300));//求最大值 alert(Math.floor(3.1));//向下取整 alert(Math.ceil(3.1));//向上取整 alert(Math.round(3.1));//四舍五入 alert(Math.abs(-5));//绝对值 alert(Math.min(1,2,5));//最小值 function getRandom(min,max){//返回两个数之间的随机整数并且包含这两个整数 return Math.floor(Math.random() * (max-min+1))+min; } alert(getRandom(1,10));
会将类似这样的字符串‘1’ 转换为number类型
Date
Date是构造函数，需要创建Date对象，跟Math不同。
var date = new Date(); alert(date);//返回当前系统的当前时间 var date1 = new Date(2020,4,10); alert(date1);//返回的月份会大一个 var date2 = new Date('2021-4-10 8:30:20'); alert(date2);//输出字符串中的时间
日期格式化
编辑
编辑
//输出2022 4月10日 星期三 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; var day = date.getDay(); alert('今天是'+year+'年'+month+'月'+dates+'日'+arr[day]);
封装一个格式为xx:xx:xx的返回时间的函数
function time(){ var time = new Date(); var h = time.getHours(); h = h<10? '0'+h : h; var m = time.getMinutes(); m = m<10? '0'+m : m; var s = time.getSeconds(); s = s<10? '0'+s : s; return h+':'+m+':'+s; } alert(time());
Date的总毫秒数（时间戳，不是当前时间的毫秒数，而是距离1970年一月一日过了多少毫秒数）四种方法
var date = new Date(); alert(date.valueOf());//距离1970 1月1日多少毫秒 alert(date.getTime());//距离1970 1月1日多少毫秒 var date1 = +new Date(); alert(date1);//距离1970 1月1日多少毫秒 alert(Date.now());//距离1970 1月1日多少毫秒
倒计时案例
编辑
function countDown(time){ var nowTime = +new Date();//返回当前时间距离1970总的毫秒数 var inputTime = +new Date(time);//返回输入时间距离1970的总毫秒数 var times = (inputTime-nowTime) / 1000;//剩余时间的总秒数 var d = parseInt(times/60/60/24);//天 d = d<10?'0'+d:d; var h = parseInt(times/60/60%24);//时 h = h<10?'0'+h:h; var m = parseInt(times/60%60);//分 m = m<10?'0'+m:m; var s = parseInt(times%60)//秒 s = s<10?'0'+s:s; return d+'天'+h+'时'+m+'分'+s+'秒'; } alert(countDown('2022-5-1 18:00:00'));
字符串对象
将普通的变量包装成了复杂对象，除了String类型还有Boolean和number
var str = "abca"; alert(str.indexOf('a')); alert(str.indexOf('a',2)); //从索引2的位置开始查找
根据位置返回字符
编辑
拼接字符串
编辑
替换字符
var str = "abcaaaaaaaaaaa"; alert(str.replace('a','b'));//只替换第一个字符a //替换所有的a while(str.indexOf('a')!=-1){ str = str.replace('a','b'); } alert(str);
字符转为数组
var str = "a,b,a,a,aa"; var arr = str.split(",");//逗号表示识别字符串中的分隔符 alert(arr);
\
