Conseils pour utiliser JavaScript qui valent la peine d'être collectés

Toute technologie aura ses propres astuces dans la pratique. De même, il existe quelques astuces lors de l’utilisation de JavaScript, mais elles peuvent souvent être facilement négligées. Sur Internet, de nombreux collègues du secteur résument (ou collectent) de temps en temps quelques conseils dans ce domaine.

En tant que novice en JavaScript, vous devriez accorder plus d'attention à ces conseils, car ces conseils peuvent nous aider à résoudre des problèmes dans le développement commercial réel, et ils seront faciles à résoudre. Dans cet article, nous compilerons quelques conseils sur JavaScript que tout le monde connaît ou non.

[Recommandations de cours associées : Tutoriel vidéo JavaScript]

Array

Regardons le utilisation en premier Quelques astuces courantes utilisées dans les tableaux.

Déduplication de tableau

ES6 fournit plusieurs méthodes de déduplication de tableau concises, mais cette méthode n'est pas adaptée au traitement des tableaux de types non basiques. Pour la déduplication de tableau de type de base, vous pouvez utiliser... new Set() pour filtrer les valeurs en double dans le tableau et créer un nouveau tableau avec uniquement des valeurs uniques.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray);

> Result:(4) [1, 2, 3, 5]

Il s'agit d'une nouvelle fonctionnalité dans ES6. Avant ES6, pour obtenir le même effet, nous devions utiliser plus de code. Cette technique fonctionne pour les tableaux contenant des types de base : non défini, nul, booléen, chaîne et nombre. Si le tableau contient un objet, une fonction ou un autre tableau, vous devez utiliser une autre méthode.

En plus de la méthode ci-dessus, vous pouvez également utiliser Array.from(new Set()) pour y parvenir :

const array = [1, 1, 2, 3, 5, 5, 1]
Array.from(new Set(array))

> Result:(4) [1, 2, 3, 5]

De plus, vous pouvez également utiliser .filter et indexOf( d'Array ) pour y parvenir :

const array = [1, 1, 2, 3, 5, 5, 1]
array.filter((arr, index) => array.indexOf(arr) === index)

> Result:(4) [1, 2, 3, 5]

Notez que la méthode indexOf() renverra la première occurrence de l'élément du tableau dans le tableau. C'est pourquoi nous pouvons comparer l'index renvoyé par la méthode indexOf() avec l'index actuel à chaque itération pour déterminer si l'élément actuel est un doublon.

Assurez-vous de la longueur du tableau

Lorsque vous traitez la structure de grille, si la longueur de chaque ligne des données d'origine n'est pas égale , vous devez recréer les données. Afin de vous assurer que la longueur des données de chaque ligne est égale, vous pouvez utiliser Array.fill pour traiter :

let array = Array(5).fill('');
console.log(array);

> Result: (5) ["", "", "", "", ""]

Mappage de tableau

N'utilisez pas la méthode Array.map pour mapper les valeurs du tableau.

const array = [
    {
        name: '大漠',
        email: 'w3cplus@hotmail.com'
    },
    {
        name: 'Airen',
        email: 'airen@gmail.com'
    }
]
const name = Array.from(array, ({ name }) => name)

> Result: (2) ["大漠", "Airen"]

Troncation du tableau

Si vous souhaitez supprimer des valeurs de la fin du tableau (supprimez le dernier élément du tableau) , il existe un meilleur moyen que d'utiliser splice(), une alternative plus rapide.

Par exemple, si vous connaissez la taille du tableau d'origine, vous pouvez redéfinir la valeur de l'attribut length du tableau pour supprimer la valeur de la fin du tableau :

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array.length)
> Result: 10

array.length = 4
console.log(array)
> Result: (4) [0, 1, 2, 3]

Ceci est une solution particulièrement intéressante. Cependant, la méthode slice() s'exécute plus rapidement et fonctionne mieux :

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); 
> Result: [0, 1, 2, 3]

Filtrez les valeurs fausses dans le tableau

Si vous vouloir filtrer les valeurs fausses dans le tableau, telles que 0, non défini, nul, faux, peut être obtenu via les méthodes de mappage et de filtrage :

