1请用CSS实现如下图的样式，相关尺寸如图示，其中demo结构为
. 10scores

<style>
    #demo{
        width:0;
        height:0;
        border-width:40px;
        border-style:solid;
        border-color:transparent transparent blue transparent;
    }
</style>

<div id="demo"></div>

<style>
	#demo{
		width: 100px;
		height: 100px;
		border:2px solid #000;
		position:relative;
		box-sizing:border-box;
	}
	#outer{
		position:absolute;
		left:96px;
		top:20px;
		width:0;
		height:0;
		border-width:10px;
		border-style:solid;
		border-color:transparent transparent transparent #000;
	}
	#inner{
		position: absolute;
		left:96px;
		top:22px;
		width:0;
		height:0;
		border-width: 8px;
		border-style: solid;
		border-color:transparent transparent transparent #fff;
	}

</style>

<div id="demo">
	<div id="outer"></div>
	<div id="inner"></div>
</div>

2.阅读下面这段代码

var tt = 'aa';
function test(){
    alert(tt);
    var tt = 'dd';
    alert(tt);
}
test();

(1)写出alert弹出的值; //undefined dd

(2)如果注释第4行和第5行，alert弹出的值是什么？ // aa

解释：这是es5的语法，变量和函数声明会提升，如果在函数内部没有定义，那么就回去全局查找。

3.end字符什么时候输出

var t = true;
setTimeout(function(){
	console.log(123);
	t = false;
},1000)

while(t){ }
console.log('end')

不会输出

4.数据如下XML数据，请写出转换后的JSON数据（忽略xml节点）XML数据

<xml>
	<rows>
		<interface>feth0</interface>
		<description>aa</description>
	</rows>
	<rows>
		<interface>feth1</interface>
		<description>bb</description>
	</rows>
	<total>2</total>
</xml>

我们关于 XML 最好的描述是：XML 是跨平台的、用于传输信息且独立于软件和硬件的工具。

{
    "xml": {
        "rows": [
            {
                "interface": "feth0",
                "description": "aa"
            },
            {
                "interface": "feth1",
                "description": "bb"
            }
        ],
        "total": "2"
    }
}

4.请写一段ajax提交的js代码。 -- 带核实

var xhr = new XMLHttpRequest();
xhr.open("GET","url?json");
xhr.send(null);
xhr.onreadystateChange=function(){
    if(xhr.statue == 200 && xhr.readyState == 4){
        console.log(xhr.responseText);
        document.querySelector(".showmsg").innerHTML = xhr.responseText;
    }
}

var xhr = new XMLHttpRequest();
xhr.open("POST","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username=" + name);
xhr.onreadystateChange = function(){
    if(xhr.status == 200 && xhr.readyState == 4){
        document.querySelector(".showmsg").innerHTML = xhr.responseText;
    }
}

6.判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母/数字/下划线，总长度为5-20（正则）

7.截取字符串abcdefg的efg

abcdefg.slice(5);

8.编写一个方法去掉数组的重复元素。例如：var arr = [1,2,3,3,4,5,6,6,7,1,9,3,25,4];

有很多种方法，每种方法的性能（时间复杂度，空间复杂度不同），需要在合适的场合选择合适的方法。

9.有这样一个URL：item.taobao.com/item.htm?a=…. 读写一段JS程序提取URL中的各个GET参数（参数名和参数个数不确定），将其按key-value形式返回到一个json结构中，如[a:'1',b:'2',c:'',d:'xxx',e:undefined]

正则表达式

