JS进阶一些小技巧

前端学苑
242 阅读10分钟

一、针对数据操作

1、数组去重

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

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

这是ES6中的新特性，在ES6之前，要实现同样的效果，我们需要使用更多的代码。该技巧适用于包含基本类型的数组：undefined、null、boolean、string和number。

除了上面的方法之外，还可以使用Array.from(new Set())来实现：

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

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

另外，还可以使用Array的.filter及indexOf()来实现：

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

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

注意，indexOf()方法将返回数组中第一个出现的数组项。这就是为什么我们可以在每次迭代中将indexOf()方法返回的索引与当索索引进行比较，以确定当前项是否重复。

2、数组映射

Array.from 方法操作

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

const name = Array.from(array, ({ name }) => name)

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

3、数组截断

如果你想从数组末尾删除值（删除数组中的最后一项），有比使用splice()更快的替代方法。

例如，你知道原始数组的大小，可以重新定义数组的length属性的值，就可以实现从数组末尾删除值：

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]

这是一个特别简洁的解决方案。但是，slice()方法运行更快，性能更好：

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]

4、过滤掉数组中的falsy值

如果你想过滤数组中的falsy值，比如0、undefined、null、false，那么可以通过map和filter方法实现：

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"]

5、获取数组的最后一项

数组的slice()取值为正值时，从数组的开始处截取数组的项，如果取值为负整数时，可以从数组末属开始获取数组项。

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: []

正如上面示例所示，使用array.slice(-1)获取数组的最后一项，除此之外还可以使用下面的方式来获取数组的最后一项：

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

6、过滤并排序字符串列表

你可能有一个很多名字组成的列表，需要过滤掉重复的名字并按字母表将其排序。

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'];

因为我们不想改变我们的原始列表，所以我们准备用高阶函数叫做filter，它将基于我们传递的回调方法返回一个新的过滤后的数组。回调方法将比较当前关键字在原始列表里的索引和新列表中的索引，仅当索引匹配时将当前关键字push到新数组。

最后我们准备使用sort方法排序过滤后的列表，sort只接受一个比较方法作为参数，并返回按字母表排序后的列表。

在ES6下使用箭头函数看起来更简单:

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

这是最后过滤和排序后的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']

7、清空数组

如果你定义了一个数组，然后你想清空它。 通常，你会这样做：

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

但是，这有一个效率更高的方法来清空数组。 你可以这样写:

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

8、拍平多维数组

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

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]

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

可以使用 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

二、针对对象操作

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

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"}

2、有条件的添加对象属性

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

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"}

3、判断对象的数据类型

使用 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

4、创造一个纯对象

使用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等，在实际使用时会碰到数据类型的转换。在转换数据类型时也有一些小技巧。

1、转换为布尔值

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

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

console.log(isTrue)
> Result: true

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

2、转换为字符串

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

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"

3、转换为数值

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

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

在某些上下文中，+会被解释为连接操作符，而不是加法运算符。当这种情况发生时，希望返回一个整数，而不是浮点数，那么可以使用两个波浪号~~。

四、hacker 方法

1、Replace All

我们知道 string.Replace() 函数只会替换第一个项目。

你可以在这个正则表达式的末尾添加 /g 来替换所有内容。

var example = "potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"
console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"

2、提取唯一值

我们可以使用 Set 对象和 Spread 运算符，创建一个剔除重复值的新数组。

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]

3、将数字转换为字符串

我们只需使用带空引号的串联运算符即可。

var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number);
// string

4、将字符串转换为数字

用 + 运算符即可。

请注意这里的用法，因为它只适用于“字符串数字”。

the_string = "123";
console.log(+the_string);
// 123
the_string = "hello";
console.log(+the_string);
// NaN

5、随机排列数组中的元素

每天我都在随机排来排去……

var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {
    return Math.random() - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

6. 展平多维数组

只需使用 Spread 运算符。

var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries);
// [1, 2, 5, 6, 7, 9]

7. 短路条件

举个例子：

if (available) {
    addToCart();
}

只需使用变量和函数就能缩短它：

available && addToCart()

8、使用 length 调整大小 / 清空数组

