前端面试----------Day1

最新推荐文章于 2023-05-22 23:13:53 发布

qq_35752802

最新推荐文章于 2023-05-22 23:13:53 发布

阅读量195

点赞数

分类专栏：面试文章标签：前端面试

本文链接：https://blog.csdn.net/qq_35752802/article/details/97506283

版权

面试专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端面试----------Day1

第一次面试超级垃圾，垃圾到我想把它记录下来，奇怪的脑思路~~~~~

选择题

select 下拉列表的使用，完全不会， hahahahh

<select name="" id="mySelect">
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">广州</option>
</select>

var mySelect = document.getElementById("mySelect");
//下拉列表的长度就是他的选项数
mySelect.length;
//添加option
//new Option(text, value)
mySelect.add(new Option("深圳","4"));
mySelect.options.add(new Option("天津","5"));
//替换新的值
var index = mySelect.selectedIndex;
mySelect.options[index] = new Option("芜湖",index);
//获取选中项的值和文本
var val = mySelect.options[index].value;
var text = mySelect.options[index].text;
//删除
mySelect.options.remove(index);
//全删
mySelect.options.length = 0;
//删除select
mySelect.parentNode.removeChild(mySelect);

javascript

//获取value
console.log(mySelect.value);

for(var i = 0;i<mySelect.length;i++)
{
	if(mySelect[i].selected = true)
	{
		var val = mySelect[i].value;
	}
}

//获取text
//无效
//mySelect.text
var index = mySelect.selectedIndex;
var text = mySelect.options[index].text;
text = mySelected.options[index].innerHTML;

jquery

$("#mySelect").val();

var option = $("#mySelect option:selected");
option.val();	

//无效
//$("#mySelect").text();
var option = $("#mySelect option:selected");
option.text();
option.innerHTML();

String的函数

1.length属性
说明:获取字符串的长度
实例:
var str=“abc”;
var i=str.length;//output:3

2.charAt()方法
说明:从字符串中找出一个指定索引(位置)的字符
实例:
var str=“abc”;
var str1=str.charAt(2);//output:c
//字符串索引从0开始

3.indexOf()方法
说明:得到子字符串在母字符串中第一次出现的位置(下标),如找不到则输出"-1";
格式:index(子字符串,起始索引);
实例:
var str=“abcdb”;
var i=str.indexOf(‘b’);//output:1
var j=str.indexOf(‘b’,2);//output:4

4.lastIndexOf()方法
说明:得到子字符串在母字符串中第一次出现的位置,与indexOf不同的是,lastIndexOf是从最后一个字符开始搜索.
如果找不到则输入"-1"
实例:
var str=“abcdcbd”;
alert(str.lastIndexOf(‘bd’));//output:5
alert(str.lastIndexOf(‘b’,3));//output:1,这里第二个参数为3代表在索引3的末尾开始查找所以输出是1
alert(str.lastIndexOf(‘b’,5));//output:5,这里第二个参数为5代表在索引5的末尾开始查找所以输出是5
//注意:lastIndexOf是从最后一个字符开始搜索,那么你指定了:str.lastIndexOf(‘b’,5)它就会从索引5的位置向前搜索’b’的索引

4.substring()方法 / substr(pos,count)
说明:截取母字符串的一部分字符串.
格式:substring(起始索引,终止索引)
实例:
var str=“abcdefg”;
alert(str.substring(0,3));//output:abc
alert(str.substring(3,0));
//output:abc,substring()函数会自动判断哪个是起始,那个是终止.
//所以会把参数0放到前面,把参数3放到后面,所以输出的还是:abc
alert(str.substring(3));//output:defg

注意:返回值并不会包含借宿索引的那个字符,而是到其前一个字符为止.

5.replace()方法
说明:替换字符串中指定的子字符串为对应字符串
格式:replace(“指定的子字符串”,“替换为相对应的字符串”)
实例:
var str=“abcdbfgbc”;
alert(str.replace(“bc”,‘kk’));//output:akkdbfgbc
注意:只替换相符的第一个字符串
这点与C#不同，看下面实例:
string tt = “abcdcd”;
Console.WriteLine(tt.Replace(“cd”,“aa”));
//输出:abaaaa,C#的Replac函数会在字符串中搜索所有为"cd"的字符串,并将为"cd"的字符串替换为"aa".

innerText

innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText 和outerText 在读取得时候是一样的，只是在设置的时候outerText 会连带标签一起替换成目标文本
firefox不支持innerText ，但是可以用textContent作为替代方案。

