1 面试题数组
// TODO 定义空数组
var arr1 = [ ]; ——字面量方式
var arr2 = new Array(); ——构造对象方式
console.log(typeof arr1);// object
console.log(typeof arr2);// object
// TODO 定义空字符串
var str1 = ' ' ;
var str2 = new String();
console.log(typeof str1);// string
console.log(typeof str2);// object
// TODO 定义数字值
var num1 = 100;
var num2 = new Number(100);
console.log(typeof num1);// number
console.log(typeof num2);// object
// TODO 定义布尔值
var boo1 = true;
var boo2 = new Boolean(true);
console.log(typeof boo1);// boolean
console.log(typeof boo2);// object
2面试题以下哪个写法是错误的 C
/*var a = {}; - 对象
var b = []; - 数组
var c = ();没见过
var d = //; - 正则表达式*/
3比较for与for...in
TODO for循环可以控制循环的开始和结束。
for (var i=0; i<arr.length; i++){
console.log(arr[i]);
}
TODO for......in 循环只能获取数组中的所有元素。
for (var i in arr){
console.log(arr[i]);
}
4 要求自定义完成数组元素的由大到小的排序
var arr = [1,3,3,6,4,8,9,5];
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]>arr[j]){
var c = arr[i];//比较大小
arr[i] = arr[j]
arr[j] = c;
}
}
}
console.log(arr);//"1,3,3,4,5,6,8,9"
TODO 创建一个数组将数组中重复的元素去除
var arr = [1,3,3,6,4,8,6,5];
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i] == arr[j]){//把j位置的元素删除
arr.splice(j,1)；//删除相同的元素
j--;
}
}
}
console.log(arr);// "1,3,6,4,8,5"
面试题 如何反转字符串
1.使用split将字符串转换为数组
2.数组进行反转
3.将数组转换为字符串
数组值从小到大排列
var arr = [1,2,3,4,7,8,4,6,7,2];
arr.sort(function(a,b) {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
});
console.log(arr);
TODO 1. 实现数组去重的方式
TODO a. 循环数组中所有的元素
TODO b. 完成数组中元素的比较(是否重复)
TODO c. 如果重复，删除重复的元素
第一种方式 循环嵌套
var arr =[1,6,8,4,4,3,1,4,5,6,];
for(var i = 0;i<arr.length;i++){
for(var j = i+1;j<arr.length;j++){
if(arr[i] == arr[j]){
arr.splice(j,1);
j--;
}
}
}
console.log(arr);//[1,6,8,4,3,5]
TODO * 优化嵌套循环 - 改为一次循环
TODO a. 定义一个空数组
TODO b. 循环原数组
TODO c. 判断新数组中是否与原数组当前的元素重复
TODO d. 表示新数组中没有原数组当前的元素 - 添加到新数组中
Eg:
var arr = [1,2,3,4,5,6,2,2,4,6];
var n = []; //定义空数组
for(var i=0;i<arr.length;i++){ //循环原数组
if(n.indexOf(arr[i]) === -1){ //判断新数组中是否与原数组当前元素重复。 相等表示新数组中没有原数组当前的元素 ------添加到新数组中。
n.push(arr[i]);//添加的数组的最后一位
//n[n.length] = arr[i]与上句话同意思
} }
console.log(arr);// "1,2,3,4,5,6,2,2,4,6"
console.log(n);// "1,2,3,4,5,6"
TODO 定义一个函数 - 专门用于数组元素去重
TODO * 函数中可变内容 - 一般都为参数
function quchong(arr){
var n = [];
for(var i = 0;i < arr.length;i++){
if(n.indexOf(arr[i]) === -1){
n.push(arr[i]);
}
}
console.log(n);// "1,3,2,4"
}
var a = [1,3,2,3,2,2,4];
quchong(a);
或者（输出分别用return和console.log）
function quchong(arr){
var n = [];
for(var i = 0;i < arr.length;i++){
if(n.indexOf(arr[i]) === -1){
n.push(arr[i]);
}
}
return n;
}
var a = [1,3,2,3,2,2,4];
console.log(quchong(a))；
【面试笔试】DOM全称Document Object Model文档对象模型。
* 三个对象
* document(文档)对象
* node(节点)对象
* element(元素)对象
Node对象
* 遍历节点
* 祖先与后代 -> 可以利用 父与子 的关系完成
* 父与子
* 父节点 - parentNode
* 子节点
* firstChild - 第一个子节点
* lastChild - 最后一个子节点
* childNodes - 所有子节点(类数组-NodeList)
* 兄弟
* previousSibling - 前一个兄弟节点
* nextSibling - 后一个兄弟节点
* 注意
* 问题 - 父与子节点关系中，浏览器自动添加一个空白文本节点
* 解决 - 利用 getElementsByTagName() 方法解决
* 插入节点
* parent.appendChild(child)方法
* 将 child 插入到 parent 节点的所有子节点列表的最后
* parent.insertBefore(newChild,oldChild)
* 将 newChild 插入到 parent 节点中子节点为 oldChild 的前面
* 问题 - DOM 的插入节点操作没有 insertAfter() 方法
* 注意
* 如果将新创建的标签插入到HTML页面中指定的标签中 - 新增标签
* 如果将HTML页面中已存在的标签插入到指定标签中 - 移动标签
nodeValue 获取和设置指定标签的文本内容兼容问题：
var one = document.getElementById('one');
if(one.textContent === undefined){
// TODO IE 8以下
console.log(one.innerText);//IE浏览器
}else{
console.log(one.textContent);//其他浏览器
}
获取当前样式兼容解决方案
var btn4 = document.getElementById('btn4');
btn4.onclick = function(){
var div = document.getElementById('div1');
if(window.getComputedStyle){
// TODO 其他浏览器
var style = window.getComputedStyle(div, null);
}else{
// TODO IE 浏览器
var style = div.currentStyle;
}
事件监听器与事件绑定的区别（面试题）
TODO 事件绑定
为相同标签绑定相同事件多次
btn.onclick = function(){
console.log('这是通过事件绑定实现的.')
}
TODO * 事件绑定方式 -> 最后一次绑定的事件处理函数有效
TODO * 实际的原因是函数覆盖与被覆盖的问题
TODO 事件监听器 - addEventListener()
TODO * 事件处理函数 -> 回调函数
btn.addEventListener('click',function(){
console.log('这是通过事件监听器实现的.')
});
TODO 为相同标签绑定相同事件多次
TODO * 多次绑定的事件处理函数逻辑全部有效
TODO * (了解)取消绑定 - btn.removeEventListener()
TODO * 可以针对以上两种方式
TODO 总结
TODO * 事件绑定只是事件监听器的一种简化写法
* 移除事件监听器(了解)
removeEventListener(eventName, functionName, boolean)方法
* eventName - 表示事件名称
* functionName - 表示当前绑定事件的处理函数
* 注意 - 与addEventListener()中的functionName是同一个函数
* boolean - 表示设置事件是捕获阶段还是冒泡阶段
事件监听器的兼容方案
* addEventListener() - 其他浏览器(ChromeFirefoxIE 9/10/11)
* attachEvent() - IE 6/7/8
定义一个函数，解决事件绑定的兼容问题，
绑定事件的元素是动态的，它应该是一个参数。
事件的事件名称是动态的，它应该是一个参数。
事件的处理函数是动态的，它应该是一个参数。
* addEventListener() – click 其他浏览器
* attachEvent() – onclick IE浏览器
if(btn.addEventListener){
// TODO 其他浏览器
btn.addEventListener('click',function(){
console.log('这是事件监听器实现的.')
});
}else{
// TODO IE 浏览器
btn.attachEvent('onclick',function(){
console.log('这是事件监听器实现的.')
});
}
通用的事件监听器兼容方案
function bind(elem, eventName, functionName){
if(elem.addEventListener){
// TODO 其他浏览器
elem.addEventListener(eventName,functionName);
}else{ // TODO IE 浏览器
elem.attachEvent('on'+eventName,functionName);
}
}
bind(btn, 'click', function(){
console.log('这是事件监听器实现的.')
})
TODO addEventListener()方法 - 其他浏览器
TODO element.attachEvent(eventName, functionName) - IE 8之前的版本
TODO * 参数
TODO * eventName - 表示事件名称，例如"onclick"、"ondblclick"等
TODO * functionName - 表示事件处理函数
This的用法
根据函数调用的方式不同this的值也不同：
- 以函数的形式调用，this是window
- 以方法的形式调用，this是调用方法的对象
- 以构造函数的形式调用，this是新创建的那个对象
- 使用call和apply调用的函数，第一个参数就是this
- 在全局作用域中，this是window
- 在响应函数中，给谁绑定的事件this就是
解决兼容问题（事件对象event）
function bind(elem, eventName, functionName){
if(elem.addEventListener){
// TODO 其他浏览器
elem.addEventListener(eventName,functionName);
}else{
// TODO IE 浏览器
elem.attachEvent('on'+eventName,functionName);
}
}
bing(btn,'click',function(event){
// TODO 事件对象的浏览器兼容解决方案
var event = event || window.event;
});
事件的兼容问题 通用（事件对象）
var mylink = document.getElementById('mylink');
var ul = document.getElementById('ul');
function fun(btn,eventName,functionName){
if(btn.addEventListener){
btn.addEventListener(eventName,functionName);
}else{
btn.attachEvent('on'+eventName,functionName);
}
}
fun(ul,'click',function(event){
console.log(event.target);
var target = event.target || event.srcElement;
console.log(this);
})
2 获取目标元素兼容问题
* event.target属性 - 其他浏览器支持
* event.srcElement属性 - IE 8浏览器支持
* 注意 - this与event.target的区别
* event.target - 获取触发当前事件的元素
* this - 获取绑定当前事件的元素
ul.addEventListener('click',function(event){
console.log(event.target);//解决兼容问题
var target = event.target || event.srcElement;
console.log(this);
})
浏览器的兼容问题（阻止默认行为）
if(event.preventDefault){
event.preventDefault();//其他浏览器
}else{
event.returnValue = false;//IE浏览器
}
兼容问题阻止事件冒泡
var d3 = document.getElementById('d3');
d3.addEventListener('click',function(event){
alert(d3.id);
event.stopPropagation();//其他浏览器
},false);
d3.attachEvent('onclick',function(event){
alert(d3.id);
event.cancelBubble = true;//IE浏览器
});
使用setTimeout()改写setInterval()
①var num = 0;
function fn(){
console.log(num);
num++;
setTimeout(fn,1000);
}
fn();
②var num = 0;
function fn(){
console.log(num);
num++;
}
setInterval(fn,1000);
运用setTimeout()和clearTimeout();常用
var show = document.getElementById('show');
var num = 0,t;
var start = document.getElementById('start');
start.onclick = startNum;
function startNum(){
show.value = num;
num++;
t = setTimeout(startNum,1000);
}
var stop = document.getElementById('stop');
stop.onclick = function(){
clearTimeout(t);
}
运用setInterval() 和 clearInterval();
var num = 0,t;
var show = document.getElementById('show');
var start = document.getElementById('start');
start.onclick = function(){
t = setInterval( fn,1000);
}
function fn(){
show.value = num;
num++;
}
var stop = document.getElementById('stop');
stop.onclick = function(){
clearInterval(t);
}
22.1动态时钟案例（延迟调用）
页面加载完毕后显示时间，每一秒刷新一次。
var t;
var show =document.getElementById('show');
function startNum(){
var time = new Date().toLocaleTimeString();//获取当时时间
show.value =time;//获取的时间显示到界面
t = setTimeout(startNum,1000);//设置定时器，多少秒获取一次
}
startNum();//调用函数，一次调用，一直循环。
var stop =document.getElementById('stop');
stop.onclick = function(){
clearInterval(t);
}
22.1 轮播图效果（自动）
TODO 思路的分析
TODO * 先选择图片轮播是累加(向右)还是累减(向左)
TODO * 选择的结果没有多少区别
TODO * 如果选择向右自动轮播 - 修改向右轮播的逻辑代码
TODO * 当点击向右或向左按钮时 - 自动轮播要停止
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图效果</title>
<link rel="stylesheet" href="css/style.css" />
<style>
body {
padding: 100px;
}
</style>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" style=" 492px;">
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg" alt="...">
</div>
</div>
<a id="prev" class="left carousel-control" href="#">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a id="next" class="right carousel-control" href="#">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
<script>
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var show = document.getElementsByTagName('img')[0];
var index = 0;
var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
prev.onclick = function(){
clearInterval(t);//解除定时播放
prevName();//调用手动播放
}
function prevName(){
index--;
if(index<0){
index = imgArr.length-1;
}
show.src = imgArr[index];
}
next.onclick = function(){
clearInterval(t);//解除定时播放
nextNum();//调用手动播放
}
function nextNum(){
index++;
if(index > (imgArr.length-1)){
index = 0;
}
show.src = imgArr[index];
}
var t = setInterval( nextNum,1000);//定时播放
* 面试题 - bind()、one()、live()和on()的区别
unbind()、die()和off()的区别
* one() - 事件绑定，只能绑定一次(触发一次即失效)
* live() - 事件绑定，为后面添加的元素绑定事件
* jQuery 1.7版本后，被弃用了
* jQuery 1.7版本后，新增delegate()方法，作用与live()相同
* bind() - 事件绑定
* on() - 统一以上所有事件绑定
* jQuery 1.7版本后，新增
面试题: typeof 与 instanceof 的相同点和不同点分别是什么?
不同：判断类型不同，语法结构不同。
相同：都能判断数据类型，都是关键字。
instanceof 关键字
* 作用 - 类似于 typeof 关键字。用来判断当前值的类型
* typeof - 判断原始类型
* instanceof - 判断包装类型
特殊类型（面试题undefined）
TODO 1. undefined是什么类型?
TODO * 既不是原始类型，也不是包装类型
TODO * undefined的类型就是 undefined
TODO undefined本身就是一个类型
TODO * 该类型中只有一个值 - undefined
TODO null是什么类型? object
TODO * null值是 Object(对象) 的一个特殊值
TODO * 注意 - null并不是一个类型，而是一个值
TODO ** 面试题 - null与undefined的共同点和不同点
TODO * 共同点
TODO * null和undefined 都代表空
TODO * 不同点
TODO * null
TODO * 是 object 类型
TODO * 存在，不指向任何值
TODO * undefined
TODO * undefined 类型
TODO * 存在，但没值
TODO *null 作用 - 释放资源
* 特殊类型总结
* undefined：表示未定义
* undefined既是类型，也是值
* undefined类型中只有一个值 - undefined
* 得到undefined的情况 - 面试题
1只声明，但不赋值
2 声明也赋值，值为undefined
3 函数中不明确指定 return - undefined - 函数内容
4访问一个对象不存在的属性 - undefined - 对象内容
* null：含义 - 空
* 注意 - null只是一个值，而不是类型
* null是 object 类型中的一个特殊值
* 作用 - 释放资源
8.3 类型转换
* 隐式类型转换 - 没有明确转换方式【注意】
* 转换为字符串 - '' + 值 = 字符串
* 转换为number - + 值 = 数字值
* 转换为布尔值 - !! 值 = 布尔值
* 注意 - 在实际开发中，类型的自动转换机制
* 显式类型转换 - 具有明确转换方式【常用】
* 转换为字符串 - String()
* 提供了一个转换方法 - toString()
* 将数字值使用 toString() 转换为 字符串 时
* 先定义数字值的变量
* 再利用该变量调用 toString()
* 转换为数字值 - Number()
* 整型 - parseInt()
* 如果定义的是一个浮点型的数字值，直接去掉小数点后面的内容
* 浮点型 - parseFloat()
* 如果定义的是一个整型的数字值，直接转换
* 转换为布尔值 - Boolean()
* 注意 - 在实际开发中，一般使用这种方式
11.2.2函数的案例【笔试题】
// TODO 读代码题 - 提供这样的代码内容，让你说出输出结果
var a;
// TODO 声明变量，但没赋值
console.log(a);// undefined
a = 100;
// TODO 变量赋值为 100
console.log(a);// 100
a = function(a){
// TODO a是形参 - 实参的值为 200
console.log(a);// 200
}
a(200);
// TODO 将变量a重新赋值为一个函数
console.log(a);// function
a = 300;
// TODO 将变量a重新赋值为 300
console.log(a);// 300