基本上就是覆盖数组的 length。

如果我们要调整数组的大小：

var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 4;
console.log(entries.length);
// 4
console.log(entries);
// [1, 2, 3, 4]

如果我们要清空数组：

var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 0;
console.log(entries.length);
// 0
console.log(entries);
// []

五、常用基础操作

1、带有多个条件的 if 语句

//longhand
if (fruit === 'apple' || fruit === 'banana' || fruit === 'orange' || fruit ==='mango') {
    //logic
}

//shorthand
if (['apple', 'banana', 'orange', 'mango'].includes(fruit)) {
   //logic
}

2、 If... else 简写 三元运算符

// Longhand
let mychoice: boolean;
if (money > 100) {
    mychoice= true;
} else {
    mychoice= false;
}

// Shorthand
let mychoice= (money > 10) ? true : false;
//or we can use directly
let mychoice= money > 10;
console.log(mychoice);

3、变量声明

//Longhand 
let data1;
let data2= 1;

//Shorthand 
let data1, data2= 1;

4、检查非空值（null、undefined 和空值检查）

如果我们想检查变量不为空怎么办？我们现在可以摆脱再次写入所有条件。

// Longhand
if (data1 !== null || data1!== undefined || data1 !== '') {
    let data2 = data1;
}

// Shorthand
let data2 = data1 || '';

5、空检查

最常用的操作数之一，但请确保你的值为真、非空字符串、定义的值和非空值。

// Longhand
if (data1 === true) or if (data1 !== "") or if (data1 !== null)
  
// Shorthand //
if (test1)

6、 AND(&&) 运算符

如果我们想避免少使用一个 if 语句，那么这个技巧会很有帮助。

//Longhand 
if (test1) {
 callMethod(); 
}

//Shorthand 
test1 && callMethod();

7、返回简写

这将有助于避免使用大量代码，专门返回到基于返回语句的调用方法。

// Longhand
let value;
function returnMe() {
    if (!(value === undefined)) {
        return value;
    } else {
        return callFunction('value');
    }
}
var data = returnMe();
console.log(data); //output value
function callFunction(val) {
    console.log(val);
}

// Shorthand
function returnMe() {
    return value || callFunction('value');
}

8、Switch语句优化

如果你想优化你的 switch 语句，那么这个可以提供帮助。

// Longhand
switch (data) {
    case 1:
        data1();
        break;
    case 2:
        data2();
        break;
    case 3:
        data();
        break;
        // And so on...
}

// Shorthand
var data = {
    1: data1,
    2: data2,
    3: data
};
const val = 1
data[val]();
function data1() {
    console.log("data1");
}
function data2() {
    console.log("data2");
}
function data() {
    console.log("data");
}

9、 传播运算符

在另一个地方创建数组引用和浅拷贝也很有用。

//longhand
// joining arrays using concat
const testdata= [1, 2, 3];
const values = [4 ,5 , 6].concat(data);

//shorthand
// joining arrays
const testdata = [1, 2, 3];
const values = [4 ,5 , 6, ...testdata];
console.log(test); // [ 4, 5, 6, 1, 2, 3]

对于克隆，我们也可以使用扩展运算符。

//longhand
// cloning arrays
const data1 = [1, 2, 3];
const data2 = data1.slice()

//shorthand
// cloning arrays
const data1 = [1, 2, 3];
const data2 = [...data1];

10、数字转换

//Longhand 
let test1 = parseInt('12'); 
let test2 = parseFloat('2.33');

//Shorthand 
let test1 = +'12'; 
let test2 = +'2.33';

11、解构赋值

//longhand
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;

//shorthand
const { test1, test2, test3 } = this.data;
avatar
文章
阅读
粉丝
相关推荐
JS的进阶技巧
2.4k阅读
 · 
81点赞
前端进阶之必会的JavaScript技巧总结
20k阅读
 · 
800点赞
JS进阶 | Proxy代理对象
27k阅读
 · 
177点赞
JavaScript进阶知识点
11k阅读
 · 
189点赞
「万字进阶」深入浅出 Commonjs 和 Es Module
45k阅读
 · 
1.5k点赞