一些非常基础的内容合集

最新推荐文章于 2020-10-14 14:08:28 发布

置顶 RawMarin

最新推荐文章于 2020-10-14 14:08:28 发布

阅读量683

点赞数

分类专栏：基础内容文章标签：基础

本文链接：https://blog.csdn.net/qq_39258552/article/details/83068441

版权

基础内容专栏收录该内容

54 篇文章 1 订阅

订阅专栏

1. 块元素、内联元素、空元素有哪些，它们之间的区别？

行内元素有：a、b、span、img、input、select、textarea、em、img、strong（强调的语气）;

块级元素有：ul、ol、li、dl、dt、dd、h1、h2、h3、h4…p、section、div、form等;

空元素： input type=“hidden”/>、br>、hr>、link>、meta>;

小结：块元素总是独占一行，margin对内联元素上下不起作用;

2. cookies，sessionStorage 、 localStorage 你对它们的理解？

cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的http请求中携带，记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
大小： cookie数据大小不能超过4k,sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
时效：localStorage 存储持久数据，浏览器关闭后数据不丢失除非用户主动删除数据或清除浏览器/应用缓存；sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭，面试官可能还会深入了解这些内容。

1)、如何让cookie浏览器关闭就失效？——不对cookie设置任何正、负或0时间的即可;
2)、sessionStorage在浏览器多窗口之间 (同域)数据是否互通共享? ——不会，都是独立的，localStorage会共享;
3)、能让localStorage也跟cookie一样设置过期时间？答案是可以的，在存储数据时，也存储一个时间戳，get数据之前，先拿当前时间跟你之前存储的时间戳做比较

3. 简述一下你对HTML语义化的理解？

语义化是指根据内容的类型，选择合适的标签（代码语义化）,即用正确的标签做正确的事情; html语义化让页面的内容结构化，结构更清晰，有助于浏览器、搜索引擎解析对内容的抓取; 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO。

4. :before 和 :after两伪元素，平时都是使用双冒号还是单冒号？有什么区别？以及它们的作用：

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成），想让插入的内容出现在其它内容前，使用::before，之后则使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。

5. Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #fff;//设置成元素原本的颜色
  background-image: none;
  color: rgb(0, 0, 0);
}
//方法2：由(licongwen )补充
input:-webkit-autofill {
    -webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}

6. 浏览器的最小字体为12px，如果还想再小，该怎么做？
1). 用图片
2). CSS3：css3的样式transform: scale(0.7)，scale有缩放功能;

7. 移动端的边框0.5px,你有几种方式实现？

伪类缩放：现在用的比较多的方式之一 :after 1px然后transform: scale(0.5);基本能满足所有场景，对于圆角的处理也很方便;
示例代码：

本文由平头哥联盟-首席填坑官∙苏南分享
css3的transform:scale  
@mixin borderRadius($width:1,$style:solid,$color:#ebebf0,$radius:2px) {
  position:relative;
    &:after{
       left:0px;
       top:0px;
       right:-100%;
       bottom:-100%;
       border-radius:$radius;
       border-style: $style;
       border-color: $color;
       border-width: $width+ px;
       position:absolute;
       display:block;
       transform:scale(0.5);
       -webkit-transform:scale(0.5);
       transform-origin:0 0;
       -webkit-transform-origin:0 0;
       content:'';
    }
}

8. ES6的数据类型

Boolean
Null
undefined
Number
String
Symbol
Object(Arryay,Function,Object)

9. 千位分隔符

//方法1:
var separator=(num)=>{
    if(!num){
        return '0.00';
    };
    let str = parseFloat(num).toFixed(2);
    return str && str
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
            return $1 + ",";
        });
}

separator(386485473.88) //"386,485,473.88"


//方法2：
(386485473.828).toLocaleString('en-US')  // "386,485,473.828" 由 (sRect)补充
(386485473.828).toFixed(2).toLocaleString('en-US')// "386,485,473.83"

10. 给table表格中的每个td绑定事件，td数量为1000+，写一下你的思路(事件委托题)：

<body class="container">
    <table id="table">
        <tr><td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr>
        <tr><td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr>
        <tr><td>我们是@IT·平头哥联盟</td><td>，我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr>
        …………
    </table>
<script>
    let table =document.querySelector("#table");
    table.addEventListener("click",(e)=>{
        let {nodeName} = e.target;
        if(nodeName.toUpperCase() === "TD"){
            console.log(e.target);//<td>N</td>
        }
    },false);

