Simonzhangs' blog Simonzhangs' blog
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • JS设计模式总结
  • 《Vue》
  • 《React》
  • 《TypeScript 从零实现 axios》
  • TypeScript
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • apple music
  • extension
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Simonzhangs

前端学习探索者
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • JS设计模式总结
  • 《Vue》
  • 《React》
  • 《TypeScript 从零实现 axios》
  • TypeScript
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • apple music
  • extension
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML

  • CSS

  • JavaScript文章

    • 33个非常实用的JavaScript一行代码
    • new命令原理
    • ES5面向对象
    • ES6面向对象
    • 多种数组去重性能对比
    • JS随机打乱数组
    • 判断是否为移动端浏览器
    • 将一维数组按指定长度转为二维数组
    • 防抖与节流函数
    • JS获取和修改url参数
    • 比typeof运算符更准确的类型判断
    • 常见面试题

      • 四级文件(测试)
      • 原型与原型链
      • JS数据类型
        • for in
        • ES6 for of
        • forEach
        • map
        • filter
      • call、apply、bind
      • JavaScript运行机制
      • promise
      • JS中在new的时候发生了什么
  • 学习笔记

  • 前端
  • JavaScript文章
  • 常见面试题
simonzhangs
2022-04-10
目录

JS数据类型

# 基本类型和引用类型

JS数据类型包括基本类型和引用类型。

基本类型包括:string、number、boolean、undefined、symbol

引用类型包括: Object、Function、Array等

基本类型时保存在栈内存中的简单数据段,而引用类型是保存在堆内存中的对象。

基本类型的值保存在栈空间,按值来访问;引用类型的值大小不固定,栈内存中存放地址指向堆内存中的对象,按引用访问的。

# typeof 和 instanceof

typeof 用来判断对象的类型,null、Array、Object都会返回object; instanceof 用于判断一个变量是否是某个对象的实例;

let a = new Array();
console.log(a instanceof Array); // true

console.log(a instanceof Object); //true,因为Array是Object的子类

function test(){}
let b = new test();
console.log(a instanceof test) //true
1
2
3
4
5
6
7
8

# for in 和 for of 区别

对数组或者对象遍历时会用到,for in 遍历的是数组的索引(index),而for of 遍历的是数组的元素值(value)

// for in
var obj = {a:1, b:2, c:3}
    
for (let key in obj) {
  console.log(key)
}// a b c

//for of
const array1 = ['a', 'b', 'c']
 
for (const val of array1) {
  console.log(val)
}// a b c
1
2
3
4
5
6
7
8
9
10
11
12
13

# for in

更适合遍历对象,index索引为字符串型,不能直接进行几何运算。

遍历数组的时候可能出现问题:使用for in 会遍历数组所有的可枚举属性,包括原型上的;如果不想遍历原型上的方法和属性,可以在循环内部判断,使用hasOwnProperty方法来判断属性是否是该对象的实例属性。

var arr = [1,2,3]
Array.prototype.a = 123
    
for (let index in arr) {
  let res = arr[index]
  console.log(res)
}//1 2 3 123

for(let index in arr) {
    if(arr.hasOwnProperty(index)){
        let res = arr[index]
  		console.log(res)
    }
}// 1 2 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# ES6 for of

for of 遍历的是数组元素值,遍历的只是数组内的元素,不包括原型属性和索引。

var arr = [1,2,3]
arr.a = 123
Array.prototype.a = 123
    
for (let value of arr) {
  console.log(value)
}//1 2 3
1
2
3
4
5
6
7

for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象(iterator)的集合,但是不能遍历对象,因为没有迭代器对象,但如果想遍历对象的属性,可以用for in循环(这也是它的本职工作)或用内建的Object.keys()方法。

# forEach、map、filter

1、forEach 和 map 能实现的功能相似 2、forEach 、 map、filter 都能实现对原数组的修改 3、forEach 没有返回值,map 有返回值,filter 有返回值

# forEach

该方法对数组的每个元素执行一次提供的函数。

# map

map方法创建一个数组,结果是该数组中的每个元素都调用一个提供函数返回后的结果。 map 方法在调用 callback 函数时,会给它传递三个参数:当前正在遍历的元素,元素索引,原数组本身.

let new_array = arr.map(function(v, i, arr) {
  // Return element for new_array s
}[, thisArg])
1
2
3
  • map 不修改调用它的原数组
  • map 方法中的 callback 函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。

# filter

filter方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

var new_array = arr.filter(callback[, thisArg])

  • filter 不会改变原数组,返回的是过滤后的新数组;
  • filter 遍历的元素范围在第一次调用callback之前已经确定了,调用filter之后添加的元素不会被遍历。
编辑 (opens new window)
上次更新: 2022/05/17, 21:50:47
原型与原型链
call、apply、bind

← 原型与原型链 call、apply、bind→

最近更新
01
一些有意思的类比
06-16
02
the-super-tiny-compiler解析
06-06
03
计算机编译原理总概
06-06
更多文章>
Theme by Vdoing | Copyright © 2021-2022
蜀ICP备2021023197号-2
Simonzhans | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
  • 飙升榜
  • 新歌榜
  • 云音乐民谣榜
  • 美国Billboard榜
  • UK排行榜周榜