17 astuces JavaScript pratiques que vous ne connaissiez pas !-js tutoriel-php.cn

17 astuces JavaScript pratiques que vous ne connaissiez pas !

青灯夜游

Libérer： 2020-12-15 09:31:00

avant

1411 Les gens l'ont consulté

Cet article partagera avec vous 17 compétences pratiques en JavaScript que vous ne connaissez pas. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

17 astuces JavaScript pratiques que vous ne connaissiez pas !

1. Opérateur ternaire

Débutant

let hungry = true;
let eat; 
if (hungry == true) {
       eat = 'yes'; 
} else {
       eat = 'no';
}

Copier après la connexion

Vétéran

let hungry = true;
let eat = hungry == true ? 'yes' : 'no';

Copier après la connexion

2. Numéro à chaîner/chaîne à numéro

Novice

let num = 15; 
let s = num.toString(); // number to string
let n = Number(s); // string to number

Copier après la connexion

Vétéran

let num = 15;
let s = num + ""; // 数字转字符串
let n = +s; // 字符串转数字

Copier après la connexion

3. Remplir le array

Novice

for(let i=0; i < arraySize; i++){
  filledArray[i] {&#39;hello&#39; : &#39;goodbye&#39;};
}

Copier après la connexion

Vétéran

let filledArray = new Array(arraysize).fill(null).map(()=> ({'hello' : 'goodbye'}));

Copier après la connexion

4. Propriétés dynamiques de l'objet

Débutant

let dynamic = "value"; 
let user = {
     id: 1,
};
user[dynamic]: "other value";

Copier après la connexion

Vétéran

let dynamic = "value"; 
let user = {
    id: 1,
    [dynamic] = "other value"
};

Copier après la connexion

5. Supprimer les doublons

Débutant

let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = [];
let flag = false; 
for (j = 0; < array.length; j++) {
   for (k = 0; k < outputArray.length; k++) {
      if (array[j] == outputArray[k]) {
         flag = true;
       }
    }
    if (flag == false) {
      outputArray.push(array[j]);
     }
     flag = false;
}
// tArray = [100, 23, 67, 45]

Copier après la connexion

Vétéran

let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = Array.from(new Set(array))

Copier après la connexion

6. Tableau à objet

Débutant

let arr = ["value1", "value2", "value3"]; 
let arrObject = {};
for (let i = 0; i < arr.length; ++i) {
   if (arr[i] !== undefined) {
     arrObject[i] = arr[i];
   }
}

Copier après la connexion

Vétéran

let arr = ["value1", "value2", "value3"]; 
let arrObject = {...arr};

Copier après la connexion

7. Objet au tableau

Débutant

let number = {
  one: 1, 
  two: 2,
};
let keys = []; 
for (let numbers in numbers) {
  if (number.hasOwnProperty(number)) {
     keys.push(number);
    }
}
// key = [ &#39;one&#39;, &#39;two&#39; ]

Copier après la connexion

Vétéran

let number = {
  one: 1, 
  two: 2,
};
let key = Object.keys(numbers); // key = [ &#39;one&#39;, &#39;two&#39; ]
let value = Object.values(numbers);  // value = [ 1, 2 ]
let entry = Object.entries(numbers); // entry = [[&#39;one&#39; : 1], [&#39;two&#39; : 2]]

Copier après la connexion

État de court-circuit

Débutant

if (docs) {
    goToDocs();
}

Copier après la connexion

Vétéran

docs && goToDocs()

Copier après la connexion

9. Utilisez `^` pour vérifier si les nombres sont égaux

if(a!=123) // before // 一般开发者

if(a^123) // after // B格比较高的

Copier après la connexion

. 10. Parcours d'objet

const age = {
   Rahul: 20,  
   max: 16
};

// 方案1：先得 key 在遍历 key
const keys = Object.keys(age); 
keys.forEach(key => age[key]++);

console.log(age); // { Rahul: 21, max: 16 }

// 方案2 - `for...in` 循环
for(let key in age){
   age[key]++;
}

console.log(age); // { Rahul: 22, max: 18 }

Copier après la connexion

11. Récupérer toutes les clés de l'objet

cosnt obj = {
  name: "前端小智", 
  age: 16, 
  address: "厦门", 
  profession: "前端开发", 
}; 

console.log(Object.keys(obj)); // name, age, address, profession

Copier après la connexion

12. Vérifier si la valeur est un tableau

const arr = [1, 2, 3]; 
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true

Copier après la connexion

13. Initialiser un tableau de taille n et remplissez-le avec les valeurs par défaut

const size = 5;
const defaultValue = 0;
const arr = Array(size).fill(defaultValue);
console.log(arr); // [0, 0, 0, 0, 0]

Copier après la connexion

14 Valeurs vraies et imaginaires

Valeurs imaginaires : false,0, "",null,undefined et . NaN

Vraies valeurs :

,"Values",0",{}. []

15. La différence entre le triple signe égal et le double signe égal

// 双等号 - 将两个操作数转换为相同类型,再比较
console.log(0 == 'o'); // true

// 三等号 - 不转换为相同类型
console.log(0 === '0'); // false

Copier après la connexion

16 Une meilleure façon de recevoir les paramètres

function downloadData(url, resourceId, searchTest, pageNo, limit) {}

downloadData(...); // need to remember the order

Copier après la connexion

Une manière plus simple

function downloadData(
{ url, resourceId, searchTest, pageNo, limit } = {}
) {}

downloadData(
  { resourceId: 2, url: "/posts", searchText: "WebDev" }
);

Copier après la connexion

<.> 17.null vs undefined

null => c'est une valeur, mais

ne l'est pas.

const fn = (x = 'default value') => console.log(x);

fn(undefined); // default value
fn(); // default value

fn(null); // null

Copier après la connexion

undefined Lorsque est passé, la valeur par défaut n'est pas prise, et lorsque

ou rien n'est passé, la valeur par défaut est prise. nullundefined

Texte original : https://dev.to/rahxuls/17-pro-javascript-tricks-you-didn-t-know-5gog

Auteur : Rahul

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation

! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

17 astuces JavaScript pratiques que vous ne connaissiez pas !

1. Opérateur ternaire

2. Numéro à chaîner/chaîne à numéro

3. Remplir le array

4. Propriétés dynamiques de l'objet

5. Supprimer les doublons

6. Tableau à objet

7. Objet au tableau

État de court-circuit

9. Utilisez `^` pour vérifier si les nombres sont égaux

. 10. Parcours d'objet

11. Récupérer toutes les clés de l'objet

12. Vérifier si la valeur est un tableau

13. Initialiser un tableau de taille n et remplissez-le avec les valeurs par défaut

14 Valeurs vraies et imaginaires

// 双等号 - 将两个操作数转换为相同类型,再比较 console.log(0 == 'o'); // true // 三等号 - 不转换为相同类型 console.log(0 === '0'); // false
Copier après la connexion

function downloadData(url, resourceId, searchTest, pageNo, limit) {} downloadData(...); // need to remember the order
Copier après la connexion

null => c'est une valeur, mais

17 astuces JavaScript pratiques que vous ne connaissiez pas !

1. Opérateur ternaire

2. Numéro à chaîner/chaîne à numéro

3. Remplir le array

4. Propriétés dynamiques de l'objet

5. Supprimer les doublons

6. Tableau à objet

7. Objet au tableau

État de court-circuit

9. Utilisez ^ pour vérifier si les nombres sont égaux

. 10. Parcours d'objet

11. Récupérer toutes les clés de l'objet

12. Vérifier si la valeur est un tableau

13. Initialiser un tableau de taille n et remplissez-le avec les valeurs par défaut

14 Valeurs vraies et imaginaires

// 双等号 - 将两个操作数转换为相同类型,再比较 console.log(0 == 'o'); // true // 三等号 - 不转换为相同类型 console.log(0 === '0'); // falseCopier après la connexion

function downloadData(url, resourceId, searchTest, pageNo, limit) {} downloadData(...); // need to remember the orderCopier après la connexion

null => c'est une valeur, mais

9. Utilisez `^` pour vérifier si les nombres sont égaux

// 双等号 - 将两个操作数转换为相同类型,再比较 console.log(0 == 'o'); // true // 三等号 - 不转换为相同类型 console.log(0 === '0'); // false
Copier après la connexion

function downloadData(url, resourceId, searchTest, pageNo, limit) {} downloadData(...); // need to remember the order
Copier après la connexion