DEV Community: gankai

10+ Best Ways to Check if a Key Exists in JavaScript Objects

gankai — Mon, 23 Sep 2024 16:11:50 +0000

In JavaScript, working with objects is a common task. One frequent operation is checking whether a specific key exists in an object. This blog post will explore various methods to accomplish this, providing you with the tools to handle object properties efficiently.

Why Check for Key Existence?

Before diving into the methods, it's important to understand why checking for key existence is crucial:

Avoid errors when accessing undefined properties
Implement conditional logic based on property presence
Validate object structures
Enhance code reliability and robustness

Now, let's explore the different techniques to check if a key exists in a JavaScript object.

Method 1: Using the `in` Operator

The in operator is a simple and straightforward way to check if a property exists in an object or its prototype chain.

const person = { name: 'John', age: 30 };

console.log('name' in person); // Output: true
console.log('job' in person); // Output: false

The in operator returns true if the specified property is in the object or its prototype chain, and false otherwise.

Method 2: Using the `hasOwnProperty()` Method

The hasOwnProperty() method is another way to check if an object has a specific property. This method only checks for properties that are directly present in the object, not in its prototype chain.

const person = { name: 'kai', age: 31 };

console.log(person.hasOwnProperty('name')); // Output: true
console.log(person.hasOwnProperty('job')); // Output: false

This method is useful when you want to check for properties directly on the object, ignoring inherited properties.

Method 3: Using Object.hasOwn() (ES2022)

Introduced in ECMAScript 2022, Object.hasOwn() is a static method that determines whether an object has a property with the specified name as its own property.


const person = { name: 'kai', age: 31 };

console.log(Object.hasOwn(person, 'name')); // Output: true
console.log(Object.hasOwn(person, 'job')); // Output: false

This method is similar to hasOwnProperty() but is considered more robust and is recommended for use in modern JavaScript.

Method 4: Using the Nullish Coalescing Operator (??)

The nullish coalescing operator (??) can be used to check if a property exists and is not null or undefined.


const person = { name: 'Kai', age: 30 };

console.log(person.name ?? 'Key does not exist'); // Output: Kai
console.log(person.job ?? 'Key does not exist'); // Output: Key does not exist

This method is particularly useful when you want to provide a default value if the key doesn't exist or is nullish.

Method 5: Using Optional Chaining (?.)

The optional chaining operator (?.) allows you to safely access nested object properties without throwing an error if a property doesn't exist.


const person = { name: 'Kai', age: 30 };

console.log(person?.name); // Output: Kai
console.log(person?.job); // Output: undefined

This method is excellent for checking the existence of nested properties and avoiding "Cannot read property of undefined" errors.

Method 6: Using the `Object.keys()` Method

The Object.keys() method returns an array of a given object's own enumerable property names. You can use this method to check if a key exists in an object by checking if the key is included in the array of keys.


const person = { name: 'Kai', age: 30 };

const keys = Object.keys(person);


console.log(keys.includes('name')); // Output: true

console.log(keys.includes('job')); // Output: false

This method is useful when you need to perform additional operations on the keys of an object.

Method 7: Using the `Object.entries()` Method

The Object.entries() method returns an array of a given object's own enumerable property [key, value] pairs. You can use this method to check if a key exists in an object by iterating over the entries and checking for the key.


const person = { name: 'Kai', age: 30 };

const entries = Object.entries(person);

const keyExists = entries.some(([key, value]) => key === 'name');

console.log(keyExists); // Output: true

This method is useful when you need to access both the key and value of an object property.

Method 8: Using the `Object.getOwnPropertyDescriptors()` Method

The Object.getOwnPropertyDescriptors() method returns an object containing all own property descriptors of a given object. You can use this method to check if a key exists in an object by checking if the property descriptor is defined.


const person = { name: 'Kai', age: 30 };

const descriptors = Object.getOwnPropertyDescriptors(person);

console.log('name' in descriptors); // Output: true

console.log('job' in descriptors); // Output: false

This method is useful when you need to access the property descriptors of an object.

Method 9: Using the `Object.getOwnPropertyNames()` Method

