字节跳动2017面试题（2）

1、

类型转换

Boolean([]); //true
Number([]); //0
Number({}); // NaN
Number(false); //0

第一题

布尔类型是Boolean([]) //true

PS:在布尔类型里只有这几参数个返回false，其它都为true

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

第二题，第三题

布尔类型与其它任何类型进行比较，布尔类型将会转换为number类型。
Number([])返回0所以第二题为true
Number转换类型的参数如果为对象返回的就是NaN,
那么Number({})返回的就是NaN。
通过Object.prototype.toString.call({})来判断类型，0与NaN相比为false
所以

console.log(([])?true:fasle);// => console.log((true)?true:false);
console.log([]==false?true:false); // => console.log(0==0?true:false);
console.log(({}==false)?true:false); // => console.log((NaN==0)?true:false);

2、①行内元素有：<a> <b> <span> <img> <input> <select> <strong>
②块级元素有：<div> <ul> <ol> <li> <dl> <dt> <h1> <h2> <h3> <h4> <p>
③常见的空元素:<br><hr><img> <input> <link> <meta>

3、javascript中实现跨域的方式总结

第一种方式：jsonp请求；jsonp的原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有<img>.
第二种方式：document.domain；这种方式用在主域名相同子域名不同的跨域访问中
第三种方式：window.name；window的name属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
第四种方式：window.postMessage；window.postMessages是html5中实现跨域访问的一种新方式，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。
第五种方式：CORS；CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。
第六种方式：Web Sockets；web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

4、
字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的font-family进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写direction：规定文本的书写方向
color：文本颜色

元素可见性: visibility

表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

列表布局属性：list-style-type、list-style-image、list-style-position、list-style

生成内容属性：quotes

光标属性：cursor

页面样式属性：page、page-break-inside、windows、orphans

声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

5、http 请求方式 get 和 post 的区别包括：
get和post的可传输内容大小不一样，一个有限制一个没有限制
get和post传输的内容存放的位置不一样，一个放在header，一个放在body

6、JavaScript的typeof运算符的可能结果

7、TCP

8、①<input id="btnShow" type="button" value="点击" class="btn"> 上面是一段按钮的html代码如果要用原生的js来禁用这个按钮可以用这样： document.getElementByIdx_x_x("btnShow").disabled=true;
②如果要重新开启按钮，则可以让disabled=false;即可 ;
③那么在jquery下面要如何设置呢？其实也很简单利用jquery的attr的方法即$("#btnShow").attr({"disabled":"disabled"});
④如要让按钮恢复可用，可以采用removeAttr方法把disabled属性删除即可。$("#btnShow").removeAttr("disabled");

9、选择器的优先级（从上往下依次降低）是：

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
伪类选择器和类选择器的优先级是一样的，谁在后面谁起作用。（后面的样式会覆盖前面的样式）

10、

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  
  </style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
  </div>
</body>
</html>

CSS:

  * {
      margin: 0;
      padding: 0;
    }
    .container {
      display: flex;
      width: 180px;
      height: 180px;
      flex-wrap: wrap;
    }
    .box {
      width: 50px;
      height: 50px;
      border: 5px solid blue;
      background-color:aqua;
      text-align: center;
      line-height: 50px;
      margin-right: -5px;
    }
    .box:hover {
      border: 5px solid red;
      z-index:99;
    }

11、给出一个上传文件时不用刷新页面的方案，要求写出关键部分的js代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<input id="upload" type="file" />
<button id="upload-btn"> upload </button>

JS:

document.getElementById('upload-btn').onclick = function(){   
    var input = document.getElementById('upload');
    //选取文件;
    var file = input.files[0];
    //创建表单数据对象;
    var formData = new FormData();
    //将文件添加到表单对象中;
    formData.append('file',file);
    //传输;
    fetch({
             url:'',
             mothod:'POST',
             body:formData 
    }) 
    .then((d)=>{
    console.log('result is',d);
    })
}

字节跳动2017面试题（2）

第一题

第二题，第三题

3、javascript中实现跨域的方式总结

推荐阅读更多精彩内容