前端基础总结

1.将一个数组转换为另一个新的数组

在前端页面中，将数组A赋值给数组B，再将数组A赋值给数组C，改变数组C的值，数组A和数组B的值同时发生改变，因为3个数组都是指向同一内存地址，要避免这种情况，可以采用如下方式

①使用数组concat方法

concat方法是将两个数组拼接起来生成一个新的数组。

var arr1=[1,2,3];
var arr2=arr1.concat();
arr2.push(4);
console.log('arr1的值为：'+arr1);
console.log('arr2的值为：'+arr2);

②使用数组的slice方法

slice方法是提取数组的一部分生成一个新的数组

var arr1=[1,2,3];
var arr2=arr1.slice();
arr2.push(4);
console.log('arr1的值为：'+arr1);
console.log('arr2的值为：'+arr2);

③使用Array.from方法

Array.from() 方法是 JavaScript 中用于从类数组对象或可迭代对象创建一个新的数组实例的静态方法。它接受一个类数组对象或可迭代对象作为参数，并返回一个新的数组实例，其中包含传入对象的所有元素。

// 从类数组对象（比如字符串）创建数组
const str = 'hello';
const arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']// 从可迭代对象（比如 Set）创建数组
const set = new Set([1, 2, 3, 4, 5]);
const newArr = Array.from(set);
console.log(newArr); // [1, 2, 3, 4, 5]

2.数组的循环

①for循环

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}

forEach方法

arr.forEach(item => {console.log(item);
});

for of循环

for (const item of arr) {console.log(item);
}

3.对象的循环

①for in循环

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {console.log(key, obj[key]);
}

②Object.keys （返回对象的所有键组成的数组，然后可以使用数组方法进行循环）

Object.keys(obj).forEach(key => {console.log(key, obj[key]);
});

③Objec.values(返回对象的所有值组成的数组)

Object.values(obj).forEach(value => {console.log(value);
});

④Object.entries(返回对象的键值对组成的数组，每个键值对都是一个数组)

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

4.对象的赋值

可以使用对象.key的方式，也可以使用对象[key]的方式

当key是动态时，需要使用第二种方式，例如

  for (const [key, value] of Object.entries(editData)) {const obj = editCol.find((x: { dataIndex: string; }) => x.dataIndex == key)if (obj) {transformedData[key] = value;}}

5.||及&&

|| 是 JavaScript 中的逻辑运算符之一，表示逻辑“或”操作。它的作用是在两个表达式之间进行判断，如果第一个表达式为真，则返回第一个表达式的值；如果第一个表达式为假，则返回第二个表达式的值。

例如，{{ record[item.sign] || '暂无' }}，表示如果 record[item.sign] 的值存在（即不为 null、undefined 或者空字符串），则返回 record[item.sign] 的值；如果 record[item.sign] 的值不存在，则返回字符串 '暂无'。这样可以在显示数据时，如果数据不存在，则显示默认的 '暂无' 字符串。
JavaScript 中常见的逻辑运算符有以下几种：

逻辑与（&&）：用于判断多个条件是否同时成立。如果两个条件都为真，返回最后一个条件的值；如果其中任一条件为假，返回第一个为假的条件的值。
示例：if (a > 5 && b < 10) { ... }

逻辑或（||）：用于判断多个条件中是否至少有一个成立。如果两个条件中任一条件为真，返回第一个为真的条件的值；如果两个条件都为假，返回最后一个条件的值。
示例：if (a > 5 || b < 10) { ... }

逻辑非（！）：用于对单个条件取反。如果条件为真，则返回 false；如果条件为假，则返回 true。
示例：if (!isTrue) { ... }

条件运算符（三元运算符）（? :）：用于根据条件选择不同的值。基于条件的真假，返回两个表达式中的一个。
示例：var result = isTrue ? 'Yes' : 'No';

这些逻辑运算符在 JavaScript 中经常用于条件判断、布尔运算、控制流程等场景中。通过合理使用它们，可以实现复杂的逻辑操作。