javaScript面试常问文档

锦鲤抄liyanhe

于 2018-12-28 14:27:08 发布

阅读量161

点赞数

文章标签： js面试文档

本文链接：https://blog.csdn.net/liyanhecsdn/article/details/84841819

版权

js的数据类型：

简单数据类型：number,string,undefined,null,boolean
复杂数据类型：object，array

简单数据类型是没有属性和方法的，但是浏览器允许简单类型直接调用方法，会自动简单类型转换成复杂类型；但其中undefined和null没有对应的复杂类型，所以在调用方法时会报错

1.浮点数：

var num = 1.2;

浮点数精度丢失问题：

console.log(0.1+0.3) // 精度丢失，小数进行o运算的时候，有可能算不准，所以不要用小数进行比较

undefined和null

undefined表示一个没有赋值的变量
null表示一个空的对象

转换成字符串

toString() //将来所有的数据都会有toString()方法，除了null和undefined

String() //拼串，使用起来最方便

转换成数字类型

1.Number()可以把任意值转换成数值类型，但是如果字符串中有不是数字的字符，返回NaN

2.parseInt() //转整数

var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN

3.parseFloat() //转小数

转换成布尔类型

所有的值都可以转换成布尔类型

Boolean()

其中，""，NaN，undefined，null，0，false这几个值会转换成false，其他值都会转换成true

NaN

NaN: not a number, 表示一个非数字

在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN

NaN的注意事项：

NaN的类型是number类型的，表示一个非数字
NaN不等于任何值，包括NaN本身
通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字。

三元运算符

表达式1 ? 表达式2 : 表达式3
1. 三元运算符会得到一个结果，结果根据表达式1的值来确定。
2. 如果表达式1的值为true，会返回表达式2的值
3. 如果表达式1的值为false，会返回表示3的值

for循环里的break和continue

break表示结束整个循环

continue表示结束本次循环，下一次继续循环

//冒泡排序

var arr=[65,97,76,13,27,49,58];
for(var j=0;j<arr.length-1;j++){
	var flag=true;
	for(var i=0;i<arr.length-1-j;i++){
		if(arr[i]>arr[i+1]){
			flag=false;
			var temp=arr[i];
			arr[i]=arr[i+1];
			arr[i+1]=temp;
		}
	}
	//优化比较的次数
	if(flag){
		break;
	}
}
console.log(arr)

//数组去重

new Set() filter reduce

var arr=[2,3,4,77,55,2,4,56,56,77];
var temp=[];
var flag=false;
for(var i=0;i<arr.length;i++){
	
	for(var j=0;j<temp.length;j++){
		if(arr[i]==temp[j]){
			flag=true;
			break;
		}
		
	}
	if(flag===false){
		temp.push(arr[i])
	}
} 
console.log(temp)

//es6 
ar arr=[2,3,4,77,55,2,4,56,56,77];
[...new Set(arr)];

函数：

函数的三要素：函数名，参数，返回值；

//求三个数的最大值

function maxfet(n1,n2,n3){
	var max =n1>n2 ? n1:n2;
	return max>n3?max:n3;
}
var max=maxfet(4,6,1);
console.log(max)

//用函数的方式求一个数组的最大最小值

function getmaxmin (numValue){
	var max=numValue[0];
	var min=numValue[0];
	for(var i=0; i<numValue.length;i++){
		if(max<numValue[i]){
			max=numValue[i]
		}
		if(min>numValue[i]){
			min=numValue[i]
		}
	}
	return [max,min];
}
var max=getmaxmin([3,4,6,7,8])
console.log(max[0])
console.log(max[1])

//翻转一个任意数组，返回一个新的数组

function reverseArray(arr){
	var newArr=[];
	for(var i=arr.length-1;i>=0;i--){
		newArr.push(arr[i])
	}
	return newArr
}
console.log(reverseArray([1,2,3,4,56]))

//函数的冒泡排序

