【前端｜Javascript第5篇】全网最详细的JS的内置对象文章！1-阿里云开发者社区

前言

在当今数字时代，前端技术正日益成为塑造用户体验的关键。我们在开发中需要用到很多js的内置对象的一些属性来帮助我们更快速的进行开发。或许你是刚踏入前端领域的小白，或者是希望深入了解内置对象的开发者，不论你的经验如何，本篇博客都将给你详细的讲解js的内置对象。

🚀 作者简介：程序员小豪，全栈工程师，热爱编程，曾就职于蔚来，现就职于某互联网大厂，技术栈：Vue、React、Python、Java

🎈 本文收录于小豪的前端系列专栏，后续还会更新前端入门以及前端面试的一些相关文章，手把手带你从零学习前端到面试找工作，并如果有想进入前端领域工作的同学，这个前端专栏会对你有所帮助，欢迎关注起来呀

🌼 本人也会持续的去关注AIGC以及人工智能领域的一些动向并总结到博客中，大家感兴趣的可以关注一下我的人工智能专栏

🌊 云原生的入门学习系列，大家有兴趣的可以看一看

本文目录

全局对象

值属性

Infinity

说明

示例

NaN

说明

示例

值校验

undefined

说明

函数属性

eval

语法

说明

示例

isNaN

语法

说明

示例

parseFloat

语法

示例

parseInt

语法

示例

decodeURI

语法

示例

encodeURI

语法

说明

示例

Object

语法

Object.assign

语法

描述

示例

基本示例

Object.create

语法

示例

类式继承

Object.defineProperties

语法

示例

Object.defineProperty

语法

示例

对象属性劫持

Object.entries

语法

方法说明

代码示例

Object.entries

语法

方法说明

代码示例

Object.getOwnPropertyDescriptor

语法

示例

Object.getOwnPropertyDescriptors

语法

代码示例

Object.getPrototypeOf

语法

示例

基本示例

标准内置对象

Object.is

语法

描述

示例

Object.keys

语法

描述

示例

数组

类数组

不可枚举属性

Object.setPrototypeOf

语法

示例

代码实现

Object.values

语法

方法说明

代码示例

Object.prototype.hasOwnProperty

语法

描述

示例

基本示例

自有属性与继承属性

Object.prototype.isPrototypeOf

语法

示例

Object.prototype.prototypeIsEnumerable

语法

示例

基本示例

自有属性与继承属性

Object.prototype.toString

语法

描述

示例

基本示例

检测对象类型

Object.isExtensible

语法

描述

示例

Function

语法

Function.prototype.apply

语法

描述

示例

数组元素添加

内置函数使用

Function.prototype.call

语法

示例

Function.prototype.bind

语法

描述

示例

创建绑定函数

偏函数

配合定时器

String

语法

说明

模板字面量

String.fromCharCode

语法

使用示例

String.prototype.charAt()

语法

说明

示例

String.prototype.charCodeAt()

语法

说明

示例

String.prototype.concat()

语法

说明

示例

String.prototype.endsWith()

语法

说明

示例

String.prototype.includes()

语法

示例

String.prototype.indexOf()

语法

示例

区分大小写

统计字符串中字母数量

检测字符是否存在

String.prototype.match()

语法

说明

示例

全局模式和不区分大小写模式

不传参数

判断是否是微信浏览器

String.prototype.replace()

语法

描述

示例

代码示例

String.prototype.slice()

语法

描述

示例

代码示例

String.prototype.split()

语法

描述

示例

代码示例

String.prototype.toLowerCase()

语法

描述

示例

String.prototype.toUpperCase()

语法

描述

示例

Array 对象

语法

Array.from()

语法

方法说明

代码示例

基本用法

Array.isArray()

语法

代码示例

Array.prototype.concat()

语法

方法说明

代码示例

连接两个数组

Array.prototype.indexOf()

语法

方法说明

代码示例

