金沙澳门官网网址:js的有的笔试面试题,前端参

作者: 前端知识  发布:2019-08-15

后边贰个参谋指南

2015/05/09 · CSS, HTML5, JavaScript · 前端

本文由 伯乐在线 - cucr 翻译,周进林 校稿。未经许可,禁止转发!
塞尔维亚共和国语出处:github.com。款待参加翻译组。

1. 论断字符串是还是不是是那样组合的,第二个必须是字母,前边能够是字母、数字、下划线,总省长度为5-20

HTML

  1. var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
  2. reg.test("a1a__a1a__a1a__a1a__");

语义

HTML5为大家提供了汪洋的语义成分,目的在于精准地陈诉内容。确定保障您收益于其丰硕的词汇。

XHTML

<!-- bad --> <div id="main"> <div class="article"> <div class="header"> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2015</span></p> </div> <p>…</p> </div> </div> <!-- good --> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p> </header> <p>…</p> </article> </main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- bad -->
<div id="main">
  <div class="article">
    <div class="header">
      <h1>Blog post</h1>
      <p>Published: <span>21st Feb, 2015</span></p>
    </div>
    <p>…</p>
  </div>
</div>
 
<!-- good -->
<main>
  <article>
    <header>
      <h1>Blog post</h1>
      <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
    </header>
    <p>…</p>
  </article>
</main>

确认保证您通晓您正在利用的语义成分。以错误的秘技使用语义成分比不利用更不佳。

XHTML

<!-- bad --> <h1> <figure> <img alt=Company src=logo.png> </figure> </h1> <!-- good --> <h1> <img alt=Company src=logo.png> </h1>

1
2
3
4
5
6
7
8
9
10
11
<!-- bad -->
<h1>
  <figure>
    <img alt=Company src=logo.png>
  </figure>
</h1>
 
<!-- good -->
<h1>
  <img alt=Company src=logo.png>
</h1>

2. 截取字符串abcdefg的efg

简洁

维持代码简洁。忘记旧的XHTML习贯。

XHTML

<!-- bad --> <!doctype html> <html lang=en> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> <title>Contact</title> <link rel=stylesheet href=style.css type=text/css /> </head> <body> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required=required /> </label> <script src=main.js type=text/javascript></script> </body> </html> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Contact</title> <link rel=stylesheet href=style.css> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required> </label> <script src=main.js></script> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- bad -->
<!doctype html>
<html lang=en>
  <head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
    <title>Contact</title>
    <link rel=stylesheet href=style.css type=text/css />
  </head>
  <body>
    <h1>Contact me</h1>
    <label>
      Email address:
      <input type=email placeholder=you@email.com required=required />
    </label>
    <script src=main.js type=text/javascript></script>
  </body>
</html>
 
<!-- good -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Contact</title>
  <link rel=stylesheet href=style.css>
 
  <h1>Contact me</h1>
  <label>
    Email address:
    <input type=email placeholder=you@email.com required>
  </label>
  <script src=main.js></script>
</html>
  1. var str = "abcdefg";
  2. if (/efg/.test(str)) {
  3.      var efg = str.substr(str.indexOf("efg"), 3);
  4.      alert(efg);
  5. }

可访谈性

可访谈性不该是贰个自此的主张。你不要成为壹人WCAG专家来升高你的网址,你可以马上开端修复那么些小意思,它将发生巨大的勘误,如:

  • 学会科学选择alt属性
  • 保险您的链接和开关等都很好地方统一规范记(未有<div class =button>这种暴行)
  • 永不完全正视颜色来传达消息
  • 显式地给表单控件加标签

XHTML

<!-- bad --> <h1><img alt="Logo" src="logo.png"></h1> <!-- good --> <h1><img alt="My Company, Inc." src="logo.png"></h1>

1
2
3
4
5
<!-- bad -->
<h1><img alt="Logo" src="logo.png"></h1>
 
<!-- good -->
<h1><img alt="My Company, Inc." src="logo.png"></h1>

