前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • DOM编程之API学习总结篇
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript数组详解
    • OOP之原型与原型链
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript笔记总结篇
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 深拷贝 vs 浅拷贝
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合

# 第一课时 入门基础


# 知识点:


  • 操作系统就是个应用程序
  • 只要是应用程序都要占用物理内存
  • 浏览器本身也是一个应用程序
  • 浏览器本身只懂得解析HTML
  • 调用浏览器这个应用程序的一个功能绘制

# 1、javascript介绍


  • JavaScript操作DOM的本质是=获取+触发+改变

  • 目的:就是用来操作内存中的DOM节点

    • 修改DOM节点的属性
    • 过javascript语法组织逻辑代码操作DOM
    • BOM(window)它包含了DOM
    • DOM(document)
    • script脚本推荐放在最下边好处:防止因网络问题,页面加载时间长,出现空白;即便网络问题,浏览器也把DOM加载渲染完成,等待从服务端下载完js脚本,出现效果
    • css不放在最下面原因通俗地讲:好比先穿好衣服在出去,浏览器先把css样式准备好,在加载结构层,使得页面有样子;如果放在下面,因为页面是从上往下加载,没有css,就剩下裸露的标签,很难看,使得用户体验不好

# 2、基于对象的内存管理


  • javascript就是来操作这些对象
    • 通过逻辑组织对象之间的关系和行为
    • 如何操作这些对象?通过变量引用

# 3、变量


  • 变量本质是一个空盒子,里面记录了一个内存地址,使能找到内存中的对象,保存了指向具体的实在的东西的地址

  • 变量存在栈中,对象存在堆中

  • 变量的意义:方便我们去操作对象

  • 变量的几种引用方式

    • 指针(C语言中叫法)
    • 引用(Java)
    • 变量
  • 例如:

    • var b = document.body 含义:把body这个对象在内存中的地址放到b变量里面,变量b(b是内存地址的别名)本身也存在内存中,以后的操作是针对body这个地址
  • 变量命名规范

    • 由字母(a-zA-Z)数字(0-9)下划线(_)以及美元符号($)
    • 不能由数字开头
    • 命名尽量用英文并且具有一定的含义
    • 如果有多个英文单词,后面单词的首字母大写
    • 不能使用关键字
    • 首字母不要大写,大写是有特殊含义的

# DOM在内存中的一些图示


# 第二课时


# 回顾上节:

  • 1、javascript介绍

  • 2、基于对象的内存管理

  • javascript就是来操作这些对象

    • 通过逻辑组织对象之间的关系和行为
    • 如何操作这些对象?通过变量引用
  • 3、变量

# 知识点:


# 1、window作用域


  • 只要在script标签中定义的变量,默认就在window的作用域之下
  • 默认就是window这个对象里面写代码

# 2、数据类型


# 如何判断js中的数据类型:

  • typeof、instanceof、 constructor、 prototype方法比较

  • 如何判断js中的类型呢,先举几个例子:

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
@前端进阶之旅: 代码已经复制到剪贴板
# 最常见的判断方法:typeof

alert(typeof a)   ------------> string
alert(typeof b)   ------------> number
alert(typeof c)   ------------> object
alert(typeof d)   ------------> object
alert(typeof e)   ------------> function
alert(typeof f)   ------------> function
@前端进阶之旅: 代码已经复制到剪贴板
  • 其中typeof返回的类型都是字符串形式,需注意,例如:
alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false
@前端进阶之旅: 代码已经复制到剪贴板
  • 另外typeof 可以判断function的类型;在判断除Object类型的对象时比较方便。
# 判断已知对象类型的方法: instanceof

alert(c instanceof Array) ---------------> true
alert(d instanceof Date) 
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
@前端进阶之旅: 代码已经复制到剪贴板
  • 注意:instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。
# 根据对象的constructor判断: constructor

alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true
@前端进阶之旅: 代码已经复制到剪贴板
  • 注意: constructor 在类继承时会出错

  • 例子:

      function A(){};
      function B(){};
      A.prototype = new B(); //A继承自B
      var aObj = new A();
      alert(aobj.constructor === B) -----------> true;
      alert(aobj.constructor === A) -----------> false;
@前端进阶之旅: 代码已经复制到剪贴板
  • 而instanceof方法不会出现该问题,对象直接继承和间接继承的都会报true:
      alert(aobj instanceof B) ----------------> true;
      alert(aobj instanceof B) ----------------> true;
@前端进阶之旅: 代码已经复制到剪贴板
  • 言归正传,解决construtor的问题通常是让对象的constructor手动指向自己:
      aobj.constructor = A; //将自己的类赋值给对象的constructor属性
      alert(aobj.constructor === A) -----------> true;
      alert(aobj.constructor === B) -----------> false; //基类不会报true了;