基本用法

Array.prototype.join()

语法

方法说明

代码示例

基本用法

Array.prototype.flat()

语法

代码示例

基本用法

Array.prototype.every()

语法

方法说明

代码示例

Array.prototype.filter()

语法

方法说明

代码示例

基本用法

Array.prototype.find()

语法

代码示例

用对象的属性查找数组里的对象

Array.prototype.findIndex()

语法

代码示例

基本用法

Array.prototype.forEach()

语法

方法说明

代码示例

Array.prototype.map()

语法

方法说明

代码示例

Array.prototype.push()

语法

方法说明

代码示例

基本用法

Array.prototype.pop()

语法

方法说明

代码示例

基本用法

Array.prototype.sort()

语法

方法说明

代码示例

基本用法

总结

全局对象

值属性

Infinity

全局属性 Infinity 是一个数值，表示无穷大。

Infinity 属性的属性特性

屏幕截图 2023-12-28 180107.png

说明

Infinity 是全局对象的一个属性，即它是一个全局变量。
Infinity 的初始值是 Number.POSITIVE_INFINITY。

Infinity 大于任何值。该值和数学意义上的无穷大很像，例如任何正值乘以 Infinity 为 Infinity ，任何数值（除了 Infinity和 -Infinity ）除以 Infinity 为 0。

示例

🌰 代码示例：

console.log(Infinity);
// Infinity
console.log(Infinity + 1);
// Infinity
console.log(Math.pow(10, 1000));
// Infinity
console.log(Math.log(0));
// Infinity
console.log(1 / Infinity);
// 0

NaN

全局属性 NaN 的值表示不是一个数字（Not-A-Number）。

屏幕截图 2023-12-28 180259.png

说明

NaN 是一个全局对象的属性。
NaN 属性的初始值就是 NaN，和 Number.NaN 的值一样。
编码中很少直接使用到 NaN。通常都是在计算失败时，作为 Math 的某个方法的返回值出现的（例如：Math.sqrt(-1)）或者尝试将一个字符串解析成数字但失败了的时候（例如：parseInt('blabla')）。

返回 NaN 的情况总结：

无穷大除以无穷大
给任意负数做开放运算
算术运算符与不是数字或无法转换为数字的操作数一起使用

字符串解析为数字

示例

值校验

不可使用等号运算符来判断一个值是否为 NaN。必须采用 Number.isNaN() 或 isNaN()函数进行判断。

在执行自比较中，NaN 是唯一与自身不全等的值。

NaN === NaN;
//  false
Number.NaN === NaN;
// false
isNaN(NaN);
// true;
isNaN(Number.NaN);
// true;
function valueIsNaN(v) {
  return v !== v;
}
valueIsNaN(1);
// false
valueIsNaN(NaN);
// true
valueIsNaN(Number.NaN);
// true

使用 isNaN() 前先检查一下这个值是否是数字类型，即可避免隐式类型转换的问题。

function detectIsNaN(value) {
  return typeof value === 'number' && isNaN(value);
}

undefined

undefined 属性是一个特殊值。如果已声明了一个变量但还未进行初始化，则其值为 undefined。

该属性为 Global 对象的一个只读属性(准确地说，是一个常量)。所有主流浏览器均支持该属性。

说明

如果一个变量未被初始化赋值，则其值为 undefined。如果一个函数没有返回值，则其返回值默认为 undefined。

函数属性

eval

eval() 函数用于计算并执行以字符串表示的 JavaScript 代码。eval() 函数使 JavaScript 可以动态执行 JavaScript 源代码。

eval() 函数属于 Global 对象，所有主流浏览器均支持该函数。

语法

eval(code);

屏幕截图 2023-12-28 180455.png

⚠️ 注意：参数code必须是原始字符串，不能是 String 对象形式。如果参数 code 不是原始字符串，则 eval() 函数不会执行代码，并且将其不作任何改变地返回。