The Object.getOwnPropertyNames() method returns an array of all own property names of a given object. You can use this method to check if a key exists in an object by checking if the key is included in the array of property names.


const person = { name: 'Kai', age: 30 };

const propertyNames = Object.getOwnPropertyNames(person);

console.log(propertyNames.includes('name')); // Output: true

console.log(propertyNames.includes('job')); // Output: false

This method is useful when you need to access the property names of an object.

Method 10: Using the `Object.getOwnPropertySymbols()` Method

The Object.getOwnPropertySymbols() method returns an array of all own symbol properties of a given object. You can use this method to check if a key exists in an object by checking if the symbol is included in the array of symbols.


const symbol = Symbol('key');

const person = { [symbol]: 'value' };

const symbols = Object.getOwnPropertySymbols(person);

console.log(symbols.includes(symbol)); // Output: true

This method is useful when you need to access the symbol properties of an object.

Method 11: Using the `Reflect.has()` Method

The Reflect.has() method is a static method that returns a boolean indicating whether an object contains a property with the specified key.


const person = { name: 'Kai', age: 30 };

console.log(Reflect.has(person, 'name')); // Output: true

console.log(Reflect.has(person, 'job')); // Output: false

This method is similar to the in operator but is considered more robust and is recommended for use in modern JavaScript.

Method 12: Using the `Object.prototype.hasOwnProperty.call()` Method

The Object.prototype.hasOwnProperty.call() method is a way to call the hasOwnProperty() method on an object that may not have it directly.


const person = { name: 'Kai', age: 30 };

console.log(Object.prototype.hasOwnProperty.call(person, 'name')); // Output: true

console.log(Object.prototype.hasOwnProperty.call(person, 'job')); // Output: false

This method is useful when you need to check for properties on objects that may not have the hasOwnProperty() method directly.

Method 13: Using the `Object.prototype.propertyIsEnumerable()` Method

The Object.prototype.propertyIsEnumerable() method returns a Boolean indicating whether the specified property is enumerable.


const person = { name: 'Kai', age: 30 };

console.log(Object.prototype.propertyIsEnumerable.call(person, 'name')); // Output: true

console.log(Object.prototype.propertyIsEnumerable.call(person, 'job')); // Output: false

This method is useful when you need to check if a property is enumerable on an object.

Method 14: Using the `Object.prototype.isPrototypeOf()` Method

The Object.prototype.isPrototypeOf() method returns a Boolean indicating whether the calling object is a prototype of the specified object.



const person = { name: 'Kai', age: 30 };

const obj = Object.create(person);

console.log(Object.prototype.isPrototypeOf.call(person, obj)); // Output: true

This method is useful when you need to check if an object is a prototype of another object.

Conclusion

Mastering key existence checks in JavaScript objects is crucial for writing robust and efficient code. From the simple in operator to more advanced methods like Object.hasOwn(), each technique has its place in a developer's toolkit. By understanding the nuances of each method, you can choose the most appropriate approach for your specific needs, leading to cleaner, more maintainable code.
Remember, the best method often depends on your specific use case, performance requirements, and the JavaScript environment you're working in. Practice these techniques, and you'll be well-equipped to handle object property checks in any situation.

FAQ

1. Which method is the fastest for checking key existence?

Generally, the in operator and hasOwnProperty() method are the fastest. However, always benchmark in your specific use case.

2: How do I check for deep nested properties?

Use the optional chaining operator (?.) for safe deep property access.

3: Can I use these methods with ES6 Symbol properties?

Yes, most of these methods work with Symbol properties, but some (like Object.keys()) only work with enumerable string properties.

4: Which method is recommended for modern JavaScript?

Object.hasOwn() and Reflect.has() are recommended for modern JavaScript due to their robustness and consistency.

5: How do I check if a property is enumerable?

Use the Object.prototype.propertyIsEnumerable() method to check if a property is enumerable on an object.

6: How do I check if an object is a prototype of another object?

Use the Object.prototype.isPrototypeOf() method to check if an object is a prototype of another object.

7: Can I use these methods with arrays?

Yes, you can use these methods with arrays, but they are primarily designed for objects.

8: How do I check if a property is defined but has a value of null or undefined?

