js
1.简单谈谈你对js的理解
javaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准，因此也称为ECMAScript。
- 一种解释性脚本语言（代码不进行预编译）。
- 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
- 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
- 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
2.如何优化自己的代码
- 代码重用
- 避免全局变量（命名空间，封闭空间，模块化mvc…）
- 拆分函数避免函数过于臃肿
- 注释
3.3种强制类型转换和2种隐式类型转换
强制：parseInt()、parseFloat()、Number()
隐式：== 、!、!!（!!a === (a!=null&&typeof(a)!=undefined&&a!=’’)）
4.事件绑定和普通事件有什么区别
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，无法取消
事件绑定addEventListener方式添加事件可以添加多个，不兼容低版本IE
addEventLisntener还支持事件冒泡+事件捕获
// 普通添加事件的方法：
var btn = document.getElementById("hello");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}
执行上面的代码只会alert 2
// 事件绑定方式添加事件：
var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false);
执行上面的代码会先alert 1 再 alert 2
5.b继承a的方法
function A( age, name ){
this.age = age;
this.name = name;
}
A.prototype.show = function(){
alert('父级方法');
}
function B(age,name,job){
A.apply( this, arguments );
this.job = job;
}
B.prototype = new A();
var b = new A(14,'侠客行');
var a = new B(15,'狼侠','侠客');
console.log(b); // A {age: 14, name: "侠客行"}
console.log(a); // B {age: 15, name: "狼侠", job: "侠客"}
6.如何阻止事件冒泡和默认事件
- canceBubble()只支持IE
- return false
- stopPropagation()
7.javascript的本地对象，内置对象和宿主对象
- 本地对象为array obj regexp等可以new实例化
- 内置对象为gload Math 等不可以实例化的
- 宿主为浏览器自带的document,window 等
8.window.onload 和document ready的区别
- window.onload ：在dom文档树加载完和所有文件加载完之后执行一个函数，只出现一次
- Document.ready：原生种没有这个方法，jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完），比window.onload先执行，可以出现多次
9.javascript的typeof返回哪些数据类型
alert(typeof [1, 2]); //object
alert(typeof 'leipeng'); //string
alert(typeof 1); //number
var i = true; alert(typeof i); //boolean
var a; alert(typeof a); //undefined
function a(){;};
alert(typeof a) //function
10.判断某变量是什么数据类型
- obj instanceof Array
- Array.isArray()
- typeof
- instanceof
11.js设置属性
- 获取某个input的值：document.getElementById(“ID”).value
- 设置内容：dom.innerHTML = “xxxx”
- 设置css样式：dom.style.color = “#000”
12.事件流模型都有什么
-
事件冒泡：事件开始由最具体的元素接受，然后逐级向上传播
-
事件捕捉：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
-
目标阶段
13.实现DOM节点被点击时候，能够执行一个函数
- 直接在DOM里绑定事件：
- 在JS里通过onclick绑定：
xxx.onclick = test - 通过事件添加进行绑定：
addEventListener(xxx, ‘click’, test)
14.简述创建函数、对象的几种方式
-
第一种（函数声明）：
function sum1(num1,num2){ return num1+num2; } -
第二种（函数表达式）：
var sum2 = function(num1,num2){ return num1+num2; } -
第三种（函数对象方式）：
var sum3 = new Function("num1","num2","return num1+num2"); -
var obj = {};（使用json创建对象）
-
var obj = new Object();（使用Object创建对象）
-
通过函数创建对象。
(1)、使用this关键字 如： var obj = function (){ this.name ='张三'; this.age = 19; this.action = function () { alert('吃饭'); }; } (2)、使用prototype关键字 如：function obj (){} obj.prototype.name ='张三'; obj.prototype.action=function () { alert('吃饭'); }; -
通过Window创建对象
window.name = ''张三'; window.age = 19; window.action= function() { alert('吃饭'); }; -
使用内置对象创建对象
var obj = new Object();//示例初始化一个Object
15.列举浏览器对象模型BOM里常用的对象，列举window对象的常用方法
- 对象：window（JS的最顶层对象）, document（文档对象）, location（浏览器当前URL信息）, screen（客户端屏幕信息）, history（浏览器访问历史信息）, navigator（浏览器本身信息）
- 方法：alert(), confirm(), prompt(), open(), close()
16.window.location常用方法
- window.location.search() ：返回接口参数 ?ver=1.0&id=timlq 也就是问号后面的
- window.location.hash ：锚点 ， 返回值：#love
- window.location.reload() ： 刷新当前页面
17.简述readyonly与disabled的区别
ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容.
- Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。
- 在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去
18.写一个函数escapeHtml，将<, >, &, “进行转义
function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
switch (match) {
case “<”:
return “<”;
case “>”:
return “>”;
case “&”:
return “&”;
case “\””:
return “"”;
}
});
}
19.url：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e 将url中key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}
function serilizeUrl(url) {
var urlObject = {};
if (/\?/.test(url)) {
var urlString = url.substring(url.indexOf("?") + 1);
var urlArray = urlString.split("&");
for (var i = 0, len = urlArray.length; i < len; i++) {
var urlItem = urlArray[i];
var item = urlItem.split("=");
urlObject[item[0]] = item[1];
}
return urlObject;
}
return null;
}
20.已知字符串foo=”get-element-by-id”,将其转化成驼峰表示法”getElementById”
function combo(msg){
var arr=msg.split("-");
for(var i=1;i21判断一个字符串中出现次数最多的字符，统计这个次数
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
22.去掉数组中重复的数字
//思路：每遍历一次就和之前的所有做比较，不相等则放入新的数组中！
//这里用的原型 个人做法；
Array.prototype.unique = function(){
var len = this.length,
newArr = [],
flag = 1;
for(var i = 0; i < len; i++, flag = 1){
for(var j = 0; j < i; j++){
if(this[i] == this[j]){
flag = 0; //找到相同的数字后，不执行添加数据
}
}
flag ? newArr.push(this[i]) : '';
}
return newArr;
}
// 方法二
var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
Array.prototype.unique2 = function()
{
var n = []; //一个新的临时数组
for(var i = 0; i < this.length; i++) //遍历当前数组
{
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
var newArr2=arr.unique2(arr);
alert(newArr2); //输出1,2,3,4,5,6,9,25
23. 字符串拼接
① 例如 class=“font-自增的数字类型” font-1 font-2 font-3
class="font - + '（i-1）'+ "
② 例如 对于地址栏的拼接
url="http://www.example.com?params=' examId + ',' paperId + ',' + ${pagition} ' "
③ 例如
24.三元表达式连写
:style="[{'height': isFourStep == 1 ?'calc(100% - 20px)':(isFull == 1 ? 'calc(100% - 20px)':'calc(100% - 29px)')}]
25.闭包的使用
场景：在一个函数外部想要获取函数内部的变量值，并且这个是始终保存在内存中，不会因为某个函数执行完变量被垃圾回收机制回收
var a = 1;
function out () {
var b = 2;
}
out();
console.log(a) // 1
console.log(b) // b is not defined 此时 在函数外部获取不到变量b
变量b是在函数内部声明的 在全局是无法获得的 报错 undefined，为了解决这一问题 我们可以使用闭包，简单来讲，闭包就是指一个函数，但是这个函数可以访问另外一个函数作用域中的变量
var a = 1;
function out () {
var b = 2;
// 闭包 获取到b 并且这个变量会存储在内存中
function inner() {
console.log('b',b); // 2
}
inner();
}
out();
console.log(a) // 1
26.闭包中的this指向问题(指向全局window)
var obj = {
name: 'Anna',
eat: function() {
// 当前eat函数中的this指向当前对象 obj 所以可以获取到this.name
console.log('this.name -- ',this.name); // Anna
console.log('this -- ',this); // {name：'Anna'，eat：fn()}
return function() {
// 闭包函数中的this指向window 所有获取不到this.name
console.log('this.name',this.name); // 空
}
}
}
obj.eat()();
27.闭包会造成内存的泄漏
// 内存泄漏：当已经不需要某块内存时但是这块内存还存在着，并没有被垃圾回收机制清理掉，就会造成内存的泄漏
// 垃圾回收机制：1.标记清除(变量声明的方式) 2.引用计数(调用使用情况)
// 注意：闭包只是在ie9以前会造成内存泄漏 只是由于IE9 之前的版本对JScript对象和COM对象使用不同的垃圾收集，从而导致内存无法进行回收。
function show() {
var el = document.getElementById("div");
el.onclick = function() {
console.log(123);
}
}
show();
解决ie9以前闭包造成的内存泄漏 采用变量声明的方式 让垃圾回收机制自动回收
function show2() {
var el = document.getElementById("div");
var num = 123;
el.onclick = function() {
console.log(num);
}
}
show2();
28.闭包中作用域及作用域链
function out() {
for(var i = 0; i < 10; i++) {
// 当前的闭包函数是在for循环内部 每一次循环都相当于对i重新赋值 所以打印的i是10.如果想要 0 1 2 3...9 的话 将循环放在闭包函数内部即可
function inner() {
console.log('i',i); // i 10
}
}
inner()
}
out();
29.闭包的缺点
①会造成内存泄漏，需要加以处理解决
②闭包中的变量都存储在内存中 对内存的消耗会很大 所以要谨慎使用闭包 避免内存消耗 影响网页性能
30.函数创建方式
① 函数声明式
function abc() {
console.log(1);
}
abc() // 1
② 函数表达式
var Abc = function() {
console.log(2);
}
console.log(Abc); // ƒ abc() { console.log(2);}
Abc(); // 2
31.函数提升 (函数声明才存在函数提升)
abc() // 1 在这里可以打印出来 函数提升
function abc() {
console.log(1);
}
abc() // 1
上述代码执行过程是将abc函数先整体提升到当前作用域的顶部
32.变量提升
console.log(variable); // undefined
var variable = 123;
console.log(variable); // 123
上述代码的执行过程会有变量的提升，即var声明的变量在执行的过程中会先提升到当前作用域的顶部，如下：
var variable;
console.log(variable); // undefined
variable = 123;
console.log(variable); // 123
33.匿名函数
匿名函数又叫自执行函数，因为匿名，无法调用，不调用又没有意义，所以自执行，执行后就会被销毁
① console.log( // undefined
(function(){
console.log(1) // 1
})()
)
② console.log( // unfined
(function() {
console.log(2) // 2
}())
)
控制台打印结果如下 (执行完就被销毁，所以undefined)：
34.js中的this指向问题
① 在全局中 指向window
var name = "eee";
console.log(this.name) // 全局中 eee
② 在函数或者对象中独立调用时，指向window
var name = 'aaa';
function showName() {
name = 'bbb'
console.log(this); // window
console.log(this.name); // bbb 如果当前作用域存在就找当前作用域中的，没有则向函数外部去找(aaa)
}
showName();
③函数被当做某个对象的方法被调用时，指向当前对象
var obj = {
name: 'ccc',
eat: function() {
console.log(this); // 当前obj对象
name = 'ddd';
console.log(this.name); // ccc
}
};
obj.eat();
④ new关键字创建的构造函数对象 指向当前新函数对象
⑤ call和apply 当前传入的对象或者函数
JS常用方法
| split | 切割成数组的形式 |
|---|---|
| join | 数组转换成字符串 |
| push | 数组尾部添加 |
| pop() | 数组尾部删除 |
| Unshift | 数组头部添加 |
| shift | 数组头部删除 |
| obj.appendChid() | 添加某个节点 |
| obj.insertBefore() | 插入某个节点 |
| obj.replaceChild() | 替换某个节点 |
| obj.removeChild() | 删除某个节点 |
| reverse | 数组倒排 |
| sort | 数组降序排 |
| new Date() | YYYY-MM-DD格式日期 |
| getFullYear()/getMonth() /getDate() | 获取年/月/日份 |
| createDocumentFragment() | 创建一个dom片段 |
| createElement() | 创建一个具体的元素 |
| createTextNode() | 创建一个文本节点 |
| getElementsByTagName() | 通过标签名称 |
| getElementsByName() | 通过元素的Name属性的值 |
| getElementById() | 通过元素Id，唯一性 |
| trim() | 去除字符串的头尾空格 |
| document.write | 只能重绘整个页面 |
| document.innerHTML | 可以重绘页面的一部分 |