如果参数 code 中的 JavaScript 代码不合法，将会引发异常。

eval() 函数的返回值是任意类型，其返回值由参数 code 中具体的 JavaScript 代码决定。

说明

传递给 eval() 函数的代码执行时所在的上下文和调用 eval() 函数时的上下文一样（也就是说，作用域不变）。
请自行确认 code 代码的来源是可信的，否则使用 eval() 函数存在一定的安全隐患。

示例

let x = 2,
  y = 39,
  z = '42';
eval('x + y + 1');
// 42
eval(z);
// 42

isNaN

isNaN() 函数用于判断指定数字是否是非数字值 NaN。

该函数属于Global对象，所有主流浏览器均支持该函数。

语法

isNaN(number);

屏幕截图 2023-12-28 180546.png

⚠️ 注意：如果参数 number 不是 Number 类型，则 isNaN() 函数会将其强制转换为 Number 类型再进行判断。大多数其他类型的值无法强制转换为 Number 类型，则其转换结果为 NaN，即 isNaN() 函数返回 true。

isNaN()

函数的返回值是 Boolean 类型。

如果指定的数字为 NaN，则返回 true
如果指定的数字为非 NaN 则返回 false。

说明

通常使用此函数检测来自 parseInt() 和 parseFloat() 函数的返回值。
将某些不能强制转换为数字类型的值的非数字类型的值转换为数字类型的值时，也会得到 NaN。
NaN 不能通过相等操作符来判断，因为 NaN 是唯一一个与其自身不等的值。

示例

isNaN(NaN);
// true
isNaN(undefined);
// true
isNaN({});
// true
isNaN(true);
// false
isNaN(null);
// false
isNaN(37);
// false
// strings
isNaN('37');
// false: 可以被转换成数值37
isNaN('37.37');
// false: 可以被转换成数值37.37
isNaN('');
// false: 空字符串被转换成0
isNaN(' ');
// false: 包含空格的字符串被转换成0
// dates
isNaN(new Date());
// false
isNaN(new Date().toString());
// true
isNaN('blabla');
// true: "blabla"不能转换成数值

parseFloat

parseFloat()函数用于将字符串转换为浮点数并返回。

该函数属于 Global 对象，所有主流浏览器均支持该函数。

语法

parseFloat(numberString);

屏幕截图 2023-12-28 180649.png

返回转换后的浮点数，

number

类型，

如果指定的字符串中包含非数字字符，只要字符串开头的一部分符合浮点数规则，则 parseFloat() 函数会将这一部分字符串转化为数字（从字符串开头，直到遇到非数字字符为止）。
如果字符串以非数字字符开头，则返回 NaN。

示例

返回正常数字

parseFloat('3.14');
parseFloat('314e-2');
parseFloat('0.0314E+2');
parseFloat('3.14more non-digit characters');
// all return 3.14

返回 NaN

parseFloat('MDN');
// NaN
parseFloat(null);
// NaN
parseFloat([]);
// NaN
parseFloat({});
// NaN

parseInt

parseInt() 函数用于 将字符串转换为整数并返回。该函数可以将字符串视作指定的进制形式表示。

该函数属于 Global 对象，所有主流浏览器均支持该函数。

语法

parseInt( numString [, radix ] )

屏幕截图 2023-12-28 180803.png

例如：参数 radix 为 2，则将 numString 视作二进制；参数 radix 为 8，则视作八进制；参数 radix 为 16，则视作十六进制。

如果没有提供 radix 参数，则 parseInt() 函数将会根据参数 numString 的前缀来决定转换的进制基数。如果 numString 的前缀是 0x，则转换为十六进制；如果前缀是 0，则转换为八进制；其他情况均转换为十进制。

parseInt()函数的返回值为 Number 类型，返回转换后的整数

