【金秋打卡】第22天数组的新增方法
2022/11/15 4:24:01
本文主要是介绍【金秋打卡】第22天数组的新增方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、课程名称:前端工程师2022版
二、课程章节:ES6语法扩展-ES6的新增方法
三、课程讲师:Alex
四、课程内容
1、includes()
(1)作用:判断数组中是否含有某个成员
(2)判断原理:基本遵循严格相等(===),但是对于NaN的判断与===不同,includes认为NaN===NaN
(3)基本用法:
console.log([1, 2, 3].includes("2")); //false
console.log([1, 2, 3].includes(2)); //true
console.log(NaN === NaN); //false
console.log([1, 2, NaN].includes(NaN)); //true
(4)第二个参数:表示搜索的起始位置,默认值是0
console.log([1, 2, 3].includes(2, 2)); //false
console.log([1, 2, 3].includes(2, 1)); //true
(5)应用:
对数组进行去重
const arr = [];
for (const item of [1, 2, 1]) {
if (!arr.includes(item)) {
arr.push(item);
}
}
console.log(arr);//(2) [1, 2]
2、Array.from()
(1)作用:Array.from()是构造函数的方法,不能通过实例来调用,它的作用是将其他数据类型转换成数组
(2)基本用法:
console.log(Array.from('str')); //(3) ['s', 't', 'r']
(3)可以通过Array.from()转换成数组的类型
1)所有可遍历的:如数组本身、字符串、Set、Map、NodeList、arguments
console.log(Array.from(new Set([1, 2, 1]))); //(2) [1, 2]
//可遍历的使用Array.from没有直接在数组中展开看上去直观
console.log([...new Set([1, 2, 1])]); //(2) [1, 2]
2)拥有length属性的任意对象:length控制最终的数组长度,而Array.from()只会把数字键的转化成对应的数组的元素值,而其他的键名是不会进行转化的,而是会用undefined来填充
const obj = {
0: "a",
1: "b",
name: "alex",
length: 3,
};
// console.log([...obj]);//×,这类对象没法在数组中展开,这类最好使用Array.from
console.log(Array.from(obj)); //(3) ['a', 'b', undefined]
(4)第二个参数:是一个回调,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组
console.log(
[1, 2].map((value) => {
return value * 2;
})
); //(2) [2, 4]
console.log(Array.from("12", (value) => value * 2)); //(2) [2, 4]
console.log(Array.from("12").map((value) => value * 2)); //(2) [2, 4]
(5)第三个参数:用于修改this指向,默认情况下是window
Array.from(
"12",
(value) => {
console.log(this); //window
},
// 注意箭头函数在声明的时候就确定好了this,所以是不能修改this指向的,如果想要修改,必须使用一般函数
document
);
Array.from(
"12",
function () {
console.log(this); //#document
},
document
);
3、find()和findIndex()
(1)作用:
1)find()用来找到某个值,找到满足条件的一个立即返回那个值
2)findIndex()用来找到某个值的索引值,找到满足条件的一个,立即返回其索引
(2)基本用法
console.log(
[1, 5, 10, 15].find((value, index, arr) => {
// console.log(value,index,arr);
// 返回第一个大于9的值
return value > 9;
})
); //10
console.log(
[1, 5, 10, 15].findIndex((value, index, arr) => {
// console.log(value,index,arr);
// 返回第一个大于9的值
return value > 9;
})
); //2
(3)第二个参数:修改this指向
console.log(
[1, 5, 10, 15].find(function (value, index, arr) {
console.log(this); //#document
return value > 9;
}, document)
); //10
(4)应用:通过获取到的数据中筛除一些东西,选择需要的东西,比如从服务器端获取了学生数据,要使用不同的板块显示不同的内容
const students =[
{name:'张三',sex:'男',age:16},
{name:'李四',sex:'女',age:22},
{name:'王五',sex:'男',age:32},
]
students.find(value=>value.sex==='女');
students.findIndex(value=>value.sex==='女');
五、课程心得
今天学习了数组的新增方法includes()、Array.from()和find()和findIndex(),这几个方法对于处理数组的应用来说都很实用,要记清楚相关的参数的作用等知识,不要搞混。
这篇关于【金秋打卡】第22天数组的新增方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性