@前端进阶之旅: 代码已经复制到剪贴板
# 通用但很繁琐的方法: prototype

alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;
@前端进阶之旅: 代码已经复制到剪贴板
  • 大小写不能写错,比较麻烦,但胜在通用。
  • 通常情况下用typeof 判断就可以了,遇到预知Object类型的情况可以选用instanceof或constructor方法

# Javascript的数据类型有六种(ES6新增了第七种Symbol)


  • 数值(number):整数和小数(比如1和3.14)
  • 字符串(string):字符组成的文本(比如"Hello World")
  • 布尔值(boolean):true(真)和false(假)两个特定值
  • undefined:表示 未定义 或不存在,即此处目前没有任何值
  • null:表示空缺,即此处应该有一个值,但目前为空
  • 对象(object):各种值组成的集合
  • 通常,我们将数值、字符串、布尔值称为原始类型(primitive type)的值,即它们是最基本的数据类型,不能再细分了。而将对象称为合成类型(complex type)的值,因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。至于undefined和null,一般将它们看成两个特殊值

# 内存中一共分为几种对象:


  • 变量
  • DOM对象
  • 常量
  • 自定义对象

# 数据类型转换


# 转换函数

  • toString() 转换为字符串,在JavaScript中所有数据类型都可以转换为string类型
        var n1 = 12;
        var n2 = true;
        var a = [1, 2, 3];
        var o = {};
        function f(){}
        n1.toString(); //"12"
        n2.toString(); //"true"
        a.toString(); //"1,2,3"
        o.toString(); //"[object Object]"
        f.toString(); //"function f(){}"
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • DOM编程之API学习总结篇
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript数组详解
    • OOP之原型与原型链
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript笔记总结篇
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 深拷贝 vs 浅拷贝
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

javascript笔记总结篇|博客系列

# 第一课时 入门基础


# 知识点:


  • 操作系统就是个应用程序
  • 只要是应用程序都要占用物理内存
  • 浏览器本身也是一个应用程序
  • 浏览器本身只懂得解析HTML
  • 调用浏览器这个应用程序的一个功能绘制

# 1、javascript介绍


  • JavaScript操作DOM的本质是=获取+触发+改变

  • 目的:就是用来操作内存中的DOM节点

    • 修改DOM节点的属性
    • 过javascript语法组织逻辑代码操作DOM
    • BOM(window)它包含了DOM
    • DOM(document)
    • script脚本推荐放在最下边好处:防止因网络问题,页面加载时间长,出现空白;即便网络问题,浏览器也把DOM加载渲染完成,等待从服务端下载完js脚本,出现效果
    • css不放在最下面原因通俗地讲:好比先穿好衣服在出去,浏览器先把css样式准备好,在加载结构层,使得页面有样子;如果放在下面,因为页面是从上往下加载,没有css,就剩下裸露的标签,很难看,使得用户体验不好

# 2、基于对象的内存管理


  • javascript就是来操作这些对象
    • 通过逻辑组织对象之间的关系和行为
    • 如何操作这些对象?通过变量引用

# 3、变量


  • 变量本质是一个空盒子,里面记录了一个内存地址,使能找到内存中的对象,保存了指向具体的实在的东西的地址

  • 变量存在栈中,对象存在堆中

  • 变量的意义:方便我们去操作对象

  • 变量的几种引用方式

    • 指针(C语言中叫法)
    • 引用(Java)
    • 变量
  • 例如:

    • var b = document.body 含义:把body这个对象在内存中的地址放到b变量里面,变量b(b是内存地址的别名)本身也存在内存中,以后的操作是针对body这个地址
  • 变量命名规范

    • 由字母(a-zA-Z)数字(0-9)下划线(_)以及美元符号($)
    • 不能由数字开头
    • 命名尽量用英文并且具有一定的含义
    • 如果有多个英文单词,后面单词的首字母大写
    • 不能使用关键字
    • 首字母不要大写,大写是有特殊含义的

# DOM在内存中的一些图示


# 第二课时


# 回顾上节:

  • 1、javascript介绍

  • 2、基于对象的内存管理

  • javascript就是来操作这些对象

    • 通过逻辑组织对象之间的关系和行为
    • 如何操作这些对象?通过变量引用
  • 3、变量

# 知识点:


# 1、window作用域


  • 只要在script标签中定义的变量,默认就在window的作用域之下
  • 默认就是window这个对象里面写代码

# 2、数据类型


# 如何判断js中的数据类型:

  • typeof、instanceof、 constructor、 prototype方法比较

  • 如何判断js中的类型呢,先举几个例子:

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
@前端进阶之旅: 代码已经复制到剪贴板
# 最常见的判断方法:typeof