如果指定的字符串中包含非数字字符，只要字符串开头的一部分符合整数的转换规则，则 parseInt() 函数会将这一部分字符串转化为整数（从字符串开头，直到遇到非数字字符为止）。
如果字符串以非数字字符开头，则返回 NaN。

示例

正常使用 parseInt()，以下均返回 15

// Binary
parseInt('1111', 2);
// Octal
parseInt('17', 8);
parseInt(021, 8);
// Decimal
parseInt('015', 10);
parseInt(15.99, 10);
parseInt('15,123', 10);
parseInt('15 * 3', 10);
parseInt('15e2', 10);
parseInt('15px', 10);
parseInt('12', 13);
// Hexadecimal
parseInt('0xF', 16);
parseInt('F', 16);
parseInt('FXX123', 16);

以下均返回 NaN

parseInt('Hello', 8);
// not a number
parseInt('546', 2);
// except 0 & 1,other number are not valid binary numbers

decodeURI

decodeURI() 函数用于对已编码的统一资源标识符(URI)进行解码，并返回其非编码形式。

该函数属于 Global 对象，所有主流浏览器均支持该函数。

语法

decodeURI(encodedURIString);

屏幕截图 2023-12-28 181022.png

decodeURI() 函数的返回值是 string 类型，返回一个已经解码的 URI。

将已编码 URI 中所有能识别的转义序列转换成原字符，但不能解码那些不会被 encodeURI 编码的内容（例如 #）。

示例

let a = 'Hello JavaScript!';
let b = encodeURI(a);
console.log(b);
// return '%E4%BD%A0%E5%A5%BDJavascript!'
let c = decodeURI(b);
// return '你好Javascript!'

encodeURI

encodeURI() 函数可把 URI 字符串采用 UTF-8 编码格式转化成 escape 格式的字符串。

该函数属于 Global 对象，所有主流浏览器均支持该函数。

语法

encodeURI(URIString);

屏幕截图 2023-12-28 181104.png

该方法返回一个已经编码的 URI 字符串。

说明

如果要对使用 encodeURI() 函数编码的 URI 字符串进行解码，请使用 decodeURI() 函数。

encodeURI() 函数不编码字符有 82 个 !、#、$、'、(、)、*、+、,、-、.、/、:、;、=、?、@、_、~、0-9、a-z、A-Z 。

如果你只是想编码一个带有特殊字符（比如中文）的 URI，这个 URI 用作请求地址，请使用本函数。

如果你想把 URI 当作请求参数传递，那么你可以使用 encodeURIComponent() 函数。encodeURIComponent() 函数会编码所有的字符。

示例

// 原URI
var ftpUri = 'ftp://192.168.0.100/共享文件夹';
// 编码URI
var encodedFtpUri = encodeURI(ftpUri);
console.log(encodedFtpUri); // ftp://192.168.0.100/%E5%85%B1%E4%BA%AB%E6%96%87%E4%BB%B6%E5%A4%B9
// 解码URI
var decodedFtpUri = decodeURI(encodedFtpUri);
console.log(decodedFtpUri); // ftp://192.168.0.100/共享文件夹

Object

JavaScript 中的 Object 对象，是 JavaScript 中所有对象的基类，也就是说 JavaScript 中的所有对象都是由 Object 对象衍生的。Object 对象主要用于将任意数据封装成对象形式。

对象也可看做是属性的无序集合，每个属性都是一个名值对。属性名是字符串，因此我们可以把对象看成是从字符串到值的映射。

语法

构造函数

new Object([value]);

对象类型转换函数

Object([value]);

屏幕截图 2023-12-28 181215.png

Object.assign

Object.assign() 方法用于将所有可枚举自有 Property 的值从一个或多个源对象拷贝到目标对象。

语法

Object.assign(target, ...sources);

屏幕截图 2023-12-28 181225.png

返回目标对象。

描述

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

