小米前端实习一面

1.flex布局

在不改变html情况下用flex实现下面效果

<div class="parent">
        <div class="child a">A</div>
        <div class="child b">B</div>
        <div class="child c">C</div>
    </div>

		.parent {
            height: 100px;
            background: grey;
            width: 100%;
        }
        
        .child {
            width: 50px;
            height: 50px;
            background: red;
        }

1.1 首先实现第一个效果

		.parent {
            height: 100px;
            background: grey;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        
        .child {
            width: 50px;
            height: 50px;
            background: red;
        }
        .c {
            order: -1;
        }

1.2 由于设置的宽度是100%，所以不能用偏移transforme。想了老半天，唉，太菜了。
第一种解决：使用定位

        .parent {
            height: 100px;
            background: grey;
            display: flex;
            justify-content: left;
            align-items: center;
            width: 100%;
            position: relative;
        }
        
        .child {
            width: 50px;
            height: 50px;
            background: red;
        }
        
        .c {
            order: -1;
        }
        
        .b {
            position: absolute;
            right: 0;
        }

第二种解决：使用margin-left: auto

        .parent {
            height: 100px;
            background: grey;
            display: flex;
            justify-content: left;
            align-items: center;
            width: 100%;
        }
        
        .child {
            width: 50px;
            height: 50px;
            background: red;
        }
        
        .c {
            order: -1;
        }
        
        .b {
            margin-left: auto;
        }

1.3 可以设置flex-basis属性

<div class="parent">
        <div class="child a">A</div>
        <div class="hid"></div>
        <div class="child b">B</div>
        <div class="hid"></div>
        <div class="child c">C</div>
    </div>

        .parent {
            height: 100px;
            background: grey;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
        
        .child {
            width: 50px;
            height: 50px;
            background: red;
        }
        
        .hid {
            flex-basis: 30px;
        }

其中flex-basis属性设置子元素的基准宽度，也就是初始宽度。可以随着内容的增加而增加，不是固定的宽度。
例如：

<div class="father">
        <span>123456789</span>
        <span>2</span>
    </div>

        .father {
            display: flex;
            height: 300px;
            background-color: #ccc;
        }
        
        .father :nth-child(1) {
            flex-basis: 10px;
            width: 20px;
        }
        
        span {
            background-color: pink;
            height: 20px;
        }

当同时设置了flex-basis和width时，若内容长度小于flex-basis则宽度为flex-basis，若大于flex-basis小于width则为该内容的长度，若内容长度大于width，则限定了宽度为width。
上述效果为：

当删除width时：

.father :nth-child(1) {
       flex-basis: 10px;
       /* width: 20px; */
   }

2.设置元素隐藏的方法有哪些？区别?如果在visible:hidden区域点击，还会有原本的点击效果吗？

	display:none	visibility:hidden	opacity:0
页面中	不存在	存在	存在
重绘	会	会	不一定
重排	会	不会	不会
自身绑定事件	不触发	不触发	触发
transition	不支持	支持	支持
子元素复原	不能	能	不能
被遮挡元素触发事件	不影响	不影响	影响

3.事件循环输入输出

setTimeout(() => console.log('g'), 0);

console.log('a');

Promise.resolve()
    .then(() => console.log('b'))
  .then(() => console.log('c'));

new Promise((resolve) => {
  console.log('d');
  resolve();
}).then(() => {
  console.log('e')
}).then(() => console.log('f'));

结果：
a d b e c f g

async function async1() {
      console.log(1);
      const id = await async2() 
      console.log(2);
    }

    async function async2() {
      console.log(3);
      const id = await getUserId() // 耗时
      console.log(4);
    }

    async1()
    console.log(5);

结果：
1 3 5

4.从大数组a中删除小数组b中存在的数字且对大数组去重

大：[1, 1, 3, 4, 2, 5, 6, 7, 8, 9]
小：[13, 2, 3, 5, 7]
结果: [1, 4, 6, 8, 9]

let a = [1, 1, 3, 4, 2, 5, 6, 7, 8, 9]
let b = [13, 2, 3, 5, 7]
let c = new Set(a)
let d = new Set(b)
let res = []
c.forEach(num => {
    if (!d.has(num)) {
        res.push(num)
    }
})
console.log(res)

Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

console.log(Array.from(new Set([1, 1, 3, 4, 2, 5, 6, 7, 8, 9])))
// [1,3,4,2,5,6,7,8,9]

5.对 people 对象进行一下改造，使当其属性变化时打印改变前和改变后的值

let people = {name: “ellyn”, age: 20, gender: “female”}
…
// 结果
people.name = “小琪” // 此时会打印 “ellyn 小琪”
people.name = “大琪” // 此时会打印 “小琪 大琪”
people.age = 21 //此时会打印 “20 21”

let people = {
    _name: "ellyn",
    set name(v) {
        console.log(this._name, v)
        this._name = v
    },
    _age: 20,
    set age(v) {
        console.log(this._age, v)
        this._age = v
    }
}

此处用到了ES6给对象提供的set 和 get 方法，可以对对象再进行操作（唉，面试的时候完全不知道，真是个菜鸡儿~）

也可用Object.defineProperty，但是其不支持ie8及以下，其原理就是对对象的属性进行劫持。Object.defineProperties可以对对象的多个属性进行劫持。

let people = { _name: "ellyn", _age: 20, gender: "female" }
Object.defineProperties(people, {
    name: {
        set(v) {
            console.log(this._name, v)
            this._name = v
        }
    },
    age: {
        set(v) {
            console.log(this._age, v)
            this._age = v
        }
    }
})

其中为何不能都用name或者age呢？因为如果重名，会一直进入name:{}中，循环执行，所以名字不能相同。

延伸：vue3中的数据劫持（Proxy）

let people = { name: "ellyn", age: 20, gender: "female" }
let p = {
    set(obj, key, val) {
        console.log(obj[key], val)
        obj[key] = val
    }
}
let proxy1 = new Proxy(people, p)

6.有一个可上下来回滚动的网页，不同位置存在不同元素，当元素完全位于视口中时打印一下它，不重复打印同一个元素（比如元素w第一次进入视口，打印；第二次进入视口，不打印）

其中涉及到获取视口高度等知识，详细参见博客

7.设置每天第一次登录某网站弹出提醒