测试：
<html>
<style>
</style>
<title>Demo</title>
<body>
<div >
</div>
<script type="text/javascript">
//机试的测试代码
</script>
</body>
</html>
题目：现在有个 HTML 片段，要求编写代码，点击编号为几的链接就alert弹出其编号？（闭包题目）
<ul>
<li>编号1，点击我请弹出1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('click', function(i){
return function(){
alert(i + 1)
}
}(i), true)
}
若有如下场景，一个<div>中包含了若干个<a>，而且还能继续增加。那如何快捷方便地为所有<a>绑定事件呢？
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>
<button>点击增加一个 a 标签</button>
这里就会用到事件代理。我们要监听<a>的事件，但要把具体的事件绑定到<div>上，然后看事件的触发点是不是<a>
var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
// e.target 可以监听到触发点击事件的元素是哪一个
var target = e.target
if (e.nodeName === 'A') {
// 点击的是 <a> 元素
alert(target.innerHTML)
}
})
手写 XMLHttpRequest 不借助任何库？
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
// 这里的函数异步执行，可参考之前 JS 基础中的异步模块
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText)
}
}
}
xhr.open("GET", "/api", false)
xhr.send(null)
手写 clearfix？
.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容 IE 低版本 */
}
如何实现水平居中？
inline 元素用text-align: center;
block 元素可使用margin: auto;
绝对定位元素可结合left和margin实现，但是必须知道宽度
.container { //container是item的父级
position: relative;
width: 500px;
}
.item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin: -150px;
}
如何实现垂直居中？
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
border: 1px blue solid;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: red
}
</style>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
找出下面代码的优化点，并且优化它？
var data = ['string1', 'string2', 'string3'];
for(var i = 0; i < data.length; i++){
var dom = document.getElementById('list');
dom.innerHTML += '<li>' + data[i] + '</li>';
}
var dom = document.getElementById('list');
var data = ['string1', 'string2', 'string3'];
var frag = document.createDocumentFragment();
var li;
for(var i = 0; i < data.length; i++){
li = document.createElement("li");
li.innerHTML = data[i];
frag.appendChild(li); // 先放在 frag 中，最后一次性插入到 DOM 结构中。
}
listNode.appendChild(frag);
请用CSS实现以下图形？
https://css-tricks.com/examples/ShapesOfCSS/
圆形
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
椭圆
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
等边三角
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
直角三角
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
平行四边形
#parallelogram {
width: 150px;
height: 100px;
margin-left:20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
梯形
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
移动端设置meta？
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
数组去重？
ES6
let array = Array.from(new Set([1, 1, 1, 2, 3, 2, 4]));
console.log(array);
Set数据结构， 它的成员都是唯一的 ，其构造函数可以接受一个数组作为参数
Array.from，可以把类似数组的对象转换为数组，如通过querySelectAll方法得到HTML DOM Node List，以及ES6中新增的Set和Map等可遍历对象
ES5
<html>
<body>
<script type="text/javascript">
var array = [1, '1', 1, 2, 3, 2, 4];
var tmpObj = [];
var result = [];
array.forEach(function(a) {
var key = (typeof a) + a;
console.log(key)
if (!tmpObj[key]) { //Array对象是从Object对象继承得到，js是可以使用字符串作为数组下标的
tmpObj[key] = true;
console.log(tmpObj[key])
result.push(a);
}
})
console.log(result);
</script>
</body>
</html>
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
请实现对象深度clone？
1、
function deepClone(o1, o2) {
for (let k in o2) {
if (typeof o2[k] === 'object') {
o1[k] = {};
deepClone(o1[k], o2[k]);
} else {
o1[k] = o2[k];
}
}
}
// 测试用例
let obj = {
a: 1,
b: [1, 2, 3],
c: {}
};
let emptyObj = Object.create(null);
deepClone(emptyObj, obj);
console.log(emptyObj.a == obj.a);
console.log(emptyObj.b == obj.b);
2、
var obj = {a:{b:10}};
function copy(obj){
var newobj = {};
for ( var attr in obj) {
newobj[attr] = obj[attr];
}
return newobj;
}
var obj2 = copy(obj);
obj2.a.b = 20;
alert(obj.a.b);
请把鼠标指针移动到蓝色的 div 元素上，看到过渡效果？
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: blue;
transition: width 2s;
-moz-transition: width 2s;
/* Firefox 4 */
-webkit-transition: width 2s;
/* Safari and Chrome */
-o-transition: width 2s;
/* Opera */
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
实现动画移动效果
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
/*Safari and Chrome*/
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
{
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div></div>
</body>
</html>
请写出以下正则表达式：
匹配14*的手机号:
/^(1)4[5-9](\d){8}$/.test(14531121989)
匹配126邮箱：
/((^([a-zA-Z]))(\w){5,17})@126.com$/.test("AA3333333333333333@126.com")
匹配qq邮箱：
/(^[1-9]){5,10}@qq.com$/.test("115511@qq.com")
中文
/^[\u4e00-\u9fa5]$/g.test("我")
国内邮政编码
/^[0-9]{6}$/.test(100000)
找某个字符串中出现最多的字符和它一共出现多少次？
var str = "sssfgtdfssddfsssfssss";
var num = 0;
var value = null;
function max() {
var new_str = str.split("").sort().join("");
var re = /(\w)\1+/g; //没有\1,re就是一整个排好序的字符串，有了\1就是出现过的有重复的取出来，\1表示跟前面第一个子项是相同的
new_str.replace(re, function(match_str, char) { //$0代表取出来重复的一个个整体，如[s,s...],[f,f..],[d,d....] $1代表这个整体里的字符
if (num < match_str.length) {
num = match_str.length;
value = char;
}
});
alert(value + ":" + num)
console.log(new_str)
};
max(str);
使用vue-cli搭建一个基础项目？
vue-loader是一个webpack的loader；可以将vue文件转换为JS模块
cd到目录，vue init webpack [your project name] 后会创建一个名为 你设置名字 的文件夹
cnpm install 安装依赖，cnpm run dev运行
cnpm run build创建线上版本
使用webpack完成一次打包？
1、创建目录并转到这个目录，执行npm init –y创建一个 package.json
（在安装一个要打包到生产环境的安装包时，你应该使用 npm install --save，如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev）
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
2、创建src目录，里面创建一个index.js，创建一个index.html
在package.json中指定main为index.js（main字段指定一个主入口文件）
3、index.html引入<script src="main.js"></script>
4、npx webpack 执行打包（执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js，目标目录是dist）
5、使用配置文件webpack.config.js ，运行npx webpack时默认运行webpack.config.js配置文件，当然，如果有其他配置文件，也可以使用—config指定文件名：npx webpack --config webpack.config.js（默认）
npx webpack --config webpack.config2.js（自定义）
6、简化 CLI ，也就是命令行不用写那么多内容，做法：在package.json中的scripts中新增"build": "webpack"
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1",+ "build": "webpack"
}, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9", "lodash": "^4.17.5" } }npm run build 就可以代替npx
通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors
使用Gulp和Babel完成对ES6的编译？
1、
mkdir webpack-demo && cd webpack-demo
npm init -y
$ npm install --global gulp
步骤一、创建工程目录
Project-demo/
|── dist/
├── src/
├── js/
└── index.js
步骤二、安装gulp和编译ES6所需要的模块
用cd命令进入myProject，分别执行：
npm install --global gulp
npm install gulp —save-dev；
npm install gulp-babel —save-dev；
// babel-preset-env插件，该插件可以根据配置的目标运行环境自动启用需要的babel插件(即动态转换ES6代码至可执行的JS代码)
npm install babel-preset-env —save-dev;
// 根据babel文档指引是不需要babel-core的，但是在实际操作中少了babel-core会报找不到该模块，所以安装上即可
npm install babel-core —save-dev; （根本问题所在）
步骤三、构建Gulp任务
根目录创建gulpfile.js 和.babelrc
gulpfile：
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("src/app.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});
.babelrc：
{
"presets": ["env"]
}
src/app.js :
let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
for(let value of arr){
console.log(value)
}
步骤四
命令行运行Gulp
使用Git从远程仓库拷贝项目，修改，并提交的操作？
请利用template原理实现一个template
var reviewTemplate = $("#reviewTemplate").html().trim()
temp = reviewTemplate
.replace(/\${equipment}/g, jData[i].productName || "")
.replace(/\${function}/g, jData[i].function || "")
$("#accessment").append(temp);
用你熟悉的sql语句创建数据库、对表进行增删改查
1、说明：创建数据库
CREATE DATABASE database-name
2、说明：删除数据库
drop database dbname
说明：创建新表
create table tabname(col1 type1 [not null] [primary key],col2 type2 [not null],..)
说明：增加一个列
Alter table tabname add column col type
选择：select * from table1 where 范围
插入：insert into table1(field1,field2) values(value1,value2)
删除：delete from table1 where 范围
更新：update table1 set field1=value1 where 范围
查找：select * from table1 where field1 like ’%value1%’
SELECT * FROM tb_name WHERE sum > 100;
SELECT * FROM tb_stu WHERE sname = '小刘'
SELECT * FROM tb_stu WHERE sname like '刘%'
SELECT * FROM tb_stu WHERE date = '2011-04-08'
INSERT INTO `tb_column` (`columnId`, `columnName`, `columnDisc`, `columnOrder`)
VALUES
('1', '新闻', '国内国外新闻', '12'),
('2', '财经', '关注q', '7'),
('3', '娱乐', '关注', '14'),
('4', '体育', '关注新闻', '6'),
('5', '读书', '读书内容', '5');
连接到本机上的 MySQL。
mysql -uroot –pmysql
使用JSONP实现跨域
前端
1 <%@
page pageEncoding="utf-8"
contentType="text/html;charset=UTF-8"
language="java" %>
<html>
<head>
<title>跨域测试</title>
<script
src="js/jquery-1.7.2.js"></script>
<script>
//回调函数
function showData (result) {
var data =
JSON.stringify(result); //json对象转成字符串
$("#text").val(data);
}
$(document).ready(function () {
$("#btn").click(function
() {
//向头部输入一个脚本，该脚本发起一个跨域请求
$("head").append("<script
src='http://localhost:9090/student?callback=showData'><\/script>");
});
});
</script>
</head>
<body>
<input id="btn"
type="button" value="跨域获取数据" />
<textarea id="text"
style="width: 400px; height: 100px;"></textarea>
</body>
</html>
服务端
protected
void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//数据
List<Student> studentList =
getStudentList();
JSONArray jsonArray =
JSONArray.fromObject(studentList);
String result = jsonArray.toString();
//前端传过来的回调函数名称
String callback =
request.getParameter("callback");
//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
result = callback + "(" + result
+ ")";
response.getWriter().write(result);
}
JS实现冒泡排序？
将8，4，3，1，4，6，等数字按照从小到大的顺序依次输出；
var arr=new Array();
arr.push(8);
arr.push(4);
arr.push(3);
arr.push(1);
arr.push(5);
arr.push(6);
var temp;
for(var i=0; i<arr.length;i++)
{
for(var j=i+1;j<arr.length;j++)
{
if(arr[i]>arr[j])
{
temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
}
for(var x in arr )
{
alert(arr[x]);
}
JS实现快排？
随机选择数组中的一个数 A，以这个数为基准
其他数字跟这个数进行比较，比这个数小的放在其左边，大的放到其右边
经过一次循环之后，A 左边为小于 A 的，右边为大于 A 的
这时候将左边和右边的数再递归上面的过程
具体代码如下：
const
Arr = [85, 24, 63, 45, 17, 31, 96, 50];
function
quickSort(arr) {
if (arr.length <= 1) {
return arr;
}
let pivotIndex = Math.floor(arr.length /
2);
let pivot = arr.splice(pivotIndex, 1)[0];
let left = [];
let right = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
// 递归
return quickSort(left).concat([pivot],
quickSort(right));
}
console.log(quickSort(Arr))
在一个二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数？
function
Find(target, array) {
let i = 0;
let j = array[i].length - 1;
while (i < array.length && j >=
0) {
if (array[i][j] < target) {
i++;
} else if (array[i][j] > target) {
j--;
} else {
return true;
}
}
return false;
}
//测试用例
console.log(Find(10,
[
[1, 2, 3, 4],
[5, 9, 10, 11],
[13, 20, 21, 23]
])
)
怎么判断两个对象是否相等？
function equals( x, y ) {
var in1 = x instanceof Object;
var in2 = y instanceof Object;
if(!in1||!in2){ return x===y;
} if(Object.keys(x).length!==Object.keys(y).length){ returnfalse;
}
for(var p in x){
var a = x[p] instanceof Object;
var b = y[p] instanceof Object;
if(a&&b){
return equals( x[p], y[p]);
}
elseif(x[p]!==y[p]){
returnfalse;
}
}
return true;
}
手写一个promise？
var promise = new Promise((resolve, reject) => {
if (操作成功) {
resolve(value)
} else {
reject(error)
}
})
promise.then(function (value) {
// success
}, function (value) {
// failure
})
应该注意到，resolve和reject都在then中。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），resolve只是参数名。