function babule(arr){
	for(var i=0;i<arr.length-1;i++){
		var flag=true;
		for(j=0;j<arr.length-i-1;j++){
			if(arr[j]>arr[j+1]){
				flag=false;
				var temp=arr[j];
				arr[j]=arr[j+1];
				arr[j+1]=temp;
			}
			if(flag){
				break;
			}
		}
	}
	return arr;
}
var newArr1=babule([1,3,5,7,9,2,4,6,8,10])
console.log(newArr1)

//分装一个函数，求阶乘的和 1!+2!+3!

//分装一个求5的阶乘的函数 1*2*3*4*5
var num=1;
function getProduct (n) {
    for (var i=1;i<=n; i++) {
		num =num*i;	
	}
	return num;
};
//分装一个函数，求阶乘的和 1!+2!+3!
var pr=0;
function product (n) {
    for (var i=1;i<=n;i++){
		pr +=getProduct(i);
	}
	return pr;
}
var temp =product(3);
console.log(temp)

变量的作用域：变量起作用的区域；

全局作用域：在函数外面区域定义的变量叫全局变量；在任何地方都可以访问到

函数作用域：只有函数才能形成作用域，在函数内部的定义的变量就局部变量，局部变量只能在当前的函数内部可以访问到

没有用var声明的变量，叫隐式全局变量；

函数查找变量的时候，如果有局部变量，会优先使用局部变量，如果没有局部变量会使用全局变量；

var num =11;
function fn(){
    var num =33;
        num=44;
    console.log(num)
}
console.log(num)
//打印结果
44,11
//原因:num=44会赋值给局部变量num=33；在函数外边打印num因获取不到局部变量，只能获取全局变量所以打印结果为11；

var num1 =11;
var num2 = 22;
function fn (){
    var num1 = 33;
    num1 = 44;
    num2 = 55;
    console.log(num1); //44
    console.log(num2); //55
}
fn();
console.log(num1); //11
console.log(num2); //55

js的预解析：预解析在代码执行之前发生，会把所有的变量和函数的声明提前；只会提升声明，不会提升赋值

1.把所有的var声明提升到当前作用域的顶部，只会提升声明，不会提升赋值，如果有多个var重名，后面的var会忽略；

2.把所有的function声明提升到当前作用域的顶部，只会提升声明，不会提升调用，如果有多个同名的function，后面的会覆盖前面的；

function fn(){
    console.log("哈哈");
}
fn();
function fn(){
    console.log("呵呵");
}
fn()
//结果是“呵呵”


console.log(num)
var num =22;
console.log(num)
var num =33;
//结果是“undefind,22”

Math对象的random（随机数）

function getrandomColor(){
				//随机3个0-255的随机数
				var n1= parseInt(Math.random()*256);
				var n2= parseInt(Math.random()*256);
				var n3= parseInt(Math.random()*256);
				var randomColor= "rgb(" +n1+","+n2+","+n3+")";
				return randomColor
			}
			var color=getrandomColor();
			document.body.style.backgroundColor=color

数组的方法：join();reverse();sort();

push() //给数组的最后面增加一个或者多个元素
pop() //最后面删除一个元素
unshift() //在最前面增加一个元素
shift() //在最前面删除y
join() //吧数组的每一项按照分隔符拼接成一个字符串
reverse() //翻转一个数组
sort() //对数组进行排序
concat() //合并多个数组
slice() //数组的截取，slice(begin) //从begin开始截取，截取到最后；silce(begin，end) //从begin开始截取到end（但不包含end）
splice(start，deletecount，add) //可以在数据的任意地方删除或者添加元素

参数1：开始删除的位置
参数2：删除几个元素
参数3：在删除的位置添加元素（如果不想删除，只想添加，让参数2等于0）
返回值：删除的元素组成的数组

indexOf(); //获取到某个元素在数组中第一次出现的下标；其返回值：下标，如果找到了，就会返回对应的下标，如果没有这个元素，则会返回-1；

var arr=[1,2,3,4]
var str =arr.join("-");
arr.reverse()
arr.sort();


// splice

var arr=["张飞","张辽","张角","张宝","张毅"]
var newArr = arr.splice(2,1)
console.log(arr)
console.log(newArr)

