数组方法- find 返回符合 条件的数组元素
<script>
// find 用找满足条件的数组中一个元素
// 找到了之后 不会再继续往下遍历
// 代码中 找到了 你需要返回true
// forEach 也可以做遍历 但是 不能被中断 打断 （for循环不一样！！ ）
// forEach 做遍历的时候 是不能被打断 中断 break！！！！
// for 和 foreach有什么区别 1 都是循环 2 for循环可以被中断 但是 foreach不可以！！
// find 返回符合 条件的数组元素。
const arr = [
{ username: '悟空', height: 70 },
{ username: '八戒', height: 60 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
];
// // 要求的 返回 身高是 60的 那一个对象
// let obj;
// arr.forEach((value) => {
// if (value.height === 60) {
// // 找到了
// obj = value;
// return
// }
// console.log(value);
// });
// console.log(obj);
// const obj = arr.find((value) => {
// console.log(value);
// if (value.height === 60) {
// return true;
// } else {
// return false;
// }
// });
const obj = arr.find((value) => value.height === 60);
console.log(obj);
</script>
数组方法-findIndex
<script>
// findIndex 符合条件的元素的下标！！
// 用法可以find很类似 在函数中 如果找到了 返回true
const arr = [
{ username: '悟空', height: 70 },
{ username: '八戒', height: 60 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
{ username: '龙马', height: 30 },
];
// 帮我找到 身高为60的那一个元素
const index = arr.findIndex((value) => value.height === 660);
console.log(index);
// 帮我删除它！！
// arr.splice(index,1);
// console.log(arr);
</script>
数组方法-includes()
<script>
//includes()判断一个数组是否包含一个指定的值
const arr = [`a`, `b`, `c`, `d`]
//判断数组中是否包含`b` 有返回true 没有false
const result = arr.includes(`b`)
console.log(result)
</script>
数组方法-indexOf
<script>
//类似 findIndex
//indexOf 搜索数组中的元素,并返回它的所在位置
//找到了 就返回元素的下标
//未找到 返回 -1
const arr = [`a`, `b`, `c`, `d`]
//有没有包含之母b
const index = arr.indexOf(`e`)
console.log(index)
</script>
数值方法案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<ul></ul>
<script>
/*
需求 在输入框输入内容 按下回车键
把输入框内容 显示到列表中
且去重
*/
arr = [`苹果`, `香蕉`]
const ul = document.querySelector(`ul`)
const input = document.querySelector(`input`)
renderHTML()
window.addEventListener(`keyup`, e => {
console.log(e.key)
if (e.key == `Enter` && !arr.includes(input.value)) {
//includes()判断一个数组是否包含一个指定的值
arr.push(input.value)
renderHTML()
}
})
function renderHTML() {
ul.innerHTML = arr.map(value => `<li>${value}</li>`).join(` `)
}
</script>
</body>
</html>
数组方法-join
<script>
//join 方法 负责把数组 转成字符串
//join 含义 加入
const arr = [`a`, `b`, `c`, `d`]
//const arr = [`<li>a</li>`, `<li>b</li>`, `<li>c</li>`, `<li>d</li>`]
const result = arr.join(``)
console.log(result)
</script>
Set对象
<script>
/*
1 Set 是一个对象 存放数据 数据永远不会重复
2 Set 当成是一个数组
3 Set 是一个对象 遍历 使用 数组方法 find findIndex map
把Set对象转成 真正数组
数组转成 set 对象
const set = new Set([1,2,3,4]);
4 小结
1 Set 是一个对象 不会存放重复数据
2 数组转成 set对象 const set = new Set([])
3 set对象 转成 数组 const arr=[...set]
4 set对象 添加数据 使用add方法
set.add(1)
set.add(2)
set.add(3)
*/
// 存在旧的数组
const list = [1, 4, 5, 6, 7];
// 1 Set对象 需要被 new 出来使用
const set = new Set(list);
// 2 存放数据 调用 add方法
set.add(1);
set.add(2);
set.add(2);
set.add(2);
set.add(2);
set.add(2);
set.add(2);
set.add(3);
// console.log(set);
// 把set对象 转成数组
const arr = [...set];
console.log(arr);
</script>
创建对象的n种方法
<script>
// 1 创建对象的方式 字面量 => 字面意思 （你是个好人）
// 不方便维护 - 修改
// const obj = { nickname: '八戒', height: 190 };
// const obj1 = { nickname: '八戒', height: 190 };
// const obj2 = { nickname: '八戒', height: 190 };
// const obj3 = { nickname: '八戒', height: 190 };
// const obj4 = { nickname: '八戒', height: 190 };
// const obj5 = { username: '八戒', height: 190 };
// 2 工厂函数 封装 继承！
function p(name,a,b,c,d,e) {
return {
nickname:name,
a,b,c,d,e
}
}
function person(name, height,a,b,c,d,e) {
return {
nickname: name,
height,
a,b,c,d,e
};
}
const obj = person('八戒', 190);
const obj1 = person('八戒', 190);
const obj2 = person('八戒', 190);
const obj3 = person('八戒', 190);
console.log(obj);
console.log(obj1);
console.log(obj2);
console.log(obj3);
// 3 重点介绍 构造函数！！！！
</script>
