2022-09-26 日常问题

2022-09-26 日常问题

5 种遍历对象的方式

for in

for in 循环是最基础的遍历对象方式, 它还会得到对象原型链上的属性:

// 创建一个对象并指定其原型, bar 为原型上属性
const obj = Object.create({
    bar: 'bar'
})

// foo 为对象自身属性
obj.foo = 'foo'

for (let key in obj) {
    console.log(obj[key])
}

// foo, bar

可以看到对象原型上属性也被循环出来了。
在这种情况下可以使用对象的 hasOwnProperty() 方法过滤掉原型链上的属性:

for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(obj[key])
        // foo
    }
}

这时候原型上的 bar 属性就被过滤掉了。

Object.keys

Object.keys() 是 ES5 新增的一个对象方法, 该方法返回对象自身属性名组成的数组, 它会自动过滤掉原型链上的属性, 然后可以通过数组的 forEach() 方法来遍历:

Object.keys(obj).forEach((key) => {
    console.log(obj[key])
    // foo
})

还有 Object.values() 方法和 Object.entries() 方法, 这两方法作用和 Object.keys() 方法类似。

for in 循环和 Object.keys() 方法都不会返回对象不可枚举属性。

如需要遍历不可枚举属性, 就要用到 Object.getOwnPropertyNames() 方法。

Object.getOwnPropertyNames

Object.getOwnPropertyNames() 是 ES5 新增的一个对象方法, 该方法返回对象自身属性名组成的数组, 包括不可枚举属性, 也可以通过数组的 forEach 方法来遍历:

// 创建一个对象并指定其原型, bar 为原型上属性
// baz 为对象自身的属性并且不可枚举
const obj = Object.create({
    bar: 'bar'
}, {
    baz: {
        value: 'baz',
        enumerable: false
    }
})

obj.foo = 'foo'

// 不包括不可枚举的 baz 属性

Object.keys(obj).forEach((key) => {
    console.log(obj[key])
    // foo
})

// 包括不可枚举的 baz 属性

Object.getOwnPropertyNames(obj).forEach((key) => {
    console.log(obj[key])
    // baz, foo 
})

ES2015 新增了 Symbol 数据类型, 该类型可以作为对象的键, 针对该类型 ES2015 同样新增 Object.getOwnPropertySymbols() 方法。

Object.getOwnPropertySymbols

Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组, 不包括字符串属性:

Object.getOwnPropertySymbols(obj).forEach((key) => {
    console.log(obj[key])
})

什么都没有, 因为该对象还没有 Symbol 属性。

// 给对象添加一个不可枚举的 Symbol 属性

Object.defineProperties(obj, {[Symbol('baz')]: {value: 'Symbol baz', enumerable: false}})
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('foo')] = 'Symbol foo'

Object.getOwnPropertySymbols(obj).forEach((key) => {
    console.log(obj[key])
    // Symbol baz, Symbol foo
})

Reflect.ownKeys

Reflect.ownKeys() 方法是 ES2015 新增的静态方法, 该方法返回对象自身所有属性名组成的数组, 包括不可枚举的属性和 Symbol 属性:

Reflect.ownKeys(obj).forEach((key) => {
    console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo
})

对比

遍历 Map 对象

let m = new Map();
m.set(1, "black");
m.set(2, "red");
m.set("colors", 2);
// 方法一: 
m.forEach(function (item) {
    console.log(item.toString());
});

// 方法二: 
m.forEach(function (value, key, map) {
    console.log(value)
})
// 输出:
// black
// red
// 2
// 方法三: 
for (let [key, value] of m) {
    console.log(key + ' = ' + value);
}
// 输出:
// 1 = black
// 2 = red
// colors  = 2

js 从一个数组中取出几个特定的字段组成新的数组

let productJson = [];
res.forEach(function (item) {
    productJson.push({
        goodsId: item.goodsId,
        productId: item.productId,
        goodsNum: item.goodsNum
    })
})
console.log(productJson)

react、vue 插件 uuid

下载依赖

npm install uuid

引入依赖

import {v4 as uuidv4} from "uuid"

直接使用

const id = uuidv4()
console.log(id)

拓展

如果你需要的随机数不需要这么长或字母开头, 可以通过字符串的方法处理:

const id = uuidv4().substring(0, 8)
const id = ('a' + uuidv4()).substring(0, 8)

JS 如何在数组指定位置插入元素

JavaScript splice() 方法

splice() 方法向/从数组中添加/删除项目, 然后返回被删除的项目。

语法

array.splice(index,howmany,item1,.....,itemX)

参数

• index: 必需, 规定从何处添加/删除元素, 该参数是开始插入和(或)删除的数组元素的下标, 必须是数字
• howmany: 必需, 规定应该删除多少元素, 必须是数字, 但可以是 “0”, 如未规定此参数, 则删除从 index 开始到原数组结尾的所有元素
• item1, ..., itemX: 可选,要添加到数组的新元素

返回值

Array 如果从 arrayObject 中删除了元素, 则返回的是含有被删除的元素的数组。

方法实例

// 在数组指定位置插入
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
// 输出结果
// Banana, Orange, Lemon, Kiwi, Apple, Mango

// 在数组开头插入
let shuiguo = ["Banana", "Orange", "Apple", "Mango"];
shuiguo.splice(0, 0, "Lemon");
// 输出结果
// Lemon, Banana, Orange, Apple, Mango

JavaScript unshift() 方法

unshift 方法用于向数组的开头添加一个或多个元素, 并返回新数组的长度。
提示: unshift 方法将直接修改原数组, 并将已经存在的元素顺次地移到较高的下标处, 而不像其他很多方法一样得到一个原数组的副本。

语法

array_object.unshift( newelement1, newelement2, ... )

参数

• array_object: 要操作的数组(对象)
• newelement1, ...: 至少一个, 要添加到数组的元素序列, 使用 , 分隔

实例

let arr1 = new Array('a', 'b', 'c');

console.log(arr1.unshift(1, 2) + '
')
console.log(arr1);

JavaScript concat() 方法

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组, 而仅仅会返回被连接数组的一个副本。

语法

arrayObject.concat(arrayX,arrayX,......,arrayX)

参数

• arrayX: 必需, 该参数可以是具体的值, 也可以是数组对象。可以是任意多个

返回值

返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组, 那么添加的是数组中的元素, 而不是数组。

实例

let a = [1, 2, 3];

console.log(a.concat(4, 5))

let arr = new Array(3)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"

let arr2 = new Array(3)
arr2[0] = "4"
arr2[1] = "5"
arr2[2] = "6"

console.log(arr.concat(arr2))

let arr = new Array(3)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"

let arr2 = new Array(3)
arr2[0] = "4"
arr2[1] = "5"
arr2[2] = "6"

let arr3 = new Array(2)
arr3[0] = "7"
arr3[1] = "8"

console.log(arr.concat(arr2, arr3))

react state 数据取出来修改