牛客网刷题总结+数组面试题整理【JS数组】

数组面试题JavaScript、ES6 高频重点面试题 | arry老师的博客-艾编程

1、你知道 JS 数组有哪些方法 ?(同花顺,阿里、自如、网易)

pop(末尾删除)     push(末尾添加)          shift(首部删除)       unshift(首部添加)

sort(排序)            reverse(翻转)

join(连接)             tostring(转为字符串)

contact(连接)

splice(删除或替换)

slice(截取)

不改变原数组的方法:join,toString,contact,slice(截取)、forEach、map、filter

2、数组去重的方式有哪些?时间复杂度分别是多少?(同花顺、阿里、字节、百度)

数组去重 1.用set 2.用两层for循环+splice 3.利用indexof??+push

3、将数组的length设置为 0,取第一个元素会返回什么?(同花顺)

undefined?

 arr1 = []
 console.log(arr1[0]);//undefined

4、 代码题 :用尽可能多的方法实现数组扁平化(同花顺)

 法1.用ES6新语法 arr.flat

 <script>
        arr = [
            [1, 2, 2],
            [6, 7, 8],
            [11, 12, [12, 13, [14]]], 10
        ]
        console.log(arr.flat());
        console.log(arr.flat(1));//扁平化1级
        console.log(arr.flat(2));//扁平化2级
        console.log(arr.flat(3));//扁平化3级
        console.log(arr.flat(Infinity));//扁平化无限级
</script>

法2.转换为字符串

5、 什么是类数组 ?(百度)

JS中类数组主要分为这两类:

  • 函数参数对象arguments,箭头函数没有arguments参数
function fn() {
    console.log(arguments);
}
fn()
  • 利用querySelectorAllgetElementsByName获取到的NodeList
  • 利用getElementsByTagNamegetElementsByClassName获取到的HTMLCollection

html内容:

<ul id="ul">
  <li name="li" class="li">11</li>
  <li name="li" class="li">22</li>
  <li name="li" class="li">33</li>
</ul>

四种类数组的获取方式:

document.querySelectorAll("li");
document.getElementsByTagName('li');
document.getElementsByClassName('li');
document.getElementsByName('li');

类数组&&数组

arguments为类数组代表和Array进行对比

类数组:

function fn() {
  console.log(arguments); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ] 
  console.log(arguments.length); // 2
  console.log(typeof arguments); // object
  console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}

fn(1, 2);

数组:

const arr = [1, 2];
console.log(arr); // (2) [1, 2]
console.log(arr.length); // 2
console.log(typeof arr); // object
console.log(Object.prototype.toString.call(arr)); // [object Array]

通过上述打印可以看到类数组和数组的共同点和差异:

共同点

都具备length属性,可以获取其元素个数

差异

  1. 类数组上明显多了一个callee属性,数组上并不存在
  2. 类数组不能调用数组的方法
  3. 链接:https://juejin.cn/post/7017997007352496136

6、类数组怎么转换为数组,说说你知道的所有方法 (阿里)

1. 使用callapply改变this指向来调用数组的方法

function fn() {
	console.log(Array.prototype.slice.call(arguments)); // [1, 2]
}

fn(1, 2);
复制代码

首先借用数组的slice函数,返回的就是一个真正的数组

2.  Array.from,利用数组自带的from函数将类数组转换为数组

cosnt arr = Array.from(arguments);

其返回一个数组

3.  扩展运算符,可以如下使用:

const arr = [...arguments]

也可以直接在函数接受参数时使用:

function fn(...args) {}

此时在函数内部args就是一个数组了

JS 类数组转数组的几种方法(四种)_雪急飞绪的博客-CSDN博客_js类数组转数组

7、arguments 类数组,如何遍历类数组(滴滴)

8、 判断数组的方式(小米)

Array.isArray()

9、新创建一个数组空间(小米)

10、用过 ES6 哪些数组的方法,简述他们的特性(小米)

11、数组中的方法如何实现 break(滴滴)

12、比较常用的数组方法 map() reduce() find() findIndex() push() .... 哪些可以改变原数组,哪些不可以改变(滴滴)

13、JS 中 filter 方法如何使用 ?(小米)

一、创建数组的方式

1.使用Array构造函数

var color=new Array();    

注意:括号里面参数可以有参数,

若为一个数字,表示该数组的长度;

如果为多个数字或者一个(多个)非数字表示的是传递数组中应该包含的值。

2.使用数组字面量

var color=[];

关于数组长度的两个例题

例题1.有如下代码片段,请问 a.length 的值是多少?   6

var a=[];
a[0]=1;
a[1]=2;
a[2]=3;
a[5]=4;

 数组长度会自动延长到最后一个被赋值的位置,中间没有被赋值的都为 undefined

