2021-09-08

前端

40 分钟读完 (大约 5966 个字) 0次访问

整理日常开发中数组和对象的操作方法

一、数组

join()

join，就是把数组转换成字符串，然后给他规定个连接字符，默认的是逗号( ，)
书写格式：join(“ “)，括号里面写字符串 (“要加引号”)

var arr = [1,2,3];
console.log(arr.join()); 　　　　// 1,2,3
console.log(arr.join("-")); 　　// 1-2-3
console.log(arr); 　　　　　　　　// [1, 2, 3]（原数组不变）

push() 和 pop()

push(): 把里面的内容添加到数组末尾，并返回修改后的长度。
书写格式：arr.push(“ “)，括号里面写内容 (“字符串要加引号”)
pop()：移除数组最后一项，返回移除的那个值，减少数组的length。
书写格式：arr.pop( )

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); 　　　　　　　　　　// 5
console.log(arr); 　　　　　　　　　　　// ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); 　　　　　　　　　　 // Sean
console.log(arr); 　　　　　　　　　　 // ["Lily", "lucy", "Tom", "Jack"]

shift() 和 unshift()

shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined。
unshift():将参数添加到原数组开头，并返回数组的长度。
书写格式：arr.shift(“ “)，括号里面写内容 (“字符串要加引号”)

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); 　　　　　　　　　　　　　　// 5
console.log(arr); 　　　　　　　　　　　　　　　//["Jack", "Sean", "Lily", "lucy", "Tom"] 
var item = arr.shift();
console.log(item); 　　　　　　　　　　　　　　// Jack
console.log(arr); 　　　　　　　　　　　　　　 // ["Sean", "Lily", "lucy", "Tom"]

sort()

sort()：将数组里的项从小到大排序
书写格式：arr.sort( )

1 2	var arr1 = ["a", "d", "c", "b"]; console.log(arr1.sort()); //["a", "b", "c", "d"]

sort()方法比较的是字符串，没有按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数

function sortNumber(a,b) {
　　return a - b
}
arr = [13, 24, 51, 3]; 
console.log(arr.sort()); 　　　　　       //[13, 24, 3, 51]
console.log(arr.sort(sortNumber));      //[3, 13, 24, 51]

reverse()

reverse()：反转数组项的顺序。
书写格式：arr.reverse( )

1
2
3

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); 　　　　　　　　//[3, 51, 24, 13]
console.log(arr);                        //[3, 51, 24, 13]

concat()

concat()：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。
在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副本。
书写格式：arr.concat()，括号里面写内容 (“字符串要加引号”)

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); 　　　　　　　　　　　　//[1, 3, 5, 7, 9, 11, 13]
console.log(arr);                         //[1, 3, 5, 7]

slice()

slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
书写格式：arr.slice( 1 , 3 )

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); 　　　　　　　　　　　　　　//[1, 3, 5, 7, 9, 11]
console.log(arrCopy); 　　　　　　　　　　　 //[3, 5, 7, 9, 11]
console.log(arrCopy2); 　　　　　　　　　　　//[3, 5, 7]
console.log(arrCopy3); 　　　　　　　　　　　//[3, 5, 7]
console.log(arrCopy4);                   //[5, 7, 9]

arrCopy只设置了一个参数，也就是起始下标为1，所以返回的数组为下标1（包括下标1）开始到数组最后。
arrCopy2设置了两个参数，返回起始下标（包括1）开始到终止下标（不包括4）的子数组。
arrCopy3设置了两个参数，终止下标为负数，当出现负数时，将负数加上数组长度的值（6）来替换该位置的数，因此就是从1开始到4（不包括）的子数组。
arrCopy4中两个参数都是负数，所以都加上数组长度6转换成正数，因此相当于slice(2,5)。

splice()

splice()：删除、插入和替换。
删除：指定2个参数：要删除的第一项的位置和要删除的项数。
书写格式：arr.splice( 1,3 )
插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。
书写格式：arr.splice( 2,0,4,6 )
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个
参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
书写格式：arr.splice( 2,0,4,6 )

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); 　　　　　　　　　　　　　　　//[5, 7, 9, 11]
console.log(arrRemoved); 　　　　　　　　　　 //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); 　　　　　　　　　　　　　　　// [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); 　　　　　　　　　　// []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); 　　　　　　　　　　　　　　　// [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3);                  //[7]

