JavaScript进阶(一)
2019版黑马程序员javaScript进阶面向对象ES6 122集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1Kt411w7MP?from=search&seid=936655930091245798&spm_id_from=333.337.0.0
2020版尚硅谷Web前端ES6教程，涵盖ES6-ES11 68集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1uK411H7on?spm_id_from=333.999.0.0
一、JavaScript面向对象
1.面向对象编程介绍
两大编程思想
POP(Process-oriented programming):面向过程编程
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
举个栗子：将大象装进冰箱，面向过程做法。
面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。
OOP(Object Oriented Programming):面向对象编程
面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。
举个栗子：将大象装进冰箱，面向对象做法。先找出对象，并写出这些对象的功能：
\1. 大象对象
进去
\2. 冰箱对象
打开
关闭
\3. 使用大象和冰箱的功能
面向对象是以对象功能来划分问题，而不是步骤。
在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。
面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。
面向对象的特性：
封装性
继承性
多态性
面向过程和面向对象的对比
面向过程
l优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。
l缺点：没有面向对象易维护、易复用、易扩展
面向对象
l优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护
l缺点：性能比面向过程低
2.ES6中的类和对象
对象
现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的：
l属性：事物的特征，在对象中用属性来表示（常用名词）
l方法：事物的行为，在对象中用方法来表示（常用动词）
类(class)
在 ES6 中新增加了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象。
类抽象了对象的公共部分，它泛指某一大类（class）。对象特指某一个，通过类实例化一个具体的对象
创建类
语法：
class name {
// class body
}
创建实例：
var xx = new name();
注意： 类必须使用 new 实例化对象
类的构造函数(constructor)
constructor() 方法是类的构造函数(默认方法)，用于传递参数，返回实例对象，通过 new命令生成对象实例时，自动调用该方法。如果没有显示定义，类内部会自动给我们创建一个constructor()
语法：
class Person {
constructor(name,age) { // constructor 构造方法或者构造函数
this.name = name;
this.age = age;
}
}
创建实例：
var ldh = new Person('刘德华', 18);
console.log(ldh.name)
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 创建类 class 创建一个 明星类
class Star {
// constructor() 方法是类的构造函数(默认方法)，不写也会默认存在
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
}
/* 2. 利用类创建对象 new ，创建了一个实例（new）会自动调用constructor，
此处把刘德华和18传递给uname和age，uname和age又会传递给this.uname和this.age
而this又是指向已创建的实例，所以已创建的实例ldh就会有uname这个属性了
*/
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
//(1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
//(2) 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
//(3) constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
//(4) 生成实例 new 不能省略
//(5) 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function
</script>
</body>
</html>
类添加方法
语法：
class Person {
constructor(name,age) { // constructor 构造器或者构造函数
this.name = name;
this.age = age;
}
say() {
console.log(this.name + '你好');
}
}
创建实例：
var ldh = new Person('刘德华', 18);
ldh.say()
注意： 方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 创建类 class 创建一个 明星类
class Star {
// 类的共有属性放到 constructor 里面
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
sing(song) {
// console.log('我唱歌');
console.log(this.uname + song);
}
}
// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
// (1) 我们类里面所有的函数不需要写function
// (2) 多个函数方法之间不需要添加逗号分隔
ldh.sing('冰雨');
zxy.sing('李香兰');
</script>
</body>
</html>
3. 类的继承
继承
现实中的继承：子承父业，比如我们都继承了父亲的姓。
程序中的继承：子类可以继承父类的一些属性和方法。
语法：
class Father{ // 父类
}
class Son extends Father { // 子类继承父类
}
实例：
class Father {
constructor(surname) {
this.surname= surname;
}
say() {
console.log('你的姓是' + this.surname);
}
}
class Son extends Father{ // 这样子类就继承了父类的属性和方法
}
var damao= new Son('刘');
damao.say();
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 类的继承
// class Father {
// constructor() {
// }
// money() {
// console.log(100);
// }
// }
// class Son extends Father {
// }
// var son = new Son();
// son.money();
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
//这里的this.x和this.y指向的constructor里面的数据
console.log(this.x + this.y);
}
}
class Son extends Father {
constructor(x, y) {
super(x, y); //调用了父类中的构造函数
}
}
var son = new Son(1, 2); //创建son的一个实例
var son1 = new Son(11, 22);
son.sum(); //3
son1.sum(); //33
</script>
</body>
</html>
super 关键字
super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数
语法：
class Person { // 父类
constructor(surname){
this.surname = surname;
}
}
class Student extends Person { // 子类继承父类
constructor(surname,firstname){
super(surname); // 调用父类的constructor(surname)
this.firstname = firstname; // 定义子类独有的属性
}
}
注意: 子类在构造函数中使用super, 必须放到 this 前面
(必须先调用父类的构造方法,在使用子类构造方法)
案例：
class Father {
constructor(surname) {
this.surname = surname;
}
saySurname() {
console.log('我的姓是' + this.surname);
}
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
constructor(surname, fristname) {
super(surname); // 调用父类的constructor(surname)
this.fristname = fristname;
}
sayFristname() {
console.log("我的名字是：" + this.fristname);
}
}
var damao = new Son('刘', "德华");
damao.saySurname();
damao.sayFristname();
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// super 关键字调用父类普通函数
class Father {
say() {
return '我是爸爸';
}
}
class Son extends Father {
say() {
// console.log('我是儿子');
console.log(super.say() + '的儿子');
// super.say() 就是调用父类中的普通函数 say()
}
}
var son = new Son();
son.say();
// 继承中的属性或者方法查找原则: 就近原则
// 1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
// 2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>05-子类继承父类方法同时扩展自己方法</title>
</head>
<body>
<script>
// 父类有加法方法
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
// 子类继承父类加法方法 同时 扩展减法方法
class Son extends Father {
constructor(x, y) {
// 利用super 调用父类的构造函数
// super 必须在子类this之前调用
super(x, y);
this.x = x;
this.y = y;
}
subtract() {
console.log(this.x - this.y);
}
}
var son = new Son(5, 3);
son.subtract(); //2
son.sum(); //8
</script>
</body>
</html>
三个注意点
1.在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象.
2.类里面的共有属性和方法一定要加this使用.
3.类里面的this指向问题.
4.constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
var that; //声明一个全局变量
var _that;
class Star {
constructor(uname, age) {
// constructor 里面的this 指向的是 创建的实例对象
//将this保存给that这个全局变量，这样在任何一个地方都可使用全局变量了
that = this;
/* 输出为：
age: undefined
btn: button
uname: "刘德华"
*/
console.log(this);
this.uname = uname;
this.age = age;
// this.sing();
/*querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
*/
this.btn = document.querySelector('button');
this.btn.onclick = this.sing; //此处的sing不能写成sing(),如果加了会马上调用
}
sing() {
// 这个sing方法里面的this 指向的是 button 这个按钮,因为这个按钮调用了这个函数
console.log(this); //输出为<button>点击</button>
//输出为undefined，因为button里没有这个属性
console.log(this.uname);
// that里面存储的是constructor里面的this，输出为 刘德华
console.log(that.uname);
}
dance() {
// 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
_that = this;
console.log(this);
}
}
var ldh = new Star('刘德华');
console.log(that === ldh); //true
/*
输出为：
age: undefined
btn: button
uname: "刘德华"
*/
ldh.dance();
console.log(_that === ldh); //true
// 1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象
// 2. 类里面的共有的属性和方法一定要加this使用.
</script>
</body>
</html
4.面向对象案例：tab 栏切换
功能需求:
1.点击 tab栏,可以切换效果.
2.点击 + 号, 可以添加 tab 项和内容项.
3.点击 x 号, 可以删除当前的tab项和内容项.
4.双击tab项文字或者内容项文字,可以修改里面的文字内容.
抽象对象: Tab 对象
1.该对象具有切换功能
2.该对象具有添加功能
3.该对象具有删除功能
4.该对象具有修改功能
添加功能
点击 + 可以实现添加新的选项卡和内容
第一步: 创建新的选项卡li 和 新的 内容 section
第二步: 把创建的两个元素追加到对应的父元素中.
以前的做法: 动态创建元素 createElement , 但是元素里面内容较多,
需要innerHTML赋值,在 appendChild 追加到父元素里面.
现在高级做法: 利用 insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中
appendChild 不支持追加字符串的子元素, insertAdjacentHTML 支持追加字符串的元素
insertAdjacentHTML(追加的位置,‘要追加的字符串元素’)
追加的位置有: beforeend 插入元素内部的最后一个子节点之后
该方法地址: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML
删除功能
点击 × 可以删除当前的li选项卡和当前的section
X是没有索引号的, 但是它的父亲li 有索引号, 这个索引号正是我们想要的索引号
所以核心思路是: 点击 x 号可以删除这个索引号对应的 li 和 section
但是,当我们动态删除新的li和索引号时,也需要重新获取 x 这个元素. 需要调用init 方法
编辑功能
双击选项卡li或者 section里面的文字,可以实现修改功能
双击事件是: ondblclick
如果双击文字,会默认选定文字,此时需要双击禁止选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
核心思路: 双击文字的时候, 在 里面生成一个文本框, 当失去焦点或者按下回车然后把文本框输入的值给原先元素即可.
代码实现
js部分：
var that;
class Tab {
constructor(id) {
// 将constructor中的this赋值给全局变量that
that = this;
// 拿到id为tab的div盒子
this.main = document.querySelector(id);
this.add = this.main.querySelector('.tabadd');
// 获取li的父元素（ul）
this.ul = this.main.querySelector('.fisrstnav ul:first-child');
// section 父元素
this.fsection = this.main.querySelector('.tabscon');
// 因为new了一个Tab实例，就会自动调用constructor，放在这里，会自动调用init方法
this.init();
}
init() {
this.updateNode();
// init 初始化操作让相关的元素绑定事件
this.add.onclick = this.addTab;
// 获取索引，绑定事件
for (var i = 0; i < this.lis.length; i++) {
// 给每个li都添加一个属性index，保存当前li的索引号
this.lis[i].index = i;
//toggleTab后不能加(),加上的话init方法一加载这个函数就会自动调用
this.lis[i].onclick = this.toggleTab;
this.remove[i].onclick = this.removeTab;
//给获取的所有的fisrstnav类的li下的第一个span绑定双击事件
this.spans[i].ondblclick = this.editTab;
// 给每个section绑定双击事件
this.sections[i].ondblclick = this.editTab;
}
}
// 因为我们动态添加元素 需要重新获取对应的元素
updateNode() {
// 获取main中所有的li
this.lis = this.main.querySelectorAll('li');
this.sections = this.main.querySelectorAll('section');
//获取所有关闭的字体图标
this.remove = this.main.querySelectorAll('.icon-guanbi');
// 获取所有的fisrstnav类的li下的第一个span
this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');
}
// 1. 切换功能
toggleTab() {
// console.log(this.index);
that.clearClass(); //通过constructor调用clearClass方法
this.className = 'liactive'; //给li添加类名，this指向的是lis[i]
//给li对应的section添加上类名
that.sections[this.index].className = 'conactive';
}
// 清除所有li 和section 的类
clearClass() {
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].className = '';
this.sections[i].className = '';
}
}
// 2. 添加功能
addTab() {
that.clearClass();
// (1) 创建li元素和section元素
var random = Math.random(); //Math.random() 表示一个0~1之间的随机数
var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
var section = '<section class="conactive">测试 ' + random + '</section>';
/*
以前的做法: 动态创建元素 createElement , 但是元素里面内容较多,
需要innerHTML赋值,在 appendChild 追加到父元素里面.
现在高级做法: 利用 insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中
appendChild 不支持追加字符串的子元素, insertAdjacentHTML 支持追加字符串的元素
insertAdjacentHTML(追加的位置,‘要追加的字符串元素’)
追加的位置有:
'beforebegin'：元素自身的前面。
'afterbegin'：插入元素内部的第一个子节点之前。
'beforeend'：插入元素内部的最后一个子节点之后。
'afterend'：元素自身的后面。
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML
*/
// (2) 利用insertAdjacentHTML把这两个元素追加到对应的父元素里面
that.ul.insertAdjacentHTML('beforeend', li);
that.fsection.insertAdjacentHTML('beforeend', section);
/*当点击"+"时添加li和section后执行init方法，init方法有执行updateNode方法，
updateNode方法实现再次将所有的li和section获取，
*/
that.init();
}
// 3. 删除功能
removeTab(e) {
e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
var index = this.parentNode.index; //获取其字体图标父节点（li）的索引
console.log(index);
// 根据索引号删除对应的li 和section remove()方法可以直接删除指定的元素
that.lis[index].remove();
that.sections[index].remove();
that.init();
// 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
//只有一个if，可不加花括号{}
//document.querySelector('.liactive')表示有选中状态的，return结束，后面代码不再执行
if (document.querySelector('.liactive')) return;
// 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态
index--;
// 手动调用我们的点击事件 不需要鼠标触发
//选判断有没有这个lis，如果为-1即没有，即为false，则不执行后面的语句
that.lis[index] && that.lis[index].click();
}
// 4. 修改功能
editTab() {
var str = this.innerHTML; //这里的this指向span
// 双击禁止选定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
// alert(11);
this.innerHTML = '<input type="text" />'; //在获取的span元素内部生成一个input输入框
var input = this.children[0]; //生成的input文本框是span的第一个孩子
input.value = str; //将原先span中的文字赋值给文本框
// 让文本框里面的文字处于选定状态（因为绑定了双击事件，双击后文字就会全部选中，易于修改）
input.select();
// 当我们离开文本框就把文本框里面的值给span
input.onblur = function() {
// parentNode 表示父节点，这里即为input的父节点span
this.parentNode.innerHTML = this.value;
};
// 按下回车也可以把文本框里面的值给span
// onkeyup表示当用户释放键盘按钮时执行Javascript代码，在键盘事件里有个事件对象，
// 事件对象里的keyCode可以判断用户按了那个键
input.onkeyup = function(e) {
if (e.keyCode === 13) { // 13表示按下回车键
//this.parentNode.innerHTML = this.value;
// 因为和上方的onblur做一样的操作，我们可以手动调用表单失去焦点事件 不需要鼠标离开操作，
this.blur();
}
}
}
}
new Tab('#tab');
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>面向对象 Tab</title>
<link rel="stylesheet" href="./styles/tab.css">
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<main>
<h4>
Js 面向对象 动态添加标签页
</h4>
<div class="tabsbox" id="tab">
<!-- tab 标签 -->
<nav class="fisrstnav">
<ul>
<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
<li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
<li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<!-- tab 内容 -->
<div class="tabscon">
<section class="conactive">测试1</section>
<section>测试2</section>
<section>测试3</section>
</div>
</div>
</main>
<script src="js/tab.js"></script>
</body>
</html>
tab.css
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
main {
width: 960px;
height: 500px;
border-radius: 10px;
margin: 50px auto;
}
main h4 {
height: 100px;
line-height: 100px;
text-align: center;
}
.tabsbox {
width: 900px;
margin: 0 auto;
height: 400px;
border: 1px solid lightsalmon;
position: relative;
}
nav ul {
overflow: hidden;
}
nav ul li {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border-right: 1px solid #ccc;
position: relative;
}
nav ul li.liactive {
border-bottom: 2px solid #fff;
z-index: 9;
}
#tab input {
width: 80%;
height: 60%;
}
nav ul li span:last-child {
position: absolute;
user-select: none;
font-size: 12px;
top: -18px;
right: 0;
display: inline-block;
height: 20px;
}
.tabadd {
position: absolute;
/* width: 100px; */
top: 0;
right: 0;
}
.tabadd span {
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid #ccc;
float: right;
margin: 10px;
user-select: none;
}
.tabscon {
width: 100%;
height: 300px;
position: absolute;
padding: 30px;
top: 50px;
left: 0px;
box-sizing: border-box;
border-top: 1px solid #ccc;
}
.tabscon section,
.tabscon section.conactive {
display: none;
width: 100%;
height: 100%;
}
.tabscon section.conactive {
display: block;
}
style.css部分
@font-face {font-family: "iconfont";
src: url('./iconfont/iconfont.eot?t=1553960438096'); /* IE9 */
src: url('./iconfont/iconfont.eot?t=1553960438096#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmwAAAJrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp4fwE2AiQDCAsGAAQgBYRtBzAbpQXIrrApw71oi3CCOyzEy8RvE4yIN8TD036/zp03qCYRjaJZNBFFS/gREoRGipQKofjuNrb+9XbTqrmXcqWzfTRDqFqWkhAJzYToaE6LQ7Q30CirRqSKMnj58DdIdrNAdhoTQJa5VGfLrtiAy+lPoAcZdUC57UljTR4TMAo4oL0xiqwYG8YueIHPCdTqYajty/t+bUpmrwvEnUK42lQhLMssVy1UNhzN4kmF6vSQVvMY/T5+HEU1SUXBbti7uBBrx++cgqJULp0GhAgBna5AgSkgE0eN6R1NwTitNt0yAI5VG7wr/8AljmoX7K+zq+tBF1Q8k9JTPWp1AjnJDgCzmM3bU0V31dsvV3M2eC6fHjaGfX/qS7U5Gr58vj6uD0bgxudyrV/OtHHyP+NZnpO1txbktjdY+3FB61+7nxeOzq8niGYnRwT3v3aZxeXf6rrNxl5//49WlEtZUUL1Pj3Bv1EO7MuG2namrCkbvcnApLUJtWpRhv2tzlRLx43kQ7WO2/FW6c5QqDZEZnYKFeosoVK1NdSa5E/XaVM1Ra7BhAEQmk0kjV5QaLbIzG5U6HRRqTkK1DqJtivrjMT1zJaNnIsihAiyQE3JdbszcW0Xiadzdl4d8UO0HSUGNDNXzl2hifYSO5pPjrorgdjUAAavoa5TKDZVUXD3kuuOOzh70fShvUiN2owtNsRxIREIIiATUCYpGO2aqXy/CxEeHcfuaKrLDiGbQ5kcEMsNIK8M5qCmR3mn8RFHOpcECBtlAAwWIZ2OAqV5kQoJXHvShORYBzrDZKhhb3uT8QPlrA3bmsKZV6i89DiTV2o1AAAA') format('woff2'),
url('./iconfont/iconfont.woff?t=1553960438096') format('woff'),
url('./iconfont/iconfont.ttf?t=1553960438096') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('./iconfont/iconfont.svg?t=1553960438096#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-guanbi:before {
content: "\e676";
}
二、构造函数和原型
1. 构造函数和原型
1.1 概述
在典型的 OOP（面向对象） 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。
ES6， 全称 ECMAScript 6.0 ，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
在 ES6之前 ，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。
创建对象可以通过以下三种方式：
\1. 对象字面量
\2. new Object()
\3. 自定义构造函数
1.2 构造函数
构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。ES6之前，js中的面向对象是通过构造函数实现的
在 JS 中，使用构造函数时要注意以下两点：
1.构造函数用于创建某一类对象，其首字母要大写
2.构造函数要和 new 一起使用才有意义
new 在执行时会做四件事情：
①在内存中创建一个新的空对象。
②让 this 指向这个新的对象。
③执行构造函数里面的代码，给这个新对象添加属性和方法。
④返回这个新对象（所以构造函数里面不需要 return ）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 利用 new Object() 创建对象
var obj1 = new Object(); //Object是一个构造函数
// 2. 利用 对象字面量创建对象
var obj2 = {};
// 3. 利用构造函数创建对象
function Star(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我会唱歌');
}
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
console.log(ldh);
ldh.sing();
zxy.sing();
</script>
</body>
</html>
JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的 this 上添加。通过这两种方式添加的成员，就分别称为静态成员和实例成员。
l静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问
l实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 构造函数中的属性和方法我们称为成员, 成员可以添加
function Star(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我会唱歌');
}
}
var ldh = new Star('刘德华', 18);
// 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 这些就是实例成员
// 实例成员只能通过实例化的对象来访问
console.log(ldh.uname);
ldh.sing();
//输出为undefined， 因为不可以通过构造函数来访问实例成员
// console.log(Star.uname);
// 2. 静态成员 在构造函数本身上添加的成员 sex 就是静态成员
Star.sex = '男';
// 静态成员只能通过构造函数来访问
console.log(Star.sex);
console.log(ldh.sex); // 输出为undefined，因为静态成员不能通过对象来访问
</script>
</body>
</html>
1.3 构造函数的问题
构造函数方法很好用，但是存在浪费内存的问题。
我们可以通过原型对象来解决
1.4 构造函数原型 prototype
构造函数通过原型分配的函数是所有对象所共享的。
JavaScript 规定，每一个构造函数都有一个 prototype属性，指向另一个对象。注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。
我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。
问答？
\1. 原型是什么 ？
一个对象，我们也称为 prototype 为原型对象。
\2. 原型的作用是什么 ？
共享方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 构造函数的问题.
function Star(uname, age) {
this.uname = uname;
this.age = age;
// this.sing = function() {
// console.log('我会唱歌');
// }
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
// console.dir(Star);
ldh.sing(); //我会唱歌
zxy.sing(); //我会唱歌
console.log(ldh.sing === zxy.sing); //true
// 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
</script>
</body>
</html>
1.5 对象原型：__ proto__
对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，
之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，
就是因为对象有 __proto__ 原型的存在。
__proto__对象原型和原型对象 prototype 是等价的
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，
或者说一条路线，但是它是一个非标准属性，因此实际开发中，
不可以使用这个属性，它只是内部指向原型对象 prototype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
ldh.sing(); //我会唱歌
// 在对象身上系统自动添加一个 __proto__ 属性，它指向我们构造函数的原型对象 prototype
console.log(ldh);
console.log(ldh.__proto__ === Star.prototype); //true
// 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
// 如果没有sing 这个方法,因为有__proto__ 这个属性的存在,
//就去构造函数原型对象prototype身上去查找sing这个方法
</script>
</body>
</html>
1.6 constructor 构造函数
对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性
constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。
constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。
一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，
我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，
这样修改后的原型对象 constructor 就不再指向当前构造函数了。
此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
// 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
// Star.prototype.sing = function() {
// console.log('我会唱歌');
// };
// Star.prototype.movie = function() {
// console.log('我会演电影');
// }
Star.prototype = {
// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象
//(相当于把原来的constructor覆盖掉了),则必须手动的
//利用constructor指回原来的构造函数（即 constructor: Star ）
constructor: Star,
sing: function() {
console.log('我会唱歌');
},
movie: function() {
console.log('我会演电影');
}
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
/*以下输出皆为：
constructor: ƒ Star(uname, age)
movie: ƒ ()
sing: ƒ ()
__proto__: Object
*/
console.log(Star.prototype);
console.log(ldh.__proto__);
/*以下输出皆为：
ƒ Star(uname, age) {
this.uname = uname;
this.age = age;
}
*/
console.log(Star.prototype.constructor);
console.log(ldh.__proto__.constructor);
</script>
</body>
</html>
1.7 构造函数、实例、原型对象三者之间的关系
每一个构造函数都有一个原型对象prototype，通过构造函数的prototype指向原型对象prototype的，而原型对象也有一个属性constructor指回了构造函数
通过构造函数new一个实例对象，构造函数就可指向实例对象，而实例对象里也有一个原型（–proto–），指向的是prototype原型对象，而实例对象里也有一个constructor可以指回构造函数，本质就是通过原型对象prototype指回过来的
我们需要牢记两点：
①__proto__和constructor属性是对象所独有的；
② prototype属性是函数所独有的，因为函数也是一种对象，
所以函数也拥有__proto__和constructor属性。
__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，
那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，
直到__proto__属性的终点null，然后返回undefined，再往上找就相当于在null上取值，
会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，
即f1.__proto__ === Foo.prototype。 constructor属性的含义就是指向该
对象的构造函数，所有函数（此时看成对象了）最终的构造函数都指向Function。
另外 __proto__ 属性是浏览器对es5的实现，而不是es标准。
1.8 原型链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
// 1. 只要是对象就有__proto__ 原型, 指向原型对象
/*
sing: ƒ ()
constructor: ƒ Star(uname, age)
__proto__: Object
*/
console.log(Star.prototype); //输出为上方的
console.log(Star.prototype.__proto__ === Object.prototype); //true
// 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
console.log(Object.prototype.__proto__); //null
// 3. 我们Object.prototype原型对象里面的__proto__原型 指向为 null
</script>
</body>
</html>
1.9 JavaScript 的成员查找机制(规则)
1.当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
2.如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。
3.如果还没有就查找原型对象的原型（Object的原型对象）。
4.依此类推一直找到 Object 为止（null）。
5.__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
Star.prototype.sex = '女';
// Object.prototype.sex = '男';
var ldh = new Star('刘德华', 18);
ldh.sex = '男';
console.log(ldh.sex);
console.log(Object.prototype);
console.log(ldh);
console.log(Star.prototype);
console.log(ldh.toString());
</script>
</body>
</html>
1.10 原型对象this指向
构造函数中的this 指向我们实例对象.
原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
var that;
Star.prototype.sing = function() {
console.log('我会唱歌');
that = this;
}
var ldh = new Star('刘德华', 18);
// 1. 在构造函数中,里面this指向的是对象实例 ldh
ldh.sing(); //我会唱歌
// true，这里我们通过声明一个全局变量that，然后将this赋值给他
console.log(that === ldh);
// 2.原型对象函数里面的this 指向的是 实例对象 ldh
</script>
</body>
</html>
1.11 扩展内置对象
可以通过原型对象，对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。
注意：数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {} ，只能是 Array.prototype.xxx = function(){} 的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 原型对象的应用 扩展内置对象方法，采用.的形式给Array数组追加方法
Array.prototype.sum = function() {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
};
// 不能采用以下方法，会将Array数组的内置对象覆盖，不允许
// Array.prototype = {
// sum: function() {
// var sum = 0;
// for (var i = 0; i < this.length; i++) {
// sum += this[i];
// }
// return sum;
// }
// }
var arr = [1, 2, 3];
console.log(arr.sum()); //6
console.log(Array.prototype);
var arr1 = new Array(11, 22, 33);
console.log(arr1.sum()); //66
</script>
</body>
</html>
2. 继承
ES6之前并没有给我们提供 extends 继承。我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。
2.1 call()
调用这个函数, 并且修改函数运行时的 this 指向
fun.call(thisArg, arg1, arg2, ...)
thisArg ：当前调用函数 this 的指向对象
arg1，arg2：传递的其他参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// call 方法
function fn(x, y) {
console.log('我想喝手磨咖啡');
//原先this指向函数的调用者，此处指向window，下方我们call方法改变this指向
console.log(this);
console.log(x + y);
}
var o = {
name: 'andy'
};
fn(); //通过fn()直接调用函数,相当于window.fn();
fn.call(); // 1. call() 也可以调用函数
// 2. call() 可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象
fn.call(o, 1, 2);
</script>
</body>
</html>
2.2 借用构造函数继承父类型属性
核心原理： 通过 call() 把父类型的 this 指向子类型的 this ，这样就可以实现子类型继承父类型的属性。
// 父类
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
// 子类
function Student(name, age, sex, score) {
// 此时父类的 this 指向子类的 this，同时调用这个函数
Person.call(this, name, age, sex);
this.score = score;
}
var s1 = new Student('zs', 18, '男', 100);
console.dir(s1);
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 借用父构造函数继承属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
//
this.uname = uname;
this.age = age;
}
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
//首先调用父构造函数，将父构造函数的this指向子构造函数的this,
//子构造函数就添加了uname和age这两个属性
Father.call(this, uname, age);
this.score = score; //我们还可以添加子构造函数特有的属性
}
var son = new Son('刘德华', 18, 100);
console.log(son);
</script>
</body>
</html>
2.3 借用原型对象继承父类型方法
一般情况下，对象的方法都在构造函数的原型对象中设置，通过构造函数无法继承父类方法。
核心原理：
①将子类所共享的方法提取出来，让子类的 prototype 原型对象 = new 父类()
②本质：子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父类原型对象
③将子类的 constructor 从新指向子类的构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 借用父构造函数继承属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
Father.prototype.money = function() {
console.log(100000);
};
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
Father.call(this, uname, age);
this.score = score;
}
// 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
// Son.prototype = Father.prototype;
/*
我们通过new一个Father的实例对象，并将其赋值给Son的原型，这时会
将son原来的prototype覆盖（因为实例对象也是一个对象），
我们要利用constructor将其指回原来的构造函数
*/
Son.prototype = new Father(); //
/*
如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数，
不然会指向父构造函数（Father）的constructor
*/
Son.prototype.constructor = Son; //
// 这个是子构造函数专门的方法
Son.prototype.exam = function() {
console.log('孩子要考试');
}
var son = new Son('刘德华', 18, 100);
console.log(son);
console.log(Father.prototype);
console.log(Son.prototype.constructor);
</script>
</body>
</html>
3. 类的本质
\1. class本质还是function.
\2. 类的所有方法都定义在类的prototype属性上
\3. 类创建的实例,里面也有__proto__ 指向类的prototype原型对象
\4.所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
\5.所以ES6的类其实就是语法糖.
\6. 语法糖:语法糖就是一种便捷写法. 简单理解, 有两种方法可以实现同样的功能, 但是一种写法更加清晰、方便,那么这个方法就是语法糖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// ES6 之前通过 构造函数+ 原型实现面向对象 编程
// (1) 构造函数有原型对象prototype
// (2) 构造函数原型对象prototype 里面有constructor 指向构造函数本身
// (3) 构造函数可以通过原型对象添加方法
// (4) 构造函数创建的实例对象有__proto__ 原型指向 构造函数的原型对象
// ES6 通过 类 实现面向对象编程
class Star {
}
console.log(typeof Star); //输出为 function
// 1. 类的本质其实还是一个函数 我们也可以简单的认为 类就是 构造函数的另外一种写法
console.log(Star.prototype); // (1) 类有原型对象prototype
// (2) 类原型对象prototype 里面有constructor 指向类本身
console.log(Star.prototype.constructor);
// (3)类可以通过原型对象添加方法
Star.prototype.sing = function() {
console.log('冰雨');
}
var ldh = new Star();
/*console.log()可以取代alert()或document.write()，
//在网页脚本中使用console.log()时，会在浏览器控制台打印出信息。
console.dir()可以显示一个对象所有的属性和方法。
*/
console.dir(ldh);
// (4) 类创建的实例对象有__proto__ 原型指向 类的原型对象
console.log(ldh.__proto__ === Star.prototype); //true
</script>
</body>
</html>
3. ES5 中的新增方法
3.1 ES5 新增方法概述
ES5 中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：
数组方法
字符串方法
对象方法
3.2 数组方法
迭代(遍历)方法：forEach()、map()、filter()、some()、every()；
forEach()方法
array.forEach(function(currentValue, index, arr))
forEach中可以有一个回调函数， currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// forEach 迭代(遍历) 数组
var arr = [1, 2, 3];
var sum = 0;
//回调函数中每一项的命名是任意的
arr.forEach(function(value, index, array) {
console.log('每个数组元素' + value);
console.log('每个数组元素的索引号' + index);
console.log('数组本身' + array);
sum += value;
})
console.log(sum);
</script>
</body>
</html>
filter()方法
array.filter(function(currentValue, index, arr))
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,
主要用于筛选数组
注意它直接返回一个新数组，不会影响原来的数组
currentValue: 数组当前项的值
index：数组当前项的索引
arr：数组对象本身
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// filter 筛选数组
var arr = [12, 66, 4, 88, 3, 7];
//回调函数中的三个参数可以按需添加
var newArr = arr.filter(function(value, index) {
// return value >= 20;
return value % 2 === 0;
});
console.log(newArr);
</script>
</body>
</html>
some()方法
array.some(function(currentValue, index, arr))
some() 方法用于检测数组中的元素是否满足指定条件. 通俗点 查找数组中是否有满足条件的元素
注意它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到就返回false.
如果找到第一个满足条件的元素,则终止循环. 不在继续查找.
currentValue: 数组当前项的值
index：数组当前项的索引
arr：数组对象本身
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// some 查找数组中是否有满足条件的元素
var arr = [10, 30, 4];
var flag = arr.some(function(value) {
// return value >= 20;
return value < 3;
});
console.log(flag); //false
var arr1 = ['red', 'pink', 'blue'];
var flag1 = arr1.some(function(value) {
return value == 'pink'; //true
});
console.log(flag1);
// 1. filter 也是查找满足条件的元素 返回的是一个数组
// 而且是把所有满足条件的元素返回回来
// 2. some 也是查找满足条件的元素是否存在 返回的是一个布尔值
// 如果查找到第一个满足条件的元素就终止循环
</script>
</body>
</html>
查询商品案例
1.把数据渲染到页面中 (forEach)
2.根据价格显示数据
3.根据商品名称显示数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 400px;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
}
td,
th {
border: 1px solid #000;
text-align: center;
}
input {
width: 50px;
}
.search {
width: 600px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="search">
按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 利用新增数组方法操作数据
var data = [{
id: 1,
pname: '小米',
price: 3999
}, {
id: 2,
pname: 'oppo',
price: 999
}, {
id: 3,
pname: '荣耀',
price: 1299
}, {
id: 4,
pname: '华为',
price: 1999
}, ];
// 1. 获取相应的元素
//querySelector方法：获取文档中为tbody的元素
var tbody = document.querySelector('tbody');
//获取文档中类名为search-price的元素
var search_price = document.querySelector('.search-price');
var start = document.querySelector('.start');
var end = document.querySelector('.end');
var product = document.querySelector('.product');
var search_pro = document.querySelector('.search-pro');
//此处调用函数是为了刚开始打开网页时显示所有的数据
setDate(data);
// 2. 把数据渲染到页面中
function setDate(mydata) {
// 先清空原来tbody 里面的数据,不清空的话原先的数据还会保留，查询出来的数据会在其下方显示
tbody.innerHTML = '';
mydata.forEach(function(value) {
// console.log(value);
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
tbody.appendChild(tr);
});
}
// 3. 根据价格查询商品
// 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
/*
element.addEventListener(event, function, useCapture)
event 必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。
例如，使用 "click" ,而不是使用 "onclick"。
function 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。
事件对象的类型取决于特定的事件。例如，
"click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行
*/
search_price.addEventListener('click', function() {
// alert(11);
var newDate = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
});
console.log(newDate);
// 把筛选完之后的对象渲染到页面中
setDate(newDate);
});
// 4. 根据商品名称查找商品
// 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高]
search_pro.addEventListener('click', function() {
var arr = [];
data.some(function(value) {
if (value.pname === product.value) {
// console.log(value);
/*push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
语法：arrayObject.push(newelement1,newelement2,....,newelementX)
newelement1 必需。要添加到数组的第一个元素。
newelement2 可选。要添加到数组的第二个元素。
newelementX 可选。可添加多个元素。
返回值 ：把指定的值添加到数组后的新长度。
*/
arr.push(value); //将取到的结果添加到数组中
// return 后面必须写true ，这里是因为some方法返回值是布尔值,
return true;
//如果查找到这个元素, 就返回true，找到第一个符合的，
//就直接退出循环，遇到大量数据时，效率更高
}
});
// 把拿到的数据渲染到页面中
setDate(arr);
})
</script>
</body>
</html>
some和forEach和filter的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var arr = ['red', 'green', 'blue', 'pink'];
// 1. forEach迭代 遍历
arr.forEach(function(value) {
if (value == 'green') {
console.log('找到了该元素');
return true; // 在forEach 里面 return 不会终止迭代
}
console.log(11);
})
// 如果查询数组中唯一的元素, 用some方法更合适,
arr.some(function(value) {
if (value == 'green') {
console.log('找到了该元素');
// 在some 里面 遇到 return true 就是终止遍历 迭代效率更高
return true;
}
console.log(11);
});
arr.filter(function(value) {
if (value == 'green') {
console.log('找到了该元素');
return true; // filter 里面 return 不会终止迭代
}
console.log(11);
});
</script>
</body>
</html>
3.3 字符串方法
trim()方法
trim() 方法会从一个字符串的两端删除空白字符。trim() 方法并不影响原字符串本身，它返回的是一个新的字符串。
str.trim()
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text"> <button>点击</button>
<div></div>
<script>
// trim 方法去除字符串两侧空格
var str = ' an dy ';
console.log(str);
var str1 = str.trim();
console.log(str1);
var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function() {
var str = input.value.trim();
if (str === '') {
//当用户不输入内容或输入空格点击时会弹出
alert('请输入内容');
} else {
console.log(str);
console.log(str.length);
div.innerHTML = str; //显示具体的值
}
}
</script>
</body>
</html>
3.4 对象方法
Object.keys()
\1. Object.keys() 用于获取对象自身所有的属性
Object.keys(obj)
效果类似 for…in
返回一个由属性名组成的数组
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 用于获取对象自身所有的属性
var obj = {
id: 1,
pname: '小米',
price: 1999,
num: 2000
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function(value) {
console.log(value);
})
</script>
</body>
</html>
Object.defineProperty()
\2. Object.defineProperty() 定义对象中新属性或修改原有的属性。(了解)
Object.defineProperty(obj, prop, descriptor)
obj：必需。目标对象（哪个对象）
prop：必需。需定义或修改的属性的名字（对象中的哪个属性）
descriptor：必需。目标属性所拥有的特性
Object.defineProperty() 第三个参数 descriptor 说明： 以对象形式 { } 书写
value: 设置属性的值 默认为undefined（新添加的）
writable: 值是否可以重写。true | false 默认为false
enumerable: 目标属性是否可以被枚举。true | false 默认为 false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
默认为false
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// Object.defineProperty() 定义新属性或修改原有的属性
var obj = {
id: 1,
pname: '小米',
price: 1999
};
// 1. 以前的对象添加和修改属性的方式
// obj.num = 1000;
// obj.price = 99;
// console.log(obj);
// 2. Object.defineProperty() 定义新属性或修改原有的属性
Object.defineProperty(obj, 'num', {
value: 1000,
/*//新添加的属性不写这个的话，默认为false，即遍历这个对象时不会遍历这个属性（即不显示）
参考下方的console.log(Object.keys(obj));
*/
enumerable: true
});
console.log(obj);
Object.defineProperty(obj, 'price', {
value: 9.9
});
console.log(obj);
Object.defineProperty(obj, 'id', {
// 如果值为false 不允许修改这个属性值 默认值也是false，但是注意只对后面的起作用，
//如果把obj.id = 2;放前面的话会修改
writable: false,
});
obj.id = 2;
console.log(obj);
Object.defineProperty(obj, 'address', {
value: '中国山东蓝翔技校xx单元',
// 如果值为false 不允许修改这个属性值 默认值也是false
writable: false,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: false,
// configurable 如果为false 则不允许删除这个属性 不允许在修改第
//三个参数里面的特性 默认为false
configurable: false
});
console.log(obj);
console.log(Object.keys(obj));
//delete表示删除某个属性，此处因为定义了允许不被删除，所以不会删除
delete obj.address;
console.log(obj);
delete obj.pname; //这里会删除，因为没有定义
console.log(obj);
//下方这里会报错，因为上面已经定义了不允许修改
Object.defineProperty(obj, 'address', {
value: '中国山东蓝翔技校xx单元',
// 如果值为false 不允许修改这个属性值 默认值也是false
writable: true,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: true,
// configurable 如果为false 则不允许删除这个属性 默认为false
configurable: true
});
console.log(obj.address);
</script>
</body>
</html>
源码获取
至此，我们的JavaScript进阶(一)就讲解完成了。下篇我们将介绍函数、this、严格模式、高阶函数、闭包、递归等内容，源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ，回复关键字JavaScript进阶源码素材进行获取哦。
JavaScript进阶(二)：函数、this、严格模式、高阶函数、闭包、递归
JavaScript进阶(三)：正则表达式、ES6语法、ES6内置对象
JavaScript进阶(五)：ES7、ES8、ES9、ES10、ES11新特性
JavaScript入门链接：
JavaScript入门(一)：JavaScript基础知识
扫一扫
1682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
