程志辉博客 - 一个伪文艺青年
贵在坚持,难在坚持,成在坚持!
程志辉

一首向云端 差点累死在武功山

2023年07月03日
程志辉

我是那个粽子 这个装扮大家打几分?

2023年06月25日
  • Mr.Chou 绿色的粽子,我看到了…哈哈。满分
  • 大致 最后一张,都已经cosplay了,还要站着划船,一个重心不稳的话,不怕感冒怕衣服掉色过敏啊。人生这么艰难吗?
  • 程志辉 作者 回复 大致 都是专业的桨板爱好者,邀请过去表演,一个人200,边玩边赚钱。
程志辉

腾讯云COS数据万象,文字水印使用的是URL 安全的 Base64 编码

// base64解码
export const URLSafeBase64 = {
 encode: (str) => {
  // 将字符串转换为 UTF-8 编码的字节数组
  let utf8Bytes = new TextEncoder().encode(str);

  // 将字节数组转换为 Base64 编码的字符串
  let base64Str = btoa(String.fromCharCode(...utf8Bytes));

  // 按照 Base64 编码规则,它会被编码为 "SGVsbG8=". 注意末尾的 "=" 补位符。
  // 如果使用 URL 安全的 Base64 编码,它会被编码为 "SGVsbG8",没有补位符。在解码时,需要根据编码时使用的方式来添加或去掉补位符。
  // 替换不安全的字符并去掉补位符
  return base64Str.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 },
 decode: (encodedStr) => {
  // 添加补位符并替换安全的字符
  encodedStr = encodedStr.replace(/-/g, "+").replace(/_/g, "/");
  // 在这里使用 while 循环的原因是为了确保添加的补位符数量正确。
  // 因为在某些情况下,需要添加多个 "=" 补位符,而使用 if 语句只能添加一个 "="。比如,如果编码后的字符串长度为 2,那么需要添加两个 "=" 补位符,才能使字符串长度变为 4。
  while (encodedStr.length % 4) {
   encodedStr += "=";
  }

  // 将 Base64 编码的字符串转换为字节数组
  let base64Bytes = Uint8Array.from(atob(encodedStr), (c) => c.charCodeAt(0));

  // 将字节数组转换为 UTF-8 编码的字符串
  return new TextDecoder().decode(base64Bytes);
 },
}

使用场景

使用腾讯云COS数据万象图片水印功能,自定义给图片加水印

>>> URLSafeBase64.encode("我可以自定义去设置文字水印")
<<< '5oiR5Y-v5Lul6Ieq5a6a5LmJ5Y676K6-572u5paH5a2X5rC05Y2w'

http://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?watermark/2/text/5oiR5Y-v5Lul6Ieq5a6a5LmJ5Y676K6-572u5paH5a2X5rC05Y2w/font/dGFob21hLnR0Zg/fontsize/30/fill/IzAwMDAwMA/dissolve/70/shadow/0/gravity/center/dx/0/dy/0

2023年04月27日
程志辉

今天完成了公开答辩,也算是正式结束了校园生活。

2022年05月11日
程志辉

尚硅谷分享的解构内容

解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。这种语法是 ECMAscript 6 规范引入了一种新语法,可以更轻松地从数组和对象中获取值。

  1. 提取数据

先来看看如何在 JavaScript 中解构对象,可以从这个商品对象的简单示例开始。

const product = {
    id: 1,
    title: "Nike Air Zoom Pegasus 38",
    product_image: "/resources/products/01.jpeg",
    shown: "White/Pure Platinum/Midnight Navy/Wolf Grey",
    price: 120,
};
const { id, price, title } = product;

这样,就可以通过以下方式访问相应的属性:

console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38

解构,能够让代码更加清晰简洁。如果需要解构一个更复杂的对象呢?即对象中的对象。

现在假设需要从商品列表数据中获取其中一个商品的属性,如下:

