前端同时传文件和对象_前端每日一题合辑 [第二期]

1 页面导入样式时，使用link和@import有什么区别？

「正确答案」：

1. link 是 HTML 标签，@import 是 css 提供的。

2. link 引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。

3. link 没有兼容性问题，@import 不兼容ie5以下。

4. link 可以通过 js 操作 DOM 动态引入样式表改变样式，而 @import 不可以。

2 为什么float会导致父元素塌陷？

「正确答案」：

“当元素设置浮动后，会自动脱离文档流”。

父元素高度自适应，子元素浮动之后，父元素没有内容撑开高度，因此就会导致父元素的高度为零，造成父元素的高度为零。(前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况)

3 rem是如何实现自适应布局的？

「正确答案」：

rem 是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。

① 我们可以通过使用 js 去控制根元素中 html 的 font-size 的大小，进而改变按钮的大小。

② 也可以使用自己的知识点，使用 css 媒体查询去设置页面中根元素的 font-size 属性。

4 写一个方法把多维数组降维

「正确答案」：

1.用 arr.flat(depth) ，该方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

let arr = [1, 2, [3, 4, [5, 6, 7]]]
arr.flat(Infinity)
// [1, 2, 3, 4, 5, 6, 7]

参数：depth

可选 指定要提取嵌套数组的结构深度，默认值为 1。

返回值：

一个包含将数组与子数组中所有元素的新数组。

2.利用 reduce ，MDN定义：reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

function flattenDeep(arr) {
   return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}

3.使用递归

let arr = [1, 2, [3, 4, [5, 6, 7]]]
//递归
function flat (arr) {
  let ret = []
  for (let i = 0; i     if (arr[i] instanceof (Array)) {
      ret = ret.concat(flat(arr[i]))
    }
    else {
      ret.push(arr[i])
    }
  }
  return ret
}

5 document load 和document ready 有什么区别？

「正确答案」：

1.$(document).load 是当页面所有资源全部加载完成后(包括DOM文档树，css文件，js文件，图片资源等)，执行一个函数，load 方法就是 onload 事件。

2.$(document).ready() 在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。

6 window对象和document对象有什么区别？

「正确答案」：

① window对象：

代表浏览器中的一个打开的窗口或者框架，window对象会在或者每次出现时被自动创建，在客户端 JavaScript 中，Window对象是全局对象global，所有的表达式都在当前的环境中计算，要引用当前的窗口不需要特殊的语法，可以把那个窗口属性作为全局变量使用，例如：可以只写document，而不必写 window.document 。

同样可以把窗口的对象方法当做函数来使用，如：只写alert()，而不必写window.alert。

window 对象实现了核心JavaScript所定义的全局属性和方法。

② document对象：

代表整个HTML文档，可以用来访问页面中的所有元素 。

每一个载入浏览器的HTML文档都会成为document对象。

document对象使我们可以使用脚本(js)中对HTML页面中的所有元素进行访问。

document对象是window对象的一部分可以通过 window.document 属性对其进行访问 HTMLDocument接口进行了扩展，定义HTML专用的属性和方法，很多属性和方法都是HTMLCollection对象，其中保存了对锚、表单、链接以及其他可脚本元素的引用。

7 js 如何将伪数组转成真数组

首先来介绍一下什么是伪数组。

伪数组就是像数组的对象也叫类数组，且含有 length 属性。

典型的是函数的 argument参数 ，还有像调用 getElementsByTagName, document.childNodes之类的,它们都返回 NodeList对象都属于伪数组。

它没有数组的 splice，concat，pop等方法。

接下来进入正题，如何将伪数组转成真数组？

假如有如下数组

let obj = {
    "0": "小蓝",
    "1": "女",
    "2": 18,
    length: 3
}

1.[].slice.call(obj) 这个等于 Array.prototype.slice.call(obj)， 该方法不会修改原数组，只是返回一个新的子数组.call会把this的指向改为传进去的obj。

var newArr = [].slice.call(obj)

2.Array.form(obj), ES6的新语法。Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

var newArr = Array.from(obj)

结语

文章中部分内容引自网络，如有错误欢迎指出。

学而不思则罔，思而不学则殆。 ——孔子

若您对前端开发有兴趣请关注前端inn

遇到问题，请联系我们  QQ群：1141255876

求分享

求点赞

求在看