JS知识点

1.JS查询对象数组中属性值符合的对象

 JS查询对象数组中属性值符合的对象,可以使用findIndex方法。假设对象数组objs,查找其中id是34的对象:

let index = objs.findIndex(item => {
    return item.id == 34;
})

2.快速赋值

var obj = {
    name:"zhangsan",
    age:18
};

// 此时变量值name="zhangsan",age=18
let {name, age} = obj;

3.字符串拼接

'我的名字是${name},我的年龄是${age}'

4.对象的解构

在JavaScript中,可以使用解构赋值(destructuring assignment)来将对象的属性分配给变量。解构赋值是一种方便的语法,可以让你直接从数组或对象中提取值并分配给变量。

以下是一个简单的例子,展示了如何使用解构赋值从对象中提取属性:

javascriptconst myObject = {
name: 'John',
age: 30,
city: 'New York'
};

// 解构赋值语法
const { name, age, city } = myObject;

// 输出结果
console.log(name); // John
console.log(age); // 30
console.log(city); // New York

在这个例子中,我们使用解构赋值语法将myObject对象的属性分配给了三个变量:nameagecity。然后,我们可以直接使用这些变量来访问对象中的属性。

解构赋值语法也可以嵌套使用,以提取嵌套对象的属性。例如:

javascriptconst myNestedObject = {
name: 'John',
address: {
street: '123 Main St',
city: 'New York',
state: 'NY',
zip: '10001'
}
};

// 解构嵌套对象的属性
const { name, address: { city, state, zip } } = myNestedObject;

// 输出结果
console.log(name); // John
console.log(city); // New York
console.log(state); // NY
console.log(zip); // 10001

在这个例子中,我们使用解构赋值语法嵌套提取了myNestedObject对象中的属性。首先,我们提取了name属性,然后我们使用了另一个解构赋值语法来提取address对象的属性。在嵌套解构中,我们可以使用多个变量来分别提取不同级别的属性。

5.对象展开符

在JavaScript中,对象展开符(Object rest/spread)是一种语法,允许你从数组或对象中提取出剩余的属性。

在ES6及以后的版本中,你可以使用 ... 符号来创建一个新的对象,其中包含源对象的剩余属性。这可以与Object.assign()方法一起使用。

例如:

javascriptlet obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

在这个例子中,...obj1 是一个对象展开符,它把 obj1 的所有属性复制到了新的对象中。然后,我们添加了一个新的属性 c,最终的结果是一个新的对象 { a: 1, b: 2, c: 3 }

注意,如果源对象和目标对象有相同的属性,那么使用对象展开符会覆盖目标对象的属性值。

此外,对象展开符还可以与默认值一起使用,以避免从源对象复制属性时出现 undefined 值。

javascriptlet obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

在这个例子中,d 属性在源对象 obj1 中并不存在,因此在复制时被赋予了默认值 undefined。但是,由于在目标对象中有 d: 4,所以最终 d 的值是 4

6.遍历对象的属性

在JavaScript中,您可以使用多种方法来遍历对象的属性。以下是一些常见的方法:

1.使用for...in循环

        注意:在uniapp中,当打包成APP时不支持该写法。在uniapp中,要写成下面Object.keys的方式才行。

javascriptlet obj = {a: 1, b: 2, c: 3};

for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(`Key is ${key}, value is ${obj[key]}`);
}
}

这个循环将遍历对象中的所有可枚举属性,包括其原型链上的属性。因此,如果对象继承了其他对象的属性,那么这些属性也会被遍历到。

2.使用Object.keys()方法

javascriptlet obj = {a: 1, b: 2, c: 3};

Object.keys(obj).forEach(key => {
console.log(`Key is ${key}, value is ${obj[key]}`);
});

Object.keys()方法将返回一个包含对象自身所有可枚举属性键的数组,然后你可以使用forEach()方法来遍历这个数组。

3.使用Object.entries()方法

javascriptlet obj = {a: 1, b: 2, c: 3};

Object.entries(obj).forEach(([key, value]) => {
console.log(`Key is ${key}, value is ${value}`);
});

Object.entries()方法将返回一个包含对象自身所有键值对的数组,然后你可以使用forEach()方法以及数组解构来遍历这个数组。

4.使用for...of循环

javascriptlet obj = {a: 1, b: 2, c: 3};