</script>
</body>

11. 项目上线前，你们做过哪些性能优化：

图片预加载，css样式表放在顶部且link链式引入，javascript放在底部body结束标签前;
使用dns-prefetch对项目中用到的域名进行 DNS 预解析，减少 DNS 查询，如： ;
减少http请求次数:图片静态资源使用CDN托管;
API接口数据设置缓存，CSS Sprites/SVG Sprites, JS、CSS源码压缩、图片大小控制合适，使用iconfont(+ 字体图标)或SVG，它们比图片更小更清晰，网页Gzip压缩;
减少DOM操作次数，优化javascript性能;
减少 DOM 元素数量，合理利用:after、:before等伪类;
避免重定向、图片懒加载;前后端分离开发，资源按需加载，最好能做到首屏直出(即服务端渲染);

避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性) ;
多域名分发划分内容到不同域名，解决浏览器域名请求并发数问题，同时也解决了请求默认携带的cookie问题;
尽量减少 iframe 使用，它会阻塞主页面的渲染; 对所有资源压缩 JavaScript 、 CSS 、字体、图片等，甚至html;

12. 如何设置http缓存？

1). Expires

Expires的值为服务端返回的到期时间，响应时告诉浏览器可以直接从浏览器缓存中读取无需再次请求。
缺点：返回的是服务端的时间，比较的时间是客户端的时间，如果时间不一致有可能出现错误。

2). Cache-Control

Cache-Control可设置的字段有：
private：客户端可以缓存
public：客户端和代理服务器都可以缓存
max-age=xxx：缓存内容在xxx秒后失效
no-cache：需要用另一种缓存策略来验证缓存(ETag,Last-Modified)
no-store：不进行缓存
Last-Modified：浏览器请求获得文件后，服务器返回该文件的最后修改时间Last-Modified，下一次请求会带上If-Modified-Since标识，如果If-Modified-Since等于服务器的文件修改时间，则表示文件没有修改，返回304状态码，浏览器从浏览器缓存中读取文件。如果If-Modified-Since小于服务端的文件修改时间，则浏览器会重新发送请求获取文件，返回状态码200。
ETag：服务器文件的一个唯一标识，例如对文件内容取md5值作为ETag的字段返回给浏览器。当文件变化时ETag的值也会发生变化。下次请求会带上If-None-Match即浏览器保留的ETag值，如果发送了变化，则文件被修改，需要重新请求，返回200状态码。反之浏览器就从缓存中读取文件，返回304状态码。

13. js中的|| 与 &&
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回a
a || b : 将a, b转换为Boolean类型, 再执行逻辑或, true返回a, false返回b
转换规则:
对象为true
非零数字为true
非空字符串为true
其他为false

14. 正则相关的一些方法

test()方法检索字符串中的值是否匹配给出的正则规则,返回布尔值 true或false。

/../.test("ab");        // true。

exec()方法检索字符串中的指定值，如果找到匹配的文本，则返回一个结果的数组，反之返回null。

/abc/.exec("defaabc")       //  ["abc", index: 4, input: "defaabc"]
/qqq/.exec("abcdefaabc")     // null

compile()方法用于改变正则匹配内容