var url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
var index = url.indexOf("?");
var str = url.slice(index+1); //'a=1&b=2&c=&d=xxx&e'
var arr = str.split('&'); //['a=1','b=2','c=','d=xxx','e'];
function format(arr){
    for(var i = 0; i < arr.length; i ++){
        var urlItem = arr[i];
        var item = urlItem.split('=');//['a','1']
        urlObject[item[0]=item[1]
    }
    return rulObject
}
return null

9.小贤是一条可爱的小狗(Dog) --- js

10.块级作用域是什么？

ES5中有全局作用域和函数作用域，没有块级作用域，造成了很多场景不合理。

1.内曾变量可能会覆盖外层变量。
2.用来计数的循环变量泄漏为全局变量。

ES6中的let为JavaScript提供了块级作用域，可以使用{}实现任意嵌套，且使得匿名立即执行函数不再必要。但仍然存在函数能不能写在块级作用域中的问题。

ES5规定是非法的，但为了兼容以前的旧代码是支持的不会报错。ES6规定在块级作用域中函数声明语句类似于let，在块级作用域之外不可引用，但实际上代码是会报错的，因为无法兼容之前的代码。而且还需要注意2点，要写成函数表达式而不是函数声明，要使用大括号包裹函数表达式。

本质上，块级作用域是一个语句，将多个操作封装在一起，没有返回值。有一个提案，使得块级作用域可以变为do表达式，既可以返回值。

块级作用域的编程风格：

1.let取代var，let没有变量提升效果
2.let和const之间，优先使用const,因为函数应为常量，可以应用多线程，易于理解阅读。

11.vue中的时间修饰符是什么？

这是vue基础的事件处理部分，尽管在JavaScript中使用event.preventDefault和event.stopPropagation很常见，但是更好的处理方法是只有纯粹的数据逻辑，而不操作具体DOM细节。

事件修饰符包括：.stop .pervent .capture .self .once .passive

事件修饰符的顺序很重要，且.once可以用于组件，.passive可以有效提高移动端性能。

12.jquery中的命名空间是什么？

jquery库在其他库之后导入，

13.jquery中的获取元素的方法有哪几类，分别是什么？

jquery选择器有基本选择器，层次选择器，过滤选择器，表单选择器；

基本选择器 #id .class element *

层次选择器后代子代> prev+next prev~sinlings

过滤选择器

基本过滤选择器 :firse :last :not(selector) :even :eq(index) :gt(index) :lt(index) :header :animated :focus
内容过滤选择器 :contains(text) :empty :has(selector) :parent
可见性过滤选择器 :hidden :visible
属性过滤选择器 [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [atttribute|=value] [attribute~=value] [attribute1][attribute2][attributeN]
子元素过滤选择器 :nth-child(index/even/odd/equation) :first-child :last-child :only-child
表单对象属性过滤选择器 :enabled :disabled :checked :selected

表单选择器 :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden

14.webpack的重要组成部分？

15.在class中声明的函数是在原型上吗？

class中声明的函数除了constructor之外，都是在类的prototype上。可以用Object.assign向类添加方法，注意类内部定义的多有方法都是不可枚举的。

class Point {
    constructor (x, y) {
        this.x = x;
        this.y = y;
    }
    
    toString() {
        return '(' + this.x + ',' + this.y + ')';
    }
}

typeof Point //"function"
Point === Point.prototype.constructor // true

Object.assign(Point.prototype,{
    toString(){},
    toValue(){}
});

Object.keys(Point.prototype) //[]
Object.getOwnPrototypeNames(Point.prototype)//["constructor","toString"]

16.找出数组中重复次数最多的项？

    <!--数组去重-->
    
    function dedupe(array){
        return Array.from(new Set(array));
    }
    
    dedupe([1,1,2,3]); // [1,2,3]

What you must remember ?

Vue

1.What are the major features of VueJS?

Virtual DOM, Components, Templates, Routing, Light weight

2.How do you achive conditional group of elements?

    <template v-if="condition">
        <h1>Name</h1>
        <p>Address</p>
        <p>Contract Details</p>
    </template>

3.Why should not use if and for directives together on the same element? Beacuse v-for directive has a higher priority than v-if.

<!--to filter items in a list for example-->

    <!--wrong-->
    <ul>
        <li
            v-for="user in users"
            v-if="user.isActive"
            :key="user.id"
        >
            {{ user.name }}
        </li>
    </ul>
    
    <!--right-->
    computed:{
        activeUsers:function(){
            return this.users.filter(function(user){
                return user.isActive
            })
        }
    }
    
    <ul>
        <li
            v-for="user in activeUsers"
            :key="user.id"
        >
            {{ user.name }}
        </li>
    </ul>


<!--to avoid rendering a list if it should be hidden for example-->

<ul>
    <li
        v-for="user in users"
        v-if="shouldShowUsers"
        :key="user.id"
    >
        {{ user.name }}
    </li>
</ul>

<ul v-if="shouldShowUsers">
    <li
        v-for="user in users"
        :key="user.id"
    >
        {{ user.name }}
    </li>
</ul>

4.Why do you need to use key attribute on for directive?

In order to track each node's identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item with in v-for iteration. An ideal value for key would be the unique id of each item. Let us take an example usage.

<div v-for="item in items" :key="item.id"> {{item.name}} </div>

5.What are the array detection mutation methods?

mutation methods modifies the original array

push() pop() shift() unshift() splice() sort() reverse()

6.What are the array detection non-mutation methods? the methods which do not mutate the original array but always return a new array are called non-mutation methods.

filter() concat() slice()

    vm.todos = vm.todos.filter(function (todo){
        return todo.status.match(/Completed/)
    })

React

JavaScript

Data Structures & Algorithms with JavaScript

CSS3

HTML5

ordinary の 路

1请用CSS实现如下图的样式，相关尺寸如图示，其中demo结构为. 10scores