星战时空·网游活动中心

出现undefined的几种情况

js中出现undefined的几种情况:

1、在JS的严格模式下(“use strict”),没有明确的主体,this指的就是undefined。

"use strict";

console.log(this); // {}

function hello(param) {

console.log(this); // undefined

}

hello()

console.log(this); // {}

function hello(param) {

console.log(this);

}

hello()

// Object [global] {

// global: [Circular],

// clearInterval: [Function: clearInterval],

// clearTimeout: [Function: clearTimeout],

// setInterval: [Function: setInterval],

// setTimeout: [Function: setTimeout] {

// [Symbol(nodejs.util.promisify.custom)]: [Function]

// },

// queueMicrotask: [Function: queueMicrotask],

// clearImmediate: [Function: clearImmediate],

// setImmediate: [Function: setImmediate] {

// [Symbol(nodejs.util.promisify.custom)]: [Function]

// }

// }

2、在变量提升(预解析)阶段,只声明未定义,默认值就是undefined

// 预解析阶段,变量只声明了,没有定义

// 预解析阶段就是变量声明的提升

var add

console.log(add) // undefined

3、函数定义没有返回值(没有return)、return了但return后面什么也不带),默认的返回值就是undefined

function hello(params) {

console.log('hello')

}

var namE = hello()

console.log(namE) // undefined

function nihao(params) {

console.log('nihao')

return

}

console.log(nihao()) // undefined

4、函数形参不传值,那么这个形参默认就是undefined

// es6中讲函数的时候有说过在es6中的函数形参默认值

// 没有es6的时候,大家是怎么给函数形参设置默认值的

function hello(params, query) {

console.log(params);

console.log(query)

}

hello('ni','hao') // ni hao

hello('you') // you undefined

5、对象没有这个属性名。这个属性名默认是undefined。

const obj = {

name: 'kf',

sex: '男',

age: 13

}

console.log(obj.name) // kf

console.log(obj.weight) // undefined

6、数组方法,find方法

find方法主要应用与 查找第一个符合条件的数组元素,找到后立马返回,跟some和every一样 返回通过测试(参数函数内判断)的数组的第一个元素的值

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

find的参数是一个回调函数,在回调函数中写你要查找元素的条件 数组中的每一个元素都会调用一次函数执行 条件成立为true的时候返回该元素,

var arrww = [1, 2, 3, 4];

function hello() {

return arrww.map((item) => item * 6);

}

console.log(hello()); //[ 6, 12, 18, 24 ]

const arr = [2, 5, 9, 36];

const findItem = arr.find(item => item>35)

console.log(findItem) // 36

const findItem2 = arr.find(item => item>38)

console.log(findItem2) // undefined

7、可选链操作符

可选链操作符详细使用可参考

// 可选的链接运算符(?.)允许读取位于连接对象链深处的属性的值,

// 而不必明确验证链中的每个引用是否有效。

// 问题描述:假设你有一个data对象,并且想要安全地访问data.test.value。

// 首先,你需要检查:data 是否被定义。data.test 是否被定义。

const data = { test: { value: 1 } };

if (data && data.test) {

console.log(data.test.value); // 1

}

const value = data?.test?.value;

console.log(value); // 在浏览器环境下其实是可以的,node环境下确执行不了

console.log(data?.test.age) // undefined

// ********* 可选链操作符为安全访问对象的某个属性值提供了便利,如果你不判断直接去用某个对象的某个属性很容易会引起错误

// 再举一个例子

// 思考一个存在嵌套结构的对象 obj。不使用可选链的话,查找一个深度嵌套的子属性时,需要验证之间的引用,例如:

const obj = { first: { age: 16 } };

let nestedProp = obj.first && obj.first.second;

// 为了避免报错,在访问obj.first.second之前,要保证 obj.first 的值既不是 null,也不是 undefined。如果只是直接访问 obj.first.second,而不对 obj.first 进行校验,则有可能抛出错误。

// 有了可选链操作符(?.),在访问 obj.first.second 之前,不再需要明确地校验 obj.first 的状态,再并用短路计算获取最终结果:

let nestedPropp = obj.first?.second;

// 通过使用 ?. 操作符取代 . 操作符,JavaScript 会在尝试访问 obj.first.second 之前,

// 先隐式地检查并确定 obj.first 既不是 null 也不是 undefined。如果obj.first 是 null 或者 undefined,表达式将会短路计算直接返回 undefine

8、直接调用函数,但是函数没有返回值。

let person = new (class {

constructor(x) {

this.name = x

}

sayName() {

console.log(this.name)

}

})('xiaoming')

console.log(person.sayName()) // xiaoming undefined

// 打印undefined是因为函数没有返回值

Copyright © 2022 星战时空·网游活动中心 All Rights Reserved.