js大神总结知识点全套

Dear 丶 2023-02-22 08:19 13阅读 0赞

1.简述同步和异步的区别  
2.怎么添加、移除、复制、创建、和查找节点

1）创建新节点
    
    　　createDocumentFragment() //创建一个DOM片段
    　　createElement() //创建一个具体的元素
    　　createTextNode() //创建一个文本节点
    
    2）添加、移除、替换、插入
    　　appendChild() //添加
    　　removeChild() //移除
    　　replaceChild() //替换
    　　insertBefore() //插入
    
    3）查找
    　　getElementsByTagName() //通过标签名称
    　　getElementsByName() //通过元素的Name属性的值
    　　getElementById() //通过元素Id，唯一性

3.实现一个函数clone 可以对Javascript中的五种主要数据类型  
（Number、string、Object、Array、Boolean）进行复制

Object.prototype.toString.call(obj) 的理解：

var b = [1,2];
    b.__proto__.constructor.prototype.__proto__.constructor.prototype.toString.call(b);

![在这里插入图片描述][20200702212247202.png]

4.如何消除一个数组里面重复的元素

var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];
    for(var i = 0,len = arr1.length; i< len; i++){ 
    if(arr2.indexOf(arr1[i]) < 0){ 
    arr2.push(arr1[i]);
    }
    }

![在这里插入图片描述][20200705101846168.png]  
5.写一个返回闭包的函数  
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。

闭包函数的特点:
    1.函数嵌套函数
    2.函数内部可以引用外部的参数和变量
    3.参数和变量不会被垃圾回收机制回收
    
    function fun3(x){ 
       return function nbfun3(y){ 
            console.log(x + y);
       }
    }
    var a1 = fun3(1);
    console.log(a1(1));

6.使用递归完成1到100的累加

function add(num) { 
    if (num == 1) return 1;
    return add(num - 1) + num;
    }

7.Javascript有哪几种数据类型  
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。  
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：symbol 是es6中增加的一个数据类型，唯一的一个标识。  
写在对象中的一个属性，和其他的属性调用不一样。

var nn = Symbol();
    var b = { 
    [nn]: 'suuyan'
    }

![在这里插入图片描述][20200705153021566.png]

8.如何判断数据类型  
基本类型：typeof  
引用类型：instanceof  
万能通用的方法:Object.prototype.toString.call(obj);

9.console.log(1+‘2’)和console.log(1-‘2’)的打印结果  
12 -1  
" "或’ ’ 与任何数字相加 ，数字都会变成字符串。

console.log(1 + +"2" + "2");   //32
    console.log(1 + -"1" + "2");  //02

\+“2” 转成数字 2  
\-“2” 转成数字 1

10.Js的事件委托是什么，原理是什么

11.如何改变函数内部的this指针的指向  
call

var obj = { text: '我有两个爱好'}
    function getHobby(a, b) { 
    console.log(this.text + a + b)}
    getHobby.call(obj, '足球', '羽毛管')

apply

var obj = { text: '我有两个爱好'}
    function getHobby(a, b) { 
    console.log(this.text + a + b)}
    getHobby.call(obj, ['足球', '羽毛管'])

bind

var obj = { text: '我有两个爱好'}
    function getHobby(a, b) { 
    console.log(this.text + a + b)}
    getHobby.call(obj, ['足球', '羽毛管'])()

12.列举几种解决跨域问题的方式，且说明原理  
只要协议、域名、端口有任何一个不同，都被当做不同的域，js不能在不同的域之间进行通信和传输数据。

跨域的解决方法：  
一、通过jsonp跨域  
原生js

var script = document.createElement('script');
        script.type = 'text/javascript';
        // 传参并指定回调执行函数为onBack
        script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
        document.head.appendChild(script);
        // 回调执行函数
        function onBack(res) { 
            alert(JSON.stringify(res));
        }

jquery ajax

$.ajax({ 
    url: 'http://www.domain2.com:8080/login',
        type: 'get',
        dataType: 'jsonp',  // 请求方式为jsonp
        jsonpCallback: "onBack",    // 自定义回调函数名
        data: { }
    });

vue js

this.$http.jsonp('http://www.domain2.com:8080/login', { 
        params: { },
        jsonp: 'onBack'
    }).then((res) => { 
        console.log(res); 
    })

后端node.js

var querystring = require('querystring');
    var http = require('http');
    var server = http.createServer();
    server.on('request', function(req, res) { 
        var params = qs.parse(req.url.split('?')[1]);
        var fn = params.callback;
        // jsonp返回设置
        res.writeHead(200, {  'Content-Type': 'text/javascript' });
        res.write(fn + '(' + JSON.stringify(params) + ')');
        res.end();
    });
    server.listen('8080');
    console.log('Server is running at port 8080...');