indexOf() 和 lastIndexOf()

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位置 0）开始向后查找。
书写格式：arr.indexof( 5 )
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找。
书写格式：arr.lastIndexOf( 5,4 )

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); 　　　　　　//2
console.log(arr.lastIndexOf(5)); 　　　 //5
console.log(arr.indexOf(5,2)); 　　　　 //2
console.log(arr.lastIndexOf(5,4)); 　　//2
console.log(arr.indexOf("5")); 　　　　 //-1

forEach()

forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。
书写格式：arr.forEach()

let arr = [1,2,5,6,9,4]
arr.forEach((item,index) => {
    console.log(item,index);
})

map()

对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
书写格式：arr.map()

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(item => {
    return item*item;
});
console.log(arr2); 　　　　　　　　//[1, 4, 9, 16, 25]

filter()

“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组
书写格式：arr.filter()

var arr = [{name:'sss',value:45},{name:'ddd',value:70}];
var arr2 = arr.filter(v => {
    return v.value === 70
});
console.log(arr2); 　　　　　　　　//[{name:'ddd',value:70}]

every()

判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true
书写格式：arr.every()

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
    return x < 10;
});
console.log(arr2); 　　　　　　　　//true
var arr3 = arr.every(function(x) {
    return x < 3;
});
console.log(arr3); 　　　　　　　　// false

some()

判断数组中是否存在满足条件的项，只要有任意一项满足条件，就会返回true
书写格式：arr.some()

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
    return x < 3;
});
console.log(arr2); 　　　　　　　　//true
var arr3 = arr.some(function(x) {
    return x < 1;
});
console.log(arr3); 　　　　　　　　// false

二、对象

创建对象并添加成员

字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边都可以认为是字面量。

// 1. 创建空对象后，在添加属性
const obj = {}
obj.uname = 'dengke'
obj.fn = () => {
    console.log('ggg') 
}
console.log(obj) // { uname: 'dengke', fn: ƒ }
// 2. 创建对象并且直接添加属性 (常用)
const obj1 = {
    unam:'dengke',
    fn: () => {
        console.log('ggg') 
    } 
}
console.log(obj1) // { uname: "dengke", fn: ƒ }

扩展运算符（spread）是三个点（…）也可以创建对象（返回一个新对象），注意这是一个浅拷贝

const obj = { name: 'dengke' }
const obj1 = {
    age: 18,
    temp: { 
        a: 10
    } 
}
const obj2 = { ...obj, ...obj1 }
console.log(obj2) // { name: 'dengke', age: 18, temp: { a: 10 } }
obj2.temp.a = 20
console.log(obj2) // { name: 'dengke', age: 18, temp: { a: 20 } }
console.log(obj1) // { name: 'dengke', age: 18, temp: { a: 20 } }

访问对象属性

const obj = {
    info: 'wakaka',
    inner: { 
        a: 10, b: 20
    },
    arr: [1, 2],
    sayHi: (name) => {
        console.log(`hi,${name}`) 
    } 
}
// 用 dot(点 .) 的方式访问
console.log(obj.info) // wakaka
console.log(obj.inner) // {"a":10,"b":20}
console.log(obj.arr) // [1,2]
obj.sayHi('dengke') // hi,dengke
// 用 [] 的方式访问
console.log(obj['info']) // wakaka
console.log(obj['inner']) // {"a":10,"b":20}
console.log(obj['arr']) // [1,2]
obj['sayHi']('dengke') // hi,dengke

如果要访问的对象不存在，可以使用逻辑运算符 || 指定默认值
只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

1	console.log(obj.age \|\| 18) // 18

很多时候，我们想根据这个值是否为空来做接下来的操作，可以使用空值运算符 (??) （es11）
有一个冷门运算符??可以判断undefined和null，这样是比较符合普遍需求的。

1
2
3

const age = 0
const a = age ?? 123
console.log(a) // 0

可选链式操作符（?.）（es11）
这是当对象上没有这个键的时候，不会报错，而是赋值undefined

1
2
3

