map:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,按照原始数组元素顺序依次处理元素。
let ages = [22, 33, 16, 40];
(function myFunction() {
let map = ages.map(function(item,index,array){
return item * 2
})
console.log(map)
})()
some(item,index,array):用于处理对象筛选,比如有一个数字包对象的数据。需要判断一个name是否存在于数组中。
检测数组中的元素某一项是否满足指定条件,return一个布尔值,满足即是true,否则为false。
let arr=[{name:'aaa',id:001},{name:'bbb',id:002}]
let name='aaa'
//判断name是否存在于arr中;
console.log(arr.some((item)=>item.name===name));//true
返回true/false;
every(item,index,array):与some()非常相似,都支持三个参数。
let ages = [22, 33, 16, 40];
(function myFunction() {
let isSome = ages.some(function(item,index,array){
return item > 35
})
console.log(isSome) //true
})()
some()和every()的不同点:
some()方法遍历数组,当数组的其中一项满足条件,即返回true,则返回false。
every()方法遍历数组,当数组的每一项都满足条件,才返回true,不全部为true为false。
indexOf()和includes()
includes,返回一个
布尔值
,存在返回true,不存在则返回false;indexOf,返回被查找值在数组中
第一次出现的位置下标
,不存在则返回-1;includes是ES6的语法,语义化更强,可判断是否存在 NaN;
由于indexOf内部使用的严格相等(===)进行判断,所以判断是否存在NaN时始终返回-1;
tips:
NaN:(Not-A-Number:不是一个数值数字),他表示的是一个数值范围,而不是一个具体的数值,所以NaN不等于任何值,包括他自己,
[NaN].indexOf(NaN); // -1
NaN == NaN // false
NaN === NaN // false ,不等于任何值包括自身typeOf NaN; // number,数据类型是Number
NaN+1 // NaN,与任何值进行运算结果都是NaN
Boolean(NaN) // false,转换成布尔值是false
lastIndexOf返回被查找值在数组或字符串中最后出现位置的下标;
const arr = ['a', 'b', 'b', '2', 0, NaN,3]
// 查找值存在时,indexOf 返回该值的下标,includes 返回true
arr.indexOf('a') // 0
arr.includes('a') // true
// 查找值不存在时,indexOf返回 -1,includes返回false
arr.indexOf('c') // -1
arr.includes('c') //false
// 查找值在数组中出现多次时,indexOf返回第一次出现的位置下标,includes返回true
arr.indexOf('b') // 1
arr.includes('b') // true
// 都是严格比较,值和类型都要相等,且区分大小写,不区分+0和-0
arr.indexOf(2) // -1
arr.includes(2) // false
arr.indexOf('A') // -1
arr.includes('A') // false
arr.indexOf(+0) // 4
arr.indexOf(-0) // 4
arr.includes(+0) // true
arr.includes(-0) // true
// indexOf不能正确判断是否存在NaN,includes可以
arr.indexOf(NaN) // -1
arr.includes(NaN) // true
... :展开运算符去重:
const colors = ["red", "orange", "yellow", "green", "orange"];
const onlyColors = [...new Set(colors)];
console.log(onlyColors); // ["red", "orange", "yellow", "green"]
...:切片:
const digitals = ["pc", "watch", "camera", "keyboard", "mouse"];
const [pc, ...otherDigitals] = digitals;
console.log(otherDigitals); // ["watch", "camera", "keyboard", "mouse"]
...:复制数组,可以选择那些不背复制(注意⚠️:浅拷贝,会改变原始值)
const { startDate, endDate, price, ...params } = this.formItem
这段代码的目的是将对象 this.formItem 中的 startDate、endDate 和 price
属性的值分别赋值给变量 startDate、endDate 和 price,同时将剩余的属性和它
们的值收集到一个名为 params 的对象中。这样,你可以在后续的代码中使用这些变量
和 params 对象来访问和操作 this.formItem 中的数据。
也可以复制对象
const student = {
name: "Jack",
school: {
class: "Software Engineering Class 2"
}
};
const studentCopy = { ...student };
console.log(studentCopy); // {name: "Jack",school:{class: "Software Engineering Class 3"}}
想后端接口传递参数改善屎山代码:
handleParams() {
const params = {};
params.id = this.formItem.id;
params.startDate = this.formItem.startDate.format("YYYY-MM-DD");
params.endDate = this.formItem.endDate.format("YYYY-MM-DD");
params.price = this.formItem.price.toString();
params.type = this.formItem.type;
params.total = this.formItem.total;
params.name = this.formItem.name;
params.comment = this.formItem.comment;
// ... 此处省略一万行代码
}
改善后:
handleParams() {
const { startDate, endDate, price, ...params } = this.formItem;
params.startDate = startDate.format("YYYY-MM-DD");
params.endDate = endDate.format("YYYY-MM-DD");
params.price = price.toString();
// ... 此处省掉一万行代码
}