Use the nullish coalescing operator (??) to check if a property exists and is not null or undefined.

9: How do I check if a property is defined but has a falsy value?

Use the nullish coalescing operator (??) to check if a property exists and is not null or undefined.

10: How do I check if a property is defined but has a value of 0 or an empty string?

Use the nullish coalescing operator (??) to check if a property exists and is not null or undefined.

geekskai Blog: JavaScript

5 minutes to figure out useTransition and useDeferredValue in React 18

gankai — Thu, 25 Jul 2024 08:01:48 +0000

React 18 introduces a crucial new concept called "Concurrent". Concurrent involves performing multiple state updates simultaneously, which is arguably the most important feature in React 18. Alongside concurrency, React 18 also introduces two new hooks called useTransition() and useDeferredValue(). They both help to lower the priority of state updates, but the question is, when should they be used?

What is Concurrent React?

According to the official React18 Docs, Concurrent React is a new behind-the-scenes mechanism that allows React to prepare multiple versions of the UI simultaneously. You can think of concurrency as an implementation detail—its value lies in its features. Concurrency can be defined as the ability to perform many tasks simultaneously. It is not a feature itself but rather a behind-the-scenes capability that allows React to prepare many UI instances concurrently. React's creators believe that developers should focus on how React features will help them achieve the user experience they want to provide, while React will figure out how to deliver that experience.

Concurrent React is more than just an implementation detail. It is a significant upgrade to the core rendering architecture of the framework. Hence, understanding how it works in React 18 is crucial.

Setting Up the Project

For this article, I created a Github repository where I built a simple demo product application that allows users to view products by entering a product number. First, you must clone the Github repository containing all the project starter files. To clone the Github repository, go to your terminal and run the following command:

git clone <https://github.com/geekskai/react18-feature.git>

After completing the cloning process, go to the project folder, open it in your code editor, navigate to the editor terminal, and run npm install or yarn install to install the scripts and dependencies. Then, to start the project, run npm start.

Once the application is up and running, it should look like this:

Implementing useTransition()

When you first enter the product number to fetch the product, you will notice that it updates almost immediately, even if it is a very long list of 10,000 items to browse through.

Now, when you go to the Developer Tools section of Chrome, go to the performance tab, turn on CPU throttling, and reduce the CPU speed by 4x, the issues start to appear.

If you try entering the product number after reducing the CPU speed, you will notice that the updates become slower and noticeably laggy. Even the entire interface looks and feels sluggish, especially the input field, which now feels unresponsive as we type and delete. And this is definitely not a good user experience.

You can't see me typing, but the interface responds slowly, as shown above. Even before React18, a standard solution was not to handle 10,000 items or products (in our case) at once. You could use pagination or any other technique, or filter on the server-side instead of the client-side. These are all possible solutions you can consider when you encounter such issues.

However, if you need to perform such operations on the client-side, i.e., in your client code, then with React18, you now have some tools to provide better perceived performance to users by deferring some state update operations by telling React that some updates have higher priority than others. This is the idea behind the concurrency introduced in React 18 and the related hooks and functions.

useTransition() tells React that some state updates have a lower priority, i.e., every other state update or UI rendering trigger has a higher priority. When we call useTransition(), we get an array with two elements: an isPending boolean value that indicates whether a low-priority state update is still pending, and a startTransition() function that you can wrap around state updates to tell React that this is a low-priority update.

Let's see how to use the useTransition() hook. First, go to the App.js file and edit the code as follows:

function App() {
  const [isPending, startTransition] = useTransition();
  const [filterTerm, setFilterTerm] = useState('');

  const filteredProducts = filterProducts(filterTerm);

  function updateFilterHandler(event) {
    startTransition(() => {
      setFilterTerm(event.target.value);
    });
  }

  return (
    <div id="app">
      <input type="text" onChange={updateFilterHandler} />
      <ProductList products={filteredProducts} />
    </div>
  );
}

Since startTransition() wraps the setFilterTerm() state update function, React gives this state update code a lower priority. This ensures that the input field remains responsive and instantly reacts to keystrokes in the demo application. Without using useTransition(), the application might become unresponsive, especially on slower devices. When you enter the product number, you will see that the code now responds more quickly and with less delay, even with the CPU throttled by 4x. You can try this on your system and see the results.

