2024年Web前端最新JavaScript基本知识总结(全)_js基础知识点总结，熬夜整理小米前端面试题

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

<script type="text/javascript">
  window.onload = function(){
       var oDiv = document.getElementById('div1');
   }
</script>
<div id="div1">这是一个div元素</div>

2

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

七,操作元素属性:

.操作和[]操作
属性写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
var oA = document.getElementById(‘link1’);
.操作 , 写属性
oA.style.color = ‘red’;
oA.style.fontSize = sValue;
[]操作 , 写属性
oA.style[sVal1] = sVal2;

innerHTML可以读取或者写入标签包裹的内容

var oDiv = document.getElementById(‘div1’);
//读取
var sTxt = oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML =<a href="http://www.itcast.cn">被改变了<a/>;

<div id="div1">这是一个div元素</div>

八,运算符和表达式

1,简介
运算符用于针对操作数进行运算, 表达式是由数字、字符串、运算符等的组合成的式子 比如1 + 2； “Jack” + “Rose”; a > b等
2,运算符分类
算数运算符
加+,减-,乘*,除/,求余数(保留整数)%,累加++,递减–
++:x = ++y; // 先++后赋值,x = y++; // 先赋值后++
–:x = --y; // 先–后赋值,x = y–; // 先赋值后–
赋值运算符
=,+=,-=,*=,/=,%=,例:x+=y等价于x=x+y
比较运算符
等于==,全等(值和类型)===,不等于!=,大于>,小于<,大于等于>=,小于等于<=
逻辑运算符
and&&,or||,not!
条件运算符
基于某些条件对变量进行赋值
var sex = 条件 ? man : woman ;
基于某些条件执行不同的表达式
var result = 条件 ? 5 + 5 : 1 + 2;
注意:如果把数字与字符串相加，结果将成为字符串。字符串与字符串相加也是字符串。

九,数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,‘asd’];

操作数组中数据的方法

1、获取数组的长度：aList.length;
2、用下标操作数组的某个数据：aList[0];
3、join() 将数组成员通过一个分隔符合并成字符串
4、push() 和 pop() 从数组最后增加成员或删除成员
5、unshift()和 shift() 从数组前面增加成员或删除成员
6、reverse() 将数组反转
7、indexOf() 返回数组中元素第一次出现的索引值
8、splice() 在数组中增加或删除成员
注意:
多维数组指的是数组的成员也是数组的数组。
批量操作数组中的数据，需要用到循环语句

十,JS流程控制

1,选择结构
if语句,当指定条件为 true 时，该语句才会执行代码
if…else 语句, 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if … else if … else 语句, 选择多个代码块之一执行
switch 语句,使用该语句来选择多个代码块之一来执行，替代简化if…else if … else if
switch语句:

switch(n) {
case 1:  执行代码块 1
break;
case 2: 执行代码块 2
break;
default:
n 与 case 1 和 case 2 都不同时执行的代码
}

2,循环结构
for循环
for (初始化变量; 条件; 增量) {
被执行的代码块（循环体）
}
初始化变量 在循环（代码块）开始前执行
条件 执行循环（代码块）的条件。条件成立才执行代码块
增量 在循环（代码块）被执行之后执行 然后再次判断条件
For/In 循环
循环遍历对象的属性
var person = { fname: “John”, lname: “Doe”, age: 25 };
for ( x in person ) {
txt = txt + person[x];
}
while循环
在指定条件为真时循环执行代码块
while ( 条件 ) {需要执行的代码 （循环体）}
do/while 循环
在判断条件之前执行一次循环体，然后判断条件，如果为真再次执行循环。
do {需要执行的代码} while ( 条件 );
循环至少会执行一次 即使条件是 false
3,break和continue
break:用于跳出循环。跳出循环后继续执行该循环之后的代码
continue:中断本次循环，如果出现了指定的条件，继续执行下次循环
标签引用
可以对JS语句进行标记
通过标签引用，break 语句可用于跳出任何 JS 代码块

十一,函数

1,js函数
函数是被调用时执行的可重复使用的代码块
函数是一段实现具体功能的代码，比如求和函数
2,函数的作用
函数是将具体的操作封装成代码块，当下次用到这个操作的时候就可以直接使用这个函数，为了代码重用,使代码更加精简，便于修改需求和项目维护。
3,函数的格式
函数就是包裹在花括号中的代码块，前面使用关键词 function
function 函数名 ( 形式参数列表 ) {
这里是要执行的代码( 函数体 )
返回值：调用函数得到的值（注意：可以没有返回值；遇到return就退出函数）
想返回多个值用数组
}
JS 函数没有返回类型(不需要写返回类型),形参列表不需要标明类型
4,函数的使用
通过调用函数来使用。比如：sum（）
注意:在声明函数的前后都可以调用。JS可以在任何位置进行调用函数 当调用该函数时，会执行函数内的代码
函数可以不带参数,参数可以写多个,用逗号隔开
5,函数的类型
函数名就代表整个函数的声明。
函数的类型是function类型 类似于number、string、boolean、等数据类型
函数名也可以作为变量，可以赋值给其他的变量.
注意:如果将函数名赋值给了一个变量，那么这个变量就代表一个函数，可以通过这个变量调用函数, 比如test ( )
6,回调函数
将一个函数作为另一个函数的参数，那么这个函数就是回调函数
利用函数变量的思想在调用函数的时候将另一个函数作为变量
7,知识补充:
1),作用域:变量有效的使用范围
2),全局变量和局部变量
在函数外部声明的变量就是全局变量 可以在不同的函数中使用 浏览器关闭之前不会被销毁
在函数内部声明的变量就是局部变量 只能在这个函数内部使用 作用域结束之后销毁

3),变量与函数预解析

JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
4),arguments对象
函数体内部自带一个argument对象，这个对象是个数组，代表着所有的参数。
5),系统函数
JS是基于对象的语言 比如通过对象去调用函数 并不是直接调用函数（面向过程）
默认自定义的函数是添加到window里的。可以通过window.test( )调用 window也可以省略
比如alert（）这种系统封装好的函数，不需要我们声明直接使用的函数就是系统函数

十二,类型转换

1、直接转换 parseInt() 与 parseFloat()

alert('12'+7); //弹出127
alert( parseInt('12') + 7 );  //弹出19 
alert( parseInt(5.6));  // 弹出5
alert('5.6'+2.3);  // 弹出5.62.3
alert(parseFloat('5.6')+2.3);  // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

2、隐式转换 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}
// 弹出'相等'
alert('10'-3);  // 弹出7

3、NaN 和 isNaN

alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

十三:调试程序的方法

1、alert
2、console.log
3、document.title

十四,定时器

定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法:
myalert可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法中的第二个参数是millisec，表示延时或者重复执行的毫秒数。

/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。