const array = [0, 1, '0', '1', '大漠', 'w3cplus.com', undefined, true, false, null, 'undefined', 'null', NaN, 'NaN', '1' + 0]
array.map(item => {
    return item
}).filter(Boolean)

> Result: (10) [1, "0", "1", "大漠", "w3cplus.com", true, "undefined", "null", "NaN", "10"]

Obtenir le dernier élément du array

Lorsque la valeur de slice() du tableau est une valeur positive, les éléments du tableau sont interceptés depuis le début du tableau. Si la valeur est un entier négatif, le tableau. les éléments peuvent être obtenus à partir de la fin du tableau.

let array = [1, 2, 3, 4, 5, 6, 7]

const firstArrayVal = array.slice(0, 1)
> Result: [1]

const lastArrayVal = array.slice(-1)
> Result: [7]

console.log(array.slice(1))
> Result: (6) [2, 3, 4, 5, 6, 7]

console.log(array.slice(array.length))
> Result: []

Comme le montre l'exemple ci-dessus, utilisez array.slice(-1) pour obtenir le dernier élément du tableau. De plus, vous pouvez également utiliser la méthode suivante pour obtenir le dernier élément du tableau :

console.log(array.slice(array.length - 1))
> Result: [7]

Filtrer et trier la liste des chaînes

Vous pouvez avoir une liste de nombreux noms et devoir filtrer les noms en double et les trier par ordre alphabétique.

Dans notre exemple, nous avons préparé une liste de mots réservés JavaScript pour différentes versions du langage, mais comme vous pouvez le constater, il y a beaucoup de mots-clés en double et ils ne sont pas classés par ordre alphabétique. C'est donc une liste parfaite de chaînes (tableau) pour tester nos connaissances JavaScript.

var keywords = ['do', 'if', 'in', 'for', 'new', 'try', 'var', 'case', 'else', 'enum', 'null', 'this', 'true', 'void', 'with', 'break', 'catch', 'class', 'const', 'false', 'super', 'throw', 'while', 'delete', 'export', 'import', 'return', 'switch', 'typeof', 'default', 'extends', 'finally', 'continue', 'debugger', 'function', 'do', 'if', 'in', 'for', 'int', 'new', 'try', 'var', 'byte', 'case', 'char', 'else', 'enum', 'goto', 'long', 'null', 'this', 'true', 'void', 'with', 'break', 'catch', 'class', 'const', 'false', 'final', 'float', 'short', 'super', 'throw', 'while', 'delete', 'double', 'export', 'import', 'native', 'public', 'return', 'static', 'switch', 'throws', 'typeof', 'boolean', 'default', 'extends', 'finally', 'package', 'private', 'abstract', 'continue', 'debugger', 'function', 'volatile', 'interface', 'protected', 'transient', 'implements', 'instanceof', 'synchronized', 'do', 'if', 'in', 'for', 'let', 'new', 'try', 'var', 'case', 'else', 'enum', 'eval', 'null', 'this', 'true', 'void', 'with', 'break', 'catch', 'class', 'const', 'false', 'super', 'throw', 'while', 'yield', 'delete', 'export', 'import', 'public', 'return', 'static', 'switch', 'typeof', 'default', 'extends', 'finally', 'package', 'private', 'continue', 'debugger', 'function', 'arguments', 'interface', 'protected', 'implements', 'instanceof', 'do', 'if', 'in', 'for', 'let', 'new', 'try', 'var', 'case', 'else', 'enum', 'eval', 'null', 'this', 'true', 'void', 'with', 'await', 'break', 'catch', 'class', 'const', 'false', 'super', 'throw', 'while', 'yield', 'delete', 'export', 'import', 'public', 'return', 'static', 'switch', 'typeof', 'default', 'extends', 'finally', 'package', 'private', 'continue', 'debugger', 'function', 'arguments', 'interface', 'protected', 'implements', 'instanceof'];

Comme nous ne voulons pas modifier notre liste d'origine, nous allons utiliser une fonction d'ordre supérieur appelée filter qui renverra un nouveau tableau filtré basé sur la méthode de rappel que nous avons transmise. La méthode de rappel comparera l'index du mot-clé actuel dans la liste d'origine avec l'index de la nouvelle liste et ne poussera le mot-clé actuel vers le nouveau tableau que si l'index correspond.