open

JS中open()函数介绍
window=object.open([URL ][, name ][, features ][, replace]]]])
URL：新窗口的URL地址
name：新窗口的名称，可以为空
featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
fullscreen={ yes/no/1/0 }是否全屏，默认no
channelmode={ yes/no/1/0 } 是否显示频道栏，默认no
toolbar={ yes/no/1/0 } 是否显示工具条，默认no
location={ yes/no/1/0 } 是否显示地址栏，默认no
directories = { yes/no/1/0 } 是否显示转向按钮，默认no
status={ yes/no/1/0 } 是否显示窗口状态条，默认no
menubar={ yes/no/1/0 } 是否显示菜单，默认no
scrollbars={ yes/no/1/0 } 是否显示滚动条，默认yes
resizable={ yes/no/1/0 } 是否窗口可调整大小，默认no
width=number窗口宽度（像素单位）
height=number 窗口高度（像素单位）
top=number窗口离屏幕顶部距离（像素单位）
left=number窗口离屏幕左边距离（像素单位）

top和pixelTop

top：返回带单位的位置坐标字符串
pixelTop：返回以像素为单位的位置坐标的数值

点击图片提交表单

		<!-- 第一种方法 -->
		<input type="image" src="*.jpg">
		<!-- 第二种方法 -->
		<img src="*.jpg" alt="" onclick="document.form1.submit()">

简答题

从输入url到页面全加载的过程

https://www.cnblogs.com/xiaohuochai/p/9193083.html

浏览器状态码

https://www.runoob.com/http/http-status-codes.html
1xx: 信息
2xx:成功
3xx:重定向
4xx：客户端错误
5xx：服务器错误

模拟trim去除前后空格

trim只能去除前后空格（没用过，痛哭）
正则也不会（痛哭，肯定被面试官狠狠鄙视了）
正则
\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。
* 匹配前面的子表达式零次或多次。要匹配 * 字符，请使用 *
+ 匹配前面的子表达式一次或多次。要匹配 + 字符，请使用 +

如果使用jQuery直接使用$.trim(str)方法即可

//去除字符串前后所有空
function Trim(str){
	return str.replace(/(^\s*)|(\s*$)/g,'');
}
//在字符串原型上添加方法也可
String.prototype.trim = function(){
	return this.replace(/(^\s*)|(\s*$)/g,'');
}
String.prototype.lTrim = function(){
	return this.replace(/^\s*/,'');
}
String.prototype.rTrim = function(){
	return this.replace(/\s*$/,'');
}

不使用正则

function trim(str){
	//去除前面空格
	while(str.indexOf(' ') == 0 && str.length > 1)
	{
		str = str.substring(1,str.length);
	}
	//去除后面空格
	while(str.lastIndexOf(' ') == str.length - 1 && str.length > 1)
	{
		//substring截取字符不包括str.length - 1所在位置的字符
		str = str.substring(0,str.length - 1);
	}
	if (str==" "){
		str="";
	}
	return str;
}

数组去重

es6新语法(刚看过视频就忘了)
https://www.liaoxuefeng.com/wiki/1022910821149312/1023024181109440

let arr = [1,2,3,4,2,4,5];
let set = new Set(arr);
//Array.from方法可以将 Set 结构转为数组
let newArr = Array.from(set);
//...也可以转换为数组
[...new Set(arr)]

function fun(arr){
	var newArr;
	for(var i = 0; i < arr.length; i++)
	{
		if(newArr.indexOf(arr[i]) == -1)
		{
			newArr.push(arr[i]);
		}
	}
	return newArr;
}

用二分法查找值

function binarySearch(arr,val)
{
	arr.sort();
	var start = 0;
	var end = arr.length - 1;
	while(start < end)
	{
		var mid = Math.floor((start + end)/2);
		if(val == arr[mid])
		{
			return mid;
		}
		else if(val > arr[mid])
		{
			start = mid + 1;
		}
		else
		{
			end = mid - 1;
		}
	}
	//未找到
	return -1;
}

冒泡排序

先准备着，应该会用到

function bubbleSort(arr){
	for(var i = 0; i < arr.length; i++)
	{
		for(var j = 0; j < arr.length - 1 - i; j++)
		{
			if(arr[j] > arr[j+1])
			{
				var temp = arr[j];
				arr[j] = arr[j+1];
				arr[j+1] = temp;
			}
		}
	}
}