对于前几天发的HTML和CSS 知识总结，那是最基础的。接下来继续对js的学习总结以及所见的一些面经进行一个梳理。
一、关于JavaScript
我们在听到学习前端的时候，总是能够听到学习前端一定需要学会基础三件套，也就是html、css和js。其中html和css是对网页的一个布局和装饰，而js则是对网页的一个交互进行处理的脚本语言。
而我对于js的理解分为以下几点：
1、运行在客户端的脚本语言
2、不需要编译，运行过程中由js解释器逐行来进行解释并执行
二、JavaScript基础语法
1、输入输出
alert('') 浏览器弹出警示框
console.log('') 浏览器控制台打印输出信息
prompt('') 浏览器弹出输入框，用户可以输入
2、变量
常见的三个声明变量的方法var、let、const
现在最常用的还是let和const，以下分别是let和const的特性
注意点：
字母(A-Za-z) 数字(0-9) 下划线(_) 美元符号($)组成，如：userage
严格区分大小写
不能以数字开头
不能是关键字和保留字
变量名必须有意义
遵守驼峰命名法，首字母小写，后面单词首字母大写
3、数据类型
1、数据类型的分类
JavaScript中有八种数据类型，分别为：String、Number、Boolen、Null、Undefined、Symbol、Object、BigInt
Number——用于任何类型的数字：整数或浮点数，在 ±(253-1) 范围内的整数
String——用于字符串：一个字符串可以包含 0 个或多个字符
Null—— 用于未知的值
Undefined——用于未被定义的值
Symbol——用于唯一的标识符
Boolen——用于判断true和false
BigInt——可以表示任意大的整数
Object——用于更复杂的数据结构
2、数据类型的转换
转换为字符串
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
转换为数字型
let str = '42'
let num = parseInt(str)
console.log(typeof num);
3、运算符
1）基础运算符
+加 -减 *乘 /除 %取余
2）条件表达式 ？ 表达式1 ：表达式2 ；
如果条件表达式为true时，结果为表达式1；为false时，结果为表达式2
let num = 10
let num1 = 20
let result = num > 15 ? '是的' : '不是的'
let result1 = num1 > 15 ? '是的' : '不是的'
console.log(result, result1);
4、数据类型的判断
1、typeof
2、instanceof
3、Object.prototype.toString.call()
4、循环
while
while可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。
let n = 0;
while (n < 3) {
n++;
}
console.log(n);
do...while
do...while语句创建一个可执行指定语句的循环，先执行一遍，再去判断语句。所以至少执行一次
let i = 0
let arr = []
do {
i += 1
arr.push(i)
} while (i < 1)
console.log(arr);
for
for每次迭代之前都要检查条件，可以使用其他设置
let i = 0
let arr = []
for (let i = 0; i < 5; i++) {
arr.push(i)
}
console.log(arr);
5、数组
1、创建数组
1、new一个对象
let arr = new Array();
2、数组字面量
let arr = [];
let arr = [];
let arr1 = new Array();
console.log(arr);
console.log(arr1);
2、数组方法
添加/删除方法
- push 在末尾插入 用法例如：arr.push(添加的元素)
- unshift 在首部插入 用法例如：arr.unshift(添加的元素)
- pop 删除末尾，一次只能删一个 用法例如：arr.pop()
- shift 删除首部 用法例如：arr.shift()
- splice通过删除或替换现有元素或者原地添加新的元素来修改数组
- slice 有begin和end两个参数，是截取开始和结束的位置，以获得新的数组
- concat 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
let arr1 = [1, 2, 3, 4, 5, 6];
let arr2 = ['a', 'b', 'c', 'd'];
//push添加
arr1.push(0)
console.log(arr1);
//unshift添加
arr1.unshift(7)
console.log(arr1);
//pop删除
arr1.pop()
console.log(arr1);
//shift删除
arr1.shift()
console.log(arr1);
//splice
arr2.splice(2, 0, 'f') //2是从第几个开始，0是从arr2[1]开始替换几个,'f'是替换的元素
console.log(arr2);
//slice
console.log(arr2.slice(2, 4)); //包括begin，但不包括end
//concat
let arr3 = arr1.concat(arr2)
console.log(arr3);
判断数组中是否具有某个元素
- indexOf
- include(value)
let arr1 = [1, 2, 3, 4, 5, 6];
console.log(arr1.indexOf(3)); //给出位置索引
console.log(arr1.includes(2)); //给出true或者false
翻转/排序/转换
- reverse 使得数组翻转
- sort 使得数组按照顺序排列
- join 使得数组转换为字符串
- split 使得字符串转为数组
let arr1 = [1, 4, 5, 3, 2, 6];
let str = 'I NO XUE XI'
console.log(arr1.reverse());
console.log(arr1.sort((a, b) => a - b)); //a-b为正序
console.log(arr1.sort((a, b) => b - a)); //b-a为逆序
console.log(arr1.join('-')); //用-连接每个元素
console.log(str.split(' ')); //以空格符为标识分割
6、 函数
1、创建函数
1、let fn = function(){}
2、function fn(){}
在花括号中添加功能即可
2、箭头函数
以上面的sort排序中(a,b)=>a-b为例,当参数不多时，和表达式简单的情况下，可以省略花括号或者中括号。
正常情况为()=>{},箭头函数可以改变this的指向问题
7、对象
1、创建对象
1、let obj =new Object()
obj.属性 = '值'
obj.方法 =function(){}
2、let obj ={
this.属性 =值；
this.方法 =function(){}
}
在花括号中添加元素属性即可
2、调用对象
1、对象名.属性名
2、对象名['属性名']
3、对象名.方法名()
主要是使用第一种
8、数学对象Math
静态方法有以下几点：
Math.abs()：绝对值Math.ceil()：向上取整Math.floor()：向下取整Math.max()：最大值Math.min()：最小值Math.pow()：幂运算Math.sqrt()：平方根Math.log()：自然对数Math.exp()：e的指数Math.round()：四舍五入Math.random()：随机数
Math.abs()：返回参数的绝对值
Math.ceil();Math.floor()：向上取整和向下取整
Math.max();Math.min():最大值和最小值
Math.random():随机数
9、日期和时间Date
静态方法有以下几点：
- getDate():根据本地时间，返回一个指定的日期对象为一个月中的哪一日
- getFullYear():根据本地时间返回指定日期的年份
- getMonth():根据本地时间，返回一个指定的日期对象的月份，为基于0的值
- getDay():方法根据本地时间，返回一个具体日期中一周的第几天，0 表示星期天
- getHours():方法根据本地时间，返回一个指定的日期对象的小时
- getMinutes():方法根据本地时间，返回一个指定的日期对象的分钟
- getSeconds():方法根据本地时间，返回一个指定的日期对象的秒
function DateDemo() {
var d, s = "今天日期是: ";
let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
d = new Date();
s += d.getFullYear() + "/";
s += (d.getMonth() + 1) + "/";
s += d.getDate();
s += arr[d.getDay()];
s += d.getHours() + ':';
s += d.getMinutes() + ':';
s += d.getSeconds();
return (s);
}
console.log(DateDemo());
这里也附上一个定时器的代码，根据setInterval实现实时倒计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.timeDown-box {
position: relative;
margin: 100px auto;
width: 200px;
height: 270px;
background: url(daojishi.png) no-repeat;
}
.text1 {
text-align: center;
padding-top: 30px;
font-size: 35px;
font-weight: 1000;
color: white;
}
.text2 {
text-align: center;
padding-top: 100px;
font-size: 17px;
font-weight: 1000;
color: white;
}
.hour,
.minute,
.second {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
background-color: black;
padding: 5px;
margin-left: 18px;
margin-top: 12px;
color: white;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="timeDown-box">
<div class="text1">京东秒杀</div>
<div class="text2">18:00点场 距结束</div>
<div class="timeDown" style="position:relative">
<span class="hour"></span>
<span class="minute"></span>
<span class="second"></span>
</div>
</div>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
function countDown(time) {
var nowTime = +new Date();
var inputTime = +new Date(time);
var times = (inputTime - nowTime) / 1000;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
countDown('2022-5-2 17:10:00');
setInterval(function() {
countDown('2022-5-2 17:10:00');
}, 1000);
</script>
</body>
</html>