/abc/.compile('def’)    //  /def/

split()将字符串分割成字符串数组

"abcd".split(/b/);       // ["a", "cd"]

replace()方法用于在字符串中用一些字符替换另一些字符或者替换一个与正则表达式匹配的字符串

'12345abcde'.replace(/\d\d\d/g,'*');     //  "*45abcde"
// 去掉字符串的引号，全局检索'，替换成''空
'12345abcde'.replace(/'/g,'');     //12345abcde
// 去掉字符串中所有的空格，tab,换页符，换行符
' 12 345ab cd    e '.replace(/\s/g,'');     // "12345abcde"

search() 用于检索字符串中指定的字符串或与正则表达式相匹配的字符串，返回匹配的字符串的起始位置的索引，反之返回-1

'abcdedfasdfs'.search(/[d]/);      // 3
// 即使是全局匹配，也只会匹配到第一个的位置
'abcdedfasdfs'.search(/d/g);     // 3
// 如果没有匹配到，返回-1
'abcdedfasdfs'.search(/o/g);     // -1

match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

"aabbbbccbbaab".match(/b+/g);     //  ["bbbb", "bb", "b"]

正则小括号理解方法：
如果想要把 yyyy-mm-dd 替换成格式 mm/dd/yyyy 应该怎么做。
String 的 replace 方法在第二个参数里面可以用 $1 - $9 来指代相应的分组

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-08-09";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); // "08/09/2017"
等价
var result = string.replace(regex, function() {
    return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;
});
console.log(result); // "08/09/2017"
等价
var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-08-09";
var result = string.replace(regex, function(match, year, month, day) {
    return month + "/" + day + "/" + year;
});
console.log(result); // "08/09/2017"

中括号理解
1.某个区间内如 [a-zA-Z0-9]
2.某几个字母中的随意一个 [abcd]
3.可以在中括号中进行取非的操作.[^abc]
4.在中括号中的字符不再有特殊的含义如经常匹配全部的 .和* [.][*]

15. 使用 CSS overscroll-behavior 控制滚动行为

当页面中一个 fixed 定位元素滚动到边界时，会滚动元素后面的内容。
解决这种问题，可以使用overscroll-behavior。
overscroll-behavior 属性有 3 个值：

auto - 默认。元素的滚动会传播给祖先元素。
contain - 阻止滚动链接。滚动不会传播给祖先，但会显示元素内的原生效果。例如，Android 上的炫光效果或 iOS 上的回弹效果，当用户触摸滚动边界时会通知用户。注意：overscroll-behavior: contain 在 html 元素上使用可防止滚动导航操作。
none - 和 contain 一样，但它也可以防止节点本身的滚动效果（例如 Android 炫光或 iOS 回弹）。

#chat .msgs 
{ 
	height: 300px; 
	overflow: auto; 
	overscroll-behavior: contain; 
}

16.禁用下拉刷新 pull-to-refresh

禁用原生的下拉刷新效果，只需要在 body 或 html 元素添加：

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
  /* 如果将overscroll-behavior属性的值设置为none时，可以禁用默认的滚动边界效果 */
  /* 禁用默认的下拉刷新和边界效果,但是依然可以进行滑动导航 */ 
  overscroll-behavior-y: none;
}

当我们阻止了原生的下拉刷新后，就可以实现自己定义的下拉刷新。否则会出现两个下拉刷新。

17. scroll-behavior 浏览器支持的平滑滚动

scroll-behavior 可以把你页面的滑动变得更流畅，也让纯css制作滑动选项卡变得非常容易。
属性：

scroll-behavior: auto;
scroll-behavior: smooth;

auto
滚动框立即滚动。
smooth
滚动框通过一个用户代理定义的时间段使用定义的时间函数来实现平稳的滚动，用户代理平台应遵循约定，如果有的话。

使用说明：在需要滚动的地方添加scroll-behavior:smooth就好了！

简单例子：

举个例子，在PC浏览器中，网页默认滚动是在标签上的，移动端大多数在标签上，于是，我加上这么一句：

html, body { scroll-behavior:smooth; }

此时，点击如下代码所示的“返回顶部”链接，就会平滑滚动到顶部。感觉就丝一般地流畅。

18.关于正则的一些使用总结

验证一个字符串( 精准匹配 )是否被包含, 使用 String.indexOf() 、 String.includes()
验证一个字符串( 模糊匹配 )是否被包含, 使用 String.search()、RegExp.test()
切分一段字符串( 无论确认字符和规则字符 ), 使用 String.split(字符串/正则)
提取分组捕获信息, 使用 String.match()、RegExp.exec() 注意区分它们之间的区别 -> g
替换, 使用 String.replace(String/RegExp, string/function) 注意第二个参数的的规则信息

19.运算符和=的区别

===：三个等号我们称为等同符，当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回true，若等号两边的值类型不同时直接返回false。

100===“100” //返回false
abc===“abc” //返回false
‘abc’=“abc” //返回true
NaN=NaN //返回false
false===false //返回true

2.==：两个等号我们称为等值符，当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较。

类型转换规则：
1）如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。
2）如果等号两边出现了null或undefined,null和undefined和自己相等

100==“100” //返回true
1true //返回true
“1”“01” //返回false，此处等号两边值得类型相同，不要再转换类型了！！
NaN==NaN //返回false，NaN和所有值包括自己都不相等。

20.Flex 设置的问题

单值情况下：

一个无单位的数字：它会被当作 flex-grow 的值，flex-shrink 为 1 ，flex-basis 为 0%。
一个有效的宽度值：它会被当作 flex-basis 的值，flex-shrink 和 flex-grow 都是 1 。
关键字：比如 auto，none 这两个下文会讲。

双值情况下：

第一个值必须是无单位的数字，它会作为 flex-grow 的值；第二个值可以是：

一个无单位的数字：它会被当作 flex-shrink 的值，而flex-basis 的值就是 0% 。
一个有效的宽度值：它会被当作 flex-basis 的值，flex-shrink 的取值就是 1 。

三值情况下：

第一个和第二个值必须是无单位的数，分别作为 flex-grow，flex-shrink，flex-basis 的值；第三个值可以是有效的宽度值，也可以是 auto 。

所以：
flex: 0 是 flex: 0 1 0% 的简写
flex: none 是 flex: 0 0 auto 的简写
flex: 1 是 flex: 1 1 0% 的简写
flex: auto 是 flex: 1 1 auto 的简写
flex: 0% 是 flex: 1 1 0% 的简写

21.单页应用和多页应用的对比

单页面应用（SinglePage Web Application，SPA）
只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站
多页面应用（MultiPage Application，MPA）
多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常用于 app 或客户端等

组成
单页：一个外壳页面和多个页面片段组成
多页：多个完整页面构成

资源共用(css,js)
单页：共用，只需在外壳部分加载
多页：不共用，每个页面都需要加载

刷新方式
单页：页面局部刷新或更改
多页：整页刷新

url 模式
单页：a.com/#/pageone a.com/#/pagetwo
多页：a.com/pageone.html a.com/pagetwo.html

用户体验
单页：页面片段间的切换快，用户体验良好
多页：页面切换加载缓慢，流畅度不够，用户体验比较差

转场动画
单页：容易实现
多页：无法实现

数据传递
单页：容易
多页：依赖 url传参、或者cookie 、localStorage等

搜索引擎优化(SEO)
单页：需要单独方案、实现较为困难、不利于SEO检索可利用服务器端渲染(SSR)优化
多页：实现方法简易

试用范围
单页：高要求的体验度、追求界面流畅的应用
多页：适用于追求高度支持搜索引擎的应用

开发成本
单页：较高，常需借助专业的框架
多页：较低，但页面重复代码多

维护成本
单页：相对容易
多页：相对复杂

22.单页应用和多页应用的对比

一些dom属性js的获取方式

简单来说

offsetWidth	clientWidth	scrollWidth
offsetHeight	clientHeight	scrollHeight
offsetLeft	clientLeft	scrollLeft
offsetTop	clientTop	scrollTop

clientHeight和clientWidth用于描述元素内尺寸，是指元素内容+内边距大小，不包括边框（IE下实际包括）、外边距、滚动条部分
offsetHeight和offsetWidth用于描述元素外尺寸，是指元素内容+内边距+边框，不包括外边距和滚动条部分
clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null
scrollWidth和scrollHeight是元素的内容区域加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等
scrollLeft和scrollTop是指元素滚动条位置，它们是可写的

** 23. 垂直居中常用的几种方法**

// 1
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }
}

