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

JS基础知识|博客系列

# JS基础知识

# 1. 声明

# 1.1 声明变量

var 声明

基本的声明变量的方式是使用var来进行声明:

var a;
@前端进阶之旅: 代码已经复制到剪贴板

上面的语句表示声明了一个名为a的变量,由于它只是声明了,还未进行任何的赋值,所以此时使用console.log()在控制台打印出来的是undefined:

var a;
console.log(a);
@前端进阶之旅: 代码已经复制到剪贴板

console.log()方法能够在浏览器的控制台打印出你期望看到的元素,显示控制台快捷键为f12,或者直接在页面中右键“检查”。

声明提前

会把声明的语句提前到脚本的最前头,但不会把赋值的语句提前;

例:

console.log(a);     //已经找到了a,因为var a 会被声明提前,但是却不会提前赋值,也就是不能找到a=10;

var a = 10; 

console.log(a);

=>undefined  10 ; //第一个打印出undefined 第二个为10
@前端进阶之旅: 代码已经复制到剪贴板

# 1.2 声明并赋值

代码⌨️

var 变量名 = 值

var a = 10;
@前端进阶之旅: 代码已经复制到剪贴板

连续声明

var 变量名1,变量名2,变量名3;

var a,b,c;

var a = 1, b = 2, c = 3;
@前端进阶之旅: 代码已经复制到剪贴板

# 1.3 let声明变量

js中除了能够使用var操作符声明变量之外,还可以使用ES6中新增的操作符let进行声明:

let a = 10;
@前端进阶之旅: 代码已经复制到剪贴板

let和var在大多数时候的用法都是一样的,本质上都是为了声明一个变量,但是在一些情况上还是有一些区别,比如let声明的变量没有声明提前:

console.log(a);// 报错ReferenceError
let a = 10;
console.log(a)
@前端进阶之旅: 代码已经复制到剪贴板

在比如let不允许在相同作用域内,重复声明同一个变量。

// 报错
function () {
  let a = 10;
  var a = 1;
}
// 报错
function () {
  let a = 10;
  let a = 1;
}
@前端进阶之旅: 代码已经复制到剪贴板

具体的区别请移步

# 1.4 const声明常量

JS中除了有变量之外,也有常量。

常量顾名思义就是指定义了之后不能进行修改。

const定义的变量不可以修改,而且必须初始化

const a = 1;//正确

const b;//错误,必须要进行初始化
@前端进阶之旅: 代码已经复制到剪贴板

TIP

当然虽然你不能直接使用const b来进行声明,但是你可以采用const b = undefined的方式来声明一个值为undefined的常量,当然实际运用中这种做法也没有什么意义。

使用const声明了变量之后,若是你妄图重新赋值,则js会告诉你这个是不可以的。

const a = 1;
a = 2;//Uncaught TypeError: Assignment to constant variable.
console.log(a);
@前端进阶之旅: 代码已经复制到剪贴板

const定义引用类型

我们知道在js中的引用类型分为:值引用和地址引用。

上面介绍的都是值引用的情况,若是用const声明一个数组或者对象然后在进行修改情况会怎么样?

const arr = [1, 2, 3];
arr.push(4)
console.log(arr);//[1, 2, 3, 4]

const obj = { 'name': 'LinDaiDai' };
obj['sex'] = 'boy';
console.log(obj);//{ 'name': 'LinDaiDai', 'sex': 'boy' }
@前端进阶之旅: 代码已经复制到剪贴板

可以看到用const声明的数组和对象都是可以进行修改的,那么用const声明的对象和var有什么区别呢?

来看下面这个例子:

//如果你试图这样
const arr = [1, 2, 3];
arr = [2, 3, 4]; //Assignment to constant variable
console.log(arr);

//或者这样
const arr = [1, 2, 3];
var arr2 = [2, 3, 4];
arr = arr2;//Assignment to constant variable
console.log(arr);
@前端进阶之旅: 代码已经复制到剪贴板

使用const声明的地址引用常量你可以修改它的值,但不能够修改它的引用地址。

# 2. 内置类型

JS中分为七种内置类型,而这七种内置类型又会分为两大类型:基本类型和对象(Object)。

7种基本类型:null,undefined,boolean,number,string,symbol,bigint。

# 1. typeof

作用:返回一个值的数据类型

用typeof 测试出来的类型都是小写的

只能测试出6种类型:

  • number

  • boolean

  • string

  • undefined

  • object

  • function

1.原始类型

数值、字符串、布尔值分布返回 number、string、boolean

typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
@前端进阶之旅: 代码已经复制到剪贴板

2.函数

函数返回function

function f() {}
typeof f
// "function"
@前端进阶之旅: 代码已经复制到剪贴板

3. undefined