const foo = { name: "jin" }
let a = foo.name?.toUpperCase() // "JIN"
let b = foo.name?.firstName?.toUpperCase() // "undefined"

删除对象属性

利用关键字 delete

const o = { 
    p: 10, m: 20
}
delete o.p
console.log(o) // { m: 20 }
// 删除对象的属性后，在访问返回 undefined
console.log(o.p) // undefined

作为函数参数

const displayPerson = (person) => {
    console.log(`name: ${person.name || '无名氏'}`)
    console.log(`age: ${person['age'] || 0}`) 
}
displayPerson({ name: 'dengke', age: 18 })
// name: dengke
// age: 18
displayPerson({ })
// name: 无名氏
// age: 0

枚举对象的属性

在JS里面枚举对象属性一共有三种方法：

for in: 会遍历对象中所有的可枚举属性（包括自有属性和继承属性）
Object.keys(): 会返回一个包括所有的可枚举的自有属性的名称组成的数组
Object.getOwnPropertyNames(): 会返回自有属性的名称（不管是不是可枚举的）

for…in 会遍历对象中所有的可枚举属性（包括自有属性和继承属性）

const obj = {
    itemA: 'itemA',
    itemB: 'itemB'
}
// 使用Object.create创建一个原型为obj的对象 （模拟继承来的属性）
var newObj = Object.create(obj)
newObj.newItemA = 'newItemA'
newObj.newItemB = 'newItemB'
for(i in newObj){
    console.log(i)
}
// newItemA
// newItemB
// itemA
// itemB
// 现在我们将其中的一个属性变为不可枚举属性
Object.defineProperty(newObj, 'newItemA', {
    enumerable: false
})
for(i in newObj){
    console.log(i)
}
// newItemB
// itemA
// itemB

如果不想让 for…in 枚举继承来的属性可以借助 Object.prototype.hasOwnProperty()

// 接上例
for(i in newObj){
    if( newObj.hasOwnProperty(i) ) console.log(i)
}
// newItemB

Object.keys() : 会返回一个包括所有的可枚举的自有属性的名称组成的数组
1
2
3
// 接上例
const result = Object.keys(newObj)
console.log(result) // ["newItemB"]

Object.getOwnPropertyNames() 会返回自有属性的名称（不管是不是可枚举的）

1
2
3

// 接上例
const result = Object.keys(newObj)
console.log(result) // ['newItemA','newItemB']

数据类型检测

typeof 常用多用于原始数据类型的判断

const fn = function(n){
    console.log(n)
}
const str = 'string'
const arr = [1,2,3]
const obj = { 
    a:123,
    b:456
}
const num = 1
const b = true
const n = null
const u = undefined
console.log(typeof str) // string
console.log(typeof arr) // object
console.log(typeof obj) // object
console.log(typeof num) // number
console.log(typeof b) // boolean
console.log(typeof n) // object null是一个空的对象
console.log(typeof u) // undefined
console.log(typeof fn) // function

typeof检测的Array和Object的返回类型都是Object，因此用typeof是无法检测出来数组和对象的。

tostring 常用最实用的检测各种类型
我们经常会把这个封装成一个函数，使用起来更加方便

const isTypeOf = (data) => {
    return Object.prototype.toString.call(data).replace(/\[object (\w+)\]/, '$1').toLowerCase()
}
console.log(isTypeOf({})) // object
console.log(isTypeOf([])) // array
console.log(isTypeOf("ss")) // string
console.log(isTypeOf(1)) // number
console.log(isTypeOf(false)) // boolean
console.log(isTypeOf(/w+/)) // regexp
console.log(isTypeOf(null)) // null
console.log(isTypeOf(undefined)) // undefined
console.log(isTypeOf(Symbol("id"))) // symbol
console.log(isTypeOf(() => { })) // function

Object常用的API

Object.assign()
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。常用来合并对象。

const obj1 = { a: 1, b: 2 }
const obj2 = { b: 4, c: 5 }
const obj3 = Object.assign(obj1, obj2)
const obj4 = Object.assign({}, obj1) // 克隆了obj1对象
console.log(obj1) // { a: 1, b: 4, c: 5 } 对同名属性b进行了替换 obj1发生改变是因为obj2赋给了obj1
console.log(obj2) // { b: 4, c: 5 }
console.log(obj3) // { a: 1, b: 4, c: 5 }
console.log(obj4) // { a: 1, b: 4, c: 5 }