However, you should not start using startTransition to wrap all state updates. Use it only when your user interface is slow, especially on older devices, or when you have no other solution available. This is because it incurs additional performance overhead.

What Does isPending Do?

isPending tells you whether there are some state updates that are still pending (React has not yet executed and are of lower priority). You can use isPending to update the UI to show some fallback content while waiting for major state updates to complete. You can see this in the following code in the App.ts file:

return (
    <div id="app">
      <input type="text" onChange={updateFilterHandler} />
      {isPending && <p style={{color: 'white'}}>Updating list..</p>}
      <ProductList products={filteredProducts} />
    </div>
  );
}

After implementing the code, you should be able to see the following while running the application:

Therefore, this is another feature you can use while working with useTransition(). Also, note how responsive it is after implementing the useTransition() feature.

❤️ After reading, do three things:

If you find this content inspiring, I would like to invite you to do me a small favor:

Like it, so more people can see this content, and it's easier for you to find it later (bookmarking without liking is just playing around -_-);

Check out other articles as well;

🎉 Feel free to write your learning experiences in the comments section and discuss with me and other students. If you find it helpful, you are also welcome to share the article with your friends.

🔥A mall project based on vue 3.x

gankai — Sun, 14 Mar 2021 09:42:56 +0000

vue3-jd-h5

English| 简体中文

Project Introduction

vue3-jd-h5 is an e-commerce H5 page front-end project, based on Vue 3.0.0 + Vant 3.0.0 implementation, mainly including homepage, category page, my page, shopping cart, etc. .

📖Local offline code vue2.6 in the branch demo , use mockjs data for development, please click for the renderings 🔗 Here

⚠️The master branch is the code of the online production environment, because part of the background interface has been hung up 😫, the actual effect may not be seen.

📌 There are still many shortcomings in this project. If you have partners who want to contribute to this, please send us a PR or issue;

🔑 This project is free and open source. If you have a partner who wants to carry out secondary development on a secondary basis, you can clone or fork the entire warehouse. If it can help you, I will be very happy. If you think this project is good, please give it back Start! 🙏

Vue3 build steps

First, select a file locally and clone the code locally:

git clone https://github.com/GitHubGanKai/vue-jd-h5.git

View all branches:

gankaideMacBook-Pro:vue-jd-h5 gankai$ git branch -a
  demo
  vue-next
  dev
  feature
  gh-pages
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/demo
  remotes/origin/vue-next
  remotes/origin/dev
  remotes/origin/feature
  remotes/origin/gh-pages
  remotes/origin/master

Switch to the branch vue-next to start development!
Run the command in the IDEA command line: npm install, download related dependencies;
🔧 Development environment Run the command in the IDEA command line: npm run dev, run the project;
📦Run the command in the IDEA command line: npm run dll:build, package the project, 📱scan the QR code below 👇 to view!

Initialization of the project

💡If you are slow when installing the package, it is because the NPM server is abroad. Here is a tool for you to switch NPM mirroring at any time. 👉NRM, sometimes when we are developing, in order to speed up the installation of the installation package, we need to switch the mirror source to domestic, but if we need to publish some of our own components to NPM, we have to switch back and forth again. With this We are much more convenient! Use $ npm install -g nrm to install globally, and then use nrm ls to view all mirrors:

gankaideMacBook-Pro:~ gankai$ nrm ls

  npm -------- https://registry.npmjs.org/
* yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

If you need to use Taobao mirror, execute: nrm use taobao You can switch the source at any time, of course, there is also an npm package version management tool nvm, mainly for management In the package version, if you are interested, you can find out for yourself, here is not a long time 😊!

Installation

Enter the root directory of the project that was cloned just now, install related dependencies, and experience the new features of vue3.

npm installation:

npm install

yarn installation:

yarn

CDN

<script src="https://unpkg.com/vue@next"></script>

use

In the entry file main.js:

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

After installing the plug-in, you can use the new Composition API to develop components.

⚠️At present, vue officially provides a plug-in for vue-cli vue-cli-plugin-vue-next, you can also directly Add the latest version directly to the project!

