Web前端最新JavaScript入门到精通（三）连载，2024年阿里前端岗面试必问

最新推荐文章于 2024-06-02 21:27:33 发布

2401_84446580

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量589

点赞数 16

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84446580/article/details/138990845

版权

程序员专栏收录该内容

163 篇文章 0 订阅

订阅专栏

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

html5

var newArr = [];

var j = 0;

for(var i=0;i<arr.length;i++){

if(arr[i]>10){

    //新数组应该从零开始，依次递增

    //方法一

    newArr[j]=arr[i];

    j++;

    //方法二，刚开始newArr.length就是0,newArr.length会根据数组个数的增加而增加

    //newArr[newArr.length]=arr[i]; 

}

}console.log(newArr);




![](https://img-blog.csdnimg.cn/3f5c7071b3e5456896e9ce127a4eba4f.png)



### 1.10 删除数组的指定元素

var arr = [2,0,6,1,77,0,54,32,25,7];

var newArr = [];

for(var i = 0;i<arr.length;i++){

//如果arr[i]不等于0执行下面语句，相当于删除0，如果删除数组没有元素，整句输出

if(arr[i] !=0){ 

    newArr[newArr.length]=arr[i];

}

}console.log(newArr);




![](https://img-blog.csdnimg.cn/2c1eccf1e02d456c96f0910045e8cefd.png)



### 1.11 翻转数组

var arr = [‘red’,‘greed’,‘yellow’,‘blue’];

var newArr = [];

for(var i = arr.length-1;i>=0;i–){

newArr[newArr.length] = arr[i];

}console.log(newArr);




![](https://img-blog.csdnimg.cn/856de8c69e354462b5be419e98cbf749.png)



### 1.12 经典案例 冒泡排序

var arr = [2,4,5,1,3];

for(var i = 0;i<=arr.length;i++){ // 外层循环趟数

for(var j = 0;j<=arr.length-i-1;j++){ //里层循环次数

    if(arr[j]>arr[j+1]){

        var temp = arr[j];

        arr[j]=arr[j+1];

        arr[j+1]=temp;

    }

}

}console.log(arr);




![](https://img-blog.csdnimg.cn/4806f858d77245bdbbb3b39cf502115b.png)



>  数组的基本操作差不多就这些，后期遇到其它的在补充。



![](https://img-blog.csdnimg.cn/cde3d9bfef084a2ca0295bb95c2c5a2b.gif)



2.函数

----



### 2.1 定义：



函数就是封装了一段可以被重复执行调用的代码块  目的：就是让大量代码重复使用



### 2.2 函数形参与实参的关系

function getSum (num1, num2) { //在声明函数的小括号里面是形参（形式上的参数）

var sum = 0;

for (var i = num1; i < num2; i++) {

    sum += i;

} console.log(sum);

}

//1.如果实参的个数和形参一致，正常输出结果

getSum(1, 50); //在函数调用的小括号里面是实参（实际上的参数）

//2.如果实参的个数多于形参的个数，会取到形参的个数

getSum(1, 50, 30);

//3.如果实参的个数小于形参的个数，多于的形参定义为undefined 最终的结果可能是 NaN或0

getSum(1);

// 所以尽量形参个数匹配实参个数




![](https://img-blog.csdnimg.cn/a0d5384ac9ed45f7845e34c4e1c79808.png)



### 2.3 函数的返回值语句



定义：我们希望函数将值返回给调用者，此时通过使用return语句实现

//函数返回值格式

function 函数名(){

return 需要返回的结果；

}

函数名();




举例：两数求和；求两数的最大值；利用函数求数组\[5,2,99,101,67,77\]中的最大值。

//两数求和

function getSum (num1, num2) {

return num1 + num2;

} console.log(getSum(1, 3));

//求两数最大值

function getMax (num1, num2) {

// if(num1>num2){

//     return num1;

// }else{

//     return num2;

// }

return num1 > num2 ? num1 : num2;

}console.log(getMax(1, 9));

//利用函数求数组[5,2,99,101,67,77]中的最大值。

function getArrMax (arr) {

var max = arr[0];

for (var i = 1; i <= arr.length; i++) {

    if (arr[i] > max) {

        max = arr[i];

    }

}

return max;

}

// getArrMax([5,2,99,101,67,77])实参是一个数组传递过去

// 在实际开发中，经常用一个变量来接受函数返回的结果使用更简单

var re = getArrMax([5, 2, 99, 101, 67, 77]);

console.log(re);




![](https://img-blog.csdnimg.cn/41ffa2d23cb345b8848c944f4ffd2d45.png)



注意事项：



1\. return 终止函数

function getSum (num1, num2) {

return num1 + num2; //return 后面的代码不会被执行

alert('我真的想被执行啊！')

}

console.log(getSum(1, 4));




![](https://img-blog.csdnimg.cn/8845ca1ba6044984961eef72a4edbaf7.png)



2\. return 只能返回一个值，而且是最后的一个值

function fn (num1, num2) {

return num1, num2; //返回的结果只能是一个值

}

console.log(fn(1, 2));




![](https://img-blog.csdnimg.cn/4bf869bf7cb641e88cbdf7bfbcaf8aa1.png)



3\. 求任意两个数的加减乘除结果

function getResult (num1, num2) {

return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];

}

var re = getResult(1, 2); //返回的是一个数组

console.log(re);




![](https://img-blog.csdnimg.cn/8c31c843af804140a967da2f7a4fc73b.png)



4\. 函数如果有return 则返回的是return后面的值，如果函数没有return 则返回undefined

function fun () {

// return 666;

} console.log(fun());




![](https://img-blog.csdnimg.cn/34a00f563ee84a449be82ba08e4cee22.png)



5\. 补充： break、continue、return的区别



break：结束当前的循环体（for、while）



continue：跳出本次循环、继续执行下次循环（如for、while）



return：不仅可以退出循环还能够返回return语句中的值，同时还可以结束当前的函数体内的代码



### 2.4 arguments使用



定义：只有函数才有arguments对象 而且是每个函数都内置好了这个arguments

function fn () {

console.log(arguments); //里面存储了所有传递过来的参数

console.log(arguments.length);

console.log(arguments[2]);

// 我们可以按照数组的方式遍历arguments

for (var i = 0; i<arguments.length;i++){

    console.log(arguments[i]);

}

}

fn(1, 2, 3);

// 伪数组并不是真正意义上的数组

// 1.具有数组的length属性

// 2.按照索引的方式进行存储的

// 3.它没有真正数组的一些方法 pop() push() 等等




![](https://img-blog.csdnimg.cn/f9c252dcbcc34d7d9692f52952374003.png)



 案例：利用arguments求任意个数的最大值

function getMax() {

var max = arguments[0];

for(var i = 0;i<arguments.length;i++){

    if(arguments[i]>max){

        max = arguments[i];

    }

}return max;

}

console.log(getMax(1,2,3));

console.log(getMax(1,56,6,65,64));

console.log(getMax(1,2,3,42,44,422));




![](https://img-blog.csdnimg.cn/e57601c190b642abbdebd64a41a7041f.png)



### 2.5 reverse翻转，函数翻转任意数组

function reverse(arr) {

var newArr = [];

for(var i = arr.length-1;i>=0;i--){

    newArr[newArr.length] = arr[i];

}

return newArr;

}

var arr1 = reverse([1,3,2,6,9]);

console.log(arr1);




![](https://img-blog.csdnimg.cn/7b2f7e23c4024e719d97a74ffb0e9424.png)



### 2.6 函数冒泡排序 sort排序

function sort(arr) {

for(var i = 0;i<arr.length;i++){

    for(var j = 0;j<arr.length-i-1;j++){

        if(arr[j]>arr[j+1]){

            var temp = arr[j];

            arr[j] = arr[j+1];

            arr[j+1] = temp;

        }

    }

}

return arr;

}

var arr1 = sort([7,4,6,9]);

console.log(arr1);




![](https://img-blog.csdnimg.cn/20f407a412674651bb5492c6c1d046e2.png)



### 2.7 函数判断闰年

function isRunYear(year) {

// 如果是闰年我们返回 true 否则 返回 false

var flag = false;

if(year%4 == 0 && year % 100 == 0 || year % 400 == 0){

    flag = true;

}

return flag;

}

console.log(isRunYear(2000));

console.log(isRunYear(2003));




![](https://img-blog.csdnimg.cn/43e6ae0328ec4b82952ec1846f2eb721.png)



###  2.8 函数是可以相互调用的



### HTTP

* HTTP 报文结构是怎样的？

* HTTP有哪些请求方法？

* GET 和 POST 有什么区别？

* 如何理解 URI？

* 如何理解 HTTP 状态码？

* 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

* 对 Accept 系列字段了解多少？

* 对于定长和不定长的数据，HTTP 是怎么传输的？

* HTTP 如何处理大文件的传输？

* HTTP 中如何处理表单数据的提交？

* HTTP1.1 如何解决 HTTP 的队头阻塞问题？

* 对 Cookie 了解多少？

* 如何理解 HTTP 代理？

* 如何理解 HTTP 缓存及缓存代理？

* 为什么产生代理缓存？

* 源服务器的缓存控制

* 客户端的缓存控制

* 什么是跨域？浏览器如何拦截响应？如何解决？  

  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/3a28cc7b978db5d78ce5f1c5ec78122b.png)

2401_84446580

关注

16
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Web前端最新JavaScript入门到精通（三）连载，2024年阿里前端岗面试必问

但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。//在函数调用的小括号里面是实参（实际上的参数）
复制链接

扫一扫