get函数

一、react 实现 get() 函数的示例 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻

import React from 'react';

function get(obj, chain, defaultVal) {
  // 将链式属性路径拆分成数组
  const keys = chain.split('.');

  // 初始化结果为传入的对象
  let result = obj;

  // 遍历属性路径数组，并逐层获取属性值
  for (let i = 0; i < keys.length; i++) {
    // 如果当前属性值为 undefined，则返回默认值
    if (result[keys[i]] === undefined) {
      return defaultVal;
    }

    // 否则，将结果更新为当前属性值
    result = result[keys[i]];
  }

  // 返回最终结果
  return result;
}

function GetExample() {
  const data = {
    name: 'John',
    age: 30,
    address: {
      city: 'New York',
      country: 'USA'
    }
  };

  // 测试 get 函数
  const name = get(data, 'name'); // 'John'
  const city = get(data, 'address.city'); // 'New York'
  const zip = get(data, 'address.zip', 'N/A'); // 'N/A'

  return (
    <div>
      <h1>get() 函数示例</h1>
      <p>Name: {name}</p>
      <p>City: {city}</p>
      <p>Zip: {zip}</p>
    </div>
  );
}

export default GetExample;

二、vue2 实现 get() 函数的示例 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻

javascript
// 在 main.js 中注册全局函数
import Vue from 'vue';

Vue.prototype.$get = function(obj, chain, defaultVal) {
  try {
    const value = chain.split('.').reduce((acc, key) => acc[key], obj);
    return value !== undefined ? value : defaultVal;
  } catch (e) {
    return defaultVal;
  }
};

// 在组件中使用 $get 函数
export default {
  mounted() {
    const obj = {
      a: {
        b: {
          c: 'Hello World'
        }
      }
    };

    const value = this.$get(obj, 'a.b.c', 'Default Value');
    console.log(value); // 输出 'Hello World'

    const nonExistentValue = this.$get(obj, 'x.y.z', 'Default Value');
    console.log(nonExistentValue); // 输出 'Default Value'
  }
};

三、vue3 实现 get() 函数的示例 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻

<template>
  <div>
    <button @click="getValue">Get Value</button>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const getValue = () => {
      const obj = {
        a: {
          b: {
            c: 'Hello World'
          }
        }
      };
      const value = get(obj, 'a.b.c', 'Default Value');
      console.log(value); // 输出 'Hello World'
    };

    const result = ref('');

    const get = (obj, chain, defaultVal) => {
      try {
        const value = chain.split('.').reduce((acc, key) => acc[key], obj);
        return value !== undefined ? value : defaultVal;
      } catch (e) {
        return defaultVal;
      }
    };

    onMounted(() => {
      getValue();
    });

    return {
      result
    };
  }
};
</script>