语法：Object.assign(target, …sources)
参数： target 目标参数， sources 源对象
返回值：目标对象
注意：如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。
Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。
assign其实是浅拷贝而不是深拷贝
Object.assign 不会在那些 source 对象值为null或undefined的时候抛出错误。

const obj5 = {
    name: 'dengke', a: 10,
    fn: {
        sum: 10
    } 
}
const obj6 = Object.assign(obj1, obj5)
console.log(obj6) // { a: 10, b: 2, name: 'dengke', fn: {…}}
console.log(obj1) // {a: 10, b: 2, name: 'dengke', fn: {…}} 对同名属性a进行了替换

也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。同名属性会替换。

Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

const arr = ['a', 'b', 'c']
console.log(Object.keys(arr)) // ['0', '1', '2']
const obj = { 0: 'a', 1: 'b', 2: 'c' }
console.log(Object.keys(obj)) // ['0', '1', '2']
const obj2 = { 100: 'a', 2: 'b', 7: 'c' }
console.log(Object.keys(obj2)) // ['2', '7', '100']

语法：Object.keys(obj)
参数：obj要返回其枚举自身属性的对象。
返回值：一个表示给定对象的所有可枚举属性的字符串数组。
注意：如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。
Object.assign 在ES5里，如果此方法的参数不是对象（而是一个原始值），那么它会抛出 TypeError。在ES2015中，非对象的参数将被强制转换为一个对象。

1 2	Object.keys("foo") // TypeError: "foo" is not an object (ES5 code) Object.keys("foo") // ["0", "1", "2"] (ES2015 code)

Object.values()

Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。与Object.keys()相似，区别在于这个返回的是数据的值也就是value

const obj1 = { foo: 'bar', baz: 42 }
console.log(Object.values(obj1)) // ['bar', 42]
const obj2 = { 0: 'a', 1: 'b', 2: 'c' }
console.log(Object.values(obj2)) // ['a', 'b', 'c']

语法：Object.values(obj)
参数：obj被返回可枚举属性值的对象。
返回值：一个包含对象自身的所有可枚举属性值的数组。
对象 key 为 number 的话，会从升序枚举返回。

1 2	const obj3 = { 100: 'a', 2: 'b', 7: 'c' } console.log(Object.values(obj3)) // ['b', 'c', 'a']

Object.entries(obj)

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组。可使用 Object.fromEntries() 方法，相当于反转了 Object.entries() 方法返回的数据结构。

const obj1 = {
    name: 'dengke',
    age: 18
};
for (const [key, value] of Object.entries(obj1)) {
    console.log(`${key}: ${value}`);
}
// "name: dengke"
// "age: 18"
const obj2 = { foo: 'bar', baz: 42 }
console.log(Object.entries(obj2)) // [ ['foo', 'bar'], ['baz', 42] ]
const obj3 = { 0: 'a', 1: 'b', 2: 'c' }
console.log(Object.entries(obj3)) // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

语法：Object.entries(obj)
参数：obj可以返回其可枚举属性的键值对的对象。
返回值：给定对象自身可枚举属性的键值对数组。
将 Object 转换为 Map ， new Map() 构造函数接受一个可迭代的 entries 。借助 Object.entries 方法你可以很容易的将 Object 转换为 Map :

1
2
3

const obj = { foo: "bar", baz: 42 }
const map = new Map(Object.entries(obj))
console.log(map) // Map { foo: "bar", baz: 42 }

Object.fromEntries()

Object.fromEntries() 方法把键值对列表转换为一个对象。与 Object.entries() 相反。相当于反转了 Object.entries() 方法返回的数据结构。

const entries = new Map([
    ['foo', 'bar'],
    ['baz', 42]
]);
const obj = Object.fromEntries(entries);
console.log(obj);
// Object { foo: "bar", baz: 42 }

语法：Object.fromEntries(iterable)
参数： iterable 类似 Array 、 Map 或者其它实现了可迭代协议的可迭代对象。
返回值：一个由该迭代对象条目提供对应属性的新对象。
补充：
(1) Map 转化为 Object。通过 Object.fromEntries ，可以将 Map 转换为 Object :