例题2

var arr = [];
arr[0] = 0;
arr[1] = 1;
arr.foo = 'c';
console.log(arr.length);  //2 

 二、数组方法

1.增删方法

方法说明返回值
push(参数1,...)末尾添加一个或多个元素返回新的长度
pop()用于删除并返回数组的最后一个元素,无参数返回删除的元素值
shift()删除数组的第一个元素返回删除的元素值,即第一个元素
unshift()在数组开头添加一个或多个元素返回新的长度
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());  // 输出结果为: "tomato"
console.log(plants.pop('2')); //kale


console.log(plants);
// 此时的数组: ["broccoli", "cauliflower", "cabbage", "kale"]


var a =[1,2,3];
var b = a.slice();
b.push(4);
console.log(a)
// [1,2,3]


arr = [1, 2, 3]
newArr = arr.push(5)
console.log(newArr);
// 4

注意:pop()里面没有参数,及时有参数,也是删除最后一项

2.排序方法 

sort()数组元素进行排序改变原数组,返回新数组
reverse()颠倒数组中元素的顺序改变原数组,返回新数组

注意:

arr.sort((a,b)=>b-a);
console.log(arr);

是降序排序

arr = [1, 2, 3, 4, 5]
console.log(arr.reverse());//[5,4,3,2,1]
console.log(arr);//[5,4,3,2,1]

 3、数组索引方法 

indexOf()数组中查找给定元素的第一个索引如果存在返回索引号,不存在返回-1
lastIndexOf()在数组中的最后一个索引号如果存在返回索引号,不存在返回-1

4.数组转换为字符串

join()把数组用字符串拼接不影响原数组
toString()数组转换为字符串不影响原数组
arr = ['green', 'blue', 'red']
console.log(arr.join('-'));//green-blue-red
console.log(arr);//(3) ['green', 'blue', 'red']

console.log(arr.toString());//green,blue,red,用逗号隔开

5.其他方法  

concat() 用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本返回一个新数组,不影响原数组
slice()截取数组的的一部分返回一个新数组,不影响原数组
splice()通过删除、替换现有元素、原地添加新的元素来修改数组,并以数组形式返回被修改的内容返回新数组,会改变原数组

slice(参数1,参数2)

  • 参数1: 切割的起始位置,包含该元素
  • 参数2:切割的结束位置,不包含该元素
  • 如果只传一个参数,从这个位置截取到最后
  • <script>
            arr = ["A", "B", "C", "D", "E"]
            newArr = arr.slice(2, 4)
            console.log(newArr); //["C", "D"]
            console.log(arr);//["A", "B", "C", "D", "E"]
    </script>

splice(参数1,参数2,参数2)

  • 参数1:第几个开始
  • 参数2:要删除的个数
  • 参数3:删除位置的替补元素

当只有两个参数的时候

<script>
        arr = [1, 2, 3, 4, 5]
        arr1 = arr.splice(2, 2)
            //删除第第二个元素后的3个数组元素
        console.log(arr); //[1,2,5]
        console.log(arr); //[3,4]
 </script>
  <script>
        arr = [1, 2, 3, 4, 5]
      

        arr2 = arr.splice(2, 0, 'A', 'B')
        console.log(arr); // [1, 2, 'A', 'B', 3, 4, 5]
        console.log(arr2); //[]
  </script>

6.遍历数组

6.1 forEach()  用法

arr.foreach(function(currentValue,index,arr){}, thisValue)

1.该方法有三个参数,第一个参数为回调函数,必传

2.currentValue:必需,当前元素

3. index:可选,当前元素的索引值

4.arr: 可选,当前元素所属的数组对象

注意:

1. 不改变原数组,也没有返回值

2. forEach无法使用break,continue跳出循环

3. 使用return时,效果和在for循环中使用continue一致

4. forEach方法无法遍历对象

      var arr = [1, 2, 3];
        var sum = 0;
        arr.forEach(function(value, index, array) {
            console.log('每一个数组元素' + value);
            console.log('每一个数组元素的索引号' + index);
            console.log('每一个数组本身' + array);
            sum += value;
        })
        console.log(sum);

例题

let i = 0;
new Array(10).forEach(() => {
  i++;
});

输出值为0

new Array(10) 只是放了10个占位符,里面其实是空的,所以,forEach方法在数组元素为空时会跳过执行回调函数,相当于此选项回调函数并未执行,所以还是输出0

6.2 filter()