Enfin, nous sommes prêts à utiliser la méthode de tri pour trier la liste filtrée. Le tri n'accepte qu'une méthode de comparaison comme paramètre et renvoie la liste triée par ordre alphabétique.

L'utilisation des fonctions fléchées sous ES6 semble plus simple :

const filteredAndSortedKeywords = keywords
    .filter((keyword, index) => keywords.lastIndexOf(keyword) === index)
    .sort((a, b) => a < b ? -1 : 1);

Voici la liste finale filtrée et triée des mots réservés JavaScript :

console.log(filteredAndSortedKeywords);

> Result: ['abstract', 'arguments', 'await', 'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const', 'continue', 'debugger', 'default', 'delete', 'do', 'double', 'else', 'enum', 'eval', 'export', 'extends', 'false', 'final', 'finally', 'float', 'for', 'function', 'goto', 'if', 'implements', 'import', 'in', 'instanceof', 'int', 'interface', 'let', 'long', 'native', 'new', 'null', 'package', 'private', 'protected', 'public', 'return', 'short', 'static', 'super', 'switch', 'synchronized', 'this', 'throw', 'throws', 'transient', 'true', 'try', 'typeof', 'var', 'void', 'volatile', 'while', 'with', 'yield']

Effacement d'un tableau

Si vous définissez un tableau et que vous souhaitez ensuite l'effacer. Normalement, vous feriez ceci :

let array = [1, 2, 3, 4];
function emptyArray() {
    array = [];
}
emptyArray();

Cependant, il existe un moyen plus efficace d'effacer le tableau. Vous pouvez écrire :

let array = [1, 2, 3, 4];
function emptyArray() {
    array.length = 0;
}
emptyArray();

Tableau multidimensionnel plat

使用...运算符，将多维数组拍平：

const arr = [1, [2, '大漠'], 3, ['blog', '1', 2, 3]]
const flatArray = [].concat(...arr)
console.log(flatArray)

> Result: (8) [1, 2, "大漠", 3, "blog", "1", 2, 3]

不过上面的方法只适用于二维数组。不过通过递归调用，可以使用它适用于二维以下的数组：

function flattenArray(arr) {  
    const flattened = [].concat(...arr);  
    return flattened.some(item => Array.isArray(item)) ? flattenArray(flattened) : flattened;
}
const array = [1, [2, '大漠'], 3, [['blog', '1'], 2, 3]]
const flatArr = flattenArray(array)
console.log(flatArr)

> Result: (8) [1, 2, "大漠", 3, "blog", "1", 2, 3]

从数组中获取最大值和最小值

可以使用Math.max和Math.min取出数组中的最大小值和最小值：

const numbers = [15, 80, -9, 90, -99]
const maxInNumbers = Math.max.apply(Math, numbers)
const minInNumbers = Math.min.apply(Math, numbers)

console.log(maxInNumbers)
> Result: 90

console.log(minInNumbers)
> Result: -99

另外还可以使用ES6的...运算符来完成：

const numbers = [1, 2, 3, 4];
Math.max(...numbers) 
> Result: 4

Math.min(...numbers) 
> > Result: 1

对象

在操作对象时也有一些小技巧。

使用...运算符合并对象或数组中的对象

同样使用ES的...运算符可以替代人工操作，合并对象或者合并数组中的对象。

// 合并对象
const obj1 = {
    name: '大漠',
    url: 'w3cplus.com'
}
const obj2 = {
    name: 'airen',
    age: 30
}
const mergingObj = {...obj1, ...obj2}
> Result: {name: "airen", url: "w3cplus.com", age: 30}

// 合并数组中的对象
const array = [
    {
        name: '大漠',
        email: 'w3cplus@gmail.com'
    },
    {
        name: 'Airen',
        email: 'airen@gmail.com'
    }
]
const result = array.reduce((accumulator, item) => {
    return {
        ...accumulator,
        [item.name]: item.email
    }
}, {})
> Result: {大漠: "w3cplus@gmail.com", Airen: "airen@gmail.com"}

有条件的添加对象属性

不再需要根据一个条件创建两个不同的对象，以使它具有特定的属性。为此，使用...操作符是最简单的。

const getUser = (emailIncluded) => {
    return {
        name: '大漠',
        blog: 'w3cplus',
        ...emailIncluded && {email: 'w3cplus@hotmail.com'}
    }
}