该方法使用源对象的 [[Get]] 和目标对象的 [[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含 getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用 Object.getOwnPropertyDescriptor和 Object.defineProperty 。

示例

基本示例

const a = { a: 1 };
const b = Object.assign({}, a);
console.log(b); // { a: 1 }

Object.create

Object.create() 方法用于创建指定对象为原型对象的新对象。

语法

语法：

Object.create(o: object | null): any;
Object.create(o: object | null, properties: PropertyDescriptorMap & ThisType<any>): any;

类型声明拓展：

interface PropertyDescriptor {
  configurable?: boolean;
  enumerable?: boolean;
  value?: any;
  writable?: boolean;
  get?(): any;
  set?(v: any): void;
}
interface PropertyDescriptorMap {
  [s: string]: PropertyDescriptor;
}
interface ThisType<T> {}

参数说明：屏幕截图 2023-12-28 181403.png

⚠️ 注意：

如果 properties 参数不是 null 或对象，则抛出一个 TypeError 异常
返回指定原型对象和可枚举属性的新对象

示例

类式继承

// Shape = Super Class
function Shape() {
  this.x = 0;
  this.y = 0;
}
// Super Class Methods
Shape.prototype.move = function () {
  this.x += x;
  this.y += y;
  console.log('Shap moved');
};
// Retangle - Sub Class
function Retangle() {
  Shape.all(this); // call super constructor
}
// 子类继承父类
Retangle.prototype = Object.create(Shape.prototype);
Retangle.prototype.constructor = Retangle;
const rect = new Retangle();
console.log(rect instanceof Retangle);
// true
console.log(rect instanceof Shape);
// true

Object.defineProperties

Object.defineProperties() 方法用于为一个对象定义 Properties 和/或修改已有的 Properties 的 Attributes。

语法

Object.defineProperties(O, Properties);

屏幕截图 2023-12-28 181512.png

返回变更后的对象。

示例

const abc = { a: 1, b: 2, c: 3 };
Object.defineProperties(abc, {
  a: {
    value: 'One',
    writable: false,
    enumerable: false,
    configurable: false,
  },
  e: {
    value: 4,
  },
  f: {
    value: 5,
  },
});
console.log(abc);
// {
// b: "Two",
// c: 3,
// a: "One",
// d: "Three",
// e: 4,
// f: 5,
// }
abc.a = 10;
console.log(abc.a);
// 'One'

Object.defineProperty

Object.defineProperty() 方法用于为一个对象定义一个自有 Property 和/或修改已有 Property 的 Attributes。

语法

Object.defineProperty(O, P, Attributes);

屏幕截图 2023-12-28 181559.png

返回变更后的对象。

示例

const foo = {};
Object.defineProperty(foo, 'a', {
    value: 100,
    writable: true,
    enumerable: true,
    configurable: true
})
console.log(foo);
// { a: 100 }
const bar;
// 添加属性和存取描述符
Object.defineProperty(foo, 'b', {
    get: function(){
        return foo
    },
    set: function(newValue){
        bar = newValue
    },
    enumerable: true,
    configurable: true,
})
foo.b = 99;
console.log(foo.b);
// 99

对象属性劫持

遍历劫持对象的所有属性

const data = {
  a: 'a',
  b: 'b',
  c: 'c'
};
// 遍历对象，对其属性值进行劫持
Object.keys(data).forEach(function(key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log('GET')
    },
    set: function(value) {
      // 当属性值发生变化时我们可以进行额外操作
      console.log('SET')
    }
  })
})

Object.entries

⭐️ ES2017(ES8)新特性

Object.entries() 方法用于枚举指定对象并返回以键值对组成的数组为元素的二维数组。

语法

语法：

Object.entries(obj);

类型声明：

interface ObjectConstructor {
  values<T>(o: { [s: string]: T } | ArrayLike<T>): T[];
  values(o: {}): any[];
}

参数说明：

返回值：

返回给定对象自身可枚举 Property 的键值对数组。

方法说明