// 2
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

// 3
.wraper {
  .box {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
  }
}

// 4
.wraper {
  display: table;
  .box {
    display: table-cell;
    vertical-align: middle;
  }
}

24. svg和canvas各自的优缺点

共同点：都是有效的图形工具，对于数据较小的情况下，都很又高的性能，它们都使用 JavaScript 和 HTML；它们都遵守万维网联合会 (W3C) 标准。
svg优点：
矢量图，不依赖于像素，无限放大后不会失真。
以dom的形式表示，事件绑定由浏览器直接分发到节点上。
svg缺点：
dom形式，涉及到动画时候需要更新dom，性能较低。
canvas优点：
定制型更强，可以绘制绘制自己想要的东西。
非dom结构形式，用JavaScript进行绘制，涉及到动画性能较高。
canvas缺点：
事件分发由canvas处理，绘制的内容的事件需要自己做处理。
依赖于像素，无法高效保真，画布较大时候性能较低。

作者：麦克丶
链接：https://juejin.im/post/5befeb5051882511a8527dbe
来源：掘金

25.Node.js里path的一些参数解释
__dirname 表示当前文件所在的目录的绝对路径
__filename 表示当前文件的绝对路径
module.filename ==== __filename 等价
process.cwd() 返回运行当前脚本的工作目录的路径
process.chdir() 改变工作目录

path.resolve

作用：path.resolve() 该方法将一些的路径/路径段解析为绝对路径。
用法

var path = require("path")     //引入node的path模块

