この記事は、JavaScript の面接での質問をいくつかまとめたもので、使用頻度の高い知識ポイントを習得するのに役立ちます。
var、let、const
3 つの違い
let | const | var | ||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
繰り返し宣言することはできません。SyntaxError が報告されます | const 定数を定義します。値を変更できない変数を定数と呼びます。初期値を割り当てる必要があります。変更できないからです。 | 繰り返し宣言可能 | ||||||||||||||||||||||||||||||||||||||||||||||||||||
所有 | 所有 | 所有されていない | #グローバル変数 (ウィンドウにマウントされている) を汚染しますか | |||||||||||||||||||||||||||||||||||||||||||||||||||
No | Yes |
説明
let answer; function fn(){ //如果此时没有将变量变量提升到这里,answer应该取外层answer的值 console.log(answer); //Uncaught ReferenceError: Cannot access 'answer' before initialization let answer=42; }2. var によって作成されたグローバル変数 -> グローバル オブジェクトの属性、let および const -> によってグローバル スコープで宣言された変数は、グローバル オブジェクトの属性ではありません3 定数が配列またはオブジェクトの場合、その内部要素への変更は定数への変更としてカウントされず、エラーは報告されません。定数はアドレスを指します。アドレスが変更されない場合、エラーは報告されません。 変数のプロモーションと関数のプロモーション
# #スコープとスコープ チェーン理解: コード セグメントが配置される領域。 は静的であり、はコードの作成時に決定されます。 関数: 変数バインディングはこのスコープ 内で有効であり、変数を分離し、異なるスコープ内の同じ名前の変数と競合することはありません。
関数のスコープは宣言時に決定され、呼び出し位置とは関係ありません。 したがって、aaa() を実行するときは、まず aaa のスコープ内を検索します。 a、親スコープ ウィンドウに移動し、 a=10 実行コンテキスト を見つけます。現在の JavaScript 実行環境 要約: JavaScript は実行を開始するたびに、実行コンテキストで実行されます。#グローバル実行コンテキスト: グローバル コードを実行する前にウィンドウをグローバル実行コンテキストとして決定します
#var --> 未定義、ウィンドウのプロパティとして宣言されたグローバル関数を追加
arguments (仮パラメータ リストにカプセル化された擬似配列) --> 割り当て (実際のパラメータ リスト)、に追加関数実行コンテキストの属性 var で定義されたローカル変数 –>未定義、関数実行コンテキストの属性
4. 現在の関数が実行された後、オブジェクトを削除しますスタックの最上位 (スタックをポップ) 5. すべてのコードが実行されると、ウィンドウ
this的指向
bind、call、apply的区别与实现apply、call、bind 函数可以改变 this 的指向。
bind函数的特殊点 call函数的实现 //从第二个参数开始依次传入,所以接收时使用rest参数 Function.prototype.call=function(obj,...args){ obj = obj || window; args = args ? args : []; //给obj新增一个独一无二的属性以免覆盖原有属性 const key = Symbol() obj[key] = this; const res = obj[key](...args); delete obj[key]; return res; } apply函数的实现 Function.prototype.apply=function(obj,args){ obj = obj || window; args = args ? args : []; //给obj新增一个独一无二的属性以免覆盖原有属性 const key = Symbol() obj[key] = this; const res = obj[key](...args); delete obj[key]; return res; } bind函数的实现 Function.prototype.bind=function(obj,...args){ obj = obj || window; args = args ? args : []; return (...args2) => { return this.apply(obj,[...args,...args2]) } } 一般函数和箭头函数箭头函数的作用:确保函数内部的this和外部的this是一样的 箭头函数是普通函数的语法糖,书写要更加简洁
闭包是什么
function foo(){ var a=2; function bar(){ //覆盖foo()内部作用域的闭包 console.log(a++); } return bar; } var bar = foo(); //foo执行创建一个执行上下文环境,由于bar引用了其内部变量,也就是bar持有foo本次执行上下文的引用,foo本次的执行上下文不会被销魂 bar();//2 bar();//3 var fn = foo(); //foo执行创建一个新的执行上下文环境,fn持有了foo本次执行上下文的引用 fn();//2 有什么用 JavaScript闭包就是在另一个作用域中保存了一份它从上一级函数或者作用域得到的变量,而这些变量是不会随上一级函数的执行完成而销毁 常用场景:节流防抖 手写节流和防抖函数作用是:控制回调函数触发的频率,进行性能优化 节流:在函数被频繁触发时, 函数执行一次后,只有大于设定的执行周期后才会执行第二次。一个时间段,只触发一次 //使用形式,绑定时候throttle函数就会执行,所以this是window window.addEventListener('scroll',throttle(()=>{},500)) /* 思路 需要记录上一次触发的时间,才可以和当前时间比较,是否超过了间隔时间 第一次必然立刻触发 */ function throttle(callback,wait){ let pre = new Date(); //这里的this是window return function(...args){ //这里的this是绑定的DOM const now = new Date(); if(now-pre>=wait){ callback.apply(this,args); pre = now; } } } /* 使用setTimeout实现 第一次需要延迟delay后触发 */ function throttle(callback,delay){ let timer = null; //这里的this是window return function(...args){ if(timer){//说明已经触发了 return; } timer = setTimeout(()=>{ callback.apply(this,args); timer = null; },delay) } } 函数防抖:指定时间间隔内只会执行一次任务。如果在等待的过程中再一次触发了事件,计时器重新开始计时,直到达到时间后执行最后一次的回调 function debounce(callback,delay){ let timer = null; //这里的this是window return function(){ if(timer){//说明已经触发了 clearTimeout(timer); } timer = setTimeout(()=>{ callback.apply(this,arguments); timer = null; },delay) } } //立即执行 function debounce(func,delay) { let timeout; return function (...args) { if (timeout) clearTimeout(timeout); const callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, delay) if (callNow) func.apply(this, args) } } 原型和原型链
JavaScript 线程机制与事件循环机制内容
DOM渲染内容
重绘和回流内容
setTimeout 、setInterval、requestAnimationFrame内容
观察者模式和发布订阅机制观察者是软件设计模式中的一种,但发布订阅只是软件架构中的一种消息范式 观察者模式 观察者模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 被依赖的对象叫做 //subject 被观察者 class Subject { constructor() { this.observerList = []; } addObserver(observer) { this.observerList.push(observer); } removeObserver(observer) { const index = this.observerList.findIndex(o => o.name === observer.name); this.observerList.splice(index, 1); } notifyObservers(message) { const observers = this.observeList; observers.forEach(observer => observer.notified(message)); } } //Observer 观察者 class Observer { constructor(name, subject) { this.name = name; if (subject) { subject.addObserver(this); } } notified(message) { console.log(this.name, 'got message', message); } } //使用 const subject = new Subject(); const observerA = new Observer('observerA', subject); const observerB = new Observer('observerB'); subject.addObserver(observerB); subject.notifyObservers('Hello from subject'); subject.removeObserver(observerA); subject.notifyObservers('Hello again'); 发布订阅机制 //事件调度中心 class PubSub { constructor() { // 存储格式: warTask: [], routeTask: [] // {订阅事件:[回调1,回调2...],订阅事件2:[回调1,回调2..]} this.events = {} } // 订阅方法 订阅哪个类型type就把对应的回调函数放入 subscribe(type, cb) { if (!this.events[type]) { this.events[type] = []; } this.events[type].push(cb); } // 发布方法 publish(type, ...args) { if (this.events[type]) { this.events[type].forEach(cb => cb(...args)) } } // 取消订阅方法 的某一个类型的某一个回调 unsubscribe(type, cb) { if (this.events[type]) { const cbIndex = this.events[type].findIndex(e=> e === cb) if (cbIndex != -1) { this.events[type].splice(cbIndex, 1); } } if (this.events[type].length === 0) { delete this.events[type]; } } } //测试 let pubsub = new PubSub(); //订阅 pubsub.subscribe('warTask', function (taskInfo){ console.log("宗门殿发布战斗任务,任务信息:" + taskInfo); }) pubsub.subscribe('routeTask', function (taskInfo) { console.log("宗门殿发布日常任务,任务信息:" + taskInfo); }); pubsub.subscribe('allTask', function (taskInfo) { console.log("宗门殿发布五星任务,任务信息:" + taskInfo); }); //发布 pubsub.publish('warTask', "猎杀时刻"); pubsub.publish('allTask', "猎杀时刻"); pubsub.publish('routeTask', "种树浇水"); pubsub.publish('allTask', "种树浇水"); 区别
异步编程解决方案 Generator生成器函数 async/await、Promise笔记内容
扩展运算符的原理和应用浅拷贝和深拷贝深浅拷贝只是针对引用数据类型
浅拷贝
深拷贝方式一: JSON.parse(JSON.stringify())
问题1: 函数属性会丢失,不能克隆方法 //循环引用:b中引用了c,c中又有b obj = { b:['a','f'], c:{h:20} } obj.b.push(obj.c); obj.c.j = obj.b; b:['a','f',{h:20,j:[]}], c:{h:20,j:['a','f',[]]} function deepClone1(target) { //通过数组创建JSON格式的字符串 let str = JSON.stringify(target); //将JSON格式的字符串转换为JS数据 let data = JSON.parse(str); return data; } 方式二:递归+map //map存放已经拷贝过的对象,key为需要拷贝的对象,value为拷贝后的对象 function deepClone(target,map=new Map()){ //1.判断是否是引用类型 if(typeof target === 'object' && target !==null ){ if(map.has(target))return map.get(target); //说明已经拷贝过了 let isArr = Array.isArray(target); let res = isArr?[]:{}; map.set(target,res) if(isArr){//拷贝的是数组 target.forEach((item,index) => { res[index] = deepClone(item,map); }); }else{//拷贝的是对象 Object.keys(target).forEach(key=>{ res[key]=deepClone(target[key],map); }) } return res; //返回的是一个数组或对象 }else{ return target; } } //测试 console.log(deepClone([1,[1,2,[3,4]]])) commonJS和ES6模块化内容
【推荐学习:javascript高级教程】 |
以上が高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (8)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

Dreamweaver Mac版
ビジュアル Web 開発ツール

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