给定对象自身可枚举属性的键值对数组，其排列与使用 for-in循环遍历该对象时返回的顺序一致，区别在于 for-in 循环也枚举原型链中的属性。

代码示例

const a = { foo: 1, bar: 2 };
Object.entries(a);
// [['foo', 1], ['bar', 2]]
Object.entries('foo');
// [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`);
  // "a 5", "b 7", "c 9"
}
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Object.entries

⭐️ ES2017(ES8)新特性

Object.entries() 方法用于枚举指定对象并返回以键值对组成的数组为元素的二维数组。

语法

语法：

Object.entries(obj);

类型声明：

interface ObjectConstructor {
  values<T>(o: { [s: string]: T } | ArrayLike<T>): T[];
  values(o: {}): any[];
}

参数说明：

返回值：

返回给定对象自身可枚举 Property 的键值对数组。

方法说明

给定对象自身可枚举属性的键值对数组，其排列与使用 for-in循环遍历该对象时返回的顺序一致，区别在于 for-in 循环也枚举原型链中的属性。

代码示例

const a = { foo: 1, bar: 2 };
Object.entries(a);
// [['foo', 1], ['bar', 2]]
Object.entries('foo');
// [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`);
  // "a 5", "b 7", "c 9"
}
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor() 方法可以获取对象自有 Property 的某个 Attributes。

语法

Object.getOwnPropertyDescriptor(O, Property);

示例

const foo = { a: 1 };
Object.getOwnPropertyDescriptor(foo, 'a');
// Object {
//  value: "a",
//  writable: true,
//  enumerable: true,
//  configurable: true,
// }

Object.getOwnPropertyDescriptors

⭐️ ES2017(ES8)新特性

Object.getOwnPropertyDescriptors() 方法用于获取一个对象的所有自身 Property 的 Attributes。

语法

Object.getOwnPropertyDescriptors(obj);

类型声明：

interface ObjectConstructor {
  getOwnPropertyDescriptors<T>(
    o: T
  ): { [P in keyof T]: TypedPropertyDescriptor<T[P]> } & { [x: string]: PropertyDescriptor };
}
interface TypedPropertyDescriptor<T> {
  enumerable?: boolean;
  configurable?: boolean;
  writable?: boolean;
  value?: T;
  get?: () => T;
  set?: (value: T) => void;
}
interface PropertyDescriptor {
  configurable?: boolean;
  enumerable?: boolean;
  value?: any;
  writable?: boolean;
  get?(): any;
  set?(v: any): void;
}

参数说明：

代码示例

const a = {
  name: 'Ben',
  get age() {
    return '18';
  },
};
Object.getOwnPropertyDescriptors(a);

Object.getPrototypeOf

Object.getPrototypeOf() 方法用于获取指定对象的原型（内部 [[Prototype]] 属性的值）。

语法

Object.getPrototypeOf(O);

返回目标对象的原型对象。

示例

基本示例

const proto = {};
const foo = Object.create(proto);
Object.getPrototypeOf(foo) === proto;
// true
const reg = /a/;
Object.getPrototypeOf(reg) === Regexp.prototype;
// true

标准内置对象

const foo = new Object();
Object.getPropertyOf(Object);
// f () { [native code] }
Object.getPropertyOf(Function);
// f () { [native code] }
Object.getPropertyOf(Object) === Function.prototype;
// true
const bar = new Object();
Object.prototype === Object.getPrototypeOf(bar);
// true
Obejct.prototype === Object.getPrototypeOf({});
// true

Object.is

Object.is() 方法用于判断两个值是否是相同的值。

语法

Object.is(value1, value2);

返回判断表达式的结果。

描述

判断下列任何一项成立，则两个值相同：

两个值均为 undefined
两个值均为 null
两个值都是 true 或 false
两个值是由相同个数的字符按照相同顺序组成的字符串
两个值指向同一个对象
两个值都是数字并且