二、 document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。  
实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域

3.location.hash + iframe跨域

在这里插入代码片

13.谈谈垃圾回收机制的方式及内存管理  
14.写一个function ，清除字符串前后的空格  
15.js实现继承的方法有哪些  
16.判断一个变量是否是数组，有哪些办法  
17.let ，const ，var 有什么区别  
18.箭头函数与普通函数有什么区别  
19.随机取1-10之间的整数  
20.new操作符具体干了什么  
21.Ajax原理  
22.模块化开发怎么做  
23.异步加载Js的方式有哪些  
24.xml和 json的区别  
25.webpack如何实现打包的  
26.常见web安全及防护原理  
27.用过哪些设计模式  
28.为什么要同源限制  
29.offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别  
30.javascript有哪些方法定义对象  
31.说说你对promise的了解  
32.谈谈你对AMD、CMD的理解  
33.web开发中会话跟踪的方法有哪些  
34.介绍js有哪些内置对象？  
35.说几条写JavaScript的基本规范？  
36.javascript创建对象的几种方式？  
37.eval是做什么的？  
38.null，undefined 的区别？  
39.\[“1”, “2”, “3”\].map(parseInt) 答案是多少？  
40.javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？  
41.js延迟加载的方式有哪些？  
42.defer和async  
43.说说严格模式的限制  
44.attribute和property的区别是什么？  
45.ECMAScript6 怎么写class么，为什么会出现class这种东西?  
46.常见兼容性问题  
47.函数防抖节流的原理  
48.原始类型有哪几种？null是对象吗？  
49.为什么console.log(0.2+0.10.3) //false  
50.说一下JS中类型转换的规则？  
51.深拷贝和浅拷贝的区别？如何实现  
52.如何判断this？箭头函数的this是什么  
53. 和 ===的区别  
54.什么是闭包  
55.JavaScript原型，原型链 ? 有什么特点？  
56.typeof()和instanceof()的用法区别  
57.什么是变量提升  
58.all、apply以及bind函数内部实现是怎么样的  
59.为什么会出现setTimeout倒计时误差？如何减少  
60.谈谈你对JS执行上下文栈和作用域链的理解  
61.new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？  
62.prototype 和 proto 区别是什么？  
63.使用ES5实现一个继承？  
64.取数组的最大值（ES5、ES6）  
65.ES6新的特性有哪些？  
66.promise 有几种状态, Promise 有什么优缺点 ?  
67.Promise构造函数是同步还是异步执行，then呢 ?promise如何实现then处理 ?  
68.Promise和setTimeout的区别 ?  
69.如何实现 Promise.all ?  
70.如何实现 Promise.finally ?  
71.如何判断img加载完成  
72.如何阻止冒泡？  
73.如何阻止默认事件？  
74.ajax请求时，如何解释json数据  
75.json和jsonp的区别?  
76.如何用原生js给一个按钮绑定两个onclick事件？  
77.拖拽会用到哪些事件  
78.document.write和innerHTML的区别  
79.jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？  
80.浏览器是如何渲染页面的？  
81. ( d o c u m e n t ) . r e a d y ( ) 方 法 和 w i n d o w . o n l o a d 有 什 么 区 别 ？ 82. j q u e r y 中 (document).ready()方法和window.onload有什么区别？ 82. jquery中 (document).ready()方法和window.onload有什么区别？82.jquery中.get()提交和$.post()提交有区别吗？  
83.对前端路由的理解？前后端路由的区别？  
84.手写一个类的继承  
85.XMLHttpRequest：XMLHttpRequest.readyState;状态码的意思  
86.正则表达式常见面试题

1.给一个连字符串例如：get-element-by-id转化成驼峰形式。  
2.匹配二进制数字  
3.非零的十进制数字 (有至少一位数字, 但是不能以0开头)  
4.匹配一年中的12个月  
5.匹配qq号最长为13为  
6.匹配常见的固定电话号码  
7.匹配ip地址  
8.匹配用尖括号括起来的以a开头的字符串  
9.分割数字每三个以一个逗号划分  
10.判断字符串是否包含数字  
11.判断电话号码  
12.判断是否符合指定格式  
13.判断是否符合USD格式  
14.JS实现千位分隔符  
15.获取 url 参数  
16.验证邮箱  
17.验证身份证号码  
18.匹配汉字  
19.去除首尾的’/’  
20.判断日期格式是否符合 '2017-05-11’的形式，简单判断，只判断格式  
21.判断日期格式是否符合 '2017-05-11’的形式，严格判断（比较复杂）  
22.IPv4地址正则  
23.十六进制颜色正则  
24.车牌号正则  
25.过滤HTML标签  
26.密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符  
27.URL正则  
28.匹配浮点数