3. 剖断二个字符串中冒出次数最多的字符,总结那些次数

语言

纵然定义语言和字符编码是可选的,但推荐在文书档案等第申明它们,尽管它们已经在HTTP央浼底部已经钦定。字符编码优先利用utf – 8。

XHTML

<!-- bad --> <!doctype html> <title>Hello, world.</title> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Hello, world.</title> </html>

1
2
3
4
5
6
7
8
9
10
<!-- bad -->
<!doctype html>
<title>Hello, world.</title>
 
<!-- good -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Hello, world.</title>
</html>
  1. //将字符串的字符保存在一个hash table中,key是字符,value是以此字符出现的次数
  2. var str = "abcdefgaddda";
  3. var obj = {};
  4. for (var i = 0, l = str.length; i < l; i ) {
  5.         var key = str[i];
  6.               if (!obj[key]) {
  7.                  obj[key] = 1;
  8.             } else {
  9.                  obj[key] ;
  10.               }
  11. }
  12.  
  13. /*遍历这么些hash table,获取value最大的key和value*/
  14. var max = -1;
  15. var max_key = "";
  16. var key;
  17. for (key in obj) {
  18.          if (max < obj[key]) {
  19.                    max = obj[key];
  20.                    max_key = key;
  21.        }
  22. }
  23.  
  24. alert("max:" max " max_key:" max_key);

性能

独有有二个理当如此的说辞在剧情前面加载脚本,不然请不要把它投身前面阻止页面的渲染。要是您的样式表相当大,分离出开始化时必须的样式,并在二个独立样式表中延迟加载其余一些。四回HTTP诉求显明低于叁遍,但感知速度是最要紧的要素。

XHTML

<!-- bad --> <!doctype html> <meta charset=utf-8> <script src=analytics.js></script> <title>Hello, world.</title> <p>...</p> <!-- good --> <!doctype html> <meta charset=utf-8> <title>Hello, world.</title> <p>...</p> <script src=analytics.js></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- bad -->
<!doctype html>
<meta charset=utf-8>
<script src=analytics.js></script>
<title>Hello, world.</title>
<p>...</p>
 
<!-- good -->
<!doctype html>
<meta charset=utf-8>
<title>Hello, world.</title>
<p>...</p>
<script src=analytics.js></script>

4. IE与FF脚本包容性难题

CSS

(1) window.event:
表示近日的事件指标,IE有那么些目的,FF未有,FF通过给事件管理函数传送事件目的

分号

本领上来说,分号在CSS里担纲三个分隔符,但请把它当作贰个得了符。

CSS

/* bad */ div { color: red } /* good */ div { color: red; }

1
2
3
4
5
6
7
8
9
/* bad */
div {
  color: red
}
 
/* good */
div {
  color: red;
}

(2) 获取事件源
IE用srcElement获取事件源,而FF用target获得事件源

盒模型

盒模型对总体文书档案应该是千篇一律的。即使全局样式 * { box-sizing:border-box;} 很好,但毫无在特定成分改动暗许的盒模型(假设您能够幸免那样做)。

CSS

/* bad */ div { width: 100%; padding: 10px; box-sizing: border-box; } /* good */ div { padding: 10px; }

