5年前,学习 null 和 undefined ,现在有了新的认知,看看这位人才怎么说?(1)

最后

面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试题

面试题目录

function myFunc() {

return;

}

assert.equal(myFunc(), undefined);

如果一个参数x被省略了,语言将该参数初始化为undefined

function myFunc() {

return;

}

assert.equal(myFunc(), undefined);

myFunc();

通过obj?.someProp的可选链路,如果obj未定义或为空,则返回未定义。

undefined?.someProp

undefined

null?.someProp

undefined

3.null 出现情况


一个对象的原型要么是一个对象,要么在原型链的末端是nullObject.prototype没有原型。

Object.getPrototypeOf(Object.prototype)

null

如果我们将一个正则表达式(如/a/)与一个字符串(如'x')相匹配,我们要么得到一个带有匹配数据的对象(如果匹配成功),要么得到空(如果匹配失败)。

/a/.exec(‘x’)

null

JSON数据格式不支持undefined,只支持null

JSON.stringify({a: undefined, b: null})

‘{“b”:null}’

4.特别处理 undefined 或 null 的运算符


4.1 undefined 和参数默认值

在以下情况下,将使用参数默认值。

  • 缺少一个参数。

  • 一个参数的值是undefined

例如:

function myFunc(arg=‘abc’) {

return arg;

}

assert.equal(myFunc(‘hello’), ‘hello’);

assert.equal(myFunc(), ‘abc’);

assert.equal(myFunc(undefined), ‘abc’);

undefined也触发了参数的默认值,这说明它是一个元值。

下面的例子说明了这一点的用处。

function concat(str1=‘’, str2=‘’) {

return str1 + str2;

}

function twice(str) { // (A)

return concat(str, str);

}

A行,我们没有为str指定一个参数默认值。当这个参数缺失时,我们把这个状态转发给concat(),让它选择一个默认值。

4.2 undefined 的和解构的默认值

解构中的缺省值与参数缺省值的工作原理类似–如果一个变量在数据中没有匹配,或者它与undefined的变量匹配,就会使用它们。

const [a=‘a’] = [];

assert.equal(a, ‘a’);

const [b=‘b’] = [undefined];

assert.equal(b, ‘b’);

const {prop: c=‘c’} = {};

assert.equal(c, ‘c’);

const {prop: d=‘d’} = {prop: undefined};

assert.equal(d, ‘d’);

4.3 undefined 和 null 以及可选链

当通过 value?.prop 进行可选的链接时

  • 如果valueundefinednull,则返回 undefined。也就是说,只要value.prop会抛出一个异常,就会发生这种情况。

  • 否则,返回value.prop

function getProp(value) {

// optional static property access

return value?.prop;

}

assert.equal(

getProp({prop: 123}), 123);

assert.equal(

getProp(undefined), undefined);

assert.equal(

getProp(null), undefined);

下面两个操作的效果类似。

obj?.[«expr»] // optional dynamic property access

func?.(«arg0», «arg1») // optional function or method call

4.4 undefined 和 null 和 nullish 聚结

nullish 合并算子??如果一个值undefined或为null,则允许我们使用默认值:

undefined ?? ‘default value’

‘default value’

null ?? ‘default value’

‘default value’

0 ?? ‘default value’

0

123 ?? ‘default value’

123

‘’ ?? ‘default value’

‘’

‘abc’ ?? ‘default value’

‘abc’

null合并赋值操作符??=:

function setName(obj) {

obj.name ??= ‘(Unnamed)’;

return obj;

}

assert.deepEqual(

setName({}),

{name: ‘(Unnamed)’}

);

assert.deepEqual(

setName({name: undefined}),

{name: ‘(Unnamed)’}

);

assert.deepEqual(

setName({name: null}),

{name: ‘(Unnamed)’}

);

assert.deepEqual(

setName({name: ‘Jane’}),

{name: ‘Jane’}

);

5. 处理 undefined 和 null


下面分享一下我们自己的代码中处理undefinednull的最常见方法。

5.1 undefined 或 null 都不能作为实际值使用

举例,我们可能希望一个属性file.title永远存在,并且永远是一个字符串。有两种常见的方法来实现这一点。

这里,只检查undefinednull,而不检查一个值是否是字符串。你必须自己决定是否要把它作为一个额外的安全措施来实施。

5.1 undefined 和 null 都是禁止的

如下所示

function createFile(title) {

if (title === undefined || title === null) {

throw new Error(‘title must not be nullish’);

}

// ···

}

为什么选择这种方法?

我们想把undefinednull当作一样的东西,因为JavaScript代码经常这样做–比如说。

// 检测一个属性是否存在

if (!obj.requiredProp) {

obj.requiredProp = 123;

}

const myValue = myParameter ?? ‘some default’;

如果我们的代码中出现了问题,出现了undefinednull,我们希望它尽可能快地失败。

5.1.2 undefined 和 null 都会触发默认值

如下所示

function createFile(title) {

title ??= ‘(Untitled)’;

// ···

}

我们不能在这里使用参数缺省值,因为它只由undefined 触发。相反,我们依靠nullish 合并赋值运算符??=

为什么选择这种方法?

  • 我们想把undefinednull同等对待(见上一节)。

  • 我们希望我们的代码能够稳健地、无声地处理 undefinednull

5.2 undefined 或 null 都是“关闭”值

例如,我们可能希望一个属性file.title是一个字符串或 “关闭”(文件没有标题)。有几种方法可以实现这一点。

5.2.1 null是 "关闭的 "值

function createFile(title) {

if (title === undefined) {

throw new Error(‘title must not be undefined’);

}

return {title};

}

另外,undefined可以触发一个默认值。

function createFile(title = ‘(Untitled)’) {

return {title};

}

为什么选择这种方法?

  • 我们需要一个表示“关闭”的非值。

  • 我们不希望我们的非值触发参数默认值和解构默认值。

  • 我们想把非值字符串化为JSON(这是我们不能用undefined做的)。

5.2.2 undefined 是"关闭的 "值。

function createFile(title) {

if (title === null) {

throw new Error(‘title must not be null’);

}

return {title};

}

为什么选择这种方法?

  • 我们需要一个表示“关闭”的非值。

  • 我们确实想让我们的非值触发参数默认值和解构默认值。

5.2.3 为什么不同时使用undefined和null作为 "关闭 "的值?

最后

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

闭的 "值。

function createFile(title) {

if (title === null) {

throw new Error(‘title must not be null’);

}

return {title};

}

为什么选择这种方法?

  • 我们需要一个表示“关闭”的非值。

  • 我们确实想让我们的非值触发参数默认值和解构默认值。

5.2.3 为什么不同时使用undefined和null作为 "关闭 "的值?

最后

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中…(img-w2p9iud1-1715770815806)]

[外链图片转存中…(img-bMSUpZFe-1715770815806)]

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值