1.原型-继承
跟函数一样起到一个重复调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>06-原型-继承-call</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
function Person(name, age, height) {
this.username = name;
this.age = age;
this.height = height;
}
function Student(name, age, height, color) {
// 这一行代码解决了继承的问题！！
// call 借用别人的方法
// 谁有方法
// 谁想要借用person方法 this = 实例 = 下面代码的s1
Person.call(this, name, age, height);// 儿子想要复用父亲的某些代码 父亲方法.call(this,形参1，形参2。)
// this.name = name;
// this.age = age;
// this.height = height;
this.color = color;
}
// const p1 = new Person('奥特之父', 5000, 200);
const s1 = new Student('迪迦', 2000, 100, 'yellow');
// console.log(p1);
console.log(s1);
</script>
</body>
</html>
2.call（）
就是一个借调方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>09-call3</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// call 借调 可以让一个对象 来借用另外一个对象的方法
const obj = {
name: '老王',
skill() {
// this = obj this.name = obj.name
console.log(this.name + ' 翻墙'); // this 等于 调用者
},
};
const obj2 = {
name: '大郎',
};
// 大郎没有翻墙的方法 但是 老王有
// 让大郎 借用一下 老王的翻墙功能
// obj.skill.call(obj2); // 你有把老王的翻墙技能 借给谁使用
const obj3={
name:"刘同学"
}
obj.skill.call(obj3);// ? 老王还是刘同学
// const obj = {
// name: '超人',
// skill:function(fly) {
// console.log(this.name + fly);
// },
// };
// obj.skill(' 会飞');
// obj.skill(' 发射激光');
// console.log(obj);
// console.log(obj);{name:"超人",skill:function(){}}
// 车
// const car = {
// name: '装甲车',
// add:function(n1,n2,n3,n4) {
// // 给装甲车 武装武器 给car添加属性
// // n1 n2 n3 n4 武器
// // console.log(n1,n2,n3,n4);
// // console.log(this);// this = ??? 数据类型 对象类型 cart
// // car[n1]=n1; // n1 = A car["A"]="A";
// // car[n2]=n2; // n2 = B car["B"]="B";
// // car[n3]=n3;
// // car[n4]=n4;
// // this = car
// this[n1]=n1;
// this[n2]=n2;
// this[n3]=n3;
// this[n4]=n4;
// },
// };
// car.add("A","B","C","D");
// console.log(car);
// const obj={};
// obj["username"]="普通人";// 是什么意思 ？ 给obj对象添加属性
// console.log(obj);
const car = {
name: '装甲车',
add: function (username, age) {
// 本质 可以给car添加新的属性
this.username = username;
this.age = age;
},
};
// car.add('发动机', 100);
// console.log(car);
const obj = {};
// car.add.call(obj); // obj 想要借用 添加属性的方法
car.add.call(obj, '发动机', 200); // call 传入参数 add.call(谁要借用，被借用的方法的形参1，被借用的方法形参2)
console.log(obj); // obj 有没有 username属性（不用管属性值）、有没有age属性（不用属性值）
// 可以实现 了 一个空对象 obj 通过call的使用 来实现了 借别人的方法add 来给obj添加新的属性
</script>
</body>
</html>
3.继承行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>10-继承.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 对象 两个大的特点
// 属性 - 属性的继承
// 行为-方法
// 让儿子也具有父亲的行为 => 把父亲的DNA 给到儿子即可
// 给儿子添加行为 儿子的原型上添加
// 父亲的行为 存放在父亲原型上
function Person(name, age) {
this.username = name;
this.age = age;
}
Person.prototype.say = function () {
console.log(this.username, this.age); // 我是谁 我的年龄是
};
Person.prototype.show = function () {
console.log(this.username + ' 秀肌肉');
};
// const p1=new Person("父亲",50);
// p1.say();
function Student(name, age, color) {
// name age person里面已经有定义
// 借用一下
Person.call(this, name, age);
// color person里面没有的 需要自己来定义
this.color = color;
}
const s1 = new Student('三好学生', 10, 'yellow');
// 把父亲的行为 也设置到儿子上
Student.prototype.say = Person.prototype.say;
Student.prototype.show = Person.prototype.show;
s1.say();
s1.show();
/*
总结
想要实现继承的功能 分两个部分
1 属性的继承
Person.call(this,其他参数)
2 方法的继承
儿子的原型.say = 父亲的原型.say
*/
</script>
</body>
</html>
4.继承的案例
封装重复的代码，跟函数调用差不多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>12-继承的案例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
封装 代码 实现以下的功能
1 父亲 Element
1 属性 dom this.dom
2 行为 实例.append(父元素标签的选择器)
2 儿子1 ElementDouble div
1 继承父亲 Element
属性 dom
行为 append
3 儿子2 ElementSingle img
属性 dom
行为 append
4 当执行以下代码时 出现对应效果
1 const divModel = new ElementDouble("div","div内的文字")
2 divModel.append("body") ; body标签可以出现 一个 div
1 const imgModel = new ElementSingle("img","图片地址")
2 imgModel.append("body"); body标签可以出现 一个图片
*/
// 父亲
function Element(tagName) {
const dom = document.createElement(tagName);
this.dom = dom;
}
// 父亲
Element.prototype.append = function (parentSelector) {
document.querySelector(parentSelector).appendChild(this.dom);
};
// 儿子1
function ElementDouble(tagName, content) {
Element.call(this, tagName); // 继承 - 父亲的属性
this.dom.innerText = content;
}
// 去继承父亲的行为
ElementDouble.prototype.append = Element.prototype.append;
// 儿子2
function ElementSingle(tagName, src) {
Element.call(this, tagName);
this.dom.src = src;
}
ElementSingle.prototype.append = Element.prototype.append;
const divModel = new ElementDouble('div', '这个是div');
divModel.append('body');
const imgModel = new ElementSingle('img', './images/b_01.jpg');
imgModel.append('div');
// 如果代码重复实现了 很有可能就是我们要封装的时候
// 以前的封装 仅仅是封装一个小小的函数而已
// 现在的封装， 面相对象的思维来封装
// 封装 属性 父亲
// 封装 方法 父亲
// 两个儿子的代码 有重复部分
// 创建标签重复 this.dom=dom append方法也重复
// 儿子1 有要什么功能
// 先复用父亲的属性和方法
// 分享
// 在公司中，
// 会调用代码的人 工作技术难度低（劳动量大），工资有上限
// 还是会封装代码的人 工作技术难度高（劳动量不大） 工资高
// 你感觉很难的知识，大佬都特别喜欢 是他们再次提高技术天花板的时候-提高收入-提高薪资
// 金子塔上总是少部分的
// 绝大部分的人过过多考虑自己的学习感受 而花很少时间去思考如何提高
// 大佬 自己 死尸没有什么感受， 技术有用，能提高技术-如何去学
</script>
</body>
</html>
5.函数参数的默认值
输出函数的时候不传参会默认，传实参会覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>15-函数参数默认值.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// function show(msg) {
// // 如果你给我传递了形参 我就输出你的形参
// // 如果没有给我输出，我就输出你好
// // console.log(msg);
// // 需要自己去判断
// if(msg){
// // 存在
// console.log(msg);
// }else{
// // 不存在
// console.log("你好");
// }
// }
// es6 函数参数默认值
// 你好 默认值
function show(msg = '你好', str = "你我都好") {
console.log(msg, str);
}
show(); // 没有传递参数 输出你好 你我都好
show('大家好'); // 输出 大家好 你我都好
show('大家好', "世界美好"); // 输出大家好 世界美好
</script>
</body>
</html>
6.对象的简写
变量名如果和你的对象的属性名一致 可以简写
对象的方法 简写 say(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>16-对象简写.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 简写 如果变量的名字和属性的名字 一致的话，对象可以简写
// const obj = {
// // 属性名 和 属性值
// username: 123,
// };
const username = 123;
const color = 'red';
const say = function () {};
function show() {}
// 很常用
const obj = {
username, // username:username
color, // color : color
say,
show,
height: 100,
};
obj.height = 200;
// console.log(obj);
// 对象中方法的简写
const person={
show:function(){
console.log("show");
},// 常规写法
// es6 关于 方法简写
say(){
console.log("say");
} // es6 关于 方法简写
}
person.show();
person.say();
/*
小结：
1 变量名如果和你的对象的属性名一致 可以简写
let username='悟空'
const obj = { username }
2 对象的方法 简写
const obj ={
say(){ // 简写的方法
}
}
*/
</script>
</body>
</html>
7.解构
解构数组，解构对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>17-解构.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div data-index="100" data-num="200">div</div>
<script>
// dataset = { index:100}
// const dataset= document.querySelector('div').dataset;
// const { index,num } = document.querySelector('div').dataset;
// console.log(dataset);
// const {index}=dataset;
// console.log(index);
// console.log(num);
// const arr = ['悟空', '八戒', '龙马', '三藏'];
// 希望 声明四个变量 a = 悟空 b = 八戒 。。。
// 下次我看到谁这么写代码的， 手都打肿！！！
// 太low！！ 低级 我自己 无地自容 想不开你
// const a = arr[0];
// const b = arr[1];
// const c = arr[2];
// const d = arr[3];
// 数组解构
// const [a,b,c,d]=arr;
// const [a, b, c, d] = ['悟空', '八戒', '龙马', '三藏',"沙僧"];
// console.log(a, b, c, d);
// 对象的解构
// const obj = {
// username: '悟空',
// height: 100,
// };
// 声明两个变量 来获取obj的两个属性
// low 代码！！！
// const username = obj.username;
// const height = obj.height;
// 对象解构
// const { username, height } = obj;
// console.log(username, height);
// 解构 + 默认值
// const arr = [1,100];
// const [a,b ] = arr; a = 1 b=undefined
// const [a, b = 2] = arr;
// console.log(a, b); // a =1 b = 2
// b = 2 默认值 （你没有，就使用我，你有，使用你的）
// const [a, b = 2] = arr;
// console.log(a,b);
const obj = {
username: 100,
height: 500,
};
const { username, height = 200 } = obj;
console.log(username, height);
/*
小结
1 解构 对象 和 数组上
对象
const { username,height } = {username:"悟空",height:200}
数组
const [a,b]=[100,200];
2 解构 + 默认值
如果 右边的对象中没有height 属性 那么 height变量 = 1000
const { username,height=1000 } = {username:"悟空",height:200}
// c 在右边找不到对应的数据 c 就使用默认值 300
const [a,b,c=300]=[100,200];
*/
</script>
</body>
</html>
8.拓展运算符-剩余运算符-延展运算符
... 剩余运算符，接受所有剩下的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>18-拓展运算符-剩余运算符-延展运算符.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// ...
// 拓展运算符 以下三点
// ... 获取剩下 展开
// 获取剩下 数组
// const [a,b,...c]=[1,2,3,4,5,6,7];
// const [a,b,...c]=[1,2,3];
// const [a, b, ...c] = [1, 2];
// console.log(a,b); // 1 , 2
// console.log(c);// [3,4,5,6,7]
// console.log(c); // [3]
// console.log(c); // []
// 获取剩下 对象
// const { a, ...c } = { a: 1, b: 2, c: 3 };
// const { a,b,c ,...d } = { a: 1, b: 2, c: 3 };
// console.log(c);// ? {b:2,c:3}
// console.log(d); // ?
// const [...a]=[1,2,3,4];
// console.log(a);// [1,2,3,4]
// console.log(a.map);
// const lis = document.querySelectorAll('li');// lis 伪数组 没有map方法
// const newList = [...lis]; // 如何理解 ？ 转成真正的数组
// console.log(newList.map);
// 获取剩下 用在函数的形参上
// 计算数据和的功能
// calc(1,2)// 1 + 2
// calc(1,2,3) // 1 + 2 + 3
// calc(1,2,3,4) // 1 + 2 + 3 + 4
function calc(...args) {
// args 数组 装载这所有传给calc的参数
// console.log(args);
let sum = 0;
args.forEach((value) => (sum += value));
console.log(sum);
}
calc(1, 2); // ? [1,2]
calc(1, 2, 3); // [1,2,3]
calc(1, 2, 3, 4); // [1,2,3,4]
/*
剩余运算符
1 数组中 const [a,b,...c]=[1,2,3,4,5,6,7]; c =[3,4,5,6,7]
应用场景 伪数组转真正的数组
2 对象中 const { a,...d } = { a: 1, b: 2, c: 3 }; // d = {b:2,c:3 }
3 函数的形参中
calc(1, 2, 3); function calc(...args) {} // args = [1,2,3]
计算数字总和
4 练习题目
getMax(1,2,3) // 输出3
getMax(1,4) // 输出4
getMax(1,20,4) // 输出20
getMax(1,20,4,30,2) // 输出30
*/
</script>
</body>
</html>
9.计算最大值的两种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>19-计算最大值.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 计算最大值的写法 第一种
function getMax(...args) {
// args= 数组 接收 所有传递给 getMax方法的 参数
// console.log(args);
// 计算最大值 的
let max = args[0];
args.forEach((value) => {
if (value > max) {
max = value;
}
});
console.log(max);
}
// getMax(1);
// getMax(1, 2);
// getMax(1, 2, 3);
// getMax(11, 33, 2, 3);
// Math对象 自己就封装过 计算最大值和最小值的代码
// console.log(Math.max(1,3,4,2));// 4
// console.log(Math.min(1,3,4,2));// 1
//第二种
function getMax2(...args) {
// Math.max(1,3,4,2)
// args=[1,3,4,3]
// Math.max([1,3,4,3]) => Math.max(1,3,4,2)
// 剩余运算符的
console.log(Math.max(...args));
}
// getMax2(1,2,3);
// getMax2(1,2,33);
// console.log(Math.max(...[1,3,4,3])); // Math.max(1,3,4,2)
getMax2(1, 2, 3, 4); // 体现的思想 不再是 剩余 。 展开-延展-拓展 思想
</script>
</body>
</html>
10.拓展-展开-延展
就是修改数组对象，但是旧的不会被污染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>20-拓展-展开-延展.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 展开 ... 用法
// const obj = {
// username: '悟空',
// height: 200,
// };
// // 新创建一个对象 这个对象 具有 所有 obj的属性
// // 同时 还有多一个属性，color
// // const newObj = obj;// 对象是引用类型 写 = 将 obj的地址 给了一份 newObj 两个变量指向的地址同样的 同一个对象
// // newObj.color = 'yellow';
// // console.log("新的对象",newObj);
// // console.log("旧的对象",obj);
// // 建议这做 互补影响
// const newObj = { ...obj, color: 'yellow' }; // 给newObj 开辟新的内存空间
// // const newObj={ username:"悟空",height:20}; // 给newObj 开辟新的内存空间
// newObj.username = '八戒';
// newObj.weight = 100;
// console.log(obj);
// console.log(newObj);
// 展开运算符 对数组操作
const arr = ['a', 'b', 'c'];
// 在数组的后面 新增一个 元素 'd'
// const newArr=[...arr,'d'];
// 在数组宅前面 新增一个属性 w
// console.log(newArr);
// const newArr = ['w', ...arr];
// console.log(newArr);
// arr.push
// arr.unshift
// 中间 无法使用 ...
// splice 来实现
</script>
</body>
</html>
11.数组去重的方法一
用some 如果数组中有一项 是返回了true 整个some方法就返回了true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>21-数组去重.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" />
<ul></ul>
<script>
/*
1 输入框绑定键盘按下事件
1 判断按下的是不是 回车键
2 是的话 获取输入框的值
3 判断当前要显示的数据 是否已经存在于数组中 filter 可以 some可以
如果是已经存在 就不要继续添加
如果是不存在 就继续添加
4 把它添加到数组中
5 写一个方法 把数组的数据 拼接成li标签，插入到 ul中
*/
const input = document.querySelector('input');
const ul = document.querySelector('ul');
const arr = ['a', 'b'];
render();
input.addEventListener('keydown', function (event) {
//判断按下的是不是回车
if (event.key === 'Enter') {
// console.log(this.value);
// some 如果数组中有一项 是返回了true 整个some方法就返回了true
// 调用some方法的时候，在它的回调函数中 拿数组中的元素 和 当前要添加的元素 做比较 如果相等 就返回true 表示找到了重复
const isHas = arr.some((value) => value === this.value); // 在我的数组中找到了和你待添加的元素 一样的值 返回true
if (isHas) {
// 有重复了 不要再添加
alert('有重复了 不要再添加')
} else {
// 没有重复 你可以添加
// 把它添加到数组中
arr.push(this.value);
// 数组发生了改变 重新调用render方法 来实现页面的渲染
render();
input.value = ''
}
}
});
function render() {
const html = arr.map((value) => `<li>${value}</li>`).join('');
ul.innerHTML = html;
}
</script>
</body>
</html>
12.数组去重的方法二
用for循环的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>21-数组去重.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" />
<ul></ul>
<script>
const input = document.querySelector('input');
const ul = document.querySelector('ul');
const arr = ['a', 'b'];
render();
input.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
// 定一个变量，表示数组有没有重复的数据
// 假设它 没有重复
let isHas = false;
for (let index = 0; index < arr.length; index++) {
// 判断数组中的每一个元素 和 当前要输入的值做比较
// 如果找到了，设置 isHas=true 同时 打断循环
if (arr[index] === this.value) {
// 找到重复了
isHas = true;
break;
}
}
// 判断数据有没有重复
if (isHas) {
// 有重复
console.log('有重复');
} else {
// 没有重复 添加
arr.push(this.value);
render();
}
}
});
function render() {
const html = arr.map((value) => `<li>${value}</li>`).join('');
ul.innerHTML = html;
}
</script>
</body>
</html>
13.数组去重的方法三
filter方法先过滤出 和当前的输入框的值 不相等的 数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>21-数组去重.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" />
<ul></ul>
<script>
const input = document.querySelector('input');
const ul = document.querySelector('ul');
let arr = ['a', 'b'];
render();
input.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
// filter 来解决
// filter 过滤
// 先过滤出 和当前的输入框的值 不相等的 数据
// 然后再添加
// 当前输入框的值 "d"
// 我数组 ['a','c','d']
// 数组过滤 不包含 "d" => ['a','c']
// ['a','c'] 再次添加 'd' 进去 就可以了
// 过滤出不包含 当前输入框的值的数组
const newArr = arr.filter((value) => value !== this.value);
// debugger
// 让我们的旧的数组 等于你过滤后的数组
arr = newArr;
arr.push(this.value);
render();
}
});
function render() {
const html = arr.map((value) => `<li>${value}</li>`).join('');
ul.innerHTML = html;
}
</script>
</body>
</html>
14.数组去重的方法四
splice删除插入；先判断，再用删除插入的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>21-数组去重.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" />
<ul></ul>
<script>
const input = document.querySelector('input');
const ul = document.querySelector('ul');
let arr = ['a', 'b'];
render();
input.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
// this.value = "b"
// arr = ["a","b","c"]
// 先找到 “b” 在我数组的索引 位置
// 执行 数组 删除元素 arr = [a,c]
// 然后 再去执行 添加元素的操作
let i = -1; // -1 表示没有找到
for (let index = 0; index < arr.length; index++) {
if (arr[index] === this.value) {
i=index;
break;
}
}
// 判断 i 等于-1 表示没有相同，直接添加
// i 不等于-1 表示有相同，先执行删除 再添加
if(i===-1){
// arr.push(this.value);
}else{
// 找到相同
arr.splice(i,1);
// arr.push(this.value);
}
arr.push(this.value);
render();
}
});
function render() {
const html = arr.map((value) => `<li>${value}</li>`).join('');
ul.innerHTML = html;
}
</script>
</body>
</html>
15.数组去重的几种，了解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>21-数组去重.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" />
<ul></ul>
<script>
const input = document.querySelector('input');
const ul = document.querySelector('ul');
let arr = ['a', 'b'];
render();
input.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
// 数组去重 一堆方法
// for forEach some
// 没有细讲 indexOf find findIndex includes set every
// 没有足够的技术积累和代码量 优雅不起来！！
// indexOf find findIndex includes set
// const index=arr.indexOf(this.value);
// const index=arr.findIndex(value=>value===this.value)
// const item=arr.find(value=>value===this.value);
// const isHas=arr.includes(this.value)
// if(!isHas){
// // 没有找到
// arr.push(this.value);
// render();
// }
const set = new Set(arr);
set.add(this.value);
arr = [...set];
render();
}
});
function render() {
const html = arr.map((value) => `<li>${value}</li>`).join('');
ul.innerHTML = html;
}
</script>
</body>
</html>
16.jq演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>26-演示jq.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script>
// 简单 比js高级 简单多了 不是一个量级！！
$(function () {
$("li").click(function () {
// 1 点击 激活选中 其他li标签排他
// $(this).css("backgroundColor","red").siblings().css("backgroundColor","#fff");
// 2 点击 渐变 显示和消失
// $(this).fadeToggle()
// 3 手风琴
// $(this).slideUp();
})
})
</script>
</body>
</html>