const products = [
    {
        id: 1,
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    {
        id: 2,
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    {
        id: 3,
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
];

在这里,产品列表嵌套了几层,需要访问商品的信息,可以解构尽可能多的级别以获取商品对象的属性。

const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

上面的代码仅用于展示其用法,项目开发中不建议再数组中这样获取对象信息。

通常,数据列表不一定非要数组,从获取效率来说,map 对象的访问比数组效率要高。可以将上面的数据改为 map 对象,如下:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { id, title, price },
} = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

在 JavaScript 中,数据可以是变量和方法,因此解构赋值也适合用在函数参数的定义,如下:

const printArticle = ({ title, remark }) => {
    console.log(title);
    console.log(remark);
};
printArticle({
    title: "JavaScript 解构赋值",
    remark: "解构赋值的实用场景介绍",
});

在使用 React 或 Vue 等框架时,有很多解构赋值的地方,如方法的引入等等。

  1. 别名取值

如果想创建与属性名称不同的变量,那么可以使用对象解构的别名功能。

const { identifier: aliasIdentifier } = expression;

identifier 是要访问的属性的名称,aliasIdentifier 是变量名称。具体用法如下:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { price: productPrice },
} = products;

console.log(productPrice); // 275
  1. 动态属性

可以使用动态名称提取到变量属性(属性名称在运行时已知):

const { [propName]: identifier } = expression;

propName 表达式应计算为属性名称(通常是字符串),标识符应指示解构后创建的变量名称,用法如下:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const productKey = "1";
const { [productKey]: product } = products;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }

上面代码中,可以通过更新 productKey 的值进而使得 product 的值也跟随变化。

  1. 对象解构中的 Rest

将 rest 语法添加到解构中,Rest 属性收集那些尚未被解构模式拾取的剩余可枚举属性键。

const { identifier, ...rest } = expression;

解构后,变量标识符包含属性值。 rest 变量是一个具有其余属性的普通对象。

const product = {
    title: "Nike Air Zoom Pegasus 38",
    price: 120,
    quantity: 5,
    category_id: 1,
    reviews: 9830,
    total: 45,
};
const { title, ...others } = product;
console.log(others); // { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }

对于数组,可以通过 Rest 的实现首尾值的获取:

const numbers = [1, 2, 3];
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [ 2, 3 ]
  1. 默认值

正如前面介绍的那样可以在解构数组时为其分配默认值:

const RGBA = [255, 34];
const [R, G, B = 0, A = 1] = RGBA;
console.log(R); // 255
console.log(G); // 34
console.log(B); // 0
console.log(A); // 1

这样,可以将确保在 B、A 未定义的情况下有一个默认值。

总结 解构是一个非常实用的特性,前端培训它被添加到了 JavaScript 的 ES6 版本中了。通过解构,可以快速方便地从对象和数组中提取属性或数据到单独的变量中。它适用于嵌套对象,可以使用 ... 运算符为数组分配赋值。

作者:尚硅谷
链接:https://juejin.cn/post/7037314654065917983
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


微信小程序实参传对象解构

传统方式使用dataset

<button bind:tap="sayHello" data-content="My name is SayHello">button</button>

sayHello(e){
    let content = e.target.dataset.content;
    console.log(content)
}

微信小程序官方文档dataset用法

函数参数对象解构

<button bind:tap="sayHello" data-content="My name is SayHello">button</button>

sayHello({ currentTarget: { dataset: { content } } }){
    console.log(content)
}

还没看懂的话 就这样看

let myObj = {
    currentTarget: {
        dataset: {
            content: "My name is SayHello"
        }
    }
}
const { currentTarget: { dataset: { content } } } = myObj
console.log(content)
2022年03月01日
程志辉

问题

在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向数组对象中添加新的属性,如果直接更新此属性的值,是不会更新视图的。

根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

实现

HTML部分

<div id="app">
    <ul>
        <li v-for="value in obj" :key="value">
            {{value}}
        </li>
    </ul>

    <button @click="addObjB">添加obj.b</button>
</div>

JS部分

data() {
    return {
        obj: {
            a: "obj.a"
        }
    }
},
methods: {
    addObjB() {
        // 默认情况下
        // this.obj.b = "obj.b"

        // 第一种解决方法
        // let obj = {
        //     a: "obj.a",
        //     b: "obj.b"
        // };
        // this.obj = obj

        // 第二种解决方法
        // this.$set(this.obj,"b","obj.b")
    }
}

默认情况下点击button会发现, obj.b 已经成功添加,但是视图并未刷新

原因在于在Vue实例创建时, obj.b 并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局api—— $set()

$set() 方法相当于手动的去把 obj.b 处理成一个响应式的属性,此时视图也会跟着改变了

开发过程中我用的是第一种方法解决的,但是不好的地方就是比较麻烦,很多场景实现起来非常不友好。

用vue官方提供的$set就好了Vue.set( target, propertyName/index, value )

参考:
1.Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决?
2.Vue--给data数据中对象新增属性/响应式数据(使用Vue.$set()),并触发视图更新

2022年02月17日
Icefox Theme . 鄂ICP备16001608号-1