var num =4;
var arr = [1,2,3,4,5,6,1,2,3,4,5];
if(arr.indexOf(num)==-1){
    console.log("不包含")
}else{
    console.log("包含")
}

var arr =["c","a","z","a","x","a","a","z","c","x","a","x"]
//1.找到数组中第一个a出现的位置
console.log(arr.indexOf("a")) 
//2.找到数组中最后一个a出现的位置
console.log(arr.lastIndexOf("a"))
//3.找到数组中每一个a出现的位置
for(var i=0; i<arr.length;i++){
	if(arr[i]=="a"){
		console.log(i)
	}
}
//4.数组去重，返回一个新数组
var obj=[];
for(var i=0;i<arr.length;i++){
	if(obj.indexOf(arr[i])== -1){
		obj.push(arr[i])
	}
}
console.log(obj)
//5.获取数组中每个元素出现的次数
var obj={};
for(var i=0; i<arr.length;i++){
	if(arr[i] in obj){
		obj[arr[i]]++
	}else{
		obj[arr[i]]=1
	}
}
console.log(obj)

//将"li-yan-he"转换成"LiYanHe"
var str="li-yan-he";
str=str.split("-")
var newstr=[];
for(var i=0;i<str.length;i++){
	var str1=str[i][0].toUpperCase() + str[i].slice(1);
	newstr.push(str1)
}
newstr=newstr.join("")
console.log(newstr)

String对象：(所有的字符串操作，原来的字符串都不会发生改变。都需要返回值)

字符串是可以遍历的，还可以通过下标来操作
indexOf() //查找字符第一次出现出现的位置，（从左往右查找）
lastIndexOf() //查找字符第一次出现出现的位置，（从右往左查找）
trim() //可以把字符串两边的空格去掉
toUpperCase() //将所有的字符变成大写
toLowerCase() //将所有的字符变成小写
concat() //字符串的拼接（基本不用）
slice() //字符串截取
substring() //跟slice()用法想同，不常用
substr()//字符串截取
split() // 把一个字符串切割成一个数组，与join()方法截然相反
replace() //替换（只会查找第一个进行替换）

//indexOf和lastIndexOf
var str ="afgnasffdggghxvv";
console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));

//trim
var str1="  aa  bb  sss   "
var st=str1.trim()
console.log(st)

//toUpperCase和toLowerCase
var str2= "hello World"
console.log(str2.toUpperCase())
console.log(str2.toLowerCase())

//split
var str3="a-b-a-v";
var arr=str3.split("-")

console.log(arr)  //abav

//replace

//bb换成ee
var str4 ="aa bb cc dd bb";
varnewStr =str4.replace(/bb/g,"ee")

webAPI：DOM

DOM：文档对象模型

1.事件的三要素：

事件源：触发事件的元素；
事件名称：click点击事件
事件处理程序：事件出发后要执行的代码（函数形式）

2.document.getElementById() //获取元素的ID

