深入javascript对象语法及应用场景（一）

た入场券 2022-10-13 05:23 136阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  语法
     *  类型
     *  内置对象
     *  可计算属性名
     *  数组
 *  小结

# 前言 #

对象是javascript中的一个重要的概念，甚至有“JavaScript 中万物皆是对象”的说法，可以说对于熟悉javascript而言，精通对象的应用场景至关重要，那么到底什么是对象，对象在哪些地方又有怎样的用途呢，这一系列我将带大家深入javascript对象的语法及应用场景

# 正文 #

## 语法 ##

对象可以通过两种形式定义：声明（文字）形式和构造形式。这个没什么特别的大部分同学应该都知道，举个例子我们简单过一下

// 声明(文字)形式
    var myObj = { 
    	key: value
    	// ...
    };
    // 构造形式
    var myObj = new Object();
    myObj.key = value;

## 类型 ##

对象是 JavaScript 的基础。在 JavaScript 中一共有六种主要类型（术语是“语言类型”）：String, string, number, boolean, null, undefined, object算上ES6中的symbol就是7种，**简单基本类型（string、boolean、number、null 和 undefined）本身并不是对象。null 有时会被当作一种对象类型，但是这其实只是语言本身的一个 bug，即对 null 执行typeof null 时会返回字符串 “object”。1 实际上，null 本身是基本类型。**

所以，有一种常见的错误说法是“JavaScript 中万物皆是对象”，这显然是错误的。简单基本类型并不是对象

## 内置对象 ##

JavaScript 中还有一些对象子类型，通常被称为内置对象。有些内置对象的名字看起来和简单基础类型一样，不过实际上它们的关系更复杂： String, Number, Boolean, Object, Function, Array, Date, RegExp, Error。在 JavaScript 中，它们实际上只是一些内置函数。这些内置函数可以当作构造函数来使用，从而可以构造一个对应子类型的新对象。  
      原始值 “I am a string” 并不是一个对象，它只是一个字面量，并且是一个不可变的值。如果要在这个字面量上执行一些操作，比如获取长度、访问其中某个字符等，那需要将其转换为 String 对象。**在必要时语言会自动把字符串字面量转换成一个 String 对象，也就是说你并不需要显式创建一个对象，这也是为什么虽然是基本类型但是我们可以调用对应对象原型里的方法的原因**

var strPrimitive = "I am a string";
    console.log( strPrimitive.length ); // 13
    console.log( strPrimitive.charAt( 3 ) ); // "m"

## 可计算属性名 ##

ES6 增加了可计算属性名，可以在文字形式中使用 \[\] 包裹一个表达式来当作属性名

var prefix = "foo";
    var myObject = { 
    	[prefix + "bar"]:"hello",
    	[prefix + "baz"]: "world"
    };
    myObject["foobar"]; // hello
    myObject["foobaz"]; // world

可计算属性名最常用的场景可能是 ES6 的符号（Symbol），它们是一种新的基础数据类型，包含一个不透明且无法预测的值（从技术角度来说就是一个字符串）。一般来说你不会用到符号的实际值（因为理论上来说在不同的 JavaScript 引擎中值是不同的），所以通常你接触到的是符号的名称，比如 Symbol.Something

var myObject = { 
    	[Symbol.Something]: "hello world"
    }

## 数组 ##

数组也是一个特殊的对象，我们知道数组的属性是数字，有一个很有意思的点我觉得需要提一下，数组的length只与其中是数字的属性相关，也就是增加一个字符串的属性名，是不会影响length的，但是如果你试图向数组添加一个属性，但是属性名“看起来”像一个数字，那它会变成一个数值下标（因此会修改数组的内容而不是添加一个属性）

var myArray = [ "foo", 42, "bar" ];
    myArray["3"] = "baz";
    myArray.length; // 4
    myArray[3]; // "baz"

# 小结 #

这一章我们介绍了对象的基础知识，也知道了“js中并不是万物都是对象", 下一章我们将继续这一章节的内容，讲一些和对象有关的进阶知识  
      小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
      每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/2b36f09708704675b04bc599035bf52b.png