const map = new Map([ ['foo', 'bar'], ['baz', 42] ])
const obj = Object.fromEntries(map)
console.log(obj)
// { foo: "bar", baz: 42 }

(2) Array 转化为 Object。通过 Object.fromEntries ，可以将 Array 转换为 Object :

const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
const obj = Object.fromEntries(arr)
console.log(obj)
// { 0: "a", 1: "b", 2: "c" }

(3) 对象转换。Object.fromEntries 是与 Object.entries() 相反的方法，用数组处理函数可以像下面这样转换对象：

const object1 = { a: 1, b: 2, c: 3 }
const object2 = Object.fromEntries(
    Object.entries(object1).map(([ key, val ]) => [ key, val * 2 ])
)
// Object.entries(object1) >>> [["a",1],["b",2],["c",3]]
console.log(object2) // { a: 2, b: 4, c: 6 }

Object.prototype.hasOwnProperty()

上边枚举对象属性时为了避免 for..in 遍历继承来的属性，给大家补充了可以借助 Object.prototype.hasOwnProperty() 方法进行判断，在这里也具体为大家介绍一下它。hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。

const obj1 = {};
obj1.property1 = 42
console.log(obj1.hasOwnProperty('property1')) // true
console.log(obj1.hasOwnProperty('toString')) // false
console.log(obj1.hasOwnProperty('hasOwnProperty')) // false

语法：obj.hasOwnProperty(prop)
参数： prop 要检测的属性的 String 字符串形式表示的名称，或者 Symbol。
返回值：用来判断某个对象是否含有指定的属性的布尔值 Boolean 。
注意：只会对自身属性进行判断，继承来的一律返回 false。配合 for…in 使用，可以避免其遍历继承来的属性。
即使属性的值是 null 或 undefined ，只要属性存在， hasOwnProperty 依旧会返回 true 。

const o = new Object()
o.prop = 'exists'
console.log(o.hasOwnProperty('prop')) // true
console.log(o.hasOwnProperty('toString')) // false
console.log(o.hasOwnProperty('hasOwnProperty')) // false

const o = new Object();
o.propOne = null
o.propTwo = undefined
console.log(o.hasOwnProperty('propOne')) // true
console.log(o.hasOwnProperty('propTwo')) // true

Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 返回一个数组，该数组对元素是 obj 自身拥有的枚举或不可枚举属性名称字符串。数组中枚举属性的顺序与通过 for...in 循环 Object.keys 迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。

const arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()) // ["0", "1", "2", "length"]
// 类数组对象
const obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()) // ["0", "1", "2"]
// 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
    console.log(val + " -> " + obj[val]);
})
// 0 -> a
// 1 -> b
// 2 -> c
// 不可枚举属性
const my_obj = Object.create({}, {
    getFoo: {
        value: function() { return this.foo; },
        enumerable: false
    }
});
my_obj.foo = 1;
console.log(Object.getOwnPropertyNames(my_obj).sort())
// ["foo", "getFoo"]

语法：obj.getOwnPropertyNames(obj)
参数： obj 一个对象，其自身的可枚举和不可枚举属性的名称被返回。
返回值：在给定对象上找到的自身属性对应的字符串数组。
补充:
(1) Object.getOwnPropertyNames 和 Object.keys 的区别：Object.keys 只适用于可枚举的属性，而 Object.getOwnPropertyNames 返回对象的全部属性名称(包括不可枚举的)。

(function () {
    // 人类的构造函数
    const person = function (name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
        this.sing = () => {
            console.log('sing');
        } 
    }
    // new 一个ladygaga
    const gaga = new person('ladygaga', 26, 'girl')
    // 给嘎嘎发放一个不可枚举的身份证
    Object.defineProperty(gaga, 'id', {
        value: '1234567890',
        enumerable: false
    })
    //查看gaga的个人信息
    const arr = Object.getOwnPropertyNames(gaga)
    console.log(arr) // name, age, sex, sing, id
    // 注意和getOwnPropertyNames的区别，不可枚举的id没有输出
    const arr1 = Object.keys(gaga)
    console.log(arr1) // name, age, sex, sing
})()