对数组的每一项运行给定函数,返回该函数会返回true的项组成的数组(筛选出符合条件的

不会对空数组进行检测

不改变原数组

      var arr = [12, 66, 3, 88];
        var newArr = arr.filter(function(value, index) {
            //return value >= 20;
            return value % 2 === 0
        })
        console.log(arr); //[12, 66, 3, 88]
        console.log(newArr);//[12, 66, 88]

6.3 map()

对数组的每一项运行给定函数,返回每次函数调用结果所组成的数组

arr.map()会对数组中每个元素进行单独判断,返回true或者false

1. 不会对空数组进行检测

2. 返回一个新数组,不会改变原始数组

3.map方法有返回值,可以return出来,map的回调函数中支持return返回值

4. map方法无法遍历对象,仅适用于数组的遍历

 以下代码执行后,array 的结果是?

let array = [,1,,2,,3];
array = array.map((i) => ++i)

[,2,,3,,4]
  • ES5
  • forEach(), filter(), reduce(), every() 和some()都会跳过空位。
  • map()会跳过空位,但会保留这个值
  • join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。
  • ES6 中都会将空位当做undefined

 let arr = [1, 2, 3]
 let arr1 = ['a', 'b', 'c']
 newarr1 = arr.map(function(e) {
            return this[e]
  }, arr1)
  console.log(newarr1); //['a', 'b', 'c']

  newarr2 = arr.map(item => {
            return item + 1
  })
  console.log(newarr2); //[2,3,4]

//可以链式调用
  newarr2 = arr.map(item => item + 1).map(item => item + 1)
  console.log(newarr2);//[3,4,5]

 6.4 every()

对数组中的每一项运行都给定函数如果该函数对每一项都返回true,则返回true

6.5 some()

对数组中的每一项运行给定函数如果该函数对任一项返回true,则返回true

例题:

//已知数组arr = [2,20,3,12,9],现在要对数组进行遍历,只要数组存在大于10的元素,则输出true,
//否则输出false,则下列选项中,符合要求的是()
arr  =   [2, 20, 3, 12, 9]
var res = arr.filter((val1, val2) => {
       return val1 > 10
})
console.log(res);

var res1 = arr.map((val1, val2) => {
       return val1 > 10
 })
 console.log(res1);

 var res2 = arr.every((val1, val2) => {
      return val1 > 10
 })
 console.log(res2);

 var res3 = arr.some((val1, val2) => {
          return val1 > 10
  })
 console.log(res3);

 reduce的用法
数组中的reduce方法可以用于数组求和,其中第一个参数是每次累加后的值,第二个参数是每次遍历的元素

[1,2,-3].reduce((a, b) => a - b, 0) 的值为:

函数 Math.max(x);的参数是Number类型,可以是小数,整数,正数,负数或者是0.如果不是上面所述类型就会返回NaN.

因为Math.max 参数里面只支持Math.max(param1,param2,param3…),所以可以根据刚才apply的这一特点来解决 
1 var max = Math.max.apply(null,array) === Math.max(param1,param2,param3…); 
这样轻易的可以得到一个数组中最大的一项(apply会将一个数组装换为一个参数接一个参数的传递给方法)

例题

在前提:var arr=[1,3,2]下,下面哪个操作会返回一个数组,并且不是arr        C

A. arr.push(3)

B. arr.reverse()

C. [ ].concat.call(arr,[ ])

D. [ ].sort.call(arr)

        arr = [1, 3, 2]

        console.log(arr.push(3)); //4

        arr = [1, 3, 2]

        console.log(arr.reverse()); //[2,3,1]

        arr = [1, 3, 2]

        console.log([].concat.call(arr, [])); //[1,3,2]

        arr = [1, 3, 2]

        console.log([].sort.call(arr)); //[1,2,3]

 因为concat操作不会改变现有的数组,而仅仅会返回被连接数组的一个副本

for of 和for in的区别?什么叫做可迭代?

for..in语句能够枚举对象的自定义属性和原型链属性,for in 的特点
1) for ... in 循环返回的值都是数据结构的键值名
2) 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
3) for ... in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键
4) 特别情况下, for ... in 循环会以任意的顺序遍历键名
总结一句: for in 循环特别适合遍历对象


for..of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合,for of 特点
1) for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名
2) 一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。
例1这个对象,没有 Symbol.iterator这个属性,所以使用 for of会报 obj is not iterable
for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。提供了遍历所有数据结构的统一接口

for in 和 for of的区别详解

hasOwnProperty只能获取自定义的属性

是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。 