undefined 和没有用 var 声明的变量,用``typeof返回的是undefined`

typeof undefined
// "undefined"
var x
typeof x
// "undefined"
@前端进阶之旅: 代码已经复制到剪贴板

4.object

除了以上三种情况,其他情况都返回object。

typeof window // "object"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"
@前端进阶之旅: 代码已经复制到剪贴板

注:

  • 空数组[]的返回值是object,这表示,JavaScript内部,数组本质上是一种特殊的对象。

  • null的返回值是object,这是由于历史原因造成的,1995年JavaScript语言的第一版,所有值都设计成32位,其中最低的3位用来表述数据类型,object对应的值是000。当时,只设计了五种数据类型(对象、整数、浮点数、字符串和布尔值),完全没考虑null,只把它当作object的一种特殊值,32位全部为0。这是typeof null返回object的根本原因。 为了兼容以前的代码,后来就没法修改了。这并不是说null就属于对象,本质上null是一个类似于undefined的特殊值。

用法

实际编程中, typeof通常用在判断语句

var a = 10;
if (typeof a === "number") {
    // ...
}
@前端进阶之旅: 代码已经复制到剪贴板

# 2. Number

JS 的数字类型是浮点类型的,没有整型,只能是实数,虚数不支持。

1. 整数

二进制 用0b 开头

字节:8个二进制位

八进制 用0或者0o(推荐)开头

十六进制 用0x开头

转换为二进制:每一个16进制位,用4个二进制位来表示

123 = 0001 0010 0011

2. 浮点数

3. 无穷大 Infinity (正无穷大和负无穷大)

1/0无穷大

4. NaN

NaN的特殊:

1.NaN 的typeof 的类型是 number;

2.NaN 转成数字类型是 NaN ;

3.NaN 转成布尔类型是 false;

4.NaN 转成字符串是 NaN ;

5.NaN == NaN =>false ;

6.NaN ===NaN =>false;

7.0/0 = NaN

# 3.Boolean

只有俩个值: true 和 false

# 4.String

字符串:用一对单引号'' 或者 一对双引号"" 括起来的字符序列.

"LinDaiDai"

'LinDaiDai'
@前端进阶之旅: 代码已经复制到剪贴板

# 5.Undefined

当声明一个变量但是并没有赋值时,或者没有声明的变量,变量的类型是Underfined类型

typeof(undefined);

=>undefined;

Number(undefined);//转成数字为NaN

=> NaN
@前端进阶之旅: 代码已经复制到剪贴板

undefined的特殊之处:

1.undefined 的typeof 的类型是 undefiend;

2.undefined 转成数字类型为 NaN;

3.undefined 转为布尔类型是 false;

4.undefined 转为字符串类型是 undefined ;

5.null == undefined => true;

# 6.Null

typeof(null);
=>object;

Number(null)
=> 0
@前端进阶之旅: 代码已经复制到剪贴板

null的特殊之处:

1.null 的typeof 的类型是 object;

2.null 转成数字类型为 0;

3.null 转为布尔类型是 false;

4.null 转为字符串类型是 null ;

5.null 和 任何非 null 都不相等;(但和undefined相等)

6.null == undefined =>true;

# 7. Symbol

Symbol是ES6新增的一种数据类型

在ES5之前我们都没办法创建私有变量,只能想办法去封装.symbol 来创建私有成员

用法⌨️

	//例1:
	let firstName = Symbol();   //创建一个Symbol
    let person = {};

    person[firstName] = "王先生";
    console.log(person[firstName]);     // "王先生"
@前端进阶之旅: 代码已经复制到剪贴板

具体的用法请移步

# 8.Object

除了上述的六种基本数据类型,其他的数据都是Object类型

var obj = { 'name': 'LinDaiDai' };
var arr = [1, 2, 3];

console.log(typeof obj);
console.log(typeof arr);
@前端进阶之旅: 代码已经复制到剪贴板

# 3. 数据类型转换:

# 3.1 自动类型的转换

字符串,数字,boolean 之间的转换

字符串->数字:

1.如果字符串例的内容全部是数字,则转换为数字,否则就是NaN;

其实就是调用的一种叫做转换函数Number();

2.Number()内要是有一个内容不是数字,就会返回NaN

Number('123');
//123

Number('12a');
//NaN
@前端进阶之旅: 代码已经复制到剪贴板

数字->字符串:

把数字的字面形式转换为字符串

若是数字+字符串,则会进行隐式类型转换,讲数字转换成字符串,然后进行字符串相加

123 + '456'
//'123456'
@前端进阶之旅: 代码已经复制到剪贴板

内部调用的是转换函数String()

字符串,数字->布尔值:

0,-0,"",undefined,null,false,NaN ->这七种是转换为false,其余的全当做true来用("0"," "是true);

如一下几种加上!都会转换为true.

var num = 0,
	a = null,
	b = NaN,
	c;
!num //true
!a //true
!b //true
!c //true
@前端进阶之旅: 代码已经复制到剪贴板

布尔值 -> 字符串:

true -> “true”

← 高阶函数map reduce filter做完这48道题彻底弄懂JS继承 →

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

  • 综合