浏览器/html/css面试题

1.什么是盒模型  
2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？  
3.简述src和href的区别  
4.什么是css Hack  
5.什么叫优雅降级和渐进增强  
6.px和em的区别  
7.HTML5 为什么只写  
8.Http的状态码有哪些  
9.一次完整的HTTP事务是怎么一个过程  
10.HTTPS是如何实现加密  
11.浏览器是如何渲染页面的  
12.浏览器的内核有哪些？分别有什么代表的浏览器  
13.页面导入时，使用link和@import有什么区别  
14.如何优化图像，图像格式的区别  
15.列举你了解Html5. Css3 新特性  
16.可以通过哪些方法优化css3 animation渲染  
17.列举几个前端性能方面的优化  
18.如何实现同一个浏览器多个标签页之间的通信  
19.浏览器的存储技术有哪些  
20.css定位方式  
21.尽可能多的写出浏览器兼容性问题  
22.垂直上下居中的方法  
23.响应式布局原理  
25.清除浮动的方法  
26.http协议和tcp协议  
27.刷新页面，js请求一般会有哪些地方有缓存处理  
28.如何对网站的文件和资源进行优化  
29.你对网页标准和W3C重要性的理解  
30.Http和https的区别  
31.data-属性的作用  
32.如何让Chrome浏览器显示小于12px的文字  
33.哪些操作会引起页面回流（Reflow）  
34.CSS预处理器的比较less sass  
35.如何实现页面每次打开时清除本页缓存  
36.什么是Virtual DOM,为何要用Virtual DOM  
37.伪元素和伪类的区别  
38.http的几种请求方法和区别  
39.前端需要注意哪些SEO  
40.的title和alt有什么区别  
41.从浏览器地址栏输入url到显示页面的步骤  
42.如何进行网站性能优化  
43.语义化的理解  
44.HTML5的离线储存怎么使用，工作原理能不能解释一下？  
45.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢  
46.iframe有那些缺点？  
47.WEB标准以及W3C标准是什么?  
48.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?  
49.HTML全局属性(global attribute)有哪些  
50.Canvas和SVG有什么区别？  
51.如何在页面上实现一个圆形的可点击区域？  
52.网页验证码是干嘛的，是为了解决什么安全问题  
53.请描述一下 cookies，sessionStorage 和 localStorage 的区别？  
54. CSS选择器有哪些？哪些属性可以继承？  
55.CSS优先级算法如何计算？  
56.CSS3有哪些新特性？  
57.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？  
58.用纯CSS创建一个三角形的原理是什么？  
59.常见的兼容性问题？  
60.为什么要初始化CSS样式  
61.absolute的containing block计算方式跟正常流有什么不同？  
62.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？  
63.display:none与visibility：hidden的区别？  
64.position跟display、overflow、float这些特性相互叠加后会怎么样？  
65.对BFC规范(块级格式化上下文：block formatting context)的理解？  
66.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？  
67.上下margin重合的问题  
68. 设置元素浮动后，该元素的display值是多少？  
69.移动端的布局用过媒体查询吗？  
70.CSS优化、提高性能的方法有哪些？  
71.浏览器是怎样解析CSS选择器的？  
72.在网页中的应该使用奇数还是偶数的字体？为什么呢？  
73.margin和padding分别适合什么场景使用？  
74.元素竖向的百分比设定是相对于容器的高度吗？  
75.全屏滚动的原理是什么？用到了CSS的哪些属性？  
76.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？  
77. 视差滚动效果？  
78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用  
79.让页面里的字体变清晰，变细用CSS怎么做？  
80. position:fixed;在android下无效怎么处理？  
81.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

http://82.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？  
83.display:inline-block 什么时候会显示间隙？  
84. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度  
85.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？  
86.style标签写在body后与body前有什么区别？  
87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?  
88.阐述一下CSS Sprites  
89. 一行或多行文本超出隐藏

[20200702212247202.png]: https://img-blog.csdnimg.cn/20200702212247202.png
[20200705101846168.png]: https://img-blog.csdnimg.cn/20200705101846168.png
[20200705153021566.png]: https://img-blog.csdnimg.cn/20200705153021566.png