【面试题】15个提高Javascript开发技巧_15个提高javascript开发的 技巧

developer.mozilla.org/enUS/docs/W…

regexr.com/

regex101.com/

6.charAt() 快捷键

你只想从一个字符串中选择一个字符,在一个特定的位置,对吧?我敢打赌,你首先想到的是使用 charAt 函数,如下所示:

"string".charAt(0);

但是得到这个,通过记住 String 是一个字符数组的类比,你会得到相同的结果:

"string"[0]; // Returns 's'

7.以 10 为底的幂

这只是对 Base-10 指数数或充满零的著名数字的一种更精简的表示法。对于数学比较接近的人来说,看到其中一个不会太惊讶,但是一个数字 10000 在 JS 中可以很容易地被 1e4 替换,即 1 后跟 4 个零,如下所示:

for (let i = 0; i < 1e4; i++) {

8.模板文字

这种语义特性是 ECMAScript 版本 6 或更高版本所独有的,并且极大地简化了读取变量集中的字符串连接。例如,下面的串联:

const question = “My number is “ + number + “, ok?”

这个很简单,你可能做了更糟糕的连接。从 ES6 开始,我们可以使用模板文字进行这种连接:

const question = `My number is ${number}, ok?`

9.箭头函数

箭头函数是声明函数的缩短方式。是的,自第一个 JavaScript 版本以来,有更多方法可以做同样的事情。例如,下面是一个求和函数:

function sum(n1,n2){
   return n1 + n2;
}

我们也可以像这样声明这个函数:

const sum = function(n1,n2){
   return n1+n2;
}

但是使用箭头函数:

const sum = (n1,n2) => n1 + n2;

10.参数解构

本技巧适用于那些充满参数的函数,并且你决定用一个对象替换所有这些函数。或者对于那些真正需要配置对象作为参数的函数。

到目前为止都没有问题,毕竟谁从来没有经历过这个?问题是必须继续访问由参数传递的对象,然后是我们要读取的每个属性,对吧?像这样:

function init(config){
   const s = config.s;
   const t = config.t;
   return s + t;// or config.s + config.t
}

init({s: "1", t: "2"});

参数解构特性正是为了简化这一点,同时通过用下面的语句替换前面的语句来帮助代码可读性:

function init({s, t}){
   return s + t;
}

init({s: 1, t: 2});

最重要的是,我们仍然可以在参数对象的属性中添加默认值:

function init({s = 10, t = 20}){
   return s + t;
}

init({s: 1});

这样,s 的值为 1,但 t 的值将默认为该属性,即 20。

11.键值名称

一个非常令人上瘾的功能是为对象分配属性的缩写方式。想象一下,你有一个 person 对象,该对象具有将通过 name 变量分配的 name 属性。它看起来像这样:

const name = "Joseph"
const person = { name: name }
// { name: "Joseph" }

虽然你可以这样做:

const name = "Joseph"
const person = { name }
// { name: "Joseph" }

也就是说,如果你的变量与属性同名,则不需要调用它,只需传递变量即可。多个属性也是如此:

const name = "Joseph"
const canCode = true
const person = { name, canCode }
// { name: "Joseph", canCode: true }

12.Map

考虑以下对象数组:

const animals = [
    {
        "name": "cat",
        "size": "small",
        "weight": 5
    },
    {
        "name": "dog",
        "size": "small",
        "weight": 10
    },
    {
        "name": "lion",
        "size": "medium",
        "weight": 150
    },
    {
        "name": "elefante",
        "size": "large",
        "weight": 5000
    }
]

现在想象一下,我们只想将动物的名字添加到另一个数组中。通常我们会这样做:

let animalNames = [];

for (let i = 0; i < animals.length; i++) {
    animalNames.push(animals[i].name);
}

但是使用 Map,我们可以这样做:

let animalNames = animais.map((animal) => {
    return animal.nome;
})

请注意,map 需要一个最多三个参数的函数:

  • 第一个是当前对象(如在 foreach 中)
  • 第二个是当前迭代的索引
  • 第三个是整个数组

显然,这个函数将为动物数组中的每个对象调用一次。

13.Filter

如果我们想遍历与上一个技巧中相同的动物对象数组,但这次只返回那些大小为“小”的对象怎么办?

我们将如何使用常规 JS 来做到这一点?

let smallAnimals = [];

for (let i = 0; i < animals.length; i ++) {
    if (animals[i].size === "small") {
       smallAnimals.push(animals[i])
    }
}

然而,使用过filter操作符,我们可以用一种更简洁、更清晰的方式来做到这一点:

let smallAnimals = animais.filter((animal) => {
    return animal.size === "small"
})

Filter 期望一个函数的参数是当前迭代的对象(如在 foreach 中),它应该返回一个布尔值,指示该对象是否将成为返回数组的一部分(true 表示它通过了测试 并将成为其中的一部分)。

14.Reduce

Javascript 的另一个重要特性是 reduce。它允许我们以非常简单和强大的方式在集合之上进行分组和计算。例如,如果我们想将动物对象数组中所有动物的重量相加,我们会怎么做?

let totalWeight = 0;

for (let i = 0; i < animals.length; i++) {
    totalWeight += animals[i].weight;
}

但是使用 reduce 我们可以这样做:

let totalWeight = animals.reduce((total, animal) => {
    return total += animal.weight;
}, 0)



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/8087f8c06b129975b3b7be228aa41f0d.png)

**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)

**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)
  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值