前言

第一次发表文章，不喜欢勿喷，谢谢！大学毕业以来也有接近2两年的时间了，之前都在规模小的团队从事前端工作，没有一个很好的规范，都是以解决问题，实现需求为目标而完成工作。导致，我发现自己的基础是越来差，很多时候，在工作中，一些简单的函数、方法都需要去百度，可能但是你能够很好的解决问题，但是难免下次有会遇到同样的问题。

面试记录

第一次到大公司面试，心情还是比较紧张的，导致很多知道答案的没有回答上，也体现出自己的基础不足吧，总结了一下面试的问题。

Js对象怎么相加和去重

1.Object.assign() 方法

**Object.assign()** 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

Object.assign()会合并相同属性的对象

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

2.es6对象的扩展运算符

let obj1 = { a: 1 };
let obj2 = { b: 1 };
let newObj = { ...obj1,...obj2}
console.log(newObj); //{ a: 1, b : 1 }

相当于 
let newObj1 = Object.assign({},obj1,obj2)

数组相加和去重

concat()

**concat()** 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]

简单的数组去重

方法一：
let arry = [1,3,4,7,4,2,9,1]
let newArry = arry.filter((item,index,self) =>{
    if( self.indexOf(item) === index) return item
})
console.log(newArry) // [ 1, 3, 4, 7, 2, 9 ]

方法二：
利用ES6 Set去重
let arry = [1,3,5,7,5,1,3]
console.log(Array.from(new Set(arry)))	//[ 1, 3, 5, 7 ]
console.log([...new Set(arry)])//[ 1, 3, 5, 7 ]
new Set()出来为一个Object

方法三：
includes
let arry = [1,3,5,7,5,1,3]
let newArry = []
for(let i=0;i<arry.length;i++){
    if(!newArry.includes(arry[i])){
        newArry.push(arry[i])
    }
}
console.log(newArry) //[ 1, 3, 5, 7 ]

对象数组去重

方法一.采用对象访问属性的方法，判断属性值是否存在，如果不存在就添加。
let arry = [{
    key: 1,
    value: 'hello'
},{
    key:2,
    value:'word'
},{
    key:1,
    value:'hello'
}]

let result = [ ];  
let obj = { };
for(let i=0;i<arry.length;i++){
    if(!obj[arry[i].key]){
        result.push(arry[i])
        obj[arry[i].key] = true
    }
}
console.log(obj) //{ '1': true, '2': true }
console.log(result) //[ { key: 1, value: 'hello' }, { key: 2, value: 'word' } ]

2.方法2：利用reduce方法遍历数组
let newArry = arry.reduce( (acc , cur ) =>{
   obj[cur.key]?'':obj[cur.key]=true&&acc.push(cur)
    return acc
},[])
console.log(newArry) //[ { key: 1, value: 'hello' }, { key: 2, value: 'word' } ]

this关键字

在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值，而不用考虑函数如何被调用的，ES2015 引入了支持this词法解析的箭头函数（它在闭合的执行环境内设置this的值）。MDN

全局环境

无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。

// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

函数（运行内）环境

非严格模式下:

function f1(){
    return this;
}
//浏览器中：
console.log(f1() === window);//true
//Node中：
console.log(f1() === global);//true

严格模式下:

 "use strict"; // 这里是严格模式
function f2(){
  return this;
}
console.log(f2())	//undefined

如果要想把 this 的值从一个环境传到另一个，就要用 call 或者apply 方法。

var a = 'window';
var obj = { a: 'Custom'}
function f1(){
    return this.a
}
f1() // 'window'
f1.call(obj) //'Custom'
f1.apply(obj) //'Custom'

bind方法

ECMAScript 5 引入了 Function.prototype.bind。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty

待补充。。。

在div中左右上下居中

<div class="div1">
	<div class="div2"></div>
</div>

方法一.flex布局
.div1{
    display: flex;
    justify-content: center;
    align-items: center
}
方法二：position 定位
.div1{
    position:relative;
}
.div2{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

持续更新中。。。

一个在前端摸爬滚打2年的渣渣前端面试记录

前言

面试记录