# in an existing Vue CLI project
vue add vue-next

If you have a small partner who wants to experience the new version from scratch, you can use this method to install it. Since our project relies on third-party libraries, if you install it globally, the third-party UI library of the entire project cannot run! So we still choose to install `@vue/composition-api` to experience, so as to slowly transition to the latest version of vue3

Vue 3.0 Composition-API Basic Features Experience

setup function

The setup() function is a new attribute specially provided for components in vue3, which is equivalent to the created function in the 2.x version. The component logic options of the previous version are now handled in this function. It provides a unified entry point for us to use the new features of vue3 Composition API. The setup function will be executed after beforeCreate and before created relative to 2.x ! For details, please refer to the following:

vue2.x	vue3
~~beforeCreate~~	setup(replace)
~~created~~	setup(replace)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

New hook

In addition to the 2.x life cycle equivalent, the Composition API also provides the following debugging hooks:

-onRenderTracked
-onRenderTriggered

Both hooks received the options of DebuggerEvent and onTrack and onTrigger observers:

export default {
    onRenderTriggered(e){
      Debugger
      //Check which dependency caused the component to re-render
    }
}

Dependency Injection

provider and inject enable dependency injection similar to the 2.x provide/inject option. Both can only be called during the current active instance of setup().

import { provide, inject } from '@vue/composition-api'

const ThemeSymbol = Symbol()

const Ancestor = {
  setup() {
    provide(ThemeSymbol, 'dark')
  }
}

const Descendent = {
  setup() {
    const theme = inject(ThemeSymbol, 'light' /* optional default value */)
    return {
      theme
    }
  }
}

inject accepts an optional default value as the second parameter. If no default value is provided, and the property cannot be found in the Provide context, then inject returns undefined.

Inject responsive data

In order to maintain the responsiveness between the provided value and the injected value, you can use ref

// in the parent component
const themeRef = ref('dark')
provide(ThemeSymbol, themeRef)

// in the component
const theme = inject(ThemeSymbol, ref('light'))
watchEffect(() => {
   console.log(`theme set to: ${theme.value}`)
})

Because the setup function receives 2 formal parameters, the first is initProps, which is the value passed by the parent component! , The second parameter is a context object

setupContext, the main attributes of this object are:

attrs: Object // equivalent to this.$attrs in vue 2.x
emit: ƒ () // equivalent to this.$emit()
isServer: false // Is it server-side rendering
listeners: Object // equivalent to this.$listeners in vue2.x
parent: VueComponent // equivalent to this.$parent in vue2.x
refs: Object // equivalent to this.$refs in vue2.x
root: Vue // This root is the globally unique instance object returned when we use newVue() in main.js. Be careful not to confuse this with this in the single file assembly
slots: {} // equivalent to this.$slots in vue2.x
ssrContext:{} // server-side rendering related

⚠️Note: The this cannot be accessed in the setup() function, regardless of whether this this refers to the global vue object (ie: the global generated by using new in main.js The vue instance object), still refers to the object of the single file component.

But what if we want to access the instance object of the current component? We can introduce the api of getCurrentInstance, and the return value is the instance of the current component!

import { computed, getCurrentInstance } from "@vue/composition-api";
export default {
  name: "svg-icon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  setup(initProps,setupContext) { 

    const { ctx } = getCurrentInstance();
    const iconName = computed(() => {
      return `#icon-${initProps.iconClass}`;
    });
    const svgClass = computed(() => {
      if (initProps.className) {
        return "svg-icon " + initProps.className;
      } else {
        return "svg-icon";
      }
    });
    return {
      iconName,
      svgClass
    };
  }
};
</script>

Ref automatically expand (unwrap)

The ref() function is used to create a reactive data object according to the given value. The return value of the ref() function call is a wrapped object (RefImpl), There is only one .value property on this object. If we want to access the value of the object in the setup function, we can get it through .value, but if it is in the <template>** template **, just visit directly, no need for .value!

import {ref} from'@vue/composition-api'

setup() {
     const active = ref("");
     const timeData = ref(36000000);
     console.log('output ===>',timeData.value)
     return {
        active,
        timeData
     }
}