path.resolve('/foo/bar', './baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', 'baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', '/baz')   // returns '/baz'
path.resolve('/foo/bar', '../baz')   // returns '/foo/baz'
path.resolve('home','/foo/bar', '../baz')   // returns '/foo/baz'
path.resolve('home','./foo/bar', '../baz')   // returns '/home/foo/baz'
path.resolve('home','foo/bar', '../baz')   // returns '/home/foo/baz'

26. new Date的参数

new Date(2017,0,2,12,0,0).getTime();
// 获取"2017/1/2 下午12:00:00" 的毫秒时间戳

new Date('2018/5/5').toLocaleString();
// 获取字符串"2018/5/5 上午12:00:00" 也就是0:00:00

27. 比较常用的数据去重方式


// filter 方式
function unique(origin) {
    var result = origin.filter(function (item, index, array){
        // 获取元素在源数组的位置，只返回那些索引等于当前元素索引的值。
        return array.indexOf(item) === index;
    });
    return result;
}
// set 方式

function unique(origin) {
    return Array.from(new Set(origin));
}

// 一些常见的数据类型是 === 和 indexOf 是无法检测的，举个例子：
console.log({} === {})  // false;

console.log(NaN === NaN)  // false;

console.log(/a/ === /a/);  // false;

console.log(1 === new String('1'))  // false;

var arr = [NaN];
console.log(arr.indexOf(NaN)); // -1

所以在判断的时候，如果数据里有 NaN 和对象时要避免使用 indexOf 和 ===;但Set 方法是可以去重 NaN的。

28. js获取当前屏幕的各种值

document.body.clientWidth //==> BODY对象宽度
document.body.clientHeight // ==> BODY对象高度
document.documentElement.clientWidth // ==> 可见区域宽度
document.documentElement.clientHeight // ==> 可见区域高度
  
document.body.clientWidth // ==> 网页可见区域宽 
document.body.clientHeight // ==> 网页可见区域高
document.body.offsetWidth // ==> 网页可见区域宽(包括边线的宽)
document.body.offsetHeight // ==> 网页可见区域高(包括边线的高)
document.body.scrollWidth // ==> 网页正文全文宽document.body.scrollHeight ==> 网页正文全文高
document.body.scrollTop // ==> 网页被卷去的高
document.body.scrollLeft // ==> 网页被卷去的左
window.screenTop // ==> 网页正文部分上
window.screenLeft // ==> 网页正文部分左
window.screen.height // ==> 屏幕分辨率的高
window.screen.width // ==> 屏幕可用工作区高度
window.screen.availHeight // ==> 屏幕可用工作区高度
window.screen.availWidth // ==> 屏幕可用工作区宽度

29. Object.create()和{…}创建对象的区别

let obj = {
	a:1
}

这样的创建方式创建的对象继承了Object自身的方法，如hasOwnProperty、toString等，在新对象上可以直接使用。

var o = Object.create(null,{
    a:{
        writable:true,
        configurable:true,
        value:'1'
    }
})

这样新创建的对象除了自身属性a之外，原型链上没有任何属性，也就是没有继承Object的任何东西，此时如果我们调用o.toString()会报Uncaught TypeError的错误。

var o = Object.create(Object.prototype,{
    a:{
           writable:true,
        configurable:true,
        value:'1'
    }
})
console.log(o)

这个创建方法就和使用{}创建的对象一模一样了。如果是使用var o = Object.create({})创建对象的话，就会多了一层__proto__

30. 闭包的简单理解

什么是闭包？
简单来说，闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。

为什么需要闭包呢？
既想反复使用，又想避免全局污染，局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

缺点：
占用更多内存
不容易被释放

例子：

function fn(){
	var a = 0;
	return function(){
		console.log(++a)
	}
}

var o = fn();

o(); //1
o(); //2

// 释放内存
o = null;

31. background的应用

Background属性可以设置盒子背景相关的属性，官方推荐顺序如下

官方推荐顺序为： background: background-color，background-image，background-repeat，background-attachment，background-position;

注：不强制要求书写顺序

深拷贝的简单实现

function MyDeepCopy(object) {
  if (!object || typeof object !== "object") return;

  let newObject = Array.isArray(object) ? [] : {};

  for (let key in object) {
    if (object.hasOwnProperty(key)) {
      newObject[key] =
        typeof object[key] === "object" ? deepCopy(object[key]) : object[key];
    }
  }

  return newObject;
}