好记性不如烂笔头
内容来自 面试宝典-初级难度前端面试题合集
问: 请详细描述 HTML、CSS、JavaScript 的基本结构？
HTML、CSS、JavaScript 是 web 前端开发中最常用的三种技术，它们分别负责页面结构、表现形式和交互行为。
HTML（Hyper Text Markup Language）是一种用于构建网页的标准标记语言，它由一系列标签组成，用来组织页面的内容和结构。
CSS（Cascading Style Sheets）是一种用于定义网页样式的技术，它提供了网页外观的控制，如字体、颜色、布局等。
JavaScript 是一种脚本语言，可以用于实现网页的动态效果，例如动画、游戏等。
问: 请解释 JavaScript 中变量声明的关键字 var、let、const 之间的区别？
- 声明后未赋值，表现相同；
- 使用未声明的变量，表现不同；
- 重复声明同一个变量时，表现不同；
- 变量作用范围，表现不同。
问: 如何在 JavaScript 中获取元素的宽高？
在 JavaScript 中，我们可以使用多种方法来获取元素的宽度和高度，例如：
- 使用offsetWidth和offsetHeight属性。
- 使用getBoundingClientRect()方法。
- 使用clientWidth和clientHeight属性。
问: 如何实现页面元素居中？
有几种常见的实现页面元素居中的方式，具体取决于所使用的布局和元素类型。以下是一些常用的方法：
- 在CSS中使用text-align:center;
- 对于内联元素，可以使用vertical-align:middle;和line-height
- 对于块级元素，可以使用margin:auto;
- 如果需要支持响应式设计，可以使用Flexbox或Grid布局。
可以根据实际情况选择最适合自己的方法。
问: 如何在 JavaScript 中处理异步？
在 JavaScript 中，我们可以通过以下几种方式来处理异步：
- 使用回调函数
- 使用Promise对象
- 使用async/await语法
- 使用事件监听
根据不同的应用场景选择最合适的方式进行处理。
问: 如何检测一个变量是否为数组或者对象？
我们可以使用JavaScript提供的typeof操作符来判断一个变量的类型。对于数组和对象来说，可以这样判断：
- 判断一个变量是否为数组：Array.isArray(variable);
- 判断一个变量是否为对象：typeof variable === 'object' && variable !== null;
这种方法既可以判断出基本数据类型的值，也可以判断出复杂数据类型的值。
问: 请解释一下 ECMAScript 版本和浏览器兼容性？
ECMAScript版本是JavaScript语言的标准版本，由ECMA International组织制定并维护。每当新的ECMAScript版本发布时，它都会引入一些新功能和技术，以提高开发者的效率和代码的质量。
浏览器兼容性是指浏览器对Web标准的支持程度，包括HTML、CSS和JavaScript等。由于每个浏览器厂商有自己的发展策略和时间表，因此不同浏览器之间可能存在一定的差异。
为了确保代码能够在所有主流浏览器上正常运行，开发者需要了解各浏览器对ECMAScript版本的支持情况，并针对不同的浏览器进行适配和优化。这可以通过使用各种polyfill、transpiler和其他工具和技术实现。
总之，在编写跨浏览器JavaScript代码时，需要注意ECMAScript版本与浏览器兼容性的关系，并采取适当的措施进行处理。
问: 如何实现三目运算符？
三目运算符（也称为条件运算符）是一种逻辑运算符，用于根据指定条件执行相应的语句。它的语法结构如下：
condition ? statement1 : statement2
当condition为真时，执行statement1；否则执行statement2。
示例：
let age = 18;
let isAdult = (age >= 18) ? true : false;
console.log(isAdult); // 输出: true
在这个例子中，如果年龄大于等于18，则输出true，否则输出false。这就是三目运算符的基本用法。
问: 如何实现 ES6 中的对象简写？
ES6中引入了一种新的对象简写形式，可以在定义对象的时候更简洁地表示其属性和方法。
-
简化数据属性
let obj = { name: 'John', age: 30 }; -
属性名和值相同时，可以直接省略冒号和值
let obj = { foo, bar }; -
方法属性
let obj = { method() { console.log('method'); } }; -
箭头函数表达式作为方法
let obj = { get name() { return this._name; }, set name(name) { this._name = name; } };
通过这些简写形式，可以使代码更加简洁易读，提升开发效率。
问: 如何在 JavaScript 中获取页面 URL 地址信息？
在JavaScript中，可以使用window.location对象来获取当前页面的URL地址信息。以下是一些常用的属性：
-
window.location.href: 返回完整的URL。 -
window.location.protocol: 返回URL的协议部分，例如“http:”或“https:”。 -
window.location.host: 返回URL的主机和端口号。 -
window.location.hostname: 返回URL的主机名。 -
window.location.port: 返回URL的端口号。 -
window.location.pathname: 返回URL的路径部分。 -
window.location.search: 返回URL的查询字符串。
通过这些属性，可以方便地获取到当前页面的各种URL相关信息。
