前端经典面试题

	const shape = {
		  radius: 10,
		  diameter() {
		    return this.radius * 2;
		  },
		  perimeter: () => 2 * Math.PI * this.radius 
	};
	
	shape.diameter();
	shape.perimeter();

输出 1 3
对于箭头函数,this关键字指向是它所在上下文(定义时的位置)的环境,与普通函数不同! 这意味着当我们调用perimeter时,它不是指向shape对象,而是指其定义时的环境(window)。没有值radius属性,返回undefined

 function checkAge(data) {
  	if(true == "1"){
  		console.log(1);
  	}
	if (data === { age: 18 }) {
	   console.log(1);
	} else if (data == { age: 18 }) {
	    console.log(2);
	} else {
	    console.log(3);
	}
}

checkAge({ age: 18 });

输出:3
==:判断是否相等:忽略了类型进行值的比较。
===:判断是否相等:先进行值的比较,如果值相等,再去比较类型。即带有类型的值的比较

在比较相等性,原始类型通过它们的值进行比较,而对象通过它们的引用进行比较。JavaScript检查对象是否具有对内存中相同位置的引用。
我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置,所以它们的引用是不同的。
这就是为什么{ age: 18 } === { age: 18 }和 { age: 18 } == { age: 18 } 返回 false的原因。

const length = 4;
	const numbers = [];
	function arrayFromValue(item) {
	  for (var i = 0; i < length; i++);{
	  numbers.push(i + 1);
	}
	console.log(numbers);
	  return
	    [item];
	}
	console.log(arrayFromValue(10));

输出:[5] undifined
换行使JavaScript自动在return和[items]表达式之间插入一个分号。

	console.log(1 + undefined);
	
	console.log('2' > '10'); 

	console.log(![] == 0); 

	console.log([] == []); 

输出 NaN true true false
字符串(数字) vs 字符串(数字) = ASCII码(对应值) vs ASCII码(对应值)charCodeAt()
console.log(![] == 0);
等同于
console.log(Number(![]) == 0) // Number(false) == 0
ASCII码大小规则:
常见ASCII码的大小规则:09<AZ<a~z。
1)数字比字母要小。如 “7”<“F”;
2)数字0比数字9要小,并按0到9顺序递增。如 “3”<“8” ;
3)字母A比字母Z要小,并按A到Z顺序递增。如“A”<“Z” ;
4)同个字母的大写字母比小写字母要小32。如“A”<“a” 。
几个常见字母的ASCII码大小: “A”为65;“a”为97;“0”为 48 。

 console.log(Number([]));
 console.log(Number(['10']));  
  const obj1 = {
  	 valueOf () {
      return 100
    },
  	toString () {
      return 101
    }
  }
   console.log(Number(obj1)) 

  const obj2 = {
    toString () {
      return 102
    }
  }
  console.log(Number(obj2)) 

  const obj3 = {
    toString () {
      return {}
    }
  }
  Number(obj3) 

输出 0 10 100 102
当对象类型需要被转为原始类型时,它会先查找对象的valueOf方法,如果valueOf方法返回原始类型的值,则ToPrimitive的结果就是这个值
Number([]), 空数组会先调用valueOf,但返回的是数组本身,不是原始类型,所以会继续调用toString,得到空字符串,相当于Number(’’),所以转换后的结果为"0"
同理,Number([‘10’])相当于Number(‘10’),得到结果10
如果valueOf不存在或者valueOf方法返回的不是原始类型的值,就会尝试调用对象的toString方法,也就是会遵循对象的ToString规则,然后使用toString的返回值作为ToPrimitive的结果

ToPrimitive指对象类型类型(如:对象、数组)转换为原始类型的操作
obj1的valueOf方法返回原始类型100,所以ToPrimitive的结果为100
obj2没有valueOf,但存在toString,并且返回一个原始类型,所以Number(obj2)结果为102
obj3的toString方法返回的不是一个原始类型,无法ToPrimitive,所以会抛出错误

var a=0;
function aa(a){
    alert(a)
    var a=3
    alert(a)
}
aa(5)

var a=0;
function aa(a){
    alert(a)
    a=3
    alert(a)
}
aa()
alert(a)

1参数优先级高于变量声明,所以 变量a的声明其实被忽略了
2 首先,参数优先级高于全局变量,由于没传参数,所以是underfind
a=3,实际上修改的时形参a的值,并不是全局变量a

function Foo() {
	    getName = function () {
	     console.log(1); 
	    };
	    return this;
	};

	Foo.getName = function () {
	 	console.log (2);
	};

	Foo.prototype.getName = function () {
		 console.log (3);
	};
	
	var getName = function () { 
		console.log (4);
	};
	function getName() { 
		console.log (5);
	}
	//请写出以下输出结果:
	Foo.getName();
	getName();
	Foo().getName();
	getName();
	new Foo.getName();
	new Foo().getName();

3 Foo函数的第一句 getName = function () { alert (1); }; 是一句函数赋值语句,注意它没有var声明,所以先向当前Foo函数作用域内寻找getName变量,没有。再向当前函数作用域上层,即外层作用域内寻找是否含有getName变量,找到了,也就是第二问中的alert(4)函数,将此变量的值赋值为 function(){alert(1)}。
5(.)的优先级高于new操作
而this在构造函数中本来就代表当前实例化对象,遂最终Foo函数返回实例化对象。之后调用实例化对象的getName函数,因为在Foo构造函数中没有为实例化对象添加任何属性,遂到当前对象的原型对象(prototype)中寻找getName
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端面试用人部门通常会涉及一系列HTML、CSS、JavaScript等相关知识的面试。以下是一些可能会被问到的常见问: 1. 请介绍一下HTML5的新特性和改进。 2. CSS选择器有哪些,并简要解释它们的作用。 3. 你如何实现一个响应式网页设计? 4. 介绍一下盒模型,并解释内容、边框、内边距和外边距的区别。 5. 请解释一下CSS中的浮动和清除浮动的方法。 6. 如何使用JavaScript创建和操纵DOM元素? 7. 请解释一下什么是闭包,并给出一个闭包的实际应用场景。 8. 如何处理JavaScript中的异步编程? . 请解释一下什么是事件冒泡和事件捕获,并说明它们之间的区别。 10. 请给出一个常见的前端性能优化方法。 以上只是一些常见的前端面试示例,实际面试中可能会根据具体岗位要求和公司需求提问其他相关问。建议面试前对HTML、CSS和JavaScript等基础知识进行全面的复习和准备,同时关注行业最新动态和趋势,以增加面试的竞争力。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [你可能不熟练的十个前端HTML5经典面试](https://download.csdn.net/download/weixin_38606639/12892829)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [h5前端开发,96道前端面试](https://blog.csdn.net/m0_60228309/article/details/118994744)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值