<think>好的,我需要帮助用户查找乌鸫科技公司前端岗位的面试题目或准备资料。首先,我要看看用户提供的引用内容里有没有相关的信息。 引用[1]提到用户提到算法,比如朋友圈、有向图遍历、动态规划,但这是针对一般开发岗位的,可能和前端相关性不大。不过前端面试有时也会考算法,所以这点可以记下来。 引用[2]是关于安克创新的,可能和乌鸫科技无关,暂时忽略。 引用[3]是阿里乌鸫社招的Java面试题,包括笔试和面试问,比如数组处理、项目经验、Java基础、Redis、GC等。但用户需要的是前端岗位的信息,所以这些可能不太直接相关,不过可以推测乌鸫科技的面试流程可能包含类似的结构,比如笔试和多个面试环节,前端也可能涉及算法和项目经验。 引用[4]是关于Java后端开发的面试题,特别是finally块中的return行为,这可能属于编程语言细节,前端面试中JavaScript的类似问可能出现,比如闭包、事件循环等。 用户的问是关于前端岗位的,但目前提供的引用中没有直接提到前端的内容。因此,我需要根据现有信息推断可能的考点,并结合常见前端面试题来提供建议。 首先,乌鸫科技的其他岗位(如Java)的面试涉及算法、项目经验、系统设计等,前端可能也会有类似的考察,比如数据结构与算法、前端框架、JavaScript核心概念等。 另外,引用[3]中的问如Redis、缓存穿透、分布式锁等虽然属于后端,但前端可能涉及浏览器缓存、前端性能优化等问。需要转换到前端相关知识点。 可能的准备方向包括: 1. 前端基础:HTML/CSS/JavaScript核心,ES6+特性,闭包,原型链,事件循环。 2. 算法:类似动态规划、图遍历,但前端常考数组操作、字符串处理、DOM树遍历等。 3. 框架:React/Vue的原理,生命周期,状态管理。 4. 项目经验:前端项目中的难点,性能优化,跨浏览器兼容问。 5. 网络相关:HTTP协议,缓存机制,RESTful API,Web安全(XSS、CSRF)。 6. 系统设计:前端架构设计,组件化,SPA优化,前端工程化。 同时,用户提到的其他公司面试题中的目可以作为参考,比如如何处理缓存穿透在前端可能对应本地存储策略或Service Worker缓存策略。 由于没有直接的前端目,需要综合常见前端面试题和乌鸫科技其他岗位的考察点,给出建议。另外,建议用户查找更多前端相关的面经,或通过招聘网站了解岗位要求,针对性准备。</think>根据现有信息,乌鸫科技的前端岗位面试题未在公开引用中直接提及,但结合其Java岗位和其他公司前端面试规律,可整理以下准备方向: --- ### **一、前端基础知识** 1. **HTML/CSS** - 盒模型、Flex布局、Grid布局 - CSS选择器优先级与BEM规范 - 响应式设计(媒体查询、视口单位) 2. **JavaScript核心** - 闭包与作用域链:例如实现防抖/节流函数[^3] - 原型链与继承:`new`关键字实现原理 - 事件循环(Event Loop):宏任务与微任务执行顺序 - ES6+特性:Promise、箭头函数、解构赋值 3. **浏览器原理** - 渲染流程(重绘与回流优化) - 跨域解决方案(CORS、JSONP) - 浏览器缓存策略(强缓存、协商缓存) --- ### **二、算法与数据结构** 乌鸫科技其他岗位涉及动态规划、图遍历等算法[^1][^3],前端可能考察: - **常见型**:数组去重、字符串反转、链表操作 - **中等难度**:两数之和、二叉树遍历、括号匹配 - **高阶目**:手写Promise、虚拟DOM Diff算法实现 --- ### **三、框架与工程化** 1. **React/Vue核心** - 生命周期(React Hooks与Vue Composition API对比) - 状态管理(Redux/Vuex原理) - 虚拟DOM与Diff算法优化 2. **工程化** - Webpack配置(Loader/Plugin机制) - 性能优化:代码分割、懒加载、SSR - 单元测试(Jest/Vitest) --- ### **四、系统设计与项目经验** 1. **高频问** - 如何设计一个可复用的组件库? - 前端性能监控指标(FP/FCP/LCP)如何采集?[^3] - 项目中的跨端兼容性解决方案 2. **实际案例** - 参考引用[3]中“分布式锁”思路,引申前端Web Worker多线程优化 --- ### **五、网络与安全** 1. **HTTP/HTTPS** - TCP三次握手与TLS加密流程 - HTTP/2特性(多路复用、头部压缩) 2. **Web安全** - XSS攻击防御(CSP策略) - CSRF Token生成与校验逻辑 --- ### **六、实战建议** 1. **平台**:LeetCode(前端库)、牛客网(乌鸫科技面经) 2. **模拟面试**:使用`pramp.com`进行模拟 3. **项目复盘**:准备一个复杂项目的技术难点与解决过程(参考引用[3]中“项目坑点”问) ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值