1
2
3
4
5
6
7
8
9
10
11
/* bad */
div {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
 
/* good */
div {
  padding: 10px;
}

(3) 增多,去除事件
IE:element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF:element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

绝不转移成分的暗许行为(若是你可避防止那样做)。尽量保险成分在平凡的文书档案流中。比方,删除图像上面包车型客车空白,不该改换其暗中同意显示:

CSS

/* bad */ img { display: block; } /* good */ img { vertical-align: middle; }

1
2
3
4
5
6
7
8
9
/* bad */
img {
  display: block;
}
 
/* good */
img {
  vertical-align: middle;
}

完全一样的,不要让三个成分脱离文书档案流(假如您可避防止这样做)。

CSS

/* bad */ div { width: 100px; position: absolute; right: 0; } /* good */ div { width: 100px; margin-left: auto; }

1
2
3
4
5
6
7
8
9
10
11
12
/* bad */
div {
  width: 100px;
  position: absolute;
  right: 0;
}
 
/* good */
div {
  width: 100px;
  margin-left: auto;
}

(4) 获取标签的自定义属性
IE:div1.value或div1[“value”]
FF:可用div1.getAttribute(“value”)

位置

有相当多情势能够在CSS中牢固成分,但尝试限制本身行使上面包车型地铁属性/值。优先顺序如下:

XHTML

display: block; display: flex; position: relative; position: sticky; position: absolute; position: fixed;

1
2
3
4
5
6
display: block;
display: flex;
position: relative;
position: sticky;
position: absolute;
position: fixed;

(5) document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不可能赢得div成分
FF:可以

选择器

压缩紧耦合的DOM采取器。当您的接纳器抢先3个布局伪类、后代或兄弟的构成,思念增添四个class到您供给相配的因素上。

CSS

/* bad */ div:first-of-type :last-child > p ~ * /* good */ div:first-of-type .info

1
2
3
4
5
/* bad */
div:first-of-type :last-child > p ~ *
 
/* good */
div:first-of-type .info

幸免在不要求的时候重载你的选取器。

CSS

/* bad */ img[src$=svg], ul > li:first-child { opacity: 0; } /* good */ [src$=svg], ul > :first-child { opacity: 0; }

1
2
3
4
5
6
7
8
9
/* bad */
img[src$=svg], ul > li:first-child {
  opacity: 0;
}
 
/* good */
[src$=svg], ul > :first-child {
  opacity: 0;
}

(6) input.type的属性
IE:input.type只读
FF:input.type可读写

特性

不用让选拔器难以覆盖。裁减使用 id 和制止 !important。

CSS

/* bad */ .bar { color: green !important; } .foo { color: red; } /* good */ .foo.bar { color: green; } .foo { color: red; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* bad */
.bar {
  color: green !important;
}
.foo {
  color: red;
}
 
/* good */
.foo.bar {
  color: green;
}
.foo {
  color: red;
}

(7) innerText textContent outerHTML
IE:支持innerText, outerHTML
FF:支持textContent

覆盖

覆盖样式让选用器和调养变得不错使用。尽或者防止它。

CSS

/* bad */ li { visibility: hidden; } li:first-child { visibility: visible; } /* good */ li li { visibility: hidden; }

1
2
3
4
5
6
7
8
9
10
11
12
/* bad */
li {
  visibility: hidden;
}
li:first-child {
  visibility: visible;
}
 
/* good */
li li {
  visibility: hidden;
}

(8) 是或不是可用id替代HTML成分
IE:可以用id来代替HTML元素
FF:不可以

继承

在能够一连的状态下,不要再度样式注脚,。

CSS

/* bad */ div h1, div p { text-shadow: 0 1px 0 #fff; } /* good */ div { text-shadow: 0 1px 0 #fff; }

1
2
3
4
5
6
7
8
9
/* bad */
div h1, div p {
  text-shadow: 0 1px 0 #fff;
}
 
/* good */
div {
  text-shadow: 0 1px 0 #fff;
}

5. 规避javascript多个人付出函数重名难题
(1) 能够支付前鲜明命名标准,依照差别开荒人士开拓的机能在函数前加前缀
(2) 将每一个开拓职员的函数卷入到类中,调用的时候就调用类的函数,纵然函数重名只要类名不另行就ok

简洁

有限支持代码简洁。使用简写属性,防止在无需时选用四个天性。

CSS

/* bad */ div { transition: all 1s; top: 50%; margin-top: -10px; padding-top: 5px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } /* good */ div { transition: 1s; top: calc(50% - 10px); padding: 5px 10px 20px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* bad */
div {
  transition: all 1s;
  top: 50%;
  margin-top: -10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}
 
/* good */
div {
  transition: 1s;
  top: calc(50% - 10px);
  padding: 5px 10px 20px;
}

6. javascript面向对象中再而三达成
javascript面向对象中的承继达成一般都使用到了构造函数和Prototype原型链,轻易的代码如下:

语言

先行使用匈牙利(Hungary)语并不是数学公式

JavaScript

/* bad */ :nth-child(2n 1) { transform: rotate(360deg); } /* good */ :nth-child(odd) { transform: rotate(1turn); }

1
2
3
4
5
6
7
8
9
/* bad */
:nth-child(2n 1) {
  transform: rotate(360deg);
}
 
/* good */
:nth-child(odd) {
  transform: rotate(1turn);
}
  1. function Animal(name) {
  2.    this.name = name;
  3. }
  4.  
  5. Animal.prototype.getName = function() {alert(this.name)}
  6. function Dog() {};
  7. Dog.prototype = new Animal("Buddy");
  8. Dog.prototype.constructor = Dog;
  9. var dog = new Dog();

    7. FF上边达成outerHTML
    FF不帮助outerHTML,要贯彻outerHTML还索要独特管理
    思路如下:

浏览器引擎前缀

主动删除过时的浏览器引擎前缀。假设你须要运用它们,请在规范属性前插入。

CSS

/* bad */ div { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; } /* good */ div { -webkit-transform: scale(2); transform: scale(2); transition: 1s; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* bad */
div {
  transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}
 
/* good */
div {
  -webkit-transform: scale(2);
  transform: scale(2);
  transition: 1s;
}

在页面中增添一个新的成分A,克隆一份须要获得outerHTML的成分,将这么些成分append到新的A中,然后拿走A的innerHTML就足以了。

动画

优用过渡,并不是卡通。防止对 opacity 和 transform 以外的习性使用动画片。

CSS

/* bad */ div:hover { animation: move 1s forwards; } @keyframes move { 100% { margin-left: 100px; } } /* good */ div:hover { transition: 1s; transform: translateX(100px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* bad */
div:hover {
  animation: move 1s forwards;
}
@keyframes move {
  100% {
    margin-left: 100px;
  }
}
 
/* good */
div:hover {
  transition: 1s;
  transform: translateX(100px);
}
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
  2. <html xmlns=";
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>获取outerHMTL</title>
  6. <style>
  7. div{ background:#0000FF;width:100px;height:100px;}
  8. span{ background:#00FF00;width:100px;height:100px;}
  9. p{ background:#FF0000;width:100px;height:100px;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id="a"><span>SPAN</span>DIV</div>
  14. <span>SPAN</span>
  15. <p>P</p>
  16. <script type="text/javascript">
  17. function getOuterHTML(id){
  18. var el = document.getElementById(id);
  19. var newNode = document.createElement("div");
  20. document.appendChild(newNode);
  21. var clone = el.cloneNode(true);
  22. newNode.appendChild(clone);
  23. alert(newNode.innerHTML);
  24. document.removeChild(newNode);
  25. }
  26. getOuterHTML("a");
  27. </script>
  28. </body>
  29. </html>
  30.  

单位

在能够的情事下,使用未有单位的值。在你利用相对单位时优先 rem 。优先利用秒并非纳秒。

CSS

/* bad */ div { margin: 0px; font-size: .9em; line-height: 22px; transition: 500ms; } /* good */ div { margin: 0; font-size: .9rem; line-height: 1.5; transition: .5s; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* bad */
div {
  margin: 0px;
  font-size: .9em;
  line-height: 22px;
  transition: 500ms;
}
 
/* good */
div {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  transition: .5s;
}

8. 编纂二个艺术 求一个字符串的字节长度
一旦:三个英语字符占用四个字节,贰个国语字符占用五个字节

颜色

只要您必要透明效果,请使用rgba。不然,总是利用十六进制格式。

CSS

/* bad */ div { color: hsl(103, 54%, 43%); } /* good */ div { color: #5a3; }

1
2
3
4
5
6
7
8
9
/* bad */
div {
  color: hsl(103, 54%, 43%);
}
 
/* good */
div {
  color: #5a3;
}
  1. function GetBytes(str){
  2.          var len = str.length;
  3.          var bytes = len;
  4.       for(var i=0; i<len; i ){
  5.                     if (str.charCodeAt(i) > 255) bytes ;
  6.       }
  7.          return bytes;
  8. }
  9. alert(GetBytes("你好,as"));

绘图

当财富能够专擅地通过CSS达成时,制止HTTP央浼。

CSS

/* bad */ div::before { content: url(white-circle.svg); } /* good */ div::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* bad */
div::before {
  content: url(white-circle.svg);
}
 
/* good */
div::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

9. 编辑三个方法 去掉二个数组的重复成分

Hacks

并非选择它们。

CSS

/* bad */ div { // position: relative; transform: translateZ(0); } /* good */ div { /* position: relative; */ will-change: transform; }

1
2
3
4
5
6
7
8
9
10
11
/* bad */
div {
  // position: relative;
  transform: translateZ(0);
}
 
/* good */
div {
  /* position: relative; */
  will-change: transform;
}
  1. var arr = [1 ,1 ,2, 3, 3, 2, 1];
  2. Array.prototype.unique = function(){
  3.          var ret = [];
  4.          var o = {};
  5.          var len = this.length;
  6.          for (var i=0; i<len; i ){
  7.                    var v = this[i];
  8.                    if (!o[v]){
  9.                                 o[v] = 1;
  10.                                 ret.push(v);
  11.                   }
  12.        }
  13.         return ret;
  14. };
  15. alert(arr.unique());

JavaScript

10. 写出3个利用this的标准应用
(1)在html成分事件性质中使用,如:

性能

可读性,精确性和可表达性优先于品质。JavaScript基本上恒久不会成为您的习性瓶颈。优化图像压缩、网络访问和DOM渲染。如若你仅记得本文的一条标准,记住那条。

JavaScript

// bad (albeit way faster) const arr = [1, 2, 3, 4]; const len = arr.length; var i = -1; var result = []; while ( i < len) { var n = arr[i]; if (n % 2 > 0) continue; result.push(n * n); } // good const arr = [1, 2, 3, 4]; const isEven = n => n % 2 == 0; const square = n => n * n; const result = arr.filter(isEven).map(square);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad (albeit way faster)
const arr = [1, 2, 3, 4];
const len = arr.length;
var i = -1;
var result = [];
while ( i < len) {
  var n = arr[i];
  if (n % 2 > 0) continue;
  result.push(n * n);
}
 
// good
const arr = [1, 2, 3, 4];
const isEven = n => n % 2 == 0;
const square = n => n * n;
 
const result = arr.filter(isEven).map(square);
  1. <input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

无污染

尽或然保持你的函数干净。全部函数最佳无副功效,不选拔外界数据,再次来到新对象而不是改变现存的指标。

JavaScript

// bad const merge = (target, ...sources) => Object.assign(target, ...sources); merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" } // good const merge = (...sources) => Object.assign({}, ...sources); merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

1
2
3
4
5
6
7
// bad
const merge = (target, ...sources) => Object.assign(target, ...sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }
 
// good
const merge = (...sources) => Object.assign({}, ...sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

(2)构造函数

原生

用尽全力地借助原生方法。

JavaScript

// bad const toArray = obj => [].slice.call(obj); // good const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )();

1
2
3
4
5
6
7
// bad
const toArray = obj => [].slice.call(obj);
 
// good
const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();
  1. function Animal(name, color) {
  2.          this.name = name;
  3.          this.color = color;
  4. }

强制转变

当有不可或缺时,拥抱隐式强制调换。不然防止它。不要盲目接纳。

JavaScript

// bad if (x === undefined || x === null) { ... } // good if (x == undefined) { ... }

1
2
3
4
5
// bad
if (x === undefined || x === null) { ... }
 
// good
if (x == undefined) { ... }

(3)

循环

当强迫使用可变的指标时,不要采取循环。依据 array.prototype 中的方法。

JavaScript

// bad const sum = arr => { var sum = 0; var i = -1; for (;arr[ i];) { sum = arr[i]; } return sum; }; sum([1, 2, 3]); // => 6 // good const sum = arr => arr.reduce((x, y) => x y); sum([1, 2, 3]); // => 6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad
const sum = arr => {
  var sum = 0;
  var i = -1;
  for (;arr[ i];) {
    sum = arr[i];
  }
  return sum;
};
 
sum([1, 2, 3]); // => 6
 
// good
const sum = arr =>
  arr.reduce((x, y) => x y);
 
sum([1, 2, 3]); // => 6

一经您无法,可能采纳 array.prototype 方法很虐心。使用递归。

JavaScript

// bad const createDivs = howMany => { while (howMany--) { document.body.insertAdjacentHTML("beforeend", "<div></div>"); } }; createDivs(5); // bad const createDivs = howMany => [...Array(howMany)].forEach(() => document.body.insertAdjacentHTML("beforeend", "<div></div>") ); createDivs(5); // good const createDivs = howMany => { if (!howMany) return; document.body.insertAdjacentHTML("beforeend", "<div></div>"); return createDivs(howMany - 1); }; createDivs(5);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// bad
const createDivs = howMany => {
  while (howMany--) {
    document.body.insertAdjacentHTML("beforeend", "<div></div>");
  }
};
createDivs(5);
 
// bad
const createDivs = howMany =>
  [...Array(howMany)].forEach(() =>
    document.body.insertAdjacentHTML("beforeend", "<div></div>")
  );
createDivs(5);
 
// good
const createDivs = howMany => {
  if (!howMany) return;
  document.body.insertAdjacentHTML("beforeend", "<div></div>");
  return createDivs(howMany - 1);
};
createDivs(5);
  1. <input type="button" id="text" value="点击一下" />
  2. <script type="text/<a href=")" class="st_tag internal_tag" rel="tag" title="Posts tagged with Javascript">javascript</a>">
  3. var btn = document.getElementById("text");
  4. btn.onclick = function() {
  5. alert(this.value); //此处的this是按钮元素
  6. }
  7. </script>

Arguments

忘记 arguments 对象。rest 参数一贯是贰个更加好的抉择,因为:

  1. 它是命名的,所以它给你贰个函数期望arguments的更加好的做法
  2. 它是一个实在的数组,那使得它更便于采纳。

JavaScript

// bad const sortNumbers = () => Array.prototype.slice.call(arguments).sort(); // good const sortNumbers = (...numbers) => numbers.sort();

1
2
3
4
5
6
// bad
const sortNumbers = () =>
  Array.prototype.slice.call(arguments).sort();
 
// good
const sortNumbers = (...numbers) => numbers.sort();

(4)CSS expression表明式中利用this关键字

Apply

遗忘 apply() 。使用 spread 操作符取代。

JavaScript

const greet = (first, last) => `Hi ${first} ${last}`; const person = ["John", "Doe"]; // bad greet.apply(null, person); // good greet(...person);

1
2
3
4
5
6
7
8
const greet = (first, last) => `Hi ${first} ${last}`;
const person = ["John", "Doe"];
 
// bad
greet.apply(null, person);
 
// good
greet(...person);
  1. <table width="100px" height="100px">
  2.      <tr>
  3.               <td>
  4.              <div style="width:expression(this.parentNode.width);">div element</div>
  5.              </td>
  6.      </tr>
  7. </table>

Bind

当有惯用方法时,不要使用 bind() 。

JavaScript

// bad ["foo", "bar"].forEach(func.bind(this)); // good ["foo", "bar"].forEach(func, this); // bad const person = { first: "John", last: "Doe", greet() { const full = function() { return `${this.first} ${this.last}`; }.bind(this); return `Hello ${full()}`; } } // good const person = { first: "John", last: "Doe", greet() { const full = () => `${this.first} ${this.last}`; return `Hello ${full()}`; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// bad
["foo", "bar"].forEach(func.bind(this));
 
// good
["foo", "bar"].forEach(func, this);
// bad
const person = {
  first: "John",
  last: "Doe",
  greet() {
    const full = function() {
      return `${this.first} ${this.last}`;
    }.bind(this);
    return `Hello ${full()}`;
  }
}
 
// good
const person = {
  first: "John",
  last: "Doe",
  greet() {
    const full = () => `${this.first} ${this.last}`;
    return `Hello ${full()}`;
  }
}

12. 如何显示/掩饰三个DOM成分?

高阶函数

在不需要时,防止嵌套函数。

JavaScript

// bad [1, 2, 3].map(num => String(num)); // good [1, 2, 3].map(String);

1
2
3
4
5
// bad
[1, 2, 3].map(num => String(num));
 
// good
[1, 2, 3].map(String);
  1. el.style.display = "";
  2. el.style.display = "none";

组合

幸免多嵌套函数的调用。使用组合。

JavaScript

const plus1 = a => a 1; const mult2 = a => a * 2; // bad mult2(plus1(5)); // => 12 // good const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val); const addThenMult = pipeline(plus1, mult2); addThenMult(5); // => 12

1
2
3
4
5
6
7
8
9
10
const plus1 = a => a 1;
const mult2 = a => a * 2;
 
// bad
mult2(plus1(5)); // => 12
 
// good
const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val);
const addThenMult = pipeline(plus1, mult2);
addThenMult(5); // => 12

el是要操作的DOM成分

缓存

缓存效用测量检验、大数据结会谈别的昂贵的操作。

JavaScript

// bad const contains = (arr, value) => Array.prototype.includes ? arr.includes(value) : arr.some(el => el === value); contains(["foo", "bar"], "baz"); // => true // good const contains = (() => Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value) )(); contains(["foo", "bar"], "baz"); // => true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// bad
const contains = (arr, value) =>
  Array.prototype.includes
    ? arr.includes(value)
    : arr.some(el => el === value);
contains(["foo", "bar"], "baz"); // => true
 
// good
const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => true

13. JavaScript中怎样检查实验贰个变量是多个String类型?请写出函数实现

变量定义

优先const,再是let,然后是var。

JavaScript

// bad var obj = {}; obj["foo" "bar"] = "baz"; // good const obj = { ["foo" "bar"]: "baz" };

1
2
3
4
5
6
7
8
// bad
var obj = {};
obj["foo" "bar"] = "baz";
 
// good
const obj = {
  ["foo" "bar"]: "baz"
};

String类型有几种生成方式:
(1)Var str = “hello world”;
(2)Var str2 = new String(“hello world”);

条件

预先使用即时实践函数表明式(IIFE和重回语句,并非 if,else if 和 switch 语句

JavaScript

// bad var grade; if (result < 50) grade = "bad"; else if (result < 90) grade = "good"; else grade = "excellent"; // good const grade = (() => { if (result < 50) return "bad"; if (result < 90) return "good"; return "excellent"; })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad
var grade;
if (result < 50)
  grade = "bad";
else if (result < 90)
  grade = "good";
else
  grade = "excellent";
 
// good
const grade = (() => {
  if (result < 50)
    return "bad";
  if (result < 90)
    return "good";
  return "excellent";
})();
  1. function IsString(str){
  2.            return (typeof str == "string" || str.constructor == String);
  3. }
  4. var str = "";
  5. alert(IsString(1));
  6. alert(IsString(str));
  7. alert(IsString(new String(str)));

目的迭代

在允许的情事下制止使用 for…in

JavaScript

const shared = { foo: "foo" }; const obj = Object.create(shared, { bar: { value: "bar", enumerable: true } }); // bad for (var prop in obj) { if (obj.hasOwnProperty(prop)) console.log(prop); } // good Object.keys(obj).forEach(prop => console.log(prop));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const shared = { foo: "foo" };
const obj = Object.create(shared, {
  bar: {
    value: "bar",
    enumerable: true
  }
});
 
// bad
for (var prop in obj) {
  if (obj.hasOwnProperty(prop))
    console.log(prop);
}
 
// good
Object.keys(obj).forEach(prop => console.log(prop));

14. 网页中达成八个划算当年还剩多少日子的尾数计时程序,要求网页上实时动态展现“××年还剩××天××时××分××秒”

目的映射

当目标合法使用状态下,map 日常是一个更加好的,更有力的挑三拣四。假设有疑难,请使用 map 。

JavaScript

// bad const me = { name: "Ben", age: 30 }; var meSize = Object.keys(me).length; meSize; // => 2 me.country = "Belgium"; meSize ; meSize; // => 3 // good const me = new Map(); me.set("name", "Ben"); me.set("age", 30); me.size; // => 2 me.set("country", "Belgium"); me.size; // => 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// bad
const me = {
  name: "Ben",
  age: 30
};
var meSize = Object.keys(me).length;
meSize; // => 2
me.country = "Belgium";
meSize ;
meSize; // => 3
 
// good
const me = new Map();
me.set("name", "Ben");
me.set("age", 30);
me.size; // => 2
me.set("country", "Belgium");
me.size; // => 3
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
  2. <html>
  3. <head>
  4.    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.    <title>倒计时</title>
  6. </head>
  7. <body>
  8. <input type="text" value="" id="input" size="1000"/>
  9. <script type="text/javascript">
  10.    function counter() {
  11.       var date = new Date();
  12.       var year = date.getFullYear();
  13.       var date2 = new Date(year, 12, 31, 23, 59, 59);
  14.       var time = (date2 - date)/1000;
  15.       var day =Math.floor(time/(24*60*60))
  16.       var hour = Math.floor(time%(24*60*60)/(60*60))
  17.       var minute = Math.floor(time%(24*60*60)%(60*60)/60);
  18.       var second = Math.floor(time%(24*60*60)%(60*60)`);
  19.       var str = year "年还剩" day "天" hour "时" minute "分" second "秒";
  20.       document.getElementById("input").value = str;
  21.    }
  22.    window.setInterval("counter()", 1000);
  23. </script>
  24. </body>
  25. </html>
  26.  

Curry(柯里化)

柯里局恐怕在别的语言有它的身价,但幸免在 JavaScript 使用。它经过引进外来范式,且有关的用例极有的时候常,使得您的代码更难阅读。

JavaScript

// bad const sum = a => b => a b; sum(5)(3); // => 8 // good const sum = (a, b) => a b; sum(5, 3); // => 8

1
2
3
4
5
6
7
// bad
const sum = a => b => a b;
sum(5)(3); // => 8
 
// good
const sum = (a, b) => a b;
sum(5, 3); // => 8

15. 补给代码,鼠标单击Button1后将Button1移动到Button2的末尾

可读性

无须通过类似聪明的技巧来混淆代码的来意。

JavaScript

// bad foo || doSomething(); // good if (!foo) doSomething(); // bad void function() { /* IIFE */ }(); // good (function() { /* IIFE */ }()); // bad const n = ~~3.14; // good const n = Math.floor(3.14);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// bad
foo || doSomething();
 
// good
if (!foo) doSomething();
// bad
void function() { /* IIFE */ }();
 
// good
(function() { /* IIFE */ }());
// bad
const n = ~~3.14;
 
// good
const n = Math.floor(3.14);
  1. <div> <input type=”button” id =”button1″ value=”1″ onclick=”???”>
  2. <input type=”button” id =”button2″ value=”2″ /”> </div>

  3. <div>

  4.           <input type="button" id ="button1" value="1" onclick="moveBtn(this);">
  5.            <input type="button" id ="button2" value="2" />
  6. </div>
  7. <script type="text/javascript">
  8. function moveBtn(obj) {
  9.           var clone = obj.cloneNode(true);
  10.           var parent = obj.parentNode;
  11.           parent.appendChild(clone);
  12.           parent.removeChild(obj);
  13. }
  14. </script>

本文由金沙澳门官网发布于前端知识,转载请注明出处:金沙澳门官网网址:js的有的笔试面试题,前端参

关键词: 金沙澳门官网