<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.cls{
				width: 200px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<button id="btn">按钮</button>
		<img src="img/30.png" id="imgIcon" />
		<script>
			var btn = document.getElementById("btn");
			var img = document.getElementById("imgIcon");
			btn.onclick = function () {
				img.src="img/30_01.png";
				img.className="cls"
			}
		</script>
	</body>
</html>

3.标签中的class对应了对象中的className

4.通过innerText属性修改标签的内容

5.document.getElementsByTagName() //通过标签名获取元素

参数：是字符串类型的标签名
返回值：类数组，伪数组不是数组，所以他不能使用数组的方法，但是能够跟数组一样遍历，并且可以通过下标操作
```
var btn = document.getElementById("btn");
var ps = document.getElementsByTagName("p");
btn.onClick = function () {
	for (var i=0;i<ps.length;i++){
		ps[i].innerText="嘿嘿"
	}
}
```
通过arguments获取所有调用函数时传进来的参数

input表单元素

input里面的属性：disabled selected checked都是布尔类型

onfocus和onblur(获取焦点和失去焦点)

input全选案例

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧肉</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>西红柿鸡蛋</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧狮子头</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>日式肥牛</td>
      <td>田老师</td>
    </tr>
    </tbody>
  </table>
</div>
<script>
  //功能1：点击全选的checkbox，控制所有的checkbox
  //获取的全选input
  var all = document.getElementById("j_cbAll");
  //获取tbody
  var tbody = document.getElementById("j_tb");
  //获取tbody下所有的input
  var inputs = tbody.getElementsByTagName("input");
  
  //给all注册点击事件
  all.onclick = function () {
  	for(var i=0; i<inputs.length;i++) {
  		inputs[i].checked = all.checked;
  	}
  }
  //功能2：点击下面的checkbox，控制全选的checkbox
  //1. 给所有inputs注册点击事件
  //2. 判断是否都选中了，如果都选中了，让all选中，否则让all不选中
  for (var i=0; i<inputs.length; i++) {
  	inputs[i].onclick = function () {
  		var flag = true;
  		for( var j=0; j<inputs.length; j++) {
  			if(inputs[j].checked==false){
  				 flag=false;
  				 break;
  			}
  		}
  		if(flag==true){
  				all.checked = true;
  			}else{
  					all.checked = false;
  			}
  	}
  }


</script>
</body>
</html>

attribute:属性（这三个方法。不管是股友属性还是自定义属性，只要写在标签上都可以获取）

getAttribute(name) //获取属性
setAttribute(name,value) //设置属性
removeAttribute(name) //删除属性

innerText和innerHtml的区别：

innerText:不识别标签，对标签转义，当成文本（设置标签的内容，推荐使用innerText,防止xss攻击，保证标签不生效）

innerHTML:能够识别html标签，标签能生效

根据css选择器获取：

doucument.querySelector(); //只返回一个对象，如果要返回多个，会返回第一个

doucument.querySelectorAll(); // 会返回伪数组

获取所有的节点：

childNodes() //获取所有的子节点（包括文本节点，注释节点，标签）

children() //获取所有的孩子元素（不包含注释节点，文本节点）

获取兄弟节点：

previousSibling //获取前面的兄弟节点

previousElementSibling //获取前面的兄弟元素

nextSibling //获取后面的兄弟节点

nextElementSibling //获取后面的兄弟元素

父节点：

parentNode //获取父节点（没有兼容性）

克隆节点：

cloneNode //克隆节点（deep参数：false时表示浅复制，只复制标签不复制标签里面的内容，true：会复制所有内容）

创建节点：

createElement （参数是标签名；返回值：元素）

什么叫原型：

任何一个函数，都有一个属性，prototype,值是一个对象

把函数的prototype指向的这个对象就叫做原型。

原型内所有的属性和方法都可以被这个构造函数new出来的实例访问。

原型的作用：存储一些所有实例需要共享的内容，比如方法。

2. __proto__：属性

任何一个对象都有__proto__属性，通过这个属性可以访问到构造函数的原型。

p.__proto__ == Person.prototype 正常情况

如果想要修改原型对象的内容，使用Person.prototype修改，不要用__proto__

3. constructor:属性

所有的原型对象，都有一个constructor属性，这个属性指向了构造函数

要求：能够画出原型的三角关系图妈妈爸爸孩子

原型链：每一个对象都会有自己的__proto__, 它的原型也会有自己的原型。最终到达了Object.prototype

属性搜索原则：

自己有，就用自己的，没有就找自己爸爸的，还有没，就找爷爷的，还没有，一直找到祖宗Object.prototype

如果自己有这个属性，直接用

如果没有，就访问p.__proto__这个对象

如果还没有，就访问p.__proto__.___proto__，知道Object.prototype

如果还没有，就undefined。

锦鲤抄liyanhe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript面试常问文档

js的数据类型：简单数据类型：number,string,undefined,null,boolean 复杂数据类型：object，array简单数据类型是没有属性和方法的，但是浏览器允许简单类型直接调用方法，会自动简单类型转换成复杂类型；但其中undefined和null没有对应的复杂类型，所以在调用方法时会报错1.浮点数：var num = 1.2;浮点数精度丢失问题：...
复制链接

扫一扫