【前端】笔试札记（2）

一、问答题

1、解决跨域问题的方法。

1.修改浏览器的设置
2.修改请求的方式：jsonp
3.CORS

2、Set 和 Map 的区别。

Set结构是类似于数组结构,但是成员都是不重复的值
缺点是没办法像数组一样通过下标取值的方法.

//构造：
let set = new Set([1,2,3]);
set.size    // 3

//数组去重：
let arr = [1,2,3,4,5,4,23,1,3];
arr= Array.from(new Set(arr));  // [1, 2, 3, 4, 5, 23]

Map结构是键值对集合(Hash结构)

//构造：
const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

3、var let 和 const 的区别。

var : 定义的变量可以修改，如果不初始化会输出undefined，不会报错;
let : 块级作用域，函数内部使用let定义后，对函数外部无影响;
const : const定义的变量不可以修改，而且必须初始化。

4、判断是否为“回文”字符串。

//方法一：
function palindRome(str){
    var len = str.length;
    var str1 = "";
    for(var i=len-1; i>=0;i--){
        str1+=str[i];
    }
    console.log(str1 == str)
}

//方法二：
function palindRome(str){
    var len = str.length;
    for(var i=0; i<len;i++){if(str.charAt(i)!=str.charAt(len-1-i)){
            console.log("不是")
        }else{
            console.log("是")
        }
    } 
}

5、输入URL到页面加载的过程。

1.输入网址；
2.浏览器查找域名的IP地址；
3.浏览器给web服务器发送一个HTTP请求；
4.网站服务的永久重定向响应；
5.浏览器跟踪重定向地址 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求；
6.服务器“处理”请求，服务器接收到获取请求；
7.服务器发回一个HTTP响应；
8.浏览器开始显示HTML；
9.浏览器发送请求，以获取嵌入在HTML中的对象。

6、CSS 中 position 的值。

1.absolute ：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2.fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3.relative ：生成相对定位的元素，相对于其正常位置进行定位，因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
4.static ：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5.inherit ：规定应该从父元素继承 position 属性的值。

7、如何理解 HTTP 控制访问（CORS）。

1.web服务器有三要素：协议（http、https）、端口号、web服务器域名。三要素必须全部一致才算同源；
2.浏览器端
如果发现有一个请求是跨域，那么浏览器会自动先拦截一下，给它的http header加上Origin字段。比如 http://localhost:8080变为Origin:http://localhost:8080。这样一来，服务器端就可以区分这个请求是不是跨域了。
3.服务器端
当服务器端收到浏览器端发送过来的请求后，会有一个响应header。它会告诉请求的浏览器哪儿些域名可以请求我，哪些方法可以执行。
响应回到浏览器端，此时浏览器会根据这个响应自动判断，然后在做决定。
4.服务器端返回给浏览器端的东西
Access-Control-Allow-Origin 允许跨域的Origin列表
Access-Control-Allow-Methods 允许跨域的方法列表（GET、POST等）
Access-Control-Allow-Headers 允许跨域的Header列表
Access-Control-Expose-Headers 允许暴露给JavaScript代码的Header列表
Access-Control-Max-Age 最大的浏览器缓存时间，单位为s
5.跨域请求形式
有两种，简单和非简单请求。常遇到的 application/json 就是一种非简单请求，在以上所写的浏览器端之前，会先进行一次预请求，根据这个结果再去判断是否正式请求。

8、八个小球，一个较重，通过天平比较找出的最少比较次数。

2次。先从8个球中拿出六个球，天平两端各三个，
若平衡，则较重的那个球在剩余的两个里，把剩余的两个球放在天平上，较重的那端就是较重的球；
若不平衡，则将6个球中较重一端的其中两个放在天平上，
若平衡，则剩余的那个就是较重的球；
若不平衡，较重的那端，就是较重的球。

二、编程题

1、不使用临时变量实现两数交换。

//方法一：
let a = 1;
b = 2;
a = a + b;
b = a - b;
a = a - b;

//方法二：
let a = 1;
b = 2;
a ^= b;//位运算符，异或 a=a^b
b ^= a;
a ^= b;

//方法三：
let a =1;
b = 2;
a = {a:b, b:a};
b = a.b;
a = a.a;

//方法四：
let a =1;
b = 2;
[a,b] = [b,a];//ES6解构赋值语法

2、使用 Promise 异步加载图片。

function loadImageAsync(url){
	return new Promise((resolve,reject)=>{
		let image=new Image();
		image.onload=function(){
			resolve(image);
		};
		image.onerror=function(){
			reject(new Error('Could not image at'+url));
		}
		image.src=url;
	})
}

3、从浏览器获取 URL 查询字符串参数。

function getParams () {
    let str = window.location.href.split('?')[1];
    let arr = str.split('&');
    let params = {};
    for (let i = 0; i < arr.length; i++) {
        params[arr[i].split('=')[0]] = arr[i].split('=')[1];
    }
    return params;
}

4、找出字符串中出现次数最多的字符并求其出现次数。

// 1.统计次数
var str = 'abdgdbcaethbganmugthaesqszaphfdvwd';
var obj = {};
// 创建了一个空的对象，存储字符串中的每个字符。属性：每个字符，属性值：该字符出现的次数
for (var i = 0; i < str.length; i++) {
    // 遍历字符串
    var chars = str.charAt(i);
    // chars代表字符串的每一个字符
    if (obj[chars]) {
        obj[chars]++;
    } else {
        obj[chars] = 1;
    }
    // obj[chars]属性值：该字符出现的次数
    // 如果已经存在，那么次数+1；否则赋值为1
}
console.log(obj);
// 输出对象obj，显示每个字符出现的次数

// 2.遍历对象，找出最大的次数
var max = 0;
var ch = '';
for (var k in obj) {
    if (obj[k] > max) {
        max = obj[k];
        ch = k;
    }
}
// k代表属性：每个字符
// obj[k]代表属性值：该字符出现的次数
// 将次数最多的字符赋值到ch

console.log('最多的字符是' + ch + '，次数为' + max);