const user = getUser(true)
console.log(user)
> Result: {name: "大漠", blog: "w3cplus", email: "w3cplus@hotmail.com"}

const userWithoutEmail = getUser(false)
console.log(userWithoutEmail)
> Result: {name: "大漠", blog: "w3cplus"}

解构原始数据

你可以在使用数据的时候，把所有数据都放在一个对象中。同时想在这个数据对象中获取自己想要的数据。在这里可以使用ES6的Destructuring特性来实现。比如你想把下面这个obj中的数据分成两个部分：

const obj = {
    name: '大漠',
    blog: 'w3cplus',
    email: 'w3cplus@hotmail.com',
    joined: '2019-06-19',
    followers: 45
}
let user = {}, userDetails = {}

({name: user.name, email: user.email, ...userDetails} = obj)
> {name: "大漠", blog: "w3cplus", email: "w3cplus@hotmail.com", joined: "2019-06-19", followers: 45}

console.log(user)
> Result: {name: "大漠", email: "w3cplus@hotmail.com"}

console.log(userDetails)
> Result: {blog: "w3cplus", joined: "2019-06-19", followers: 45}

动态更改对象的key

在过去，我们首先必须声明一个对象，然后在需要动态属性名的情况下分配一个属性。在以前，这是不可能以声明的方式实现的。不过在ES6中，我们可以实现：

const dynamicKey = 'email'
let obj = {
    name: '大漠',
    blog: 'w3cplus',
    [dynamicKey]: 'w3cplus@hotmail.com'
}

console.log(obj)
> Result: {name: "大漠", blog: "w3cplus", email: "w3cplus@hotmail.com"}

判断对象的数据类型

使用Object.prototype.toString配合闭包来实现对象数据类型的判断：

const isType = type => target => `[object ${type}]` === Object.prototype.toString.call(target)
const isArray = isType('Array')([1, 2, 3])

console.log(isArray)
> Result: true

上面的代码相当于：

function isType(type){
    return function (target) {
        return `[object ${type}]` === Object.prototype.toString.call(target)
    }
}

isType('Array')([1,2,3])
> Result: true

或者：

const isType = type => target => `[object ${type}]` === Object.prototype.toString.call(target)
const isString = isType('String')
const res = isString(('1'))

console.log(res)
> Result: true

检查某对象是否有某属性

当你需要检查某属性是否存在于一个对象，你可能会这样做：

var obj = {
    name: '大漠'
};
if (obj.name) { 
    console.log(true) // > Result: true
}

这是可以的，但是你需要知道有两种原生方法可以解决此类问题。in 操作符 和 Object.hasOwnProperty，任何继承自Object的对象都可以使用这两种方法。

var obj = {
    name: '大漠'
};
obj.hasOwnProperty('name');     // > true
'name' in obj;             // > true

obj.hasOwnProperty('valueOf');  // > false, valueOf 继承自原型链
'valueOf' in obj;          // > true

两者检查属性的深度不同，换言之hasOwnProperty只在本身有此属性时返回true,而in操作符不区分属性来自于本身或继承自原型链。

这是另一个例子:

var myFunc = function() {
    this.name = '大漠';
};
myFunc.prototype.age = '10 days';
var user = new myFunc();

user.hasOwnProperty('name'); 
> Result: true

user.hasOwnProperty('age'); 
> Result: false,   //  因为age来自于原型链

创造一个纯对象

使用Object.create(null)可以创建一个纯对象，它不会从Object类继承任何方法（例如：构造函数、toString() 等）：

const pureObject = Object.create(null);

console.log(pureObject);                //=> {}
console.log(pureObject.constructor);    //=> undefined
console.log(pureObject.toString);       //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined

数据类型转换

JavaScript中数据类型有Number、String、Boolean、Object、Array和Function等，在实际使用时会碰到数据类型的转换。在转换数据类型时也有一些小技巧。

转换为布尔值

布尔值除了true和false之外，JavaScript还可以将所有其他值视为“真实的”或“虚假的”。除非另有定义，JavaScript中除了0、''、null、undefined、NaN和false之外的值都是真实的。