alert(typeof a)   ------------> string
alert(typeof b)   ------------> number
alert(typeof c)   ------------> object
alert(typeof d)   ------------> object
alert(typeof e)   ------------> function
alert(typeof f)   ------------> function
@前端进阶之旅: 代码已经复制到剪贴板
  • 其中typeof返回的类型都是字符串形式,需注意,例如:
alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false
@前端进阶之旅: 代码已经复制到剪贴板
  • 另外typeof 可以判断function的类型;在判断除Object类型的对象时比较方便。
# 判断已知对象类型的方法: instanceof

alert(c instanceof Array) ---------------> true
alert(d instanceof Date) 
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
@前端进阶之旅: 代码已经复制到剪贴板
  • 注意:instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。
# 根据对象的constructor判断: constructor

alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true
@前端进阶之旅: 代码已经复制到剪贴板
  • 注意: constructor 在类继承时会出错

  • 例子:

      function A(){};
      function B(){};
      A.prototype = new B(); //A继承自B
      var aObj = new A();
      alert(aobj.constructor === B) -----------> true;
      alert(aobj.constructor === A) -----------> false;
@前端进阶之旅: 代码已经复制到剪贴板
  • 而instanceof方法不会出现该问题,对象直接继承和间接继承的都会报true:
      alert(aobj instanceof B) ----------------> true;
      alert(aobj instanceof B) ----------------> true;
@前端进阶之旅: 代码已经复制到剪贴板
  • 言归正传,解决construtor的问题通常是让对象的constructor手动指向自己:
      aobj.constructor = A; //将自己的类赋值给对象的constructor属性
      alert(aobj.constructor === A) -----------> true;
      alert(aobj.constructor === B) -----------> false; //基类不会报true了;
@前端进阶之旅: 代码已经复制到剪贴板
# 通用但很繁琐的方法: prototype

alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;
@前端进阶之旅: 代码已经复制到剪贴板
  • 大小写不能写错,比较麻烦,但胜在通用。
  • 通常情况下用typeof 判断就可以了,遇到预知Object类型的情况可以选用instanceof或constructor方法

# Javascript的数据类型有六种(ES6新增了第七种Symbol)


  • 数值(number):整数和小数(比如1和3.14)
  • 字符串(string):字符组成的文本(比如"Hello World")
  • 布尔值(boolean):true(真)和false(假)两个特定值
  • undefined:表示 未定义 或不存在,即此处目前没有任何值
  • null:表示空缺,即此处应该有一个值,但目前为空
  • 对象(object):各种值组成的集合
  • 通常,我们将数值、字符串、布尔值称为原始类型(primitive type)的值,即它们是最基本的数据类型,不能再细分了。而将对象称为合成类型(complex type)的值,因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。至于undefined和null,一般将它们看成两个特殊值

# 内存中一共分为几种对象:


  • 变量
  • DOM对象
  • 常量
  • 自定义对象

# 数据类型转换


# 转换函数

  • toString() 转换为字符串,在JavaScript中所有数据类型都可以转换为string类型
        var n1 = 12;
        var n2 = true;
        var a = [1, 2, 3];
        var o = {};
        function f(){}
        n1.toString(); //"12"
        n2.toString(); //"true"
        a.toString(); //"1,2,3"
        o.toString(); //"[object Object]"
        f.toString(); //"function f(){}"
@前端进阶之旅: 代码已经复制到剪贴板
  • parseInt() 解析出一个string或者number类型的整数部分,如果没有可以转换的部分,则返回NaN(not a number)
       var n1 = "12";
       var n2 = "23hello";
       var n3 = "hello";
       parseInt(n1); //12
       parseInt(n2); //23
       parseInt(n3); //NaN
@前端进阶之旅: 代码已经复制到剪贴板
  • parseFloat() 解析出一个string的浮点数部分,如果没有可以转换的部分,则返回NaN(not a number)
       var n1 = "1.2.3";
       var n2 = "1.2hello"
       var n3 = "hello"
       parseFloat(n1); //1.2
       parseFloat(n2); //1.2
       parseFloat(n3); //NaN 
@前端进阶之旅: 代码已经复制到剪贴板
# 强制类型转换

  • Boolean(value)- 把给定的值转换成Boolean型
        Boolean(123); //true
        Boolean(""); //false
        Boolean([]); //true
        Boolean({}); //true
        Boolean(null); //false
        Boolean(undefined); //false
@前端进阶之旅: 代码已经复制到剪贴板
  • Number(value)-把给定的值转换成数字(可以是整数或浮点数)
        Number("123"); //123
        Number("123h"); //NaN
        Number(true); //1
        Number(false); //0
        Number(undefined); //NaN
        Number(null); //0
        Number([]); //0
        Number({}); //NaN
@前端进阶之旅: 代码已经复制到剪贴板
  • String(value)- 把给定的值转换成字符串

← iframe+表单跨域提交POST请求业务中处理数据结构常用的JS方法 →

fe