58同城23前端卷总结
编程题1.机器人送餐最短路径
58充电堡餐厅为了提升员工就餐体验，研发一个送餐机器人，用于为在线下单的就餐人员送餐。
餐桌分布为一个比较工整的网格图，每一个餐桌座位都是坐标轴上第一象限中的一个整点，如图所示。
员工随意挑选座位后并下单。厨房收集订单信息。由机器人从默认起始位置(0, 0)开始送餐
机器人每1步只能移动一个座位，不能走对角线。机器人可以向x轴正方向，x轴负方向，或者y轴正方向移动1个单位（出于某种原因，机器人不能向y轴的负方向移动）
例如，如果当前时刻机器人所在的坐标为(x, y)，下一步机器人可能可以到达的位置为(x + 1, y)，(x - 1, y)或者(x, y + 1)。当机器人到达某个餐桌座位时，就餐人员就会立即取餐。一旦机器人分发完所有的饭菜，则表示送餐结束
写一个函数delivery，帮它计算一下送完一次订单最少所需要花费的总步数
1
2.字符串截取
请从一个字符串中找出符合要求的子字符串（子串：字符串中一段连续的片段），并输出该子字符串。
要求：
1、子字符串长度最长，且不包含重复字符。
例如：”qwertezxc” 数组中 ...
操作字符串的方法总结
一、charAt()返回在指定位置的字符。
12var str="abc"console.log(str.charAt(0))//a
二、charCodeAt()返回在指定的位置的字符的 Unicode 编码。
12var str="abc" console.log(str.charCodeAt(1))//98
三、concat()连接字符串。
1234var a = "abc"; var b = "def"; var c = a.concat(b);console.log(c);//abcdef
四、indexOf()检索字符串。indexOf() 方法对大小写敏感！
1234var str="Hello world!"console.log(str.indexOf("Hello"))//0console.log(str.indexOf("World"))//-1console.log(str.indexOf("world&q ...
闭包及使用场景
概念JavaScript 闭包是指在函数内部定义的函数，能够访问其外部函数的作用域中的变量，即使外部函数执行完毕后，内部函数仍然保留对这些变量的引用。这样的特性使得 JavaScript 具有强大的灵活性和封装性。
什么情况下会出现闭包a.函数当做返回值被返回
123456789function fn(){ const a = 1; return function(){ console.log(a) }}const a = 5const cb = fn()cb()//1
b.函数当作参数传递
1234function fn(cb) { const a = 100; cb()}
c.自执行匿名函数
123(function(index){ console.log(index)})(10)
1. 基本结构示例：123456789101112function outerFunction() { let outerVariable = 'I am from outer!' ...
模拟new操作
new操作的执行过程1.创建一个新对象
2.将新对象的-proto-指向constructor(构造函数).prototype,挂载到原型链上
3.执行构造函数，并将构造函数的this指向新对象
4.返回新对象
实现代码如下12345678910111213141516// 自定义new创建实例function create(constructor,...args){ let newObj = Object.create(constructor.prototype) // Object.craete()方法相当于下面两行代码 // let obj = {} // obj.__proto__ = constructor.prototype let res = constructor.apply(newObj,args) // 如果调用构造函数返回的是对象则返回该对象，否则返回newObj return res instanceof Object ? res : newObj}function person( ...
css动画
大部分页面都使用静态元素来显示动态内容（例如文字、图片），但如何让页面上的元素动起来？可以使用CSS 动画来让页面元素动起来。
1. 使用 transition 属性如果你只是想要一些简单的动画或过渡效果，使用 transition 属性会是一个很好的办法。 transition 属性是 transition-property、 transition-duration、 transition-delay 和 transition-timing-function 属性的简写属性。
transition-property： transition-property 属性的值设定了应用过渡在哪个 CSS 属性上。举个例子 ，如果我们想把过渡效果应用在字体大小改变时，那就应该设置 transition-property: font-size;。
transition-duration： transition-duration 属性的值以秒或毫秒为单位设定了过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。
transition-delay： transition-delay 属性的值设定 ...
css隐藏元素的方法
实现方式通过css实现隐藏元素方法有如下：
1.display: none: 渲染树不会渲染对象
2.visibility: hidden: 元素在页面中仍占据空间，但是不会响应绑定的监听事件。
3.opacity: 0: 元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
4.position: absolute: 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
5.z-index: 负值:来使其他元素遮盖住该元素，以此来实现隐藏。
6.clip/clip-path: 元素仍在页面中占据位置，但是不会响应绑定的监听事件。
7.transform: scale(0,0): 将元素缩放为 0，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
8、color alpha 透明度
9、可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸
10、覆盖另一个元素
11、transform 属性可以用于元素的平移、缩放、旋转或倾斜等。
123456789101112131415解释1. visi ...
js判断数据类型的方法
1.typeof 操作符这是最常见的用于确定变量类型的方法。但是，需要注意的是，typeof 对于一些复杂类型（如数组、null和对象）的返回值可能并不直观。例如，typeof null 返回 'object'，而 typeof [] 返回 'object'。
1234567891011121314let num = 123; console.log(typeof num); // 输出 "number" let str = "hello"; console.log(typeof str); // 输出 "string" let obj = {}; console.log(typeof obj); // 输出 "object" let arr = []; console.log(typeof arr); // 输出 "object" let nullVar = null; console.log ...
vue中@click.native
在组件中时常看到@click.native。在项目中遇到后，简单介绍下：@click.native是给组件绑定原生事件
项目标签 ‘ListCell’ 是子组件引到当前父组件当父组件中引入子组件的时候，当要触发子组件点击事件的时候@click 不生效。 有两种解决方式 1.@click.native 2.在子组件中添加this.$emit ( “事件名” ，value )方法 将子组件的值传到父组件。
原生js操作dom
Web APIWeb API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
JavaScipt由三部分构成 ECMAScript、DOM和BOM。
BOM浏览器对象模型，提供了与浏览器的交互方法和接口；
DOM 文档对象模型，提供了处理网页内容、结构 、样式的方法和接口；
DOM
DOM文档对象模型 又称为DOM树
DOM树 由文档、元素、节点 组成
文档：一个页面就是一个文档，
元素：文档中的所有标签都称为元素。DOM中使用Element表示
节点：文档中的所有内容，在文档中都是节点（标签、属性、文本注释等）DOM中使用node表示
获取元素
都以 document . 开头 例如：document.getElementById
使用 console.dir 可以打印出返回的元素对象，从而更好的查看属性和方法
getElementById （元素ID)
获取标签为Id的元素 (文档中的id值是唯一的，没有重复的id)
参数：id值，区分大小写的字符串
返回id属性值的元素节点相对应的对象
1234567891011<body> ...
原生ajax请求
原生发送ajax大致可分为5步：
实例化XMLHttpRequest对象。
XMLHttpRequest() 是内置的 JavaScript 对象。它是浏览器提供的原生 API，无需任何额外的库或框架。你可以直接在 JavaScript 代码中使用 XMLHttpRequest() 对象，而无需进行任何安装或导入。
设置请求方法和地址。
使用open()方法设置
设置请求头
可以省略 如果后端需要，就要设置，不需要，设置了也没关系，可以自定义
setRequestHeader()
注册回调函数
发送请求
send（）
示例：12345678910111213141516171819202122232425function ajax_get() { // 1. 实例化xhr对象 const xhr = new XMLHttpRequest() // 2. 设置请求方法和地址 xhr.open('get', 'http://ajax ...