2020-面试题整合(js)

1.介绍js有哪些常用内置对象。

1.String(字符串),
2.Number,
3.Boolean（布尔对象）,
4.Function(函数对象),
5. Array(数组),
6. Math,
7. Object,
8. RegExp（正则表达式对象）,
9.Date(日期对象)，
10.Error(异常对象)

2.bom对象

1.window(核心)
2.document对象
3.location对象（当前页面地址）
4.navigation对象（浏览器本身相关信息）
5.screen对象（屏幕相关）
6.history对象（浏览器历史相关）

3.JavaScrip的一些编写原则

1、不要在同一行声明多个变量
2、使用===或!==来比较
3、使用字面量的方式来创建对象、数组，替代new Array这种形式
4、switch语句必须要带default分支
5、fon-in循环中的变量，用var关键字说明作用域，防止变量污染
6、三元表达式可以替代if语句
7、比较数据类型以下6中情况是false，其他都是true------false、""、0、null、undefined、NaN
8、数据类型检测用typeof，对象类型检测用instanceof 9、异步加载第三方的内容 10、单行注释//，多行注释/**/
…

4.dom对象与jQuery对象转换

4.1 dom转jQuery dom对象如下：
var $dom = $(dom);
4.2 jQuery对象转dom对象
var dom = $dom[0];
var dom = $dom.get(0);

5正则相关[i不区分大小写，g匹配全部数据]

var str = "Hello word!  I think word is good.";

5.1替换str中的word为‘javascript’

str = str.replace(/word/ig, “javascript”);

5.2判断str中是否包含word

/word/ig.test(str)

5.2获取str中的所有word

str.match(/weaver/ig)

6 js选择器

6.1选择select的值【假定select的id为slt】

$("#weaver option:selected").val()获取value $("#weaver
option:selected").text()//获取文本值

6.2选择id为test的元素的文本内容

$("#test").val(); // jQuery("#test").val();
docunment.getElementById("test)

7 jq的$(function(){})与window.onload的区别

$(function(){})不会被覆盖，而window.onload会被覆盖（页面资源全部加载完毕后执行）
$(function(){})在window.onload执行前执行的

DOM文档加载步骤：

1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.构造HTML DOM模型//执行ready
5.加载图片等二进制资源
6.页面加载完毕，执行window.onload

8闭包问题

8.1输出下列结果

	for (var j = 0; j < 2; j++) { 
		function f(){
			console.log(j)
		};
		f();
		setTimeout(()=>{
			console.log(j);
		}, j); 
	}

	0 1 2 2

8.2 请填写下列运行结果

	var weaver = "to cc百川？？？";
	var obj = {
		weaver:"to cc百川！！！",
		fnobj:function(){ 
			fnobj1 = () => {
				console.log(this.weaver);
				fnobj2();
			}
			fnobj1();
			function fnobj2() {
				console.log(this.weaver)
			}
		}
	} 
	obj.fnobj();
	//结果： 
	to cc百川！！！
	to cc百川？？？

9 给数组去重

	var arrays = [1,2,3,2,4,6,5,7]
	function unique (arrray) {
		var result=[]
		//请编程实现数组去重
		return result;
	}	

	//1.利用es6的set对象
 		result = [...new Set(array)];/[...new  Set (array)]
	//2.利用对象属性的唯一性
		let obj = {};
        for (let i of array) {
           	if (!obj[i]) {
               	result.push(i);
               	obj[i]=1;
            }
        }
	//3.利用sort方法排序去重
		var newarray = array.sort();
        result = [newarray[0]];
        var length = newarray.length;
        for( var i = 1 ;i<length; i++) {
            newarray[i] !== newarray[i-1] && result.push(newarray[i]);
        }	
	//4.利用for...of+includes()循环
		for(var i of array) {
           	!result.includes(i) && result.push(i);
        }
	//5.用filter结合indexOf
	 	result = array;
        return result.filter((item, index)=> {
            return result.indexOf(item) === index
        })
	//6.利用双层for循环（6分）类似
		var length = array.length;
        for(var i =0; i<length; i++) {
            var only = true;
            for(var j =i+1; j<length; j++){
                if(!only) continue;
                if(array[i] == array[j])  only = false; 
            }
           	if(only) result.push(array[i]);
        }

10 统计字符串中字母个数

	var str = "I think javascript is good";
	//解：方法不唯一        
	str = str.toLowerCase();
    var result = {};
    for(var i in str) {
        if(str[i] in result) { 
            result[str[i]]++;
        } else { 
            result[str[i]] = 1;;
        }
    }

11 数据交互

原生数据交互，post方法【可能用到方法或对象XMLHttpRequest、ActiveXObject、onreadystatechange、setRequestHeader】

		var xhr = null;
        try{
            xhr=new XMLHttpRequest();
        }catch(e){
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        } 
         xhr.open("post", url, true);
        //POST提交设置的协议头（GET方式省略）
        //这里需要通过服务器设置响应头解决跨域问题
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    console.log("success!!");
                }else{
                    console.log("error code "+xhr.status)
                }
            }
        }
	   	//发送请求，post设置请求参数，get方式直接调用方法无需参数
        xhr.send("username="+name+"&age="+age);

Ajax

$.ajax({
	type:'POST', // 规定请求的类型（GET 或 POST）
	url:uploadV, // 请求的url地址
	dataType:'json', //预期的服务器响应的数据类型 
	data:{},//规定要发送到服务器的数据
	beforeSend:function(){ //发送请求前运行的函数（发送之前就会进入这个函数）
	},
	success: function(result){ // 当请求成功时运行的函数
	},
	error:function(result){ //失败的函数
	},
	complete:function(){ //请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后，不管成功还是失败 都会进这个函数）
	}
});

fetch调用fetch函数，传入接口url，然后返回一个promise（response）

	fetch('https://www.baidu.com')
  	.then(function(res) {
   		成功
  	},function(){
		失败
	});

12 es6新特性

1.块级作用域变量let，const
2.新增基本数据类型Symbol
3.结构赋值
4.给形参设置默认值&箭头函数
5.对象或者数组的展开符 …
6.String的include方法
7.Array新增API：isArray/from/of 和新增方法：entries()/kes()/values()等
8.增加class语法糖
9.新增模块化（import/export）
10.新增Map，Set数据结构
11.模板字符串
12.for…of 和 for…in

13 react或vue常用生命周期方法(钩子函数)(二选一)

	react：
		render()
		constructor()
		componentWillMount() 
		componentDidMount()
		shoudComponentUpdate()
		conponentWillReceiveProps()
		componentWillUpdate()
		componentDidUpdate ()
		componentWillUnmount ()
	vue（钩子函数）:
		beforeCreate()
		create()
		
		beforeMount()
		mountend()
		
		beforeUpdate()
		update()
		
		beforDestroy()
		destroy()

---

继续补充中…