(2) 如果你只要获取到可枚举属性，可以用 Object.keys 或用 for...in 循环（ for...in 会获取到原型链上的可枚举属性，可以使用 hasOwnProperty() 方法过滤掉）。
(3) 获取不可枚举的属性，可以使用 Array.prototype.filter() 方法，从所有的属性名数组（使用 Object.getOwnPropertyNames() 方法获得）中去除可枚举的属性（使用 Object.keys() 方法获得），剩余的属性便是不可枚举的属性了：

const target = myObject;
const enum_and_nonenum = Object.getOwnPropertyNames(target);
const enum_only = Object.keys(target);
const nonenum_only = enum_and_nonenum.filter(function(key) {
    const indexInEnum = enum_only.indexOf(key);
    if (indexInEnum == -1) {
        // 没有发现在enum_only健集中意味着这个健是不可枚举的,
        // 因此返回true 以便让它保持在过滤结果中
        return true; 
    } else {
        return false; 
    }
});
console.log(nonenum_only);

注意：在 ES5 中，如果参数不是一个原始对象类型，将抛出一个 TypeError 异常。在 ES2015中，非对象参数被强制转换为对象。

1 2	Object.getOwnPropertyNames('foo') // TypeError: "foo" is not an object (ES5 code) Object.getOwnPropertyNames('foo') // ['length', '0', '1', '2'] (ES2015 code)

Object.freeze()

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。 freeze() 返回和传入的参数相同的对象。

const obj = {
    prop: 42
}
Object.freeze(obj)
obj.prop = 33
console.log(obj.prop)
// 42

语法：obj.freeze(obj)
参数： obj 要被冻结的对象。
返回值：被冻结的对象。
补充:
(1) 被冻结的对象是不可变的。但也不总是这样。下例展示了冻结对象不是常量对象（浅冻结）。

const obj1 = {
    internal: {}
}
Object.freeze(obj1)
obj1.internal.a = 'aValue'
console.log(obj1.internal.a) // 'aValue'

(2) 要使对象不可变，需要递归冻结每个类型为对象的属性（深冻结）。

// 深冻结函数.
function deepFreeze(obj) {
    // 取回定义在obj上的属性名
    const propNames = Object.getOwnPropertyNames(obj)
    // 在冻结自身之前冻结属性
    propNames.forEach(function(name) {
        const prop = obj[name]
        // 如果prop是个对象，冻结它
        if (typeof prop == 'object' && prop !== null) deepFreeze(prop)
    })
    // 冻结自身
    return Object.freeze(obj);
}
const obj2 = {
    internal: {}
}
deepFreeze(obj2)
obj2.internal.a = 'anotherValue'
obj2.internal.a // undefined

Object.isFrozen()

Object.isFrozen() 方法判断一个对象是否被冻结。

// 一个对象默认是可扩展的, 所以它也是非冻结的。
Object.isFrozen({}) // false
// 一个不可扩展的空对象同时也是一个冻结对象。
var vacuouslyFrozen = Object.preventExtensions({})
Object.isFrozen(vacuouslyFrozen) // true
var frozen = { 1: 81 }
Object.isFrozen(frozen) // false
// 使用Object.freeze是冻结一个对象最方便的方法.
Object.freeze(frozen)
Object.isFrozen(frozen) // true

语法：obj.isFrozen(obj)
参数： obj 被检测的对象。
返回值：表示给定对象是否被冻结的Boolean。
注意:
(1) 在 ES5 中，如果参数不是一个对象类型，将抛出一个 TypeError 异常。在 ES2015 中，非对象参数将被视为一个冻结的普通对象，因此会返回 true 。

Object.isFrozen(1) // (ES5 code)
// TypeError: 1 is not an object
Object.isFrozen(1) // (ES2015 code)
// true

转载自：
Array：https://www.cnblogs.com/zyfeng/p/10541133.html
Object：https://juejin.cn/post/6991335772137734152

# JavaScript

整理日常开发中数组和对象的操作方法

一、数组

二、对象

喜欢这篇文章？打赏一下作者吧

链接

分类

标签云

最新文章

归档

标签

最新文章

归档

标签

Your browser is out-of-date!