【面试题】前端 js那些需要注意的小细节

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全

箭头函数

//普通函数：
let add2 = function (x, y) {
            return x + y;
        }
//第一步：去掉function
let add2 =  (x, y) {
            return x + y;
        }
//第二步：在（）和{}之间加上胖箭头=>
let add2 =  (x, y) =>{
            return x + y;
        }
//当只有一个参数时，（）也可以省略
let add2 =  x =>{
            return x + x;
        }
//当函数只有返回值时，return和{} 也能去掉
let add2 =  x => x + x;
复制代码

this 是什么？

this是指 谁在调用函数 ，如果没有就是window

• 任何函数本质上都是通过某一个对象来调用的 ，如果没有直接指定，就是window
• 所有函数内部都有一个变量 this
• 它的值是调用函数的当前对象

test（）：window
p.test() : p
new test() : 新建的对象
p.call(obj) : obj
复制代码

1. 箭头函数在哪个作用域下声明，this就指向谁
2. 箭头函数和普通函数的区别 this绑定
3. 普通的function不会绑定this 在进入到普通函数之前，this指向Window，进入普通函数之后，this就会变成该函数的指向,
4. 而箭头函数会绑定this，在进入到箭头函数之前，this指向Windows，进入之后，由于箭头函数会绑定this,所以这时候this还是指向window,
5. 如果先进入普通函数再进入箭头函数，this就会从进入之前的指向window 变成该函数指向；

函数的protoype属性

每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）这里 Object是一个函数 原型对象中有一个属性constructor，它指向函数对象 Date.prototype.constructor===Date

给原型对象添加属性（一般是方法

函数的所有实例对象自动拥有原型对象中的所有属性（方法） 添加Date.prototype.getSum=function（）{} ，Date会有getSum这个方法

显式原型与隐式原型

• 每个函数function 都有一个prototype属性，即显式原型（属性）
• 每个实例对象 都有一个 __proto__，可称为隐式原型（属性）
• 对象的隐式原型的值为其对应构造函数的显式原型的值 Fn.prototype===fn.__proto__ 都保存同一个对象的地址值 默认指向一个Object空对象，原型对象
• 原型链就是找隐式原型属性__proto__
• 原型链是用来查找对象属性的
• 读取对象的属性值时：会自动到原型链中去查找
• 设置对象属性值时：不会查找原型链，如果当前对象中没有该属性，会直接添加此属性并设置其值
• 方法一般定义在原型中（__proto__）,属性一般通过构造函数定义在对象本身上
• 函数的显式原型指向的对象默认是空Object实例对象，（但Object不满足这句话）因为原型对象其实就是一个对象，当然可以说是Object实例
• 所有函数都是Function的实例，（包括Function它自己）

Function.__proto__=== Function.prototype//  true
复制代码

• Object的原型对象是原型链的尽头

Object.prototype.__proto__   //   null 
复制代码

变量声明提升

//在定义语句之前就能访问到
var a =3
function fn(){
  console.log(a)
    var a=4
}
fn()    //  undefined  
复制代码

因为变量会声明提升，在进入函数时，函数中var 的变量会最先声明，但是没有赋值，然后再执行输出，最后执行赋值，所以结果是未定义，找变量会先在函数里面找，就近原则

箭头函数和普通函数的区别

1. 箭头不会绑定，普通函数会绑定（能绑定就是能改变）
2. this指向不同
3. 普通函数，谁调用这个函数，this指向谁
4. 箭头函数，在哪里定义函数，this指向谁
5. 箭头函数适合与this无关的回调，定时器，数组的回调
6. 不适合与this有关的回调，事件回调，对象的方法

变量不是数据本身，它仅仅是存储数据的容器

let a = [0,1,2];
let b = a;
b[0] = 5;
console.log(a);//  [5, 1, 2]
复制代码

数组后面习惯性敲一个空格

// 获取用户输入的内容，并且输出到页面  1输入，2存储，3输出
let uname = prompt('请输入您的姓名：')
document.write（uname）
复制代码

js基本数据类型

1. 数字类型
2. 字符串类型
3. boolean 布尔类型
4. undefined 未定义类型 只声明，未赋值
5. null 空类型

引用数据类型

1. object 对象
2. function 函数
3. array 数组
4. js 推荐使用单引号引起字符串 “” ‘’``

模板字符串 拼接字符串和变量 在反引号中可回车换行不报错

document.write('大家好，我叫’ + name + '，今年' + age + '岁')
复制代码

内容拼接变量时，用${}包住变量，整体用反引号引起

//也可以`${3.14 * r * r}`，一般不建议这样
document.write(`大家好，我叫${name}，今年${age}岁`)
document.write（）//能够识别html标签
console.log(typeof null) // object  null 就是将一个对象赋值给一个变量，只不过这个对象还没创建好，就先让null赋值给这个变量
复制代码

数据类型转换

隐式转换，系统内部自动转换

规则：

1. +号两边只要有一个是字符串类型，都会把另外一个转换为字符串；
2. 除了+以外的运算符，像- * / 等等，都换转换为数字类型

注意 ： +号作为 正号，可以转化为Number 例: console.log(10 + +'10')// 20

显式转换

console.log(Number（‘10.01’）) // 10.01
console.log(parseInt（‘10.99’）) // 10  只保留整数，不四舍五入
console.log(parseFloat（‘10.99’）) // 10.99  转化为数字型，会保留小数
//parseInt 和 parseFloat 会先将 数据通过String 转换为字符串，再去截取
console.log(Number（'true'）) //  1
console.log(parseInt（'true'）) // NAN
console.log(Number（‘null’）) // 0
(Number（‘undefined’）) // NAN
console.log(parseInt（a,16）) // 将变量a 转换为16进制
复制代码

Number 与 parseFloat 区别

• Number ('11.1abc') 只能放数字类型的字符串，其他的不行 否则输出NaN（NOT a Number） Number 会先去调用String()函数，再转换
  
• parseInt('11.1abc') // 11.1 只会返回以数字开头的数字类型，如果parseInt('abc11.1abc')// NaN 经常用于过滤单位 parseInt('100px') // 100
  

表单取过来的值是字符串类型

• return 只能返回一个值，如果要返回多个值，可以用数组将值存放，返回数组

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全