for (let [key, value] of Object.entries(obj)) {
console.log(`Key is ${key}, value is ${value}`);
}

for...of循环可以遍历任何可迭代对象,包括由Object.entries()返回的数组。在这种情况下,它将遍历每个键值对,其中键和值分别作为数组的第一个和第二个元素。

7.解构赋值

这是 JavaScript 中的解构赋值语法。通过使用 let {a} = obj,你可以从 obj 对象中提取出键为 'a' 的值,并将其赋值给变量 a。这种语法允许你直接将对象的属性值赋值给相应的变量,无需显式地使用 obj.a 形式的属性访问。

let {a=0} = obj

上面代码中,如果没有从obj中解构出obj,则a被赋值0。

8.map遍历数组后,返回新数组

在JavaScript中,map是一个非常有用的数组方法,用于根据提供的函数对数组中的每个元素进行操作并返回一个新的数组。以下是map的基本用法:

 
javascriptconst numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(num) {
return num * 2;
});

console.log(doubled); // 输出:[2, 4, 6, 8, 10]

在这个例子中,我们有一个包含数字的数组numbers。然后,我们使用map方法,对数组中的每个数字执行乘以2的操作。这个操作会返回一个新的数组,其中包含原始数组中的每个元素乘以2的结果。

map方法返回一个新的数组,原始数组的顺序不会改变。这意味着你可以使用map来转换数组中的元素,而不会影响原始数组。

此外,箭头函数也可以简化map中的函数定义:

 
javascriptconst numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);

console.log(doubled); // 输出:[2, 4, 6, 8, 10]

在这个例子中,箭头函数(num => num * 2)被用来将数组中的每个元素乘以2。这个箭头函数与之前的函数有相同的效果,但更简洁。

9.promise

在JavaScript中,Promise是一种异步编程的解决方案。Promise对象用于表示一个异步操作的最终完成(或失败)及其结果值。

一个Promise在其生命周期中处于三个状态之一:

  1. pending(待定):初始状态,既不是成功,也不是失败。
  2. fulfilled(完成):意味着操作成功完成。
  3. rejected(拒绝):意味着操作失败。

Promise的基本操作:

Promise提供了一些方法来操作其状态和结果:

1.then(fulfilledHandler, errorHandler): 当Promise被解析时,fulfilledHandler函数会被调用,并且它接受被解析的值作为参数。如果Promise被拒绝,errorHandler函数会被调用,并且它接受拒绝的原因(通常是一个错误对象)作为参数。这个函数返回一个新的Promise,允许链式调用。

 
javascriptpromise.then(value => {
// 处理成功的情况
}).catch(error => {
// 处理错误的情况
});

2.catch(errorHandler): 这是对Promise被拒绝的处理,它捕获拒绝的原因并调用提供的函数。这个方法返回一个新的Promise,允许链式调用。

 
javascriptpromise
.then(value => {
// 处理成功的情况
})
.catch(error => {
// 处理错误的情况
});

3.finally(callback): 这个方法无论Promise是被解析还是拒绝,都会调用回调函数。这个方法返回一个新的Promise。

 
javascriptpromise
.then(value => {
// 处理成功的情况
})
.catch(error => {
// 处理错误的情况
})
.finally(() => {
// 无论成功或失败都会执行的操作
});
  1. done(fulfilledHandler, errorHandler): 这个方法类似于then,但是如果Promise被拒绝,它会抛出异常而不是调用回调函数。注意,这个方法在Promise被解析或拒绝后都不会再次触发。
  2. Promise.all(iterable): 这个方法返回一个新的Promise,当iterable中的所有Promise都成功解析时,这个新的Promise才会解析,并将iterable中的每个Promise的解析值组成一个数组作为结果。如果任何Promise被拒绝,新的Promise将立即被拒绝,并返回第一个被拒绝的Promise的拒绝原因。
  3. Promise.race(iterable): 这个方法返回一个新的Promise,只要iterable中的一个Promise的状态改变(无论是解析还是拒绝),这个新的Promise就会改变状态。iterable必须是一个Promise对象的集合。
  4. Promise.reject(reason): 返回一个新的Promise,这个新的Promise被拒绝并带有给定的原因。
  5. Promise.resolve(value): 返回一个新的Promise,这个新的Promise被解析并带有给定的值。

10.Some和Every数组是否满足条件

everysome是JavaScript数组中的两个内置方法,它们用于测试数组中的元素是否满足特定的条件。