都是正零 +0
都是负零 -0
都是 NaN
都是除零和 NaN 外的其他同一个数字

这种相等性判断逻辑和传统的 == 运算不同，== 运算符会对它两边的操作数做隐式类型转换，然后才进行相等性比较，（所以才会有类似 "" == false 等于 true 的现象），但 Object.is 不会做这种类型转换。

这与 === 运算符的判定方式也不一样。=== 运算符（和 == 运算符）将数字值 -0 和 +0 视为相等，并认为 Number.NaN 不等于 NaN。

示例

Object.is(undefined, undefined);
// true
Object.is(null, null);
// true
Object.is(true, true);
// true
Object.is(100, 100);
// true
Object.is('foo', 'bar');
// false
Object.is([], []);
// false
Object.is(0, -0);
// false
Object.is(-0, -0);
// true
Object.is(NaN, 0 / 0);
// true

Object.keys

Object.keys() 方法用于获取指定对象自身可枚举 Property 组成的键名数组。

语法

Object.keys(O);

返回对象所有可枚举 Property 的键名组成的数组。

描述

获取到的数组中键名顺序与使用 for 系列循环语句获取到的键名顺序一致。

示例

数组

const foo = ['a', 'b', 'c'];
console.log(Object.keys(foo));
// console: ['0', '1', '2']

类数组

const foo = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(foo));
// console: ['0', '1', '2']

不可枚举属性

// getBar is a property which isn't enumerable
const foo = Object.create(
  {},
  {
    getBar: {
      value: function() {
        return this.bar;
      },
    },
  }
);
foo.bar = 1;
console.log(Object.keys(foo));
// ['bar']

Object.setPrototypeOf

Object.setPrototypeOf() 方法用于设置一个指定的对象的原型 ( 即，内部 [[Prototype]] 属性）到另一个对象或 null。

语法

Object.setPrototypeOf(O, proto);

返回设置原型后的对象。

示例

const foo = Object.setPrototypeOf({}, null);

代码实现

if (!Object.setPrototypeOf) {
  Object.setPrototypeOf = function() {};
}

Object.values

⭐️ ES2017(ES8)新特性

Object.values() 方法用于指定对象自身的所有可枚举 Property 值的数组。

语法

Object.values(obj);

类型声明：

interface ObjectConstructor {
  values<T>(o: { [s: string]: T } | ArrayLike<T>): T[];
  values(o: {}): any[];
}

参数说明：

返回对象可枚举 Property 值的数组集合。

方法说明

返回的数组中键值的顺序与使用循环语句获取的键值组合一致。

代码示例

const obj = {
  a: '1',
  b: '2',
  c: '3',
};
console.log(Object.values(obj));
// ['1', '2', '3']

Object.prototype.hasOwnProperty

Object.prototype.hasOwnProperty 方法用于检测指定对象自有 Properties 中是否具有指定的 Property。

语法

O.prototype.hasOwnProperty(V);

返回该对象是否含有指定 Property 的 Boolean 值。

描述

所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。

这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。

示例

基本示例

const foo = new Object();
foo.a = 'exist';
function change() {
  foo.b = foo.a;
  delete foo.a;
}
foo.hasOwnProperty('a');
// true
change();
foo.hasOwnProperty('b');
// false

自有属性与继承属性

const foo = new Object();
foo.a = 'Hello world!';
foo.hasOwnProperty('a');
// true
foo.hasOwnProperty('toString');
// false
foo.hasOwnProperty('hasOwnProperty');
// false

Object.prototype.isPrototypeOf

Object.prototype.isPrototypeOf() 方法用于测试指定对象是否存在于目标对象的原型链上。

语法

O.prototype.isPrototypeOf(V);

返回指定对象是否位于目标对象原型链上的 Boolean 类型值。

示例

function Foo() {}
function Bar() {}
function Baz() {}
Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);
const baz = new Baz();
console.log(Baz.prototype.isPrototypeOf(baz));
// true
console.log(Bar.prototype.isPrototypeOf(baz));
// true
console.log(Foo.prototype.isPrototypeOf(baz));
// true
console.log(Object.prototype.isPrototypeOf(baz));
// true