<template>
   <p>Activity status: {{active}}</p>
   <p>Activity time: {{timeData}}</p>
</template>

⚠️Note: Do not put Array in ref, the array index property cannot be expanded automatically, and **do not use Array to directly access the ref object:

const state = reactive({
   list: [ref(0)],
});
// will not be expanded automatically, you must use `.value`
state.list[0].value === 0; // true

state.list.push(ref(1));
// will not be expanded automatically, you must use `.value`
state.list[1].value === 1; // true

When we need to manipulate the DOM, such as when we use swiper in a project to get the DOM, then we can still do this 👇!

  <div class="swiper-cls">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(img ,index) in tabImgs.value" :key="index">
          <img class="slide_img" @click="handleClick(img.linkUrl)" :src="img.imgUrl" />
        </swiper-slide>
      </swiper>
   </div>

Then define a const mySwiper = ref(null); in the setup function. Previously in vue2.x, we used this.$refs.mySwiper to get the DOM object. Now you can also use ref Instead offunction, the returned mySwiper should be the same as the ref bound in the template!

import { ref, onMounted } from "@vue/composition-api";
setup(props, { attrs, slots, parent, root, emit, refs }) {
    const mySwiper = ref(null);
  onMounted(() => {
    // You can get the DOM object through mySwiper.value!
     // At the same time, refs.mySwiper in vue2.x can also be used. In fact, mySwiper.value is the same DOM object!
    mySwiper.value.swiper.slideTo(3, 1000, false);
  });
  return {
    mySwiper
  }
}

reactive

The reactive() function receives an ordinary object and returns a reactive data object, which is equivalent to the Vue.observable() function in vue 2.x. vue 3.x provides reactive' () function, used to create a reactive data object Observer, in ref we generally store basic type data, if it is a reference type, we can use the reactive function.

When the received type in the reactive function is an array of Array, we can wrap a layer of objects outside the Array, and then add an attribute to the object such as: value (this attribute name is your You can call it whatever you want), his value is this array!

<script>
// Must be introduced before using related aip
import { ref, reactive } from "@vue/composition-api";
export default {
  name: "home",
  setup(props, { attrs, slots, parent, root, emit, refs }) {

    const active = ref("");
    const timeData = ref(36000000);
    // Turn each object in the tabImgs array into a responsive object
    const tabImgs = reactive({
      value: []
    });
    const ball = reactive({
      show: false,
      el: ""
    });
    return {
      active,
      timeData,
      tabImgs,
      ...toRefs(ball),
    };
  }
};
</script>

So when we want to access this array in the template template, we need to use the form of .value to get the value of this array.

<template>
    <div class="swiper-cls">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(img ,index) in tabImgs.value" :key="index">
          <img class="slide_img" @click="handleClick(img.linkUrl)" :src="img.imgUrl" />
        </swiper-slide>
      </swiper>
    </div>
</template>

isRef

isRef() is used to determine whether a value is an object created by ref(); when you need to expand a value that may be created for ref(), you can use isRef to judge!

import { isRef } from '@vue/composition-api'

setup(){
  const headerActive = ref(false);
  // In the setup function, if it is a responsive object, when accessing properties, you must add .value to access!
  const unwrapped = isRef(headerActive) ? headerActive.value : headerActive
  return {}
}

toRefs

The toRefs function will convert the reactive object into an ordinary object, where each attribute on the returned object is a ref that points to the corresponding attribute in the original object, and all the objects on an object It will be very useful when the attribute is converted to responsive!

import { reactive,toRefs } from '@vue/composition-api'
setup(){
  // ball is a Observer
  const ball = reactive({
    show: false,
    el: ""
  });
  // ballToRefs is an ordinary Object, but all the attributes in ballToRefs are responsive (RefImpl)
  const ballToRefs  = toRefs(ball)
  // ref and original attributes are "linked"
  ball.show = true
  console.log(ballToRefs.show) // true
  ballToRefs.show.value = false
  console.log(ballToRefs.show) // false
  return {
    ...ballToRefs    // Expand the ballToRefs object, we can directly use all the attributes on this object in the template template!
  }
}

Click the add button, the ball flies into the shopping cart animation:

<template>  
  <div class="ballWrap">
      <transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
       <!-- You can use v-show-->
        <div class="ball" v-if="show">
          <li class="inner">
            <span class="cubeic-add" @click="addToCart($event,item)">
              <svg-icon class="add-icon" icon-class="add"></svg-icon>
            </span>
          </li>
        </div>
      </transition>
   </div>
</template>

computed

The first parameter of the computed function can receive a function or an object! If it is a function, it defaults to a getter function, and returns a read-only ref object for the value returned by getter.

import { computed } from '@vue/composition-api'

const count = ref(1)
// computed receives a function as an input parameter
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // Error, plusOne is read-only!

Or it can be an object, you can use objects with get and set functions to create writable ref objects.

const count = ref(1)
// computed receives an object as an input parameter
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

watch

watch(source, cb, options?)

The watch API is exactly equivalent to 2.x this.$watch (and the corresponding watch option).

Observe a single source

The observer data source can be a getter function that returns a value, or it can be directly a ref:

// watching a getter function
const state = reactive({ count: 0 })
watch(
  () => state.count, // Getter function for return value
  (count, prevCount,onCleanup) => {
    /* ... */
  }
)

// directly watching a ref
const count = ref(0)
watch(
  count, // It can also be directly ref
  (count, prevCount,onCleanup) => {
  /* ... */
})

watch multiple sources

Observers can also use arrays to monitor multiple sources at the same time:

const me = reactive({ age: 24, name:'gk' })
// reactive type
watch(
  [() => me.age, () => me.name], // To monitor multiple reactive data sources, you can pass in an array type and return a getter function
  ([age, name], [oldAge, oldName]) => {
    console.log(age) // new age value
    console.log(name) // new name value
    console.log(oldAge) // old age value
    console.log(oldName) // new name value
  },
  // options
  {
    lazy: true //default. The code in the callback function is executed when the watch is created. If lazy is true, how can it not be executed when it is created!
  }
)

setInterval(() => {
  me.age++
  me.name ='oldMe'
}, 7000000)

// ref type
const work = ref('web')
const addres = ref('sz')
watch(
  [work,address], // monitor multiple ref data sources
  ([work, addres], [oldwork, oldaddres]) => {
   //...
  },
  {
    lazy: true
  }
)

watch is bound to the life cycle of the component. When the component is uninstalled, the watch will automatically stop. In other cases, it returns a stop handle, which can be called to stop the watcher explicitly:

// watch returns a function handle, we can decide the stop and start of the watch!
const stopWatch = watch(
  [work,address], // monitor multiple ref data sources
  ([work, addres], [oldwork, oldaddres]) => {
   //...
  },
  {
    lazy: true
  }
)

// Call the stop function to clear the monitoring of work and address
stopWatch()

Clear invalid asynchronous tasks in watch

<div class="search-con">
  <svg-icon class="search-icon" icon-class="search"></svg-icon>
  <input v-focus placeholder="search, keyword" v-model="searchText" />
</div>

setup(props, {attrs, slots, parent, root, emit, refs }){
  const CancelToken = root.$http.CancelToken
  const source = CancelToken.source()
  // Define responsive data searchText
  const searchText = ref('')

  // Send an asynchronous request to the background
  const getSearchResult = searchText => {
   root.$http.post("http://test.happymmall.com/search",{text:searchText}, {
     cancelToken: source.token
   }).then(res => {
    // .....
   });
  return source.cancel
}

// define watch monitor
watch(
  searchText,
  (searchText, oldSearchText, onCleanup) => {
    // Send an axios request and get the cancel function to cancel the axios request
    const cancel = getSearchResult(searchText)

    // If the watch is repeatedly executed, the last unfinished asynchronous request will be cleared first
    onCleanup(cancel)
  },
  // watch is not executed when it is just created
  {lazy: true}
)

  return {
    searchText
  }
}

At last

Vue3 adds Composition API. The new API is compatible with Vue2.x. You only need to introduce the @vue/composition-api package separately in the project to solve our current individual problems in Vue2.x. For example: how to organize logic, and how to extract and reuse logic among multiple components. Based on the current API of Vue 2.x, we have some common logic reuse patterns, but there are more or less problems:

These modes include:

Mixins
Higher-order Components (aka HOCs)
Renderless Components (components based on scoped slots / scoped slots encapsulation logic)

In general, the above models have the following problems:

The source of the data in the template is not clear. For example, when multiple mixins are used in a component, it is difficult to tell which mixin a property comes from by just looking at the template. HOC has similar problems.
Namespace conflict. There is no guarantee that mixins developed by different developers will not use exactly the same attribute or method name. HOC has similar problems in injected props.
Performance. Both HOC and Renderless Components require additional component instance nesting to encapsulate logic, resulting in unnecessary performance overhead.

In vue3, Composition API is added. And the new API is compatible with Vue2.x, only need to introduce the package @vue/composition-api separately in the project, which can solve most of our current problems. At the same time, if I directly upgrade to Vue3.x, I will have more things to do. As long as the third-party ui library used in the current project needs to be remodeled, and many pits after the upgrade have to be filled! At the beginning, I installed and upgraded the vue add vue-next directly on the basis of the current scaffolding, but as long as there are places that rely on third-party ecological libraries, there are many pitfalls. . .

Vue3.x does not export the default object export default. In the third-party ecosystem, Vue.xxx() is often used for dependency. Now these grammars need to be rewritten, and the workload is not small!

If it is a new team or a small project, you can try to use vue3 for trial development, and gradually overstep it. When Vue3.x is officially released and the surrounding ecology keeps up, you can use vue3 directly!

DEV Community: gankai

10+ Best Ways to Check if a Key Exists in JavaScript Objects

Why Check for Key Existence?

Method 1: Using the in Operator

Method 2: Using the hasOwnProperty() Method

Method 3: Using Object.hasOwn() (ES2022)

Method 4: Using the Nullish Coalescing Operator (??)

Method 5: Using Optional Chaining (?.)

Method 6: Using the Object.keys() Method

Method 7: Using the Object.entries() Method

Method 8: Using the Object.getOwnPropertyDescriptors() Method

Method 9: Using the Object.getOwnPropertyNames() Method

Method 10: Using the Object.getOwnPropertySymbols() Method

Method 11: Using the Reflect.has() Method

Method 12: Using the Object.prototype.hasOwnProperty.call() Method

Method 13: Using the Object.prototype.propertyIsEnumerable() Method

Method 14: Using the Object.prototype.isPrototypeOf() Method

Conclusion

FAQ

1. Which method is the fastest for checking key existence?

2: How do I check for deep nested properties?

3: Can I use these methods with ES6 Symbol properties?

4: Which method is recommended for modern JavaScript?

5: How do I check if a property is enumerable?

6: How do I check if an object is a prototype of another object?

7: Can I use these methods with arrays?

8: How do I check if a property is defined but has a value of null or undefined?

9: How do I check if a property is defined but has a falsy value?

10: How do I check if a property is defined but has a value of 0 or an empty string?

5 minutes to figure out useTransition and useDeferredValue in React 18

What is Concurrent React?

Setting Up the Project

Implementing useTransition()

What Does isPending Do?

🔥A mall project based on vue 3.x

vue3-jd-h5

Project Introduction

Vue3 build steps

Initialization of the project

Installation

use

Vue 3.0 Composition-API Basic Features Experience

setup function

New hook

Dependency Injection

Ref automatically expand (unwrap)

reactive

isRef

toRefs

computed

watch

Observe a single source

watch multiple sources

Clear invalid asynchronous tasks in watch

At last

Method 1: Using the `in` Operator

Method 2: Using the `hasOwnProperty()` Method

Method 6: Using the `Object.keys()` Method

Method 7: Using the `Object.entries()` Method

Method 8: Using the `Object.getOwnPropertyDescriptors()` Method

Method 9: Using the `Object.getOwnPropertyNames()` Method

Method 10: Using the `Object.getOwnPropertySymbols()` Method

Method 11: Using the `Reflect.has()` Method

Method 12: Using the `Object.prototype.hasOwnProperty.call()` Method

Method 13: Using the `Object.prototype.propertyIsEnumerable()` Method

Method 14: Using the `Object.prototype.isPrototypeOf()` Method