every()

every()方法用于测试数组中的所有元素是否都满足指定的条件。如果所有元素都满足条件,则返回true;如果有任何元素不满足条件,则返回false

以下是every()方法的基本语法:

 
javascriptarray.every(callback(element, index, array), thisArg)
  • callback是一个函数,它接受三个参数:
    • element:当前正在处理的数组元素。
    • index:当前正在处理的数组元素的索引。
    • arrayevery()方法正在操作的数组。
  • thisArg(可选)是一个对象,用作callback函数中this的值。如果省略了thisArg参数,或者设为nullundefined,则this会被视为全局对象。

示例:

 
javascriptlet numbers = [1, 2, 3, 4, 5];

let allNumbersAreEven = numbers.every(function(num) {
return num % 2 === 0;
});

console.log(allNumbersAreEven); // false

some()

some()方法用于测试数组中是否有至少一个元素满足指定的条件。如果有任何元素满足条件,则返回true;如果所有元素都不满足条件,则返回false

以下是some()方法的基本语法:

 
javascriptarray.some(callback(element, index, array), thisArg)
  • callback是一个函数,它接受三个参数:
    • element:当前正在处理的数组元素。
    • index:当前正在处理的数组元素的索引。
    • arraysome()方法正在操作的数组。
  • thisArg(可选)是一个对象,用作callback函数中this的值。如果省略了thisArg参数,或者设为nullundefined,则this会被视为全局对象。

示例:

 
javascriptlet numbers = [1, 2, 3, 4, 5];

let someNumbersAreEven = numbers.some(function(num) {
return num % 2 === 0;
});

console.log(someNumbersAreEven); // true

11.判断一个对象是否存在

在JavaScript中,判断一个对象是否存在,通常会使用"in"运算符或者"hasOwnProperty()"方法。

  1. 使用"in"运算符:

在上面的代码中,prop是你想要检查的对象的属性,obj是该属性可能存在的对象。如果propobj中,那么这个表达式将返回true

  1. 使用"hasOwnProperty()"方法:

	if (prop in obj) { 
	    // obj.prop 存在 
	} else { 
	    // obj.prop 不存在 
	}

2. hasOwnProperty()方法


	if (obj.hasOwnProperty(prop)) { 

	// obj.prop 存在 

	} else { 

	// obj.prop 不存在 

	}

在上面的代码中,hasOwnProperty()方法会检查对象自身是否具有指定的属性,如果有,则返回true,否则返回false。注意这个方法不会检查原型链中的属性。

这两种方法都可以用来检查对象是否存在某个属性。选择哪种方法取决于你的具体需求。

3.根据Object对象判断

根据Object对象判断实例对象是否存在:

if(Object.keys(hostUserInfo).length != 0){
    // 对象存在
} else {
    // 对象不存在
}

12. 可选链

可选链(Optional Chaining)是JavaScript中一个相对新的语法特性,它允许你在尝试访问深层嵌套的对象属性时,如果某个属性不存在,那么整个表达式会立即返回 undefined。

在传统的JavaScript中,当你尝试访问一个不存在的属性时,会抛出一个错误。但在使用可选链(Optional Chaining)的情况下,如果路径中的某个属性不存在,表达式会立即停止评估并返回 undefined。

以下是可选链的基本语法:

let value = obj?.prop?.subprop;

在这个例子中,如果 obj 或 obj.prop 为 null 或 undefined,那么整个表达式会立即返回 undefined。否则,它会返回 obj.prop.subprop 的值。

这种语法可以简化你的代码,避免不必要的错误检查。例如,你不再需要写出这样的代码:

let value;  
if (obj && obj.prop) {  
  value = obj.prop.subprop;  
} else {  
  value = undefined;  
}

使用可选链可以使你的代码更简洁、更易读。

13.空值合并操作符

在JavaScript中,空值合并操作符(Null Coalescing Operator)被表示为 ??。它用于处理可能为空或未定义的变量或属性。

这个操作符的基本用法是:

let value = obj?.prop?.subprop ?? 'default';

这段代码的含义是:如果 obj 存在,并且 obj.prop 存在,那么它将会尝试获取 obj.prop.subprop 的值,否则它将会返回 'default'。

这个操作符在处理可能为空或未定义的变量或属性时非常有用,它可以避免使用冗长的条件语句来检查变量或属性是否存在。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值