Object.prototype.prototypeIsEnumerable

Object.prototype.prototypeIsEnumerable() 方法用于检测指定 Property 是否可枚举。

语法

O.prototype.prototypeIsEnumerable(V);

返回表示指定 Property 键名是否可枚举的 Boolean 类型值。

示例

基本示例

const foo = {};
const bar = [];
foo.a = 'is enumerable';
bar[0] = 'is enumerable';
foo.propertyIsEnumerable('a');
// true
bar.propertyIsEnumerable(0);
// true

自有属性与继承属性

原型链上的 Properties 不被 propertyIsEnumerable 考虑。

const a = [];
a.propertyIsEnumerable('constructor');
function b() {
  this.property = 'b';
}
b.prototype.firstMethod = function() {};
function c() {
  this.method = function method() {
    return 'c';
  };
}
c.prototype = new b();
c.prototype.constructor = c;
const d = new c();
d.arbitraryProperty = 'd';
d.prototypeIsEnumerable('arbitraryProperty');
// true
d.prototypeIsEnumerable('method');
// true
d.prototypeIsEnumerable('property');
// false
d.property = 'd';
d.prototypeIsEnumerable('property');
// true

Object.prototype.toString

Object.prototype.toString() 方法用于表示指定对象的字符串。

语法

O.prototype.toString();

表示该对象的字符串。

描述

所有经过标准内置对象创建的值均能通过 toString() 方法获取 String 类型值。

示例

基本示例

const foo = new Object();
foo.toString();
// [object Object]

检测对象类型

需要使用 Function.prototype.call() 和 Function.prototype.apply() 的形式调用，输入需要检测的对象作为第一参数。

const toString = Object.prototype.toString();
toString.call(new Date());
// [object Date]
toString.call(new String());
// [object String]
toString.call(Math);
// [object Math]
// Since JavaScript 1.8.5
toString.call(undefined);
// [object Undefined]
toString.call(null);
// [object Null]

Object.isExtensible

Object.isExtensible() 方法用于检测指定对象是否可扩展。

语法

Object.isExtensible(O);

返回 Boolean 类型的值表示用于检测的对象是否可扩展。

描述

默认情况下，对象是可扩展的：即可以为他们添加新的属性。

Object.preventExtensions、Object.seal或 Object.freeze方法都可以标记一个对象为不可扩展（non-extensible）。

示例

let foo = {
  a: 1,
};
console.log(Object.isExtensible(foo));
// true
foo.b = 2;
console.log(foo);
// {a: 1, b: 2}
console.log(Object.preventExtensions(foo));
// { a: 1, b: 2}
// 由于对象 foo 禁止扩展，所以该赋值语句静默失败
foo.c = 3;
console.log(Object.isExtensible(foo));
// false
console.log(foo);
// { a: 1, b: 2}

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【前端｜Javascript第5篇】全网最详细的JS的内置对象文章！1

本文目录

全局对象

值属性

Infinity

说明

示例

NaN

说明

示例

undefined

说明

函数属性

eval

语法

说明

示例

isNaN

语法

说明

示例

parseFloat

语法

示例

parseInt

语法

示例

decodeURI

语法

示例

encodeURI

语法

说明

示例

Object

语法

Object.assign

语法

描述

示例

Object.create

语法

示例

类式继承

Object.defineProperties

语法

示例

Object.defineProperty

语法

示例

对象属性劫持

Object.entries

语法

方法说明

代码示例

Object.entries

语法

方法说明

代码示例

Object.getOwnPropertyDescriptor

语法

示例

Object.getOwnPropertyDescriptors

语法

代码示例

Object.getPrototypeOf