我们可以很容易地在真和假之间使用!运算符进行切换，它也会将类型转换为Boolean。比如：

const isTrue = !0;
const isFasle = !1;
const isFasle = !!0 // !0 => true，true的反即是false

console.log(isTrue)
> Result: true

console.log(typeof isTrue)
> Result: 'boolean'

这种类型的转换在条件语句中非常方便，比如将!1当作false。

转换为字符串

我们可以使用运算符+后紧跟一组空的引号''快速地将数字或布尔值转为字符串：

const val = 1 + ''
const val2 = false + ''

console.log(val)
>  Result: "1"

console.log(typeof val)
> Result: "string"

console.log(val2)
> Result: "false"

console.log(typeof val2)
> Result: "string"

转换为数值

上面我们看到了，使用+紧跟一个空的字符串''就可以将数值转换为字符串。相反的，使用加法运算符+可以快速实现相反的效果。

let int = '12'
int = +int

console.log(int)
> Result: 12

console.log(typeof int)
> Result: 'number'

用同样的方法可以将布尔值转换为数值：

console.log(+true)
> Return: 1

console.log(+false)
> Return: 0

在某些上下文中，+会被解释为连接操作符，而不是加法运算符。当这种情况发生时，希望返回一个整数，而不是浮点数，那么可以使用两个波浪号~~。双波浪号~~被称为按位不运算符，它和-n - 1等价。例如， ~15 = -16。这是因为- (-n - 1) - 1 = n + 1 - 1 = n。换句话说，~ - 16 = 15。

我们也可以使用~~将数字字符串转换成整数型：

const int = ~~'15'

console.log(int)
> Result: 15

console.log(typeof int)
> Result: 'number'

同样的，NOT操作符也可以用于布尔值： ~true = -2，~false = -1。

浮点数转换为整数

平常都会使用Math.floor()、Math.ceil()或Math.round()将浮点数转换为整数。在JavaScript中还有一种更快的方法，即使用|（位或运算符）将浮点数截断为整数。

console.log(23.9 | 0);  
> Result: 23

console.log(-23.9 | 0); 
> Result: -23

|的行为取决于处理的是正数还是负数，所以最好只在确定的情况下使用这个快捷方式。

如果n是正数，则n | 0有效地向下舍入。如果n是负数，它有效地四舍五入。更准确的说，该操作删除小数点后的内容，将浮点数截断为整数。还可以使用~~来获得相同的舍入效果，如上所述，实际上任何位操作符都会强制浮点数为整数。这些特殊操作之所以有效，是因为一旦强制为整数，值就保持不变。

|还可以用于从整数的末尾删除任意数量的数字。这意味着我们不需要像下面这样来转换类型：

let str = "1553";

Number(str.substring(0, str.length - 1));
> Result: 155

我们可以像下面这样使用|运算符来替代：

console.log(1553 / 10   | 0)  
> Result: 155

console.log(1553 / 100  | 0)  
> Result: 15

console.log(1553 / 1000 | 0)  
> Result: 1

使用!!操作符转换布尔值

有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。

对于变量可以使用!!variable做检测，只要变量的值为:0、null、" "、undefined或者NaN都将返回的是false，反之返回的是true。比如下面的示例：

function Account(cash) {
    this.cash = cash;
    this.hasMoney = !!cash;
}

var account = new Account(100.50);
console.log(account.cash); 
> Result: 100.50

console.log(account.hasMoney); 
> Result: true

var emptyAccount = new Account(0);
console.log(emptyAccount.cash); 
> Result: 0

console.log(emptyAccount.hasMoney); 
> Result: false

在这个示例中，只要account.cash的值大于0，那么account.hasMoney返回的值就是true。

还可以使用!!操作符将truthy或falsy值转换为布尔值：

!!""        // > false
!!0         // > false
!!null      // > false
!!undefined  // > false
!!NaN       // > false

!!"hello"   // > true
!!1         // > true
!!{}        // > true
!![]        // > true

小结

文章主要收集和整理了一些有关于JavaScript使用的小技巧。既然是技巧在必要的时候能帮助我们快速的解决一些问题。如果你有这方面的相关积累，欢迎在下面的评论中与我们一起分享。后续将会持续更新，希望对大家有所帮助。

本文来自 js教程 栏目，欢迎学习！

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!