devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

javascript高级语言程序设计,javascript高级程序编程_javascript高级程序设计

作者：人工智能uu | 2024-07-23 19:27:53

赞

踩

javascript高级程序设计

大家好，小编来为大家解答以下问题，javascript高级程序设计和权威指南，javascript高级语言程序设计，现在让我们一起来看看吧！

面向对象编程介绍

两大编程思想

（1）、 面向过程编程：

  • （缩写 POP）（ Process-oriented programming）面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了；
  • 面向过程，就是按照我们分析好了的步骤，按照步骤解决问题；
    （2）、 面向对象：
  • （缩写OOP）（Object oriented programming）面向对象就是把事务分解成为一个一个对象，然后由对象之间分工与合作；
  • 面向对象是以对象功能来划分问题，而不是步骤；
  • 在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工；
  • 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目；
  • 面向对象的特性：【封装性】、【继承性】、【多态性】；
面向过程和面向对象的对比
面向过程
  • 优点：性能比面向对象高，适合跟硬件联系很密切的东西，例如单片机就采用的面向过程编程；
  • 缺点：没有面向对象易维护、易复用、易扩展；
面向对象
  • 优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护；
  • 缺点：性能比面向过程低；
    注意：面向对象和面向过程是两种不同的编程思想，都有适合各自的使用场景，谁也不能替代谁；

ES6中的类和对象

  • 面向对象的思维特点：
    （1）、抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模版）；
    （2）、对类进行实例化，获取类的对象；
  • 面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，指挥对象做事情；

对象

  • 现实生活中：对象是一个具体的事务；
  • 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事务都是对象，例如：字符串、数值、数组、函数等；
  • 对象是由【属性】和【方法】组成的；
  • 【属性】：事物的特征，在对象中用属性来表示（常用名词）；
  • 【方法】：事物的行为，在对象中用方法来表示（常用动词）；

类（class）

  • 在ES6中新增加了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象；
  • 【类】抽象了对象的公共部分，它【泛指】某一大类（class）；
  • 对象【特指】某一个，通过类实例化一个具体的对象；

创建类和生成实例

  • 语法：
  1. class name(){
  2. 	//class body
  3. }
  • 创建实例：
var xx = new name();
  • 注意：类必须使用new实例化对象；

constructor()（构造函数 又叫 构造器）

  • constructor()方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。如果没有显示定义，类内部会自动给我们创建一个constructor()；
  1. //1、创建类 class 创建一个明星类
  2. class Star{
  3. 	//类的共有属性放到 constructor 里面；
  4. 	constructor(uname){//接收实例传递过来的参数并返回实例对象；
  5. 		this.uname = uname;
  6. 	}
  7. }
  8. //2、利用类创建对象 new
  9. var ldh = new Star('刘德华');
  10. console.log(ldh.uname);//刘德华
  • 1、通过class关键字创建类，类名我们还是习惯性定义首字母大写；
  • 2、类里面有一个constructor()函数，可以接受传递过来的参数，同时返回实例对象；
  • 3、constructor函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数；
  • 4、生成实例new不能省略；
  • 5、最后注意语法规范，创建类，类名后面不要加小括号，生成实例，类名后面加小括号，构造函数不需要加function；

类中添加共有方法

  • 语法：
  1. class Person{
  2. 	constructor(name,age){//constructor 构造器 或 构造函数
  3. 		this.name = name;
  4. 		this.age = age;
  5. 	}
  6. 	say(){
  7. 		console.log(this.name + '你好');
  8. 	}
  9. }
  10. //1、类里面所有的函数不需要写function；
  11. //2、多个函数方法之间不需要添加逗号分隔；

类继承extends和super关键字

extends关键字
  • 子类可以继承父类的一些属性和方法；
  • 语法：
  1. class Father{//父类
  2. 	constructor(){
  3. 		
  4. 	}
  5. 	money(){
  6. 		console.log(100);
  7. 	}
  8. }
  9. class Son extends Father{//子类继承父类
  10. }
  11. var son = new Son();
  12. son.money();//100
super关键字
  • super关键字用于访问和调用对象父类上的函数快码论文。可以调用父类的构造函数，也可以调用父类的普通函数；
  1. class Father{
  2. 	constructor(x,y){
  3. 		this.x = x;
  4. 		this.y = y;
  5. 	}
  6. 	sum(){
  7. 		console.log(this.x + this.y);
  8. 	}
  9. }
  10. class Son extends Father{
  11. 	constructor(x,y){
  12. 		super(x,y);//调用了父类中的构造函数
  13. 	}
  14. }
  15. var son = new Son(1,2);
  16. son.sum();
  • super关键字调用父类的普通函数；
  1. class Father{
  2. 	say(){
  3. 		return '我是爸爸';
  4. 	}	
  5. }
  6. class Son extends Father{
  7. 	say(){
  8. 		console.log(super.say() + '的儿子');//调用父类的say方法
  9. 	}
  10. }
  11. var son = new Son();
  12. son.say();
  • 继承中的属性或者方法查找原则：（就近原则）
    （1）、继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的；
    （2）、继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）；
  • super必须放到子类this之前；
  • 子类在构造函数中使用super，必须放到this前面（必须先调用父类的构造方法，再使用子类构造方法）；
  • 子类继承父类加法方法，同时，扩展减法方法；
  1. //父类有加法方法
  2. class Father{
  3. 	constructor(x,y){
  4. 		this.x = x;
  5. 		this.y = y;
  6. 	}
  7. 	sum(){
  8. 		console.log(this.x + this.y);
  9. 	}
  10. }
  11. //子类继承父类加法方法，同时，扩展减法方法；
  12. class Son extends Father{
  13. 	constructor(x,y){
  14. 		super(x,y);//super必须在子类this之前调用，否咋会报错
  15. 		this.x = x;
  16. 		this.y = y;
  17. 		//利用super 调用父类的构造函数；	
  18. 	}
  19. 	subtract(){
  20. 		console.log(this.x - this.y);
  21. 	}
  22. }
  23. var son = new Son(5,3);
  24. son.subtract();
使用类的3个注意点
  • 1、在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象；
  • 2、类里面的共有的属性和方法一定要加this使用；（this指向是实例化对象）
  • 3、类里面this指向问题；
  1. //案例：点击button调用sing方法
  2. <button>点击</button>
  3. var that;
  4. var _that;
  5.  
  6. class Star{
  7. 	constructor(uname,age){
  8. 	//constructor里面的this指向的是【创建的实例对象】；
  9. 		that = this;
  10. 		
  11. 		this.uname = uname;
  12. 		this.age = age;
  13. 		//this.sing();
  14. 		this.btn = document.querySelector('button');
  15. 		//实例对象的btn，所以要加this；
  16. 		//点击会输出undefined；原因：sing里面的this指向的是btn；而btn里面是没有uname属性的，所以打印出来的是undefined；
  17. 		this.btn.onclick = this.sing;//此处sing后面不需要加小括号，因为不需要立马就调用，而是要点击按钮再调用；
  18. 	}
  19. 	sing(){
  20. 		//这个sing方法里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数；
  21. 		console.log(this.uname);//从实例上拿uname，所以需要加this
  22. 		console.log(that.uname);//that里面存储的是constructor里面的this；所以打印出来的是刘德华；
  23. 		
  24. 	}
  25. 	dance(){
  26. 		//这个dance里面的this，指向的是实例对象 ldh，因为ldh调用了这个函数；
  27. 		_that = this;
  28. 	}
  29. }
  30. var ldh = new Star('刘德华');
类里面this指向问题；
  • constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者；
案例：面向对象tab栏切换

构造函数和原型

构造函数

  • 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面；
  • 在JS中，使用构造函数时要注意以下两点：
    （1）、构造函数用于创建某一类对象，其首字母要大写；
    （2）、构造函数要和new一起使用才有意义；
  • new在执行时会做四件事：
    （1）、在内存中创建一个新的空对象；
    （2）、让this指向这个新的对象；
    （3）、执行构造函数里面的代码，给这个新对象添加属性和方法；
    （4）、返回这个新对象（所以构造函数里面不需要return）；
利用构造函数创建对象
  • 在典型的OOP的语言中（如java），都存在类的概念，类就是对象的模版，对象就是类的实质，但在ES6之前，JS中并没有引入类的概念；
  • ES6全称ECMAScript6.02015.06发布。但是目前浏览器的JavaScript是ES5版本，大多数高版本的浏览器也支持ES6，不过只实现了ES6的部分特性和功能；
  • 在ES6之前，对象不是基于类创建的，而是用一种称为【构建函数】的特殊函数来定义对象和他们的特征；
  • 复习：创建对象可以通过以下三种方式：
    （1）、对象字面量；（对象的字面量是花括号{}）
    （2）、new Object()
    （3）、自定义构造函数；（把对象公共的属性和方法抽取出来放到构造函数中，利用new关键字创建实例对象；）
  1. // 1、利用new Object()创建对象；
  2. var obj1 = new Object();
  3.  
  4. // 2、利用对象字面量创建对象；
  5. var obj2 = {};
  6. // 3、利用构造函数创建对象；
  7. function Star(uname,age){
  8. 	this.uname = uname;
  9. 	this.age = age;
  10. 	this.sing = function(){
  11. 		console.log('唱歌');
  12. 	}
  13. }
  14. //利用new关键字创建实例对象；
  15. var ldh = new Star('ldh',13);
  16. console.log(ldh);
静态成员和实例成员（构造函数的属性和方法我们称为【成员】，成员可以添加）
  • JavaScript的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的this上添加。通过这两种方式添加的成员，就分别称为【静态成员】和【实例成员】。
  • 静态成员：在构造函数本身上添加的成员称为静态成员（如：Star.sex='男'，sex就是静态成员），只能通过构造函数来访问（如：Star.sex）；
  • 实例成员：在构造函数内部通过this添加的成员称为实例成员（如上面代码中的uname 、age、sing），只能由实例化的对象来访问（如：ldh.uname）；不可以通过构造函数（Star.uname）来访问实例成员；
构造函数原型对象prototype
  • 构造函数方法很好用，但是存在浪费内存的问题；（同一个方法在不同的实例对象中都需要开辟新的内存地址）
    -
  • 我们希望所有的对象使用同一个函数，这样就比较节省内存。
  • 构造函数通过原型prototype分配的函数是所有对象所共享的；
  • java规定，每一个构造函数都有一个prototype属性，指向另一个对象。注意这个prototype就是一个对象（所以就称为原型对象），这个对象的所有属性和方法，都会被构造函数所拥有；
  • 我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法；
  1. function Star(uname,age){
  2. 	this.uname = uname;
  3. 	this.age = age;
  4. }
  5. //可以把那些不变的方法，直接定义在`prototype`原型对象上；
  6. Star.prototype.sing = function(){
  7. 	console.log('唱歌');
  8. }
  9. var ldh = new Star('ldh',19);
  10. var zxy= new Star('zxy',19);
  11. console.log(ldh.sing === zxy.sing);//true  比较的是方法的内存地址
  12. ldh.sing();
  13. zxy.sing();
  • 原型是什么？一个对象，我们也称为prototype为原型对象；
  • 原型的作用是什么？共享方法；
  • 一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放到原型对象身上；
对象的原型__proto__
  • 对象都会有一个属性__proto__，指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在；
  • __proto__对象原型和原型对象prototype是等价的；
  • __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype；
  1. console.log(ldh.__proto__ === Star.prototype);//true
  2. /*
  3. 方法的查找规则：
  4.  （1）、首先看ldh对象身上是否有sing方法，如果有就执行这个对象上的sing；
  5.  （2）、如果没有sing这个方法，因为有__proto__的存在，就去构造函数原型对象prototype身上去查找sing这个方法；
  6. */

在这里插入图片描述

constructor构造函数
  • 对象原型（__proto__）和构造函数原型对象（prototype）里面都有一个属性constructor属性，constructor我们称为构造函数，因为它指回构造函数本身；
  • constructor主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数；
  1. function Star(uname,age){
  2. 	this.uname = uname;
  3. 	this.age = age;
  4. }
  5. //Star.prototype.sing = function(){
  6. //	console.log('唱歌');
  7. //}
  8. //Star.prototype.movie= function(){
  9. //	console.log('演电影');
  10. //}
  11.  
  12. //很多情况下，我们需要手动的利用constructor这个属性指回 原来的构造函数；
  13. Star.prototype = {
  14. //如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的利用constructor指回原来的构造函数；
  15. 	constructor:Star,
  16. 	sing:function(){
  17. 		console.log('唱歌');
  18. 	},
  19. 	movie:function(){
  20. 		console.log('演电影');
  21. 	}
  22. }
  23. var ldh = new Star('刘德华',18);
  24. var zxy= new Star('张学友',18);
  25. console.log(Star.prototype);
  26. console.log(ldh.__proto__);
构造函数、实例和原型对象三者之间的三角关系

在这里插入图片描述

原型链
  • 主要是对象就有__proto__原型，指向原型对象；
  • 我们Star原型对象里面的__proto__原型指向的是Object.prototype；
  • 我们Object.prototype原型对象里面的__proto__原型，指向为null；
    在这里插入图片描述
JavaScript的对象成员查找规则（机制）
  • 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性；
  • 如果没有就查找它的原型（也就是__proto__指向的prototype原型对象）；
  • 如果还没有就查找原型对象的原型（Object的原型对象）；
  • 依次类推一直找到Object为止（null）；
  • __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线；
原型对象this指向
  • this到底指向谁只有调用的时候才会确定；
  • 一般情况下，this指向的是调用者；
  1. function Star(uname,age){
  2. 	this.uname = uname;
  3. 	this.age = age;
  4. }
  5. var that;
  6. Star.prototype.sing = function(){
  7. 	console.log('唱歌');
  8. 	that = this;
  9. }
  10. var ldh = new Star('刘德华',19);
  11.  
  12. //1、在构造函数中，里面的this指向的是 实例对象 ldh；
  13. ldh.sing();
  14. console.log(that === adh);
  15. //2、原型对象函数里面的this 指向的是 实例对象 ldh；
原型对象的应用：利用原型对象扩展内置对象方法
  • 可以通过原型对象，对原来的内置对象进行扩展自定义的方法。比如：给数组增加自定义求偶数和的功能；
  1. console.log(Array.prototype);//打印数组的原型
  2.  
  3. Array.prototype.sum = function(){
  4. 	var sum = 0;
  5. 	for(var i = 0;i < this.length;i++ ){
  6. 		sum += this[i];
  7. 	}
  8. 	return sum;
  9. }
  10. var arr = [1,2,3];
  11. console.log(arr.sum());//6
  12.  
  13. var arr1 = new Array(11,22,33);
  14. console.log(arr1.sum());//66
  • 注意：数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {}，只能是Array.prototype.xxx = function(){}的方式；
继承
  • ES6之前并没有给我们提供extends继承。我们可以通过构造函数+原型对象模拟实现继承，被称为【组合继承】；
1、借用构造函数继承父类型属性
  • 核心原理：通过call把父类型的this指向子类型的this，这样就可以实现子类型继承父类型的属性；
  1.  <>
  2.         // 借用父构造函数继承属性；
  3.         // 1、父构造函数
  4.         function Father(uname,age){
  5.             // this 指向父构造函数的对象实例；
  6.             this.uname = uname;
  7.             this.age = age;
  8.         }
  9.  
  10.         // 2、子构造函数
  11.         function Son(uname,age,score){
  12.             // this 指向子构造函数的实例对象；
  13.             Father.call(this,uname,age);//调用父构造函数，把父构造函数中的this改为子构造函数中的this；
  14.             this.score = score;
  15.         }
  16.         var son = new Son('刘德华',12,90);
  17.         console.log(son);//Son {uname: '刘德华', age: 12, score: 90}
  18.  </>
2、借用原型对象继承父类型方法
  1. <>
  2.         // 一、借用父构造函数继承属性；
  3.         // 1、父构造函数
  4.         function Father(uname,age){
  5.             // this 指向父构造函数的对象实例；
  6.             this.uname = uname;
  7.             this.age = age;
  8.         }
  9.         // 二、借用原型对象继承父类型方法
  10.         Father.prototype.money = function(){
  11.             console.log(10);
  12.         }
  13.  
  14.         // 2、子构造函数
  15.         function Son(uname,age,score){
  16.             // this 指向子构造函数的实例对象；
  17.             Father.call(this,uname,age);//调用父构造函数，把父构造函数中的this改为子构造函数中的this；
  18.             this.score = score;
  19.         }
  20.         //这样直接赋值会有问题，如果修改了子原型对象，父原型对象也跟着修改了；
  21.         //Son.prototype = Father.prototype;
  22.         // 正确做法
  23.         Son.prototype = new Father();
  24.         // 如果利用对象的形式修改了原型对象，别忘了利用constructor指回原来的构造函数；
  25.         Son.prototype.constructor = Son;
  26.         Son.prototype.exam = function(){// 这个是子构造函数专门的方法
  27.             console.log('考试');
  28.         }
  29.  
  30.         var son = new Son('刘德华',12,90);
  31.         console.log(son);//Son {uname: '刘德华', age: 12, score: 90}
  32.         console.log(Father.prototype);
  33.         console.log(Son.prototype.constructor);
  34. </>

在这里插入图片描述

call方法的作用
  • 调用这个函数，并且修改函数运行时的this指向；
  • fun.call(thisArg,arg1,arg2,...)
  • thisArg：当前调用函数this的指向对象；
  • arg1,arg2：传递的其他参数；
  1.  <>
  2.         // call()
  3.         function fn(x, y) {
  4.             console.log('1111');
  5.             console.log(this);//Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  6.             console.log(x + y);//3
  7.         }
  8.         var o = {
  9.             name: 'andy'
  10.         };
  11.         //fn();
  12.  
  13.         // 1、call() 可以调用函数；
  14.         fn.call();
  15.  
  16.         // 2、call() 可以改变这个函数的this指向；
  17.         fn.call(o, 1, 2);//让this指向o这个对象；（o后面可以写需要传递的参数，如此处：1传给了x，2传给了y）
  18. </>

ES6类的本质

  • 类的本质还是function；
  • 类的所有方法都定义在类的prototype属性上；
  • 类创建的实例，里面也有__proto__指向类的prototype原型对象；
  • 所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编辑的语法而已；
  • 所以，ES6的类其实就是语法糖；
  • 语法糖：就是一种便捷写法。简单理解，有两种方法可以实现同样的功能，但是一种写法更加清晰、方便，那么这个方法就是语法糖；
  1.   <>
  2.         // 1、ES6之前，通过 构造函数 + 原型 实现面向对象 编程；
  3.         /*
  4.           构造函数的特点：
  5.             1、构造函数有原型对象prototype；
  6.             2、构造函数原型对象prototype里面有constructor，指向构造函数本身；
  7.             3、构造函数可以通过原型对象添加方法；
  8.             4、构造函数创建的实例对象有__proto__原型 指向 构造函数的原型对象；
  9.         */ 
  10.  
  11.         // 2、ES6通过 类 实现面向对象编程；
  12.         class Star{
  13.  
  14.         }
  15.         console.log(typeof Star);//function
  16.         // 1、类的本质其实还是一个函数，我们也可以简单的认为，类就是构造函数的另外一种写法；
  17.         // （1）、类有原型对象prototype；
  18.         console.log(Star.prototype);
  19.         // （2）、类原型对象prototype里面有constructor，指向类本身；
  20.         console.log(Star.prototype.constructor);
  21.         // （3）、类可以通过原型对象添加方法；
  22.         Star.prototype.sing = function(){
  23.             console.log('唱歌');
  24.         }
  25.         var ldh = new Star();
  26.         console.dir(ldh);
  27.         // （4）、类创建的实例对象有__proto__原型 指向 类的原型对象；
  28.         console.log(ldh.__proto__ === Star.prototype);//true
  29. </>

ES5中的新增方法

  • ES5中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法包括：数组方法、字符串方法、对象方法；

数组方法

  • 迭代（遍历）方法：forEach()、map()、filter()、some()、every()；
遍历数组forEach()方法
  • array.forEach(function(currentValue,index,arr){})
  • currentValue：数组当前项的值；
  • index：数组当前项的索引；
  • arr：数组对象本身；
  1.  <>
  2.         // forEach() 迭代（遍历）数组；
  3.         var arr = [1,2,3];
  4.         var sum = 0;
  5.         arr.forEach(function(value,index,array){
  6.             console.log('数组元素' +  value);
  7.             console.log('数组元素的索引号' + index);
  8.             console.log('数组本身' + array);
  9.             sum +=value;//求和
  10.         })
  11.         console.log(sum);//6
  12.     </>
筛选数组filter()方法
  • array.filter(function(currentValue,index,arr){})
  • filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组；
  • 注意：它直接返回一个新数组；
  • currentValue：数组当前项的值；
  • index：数组当前项的索引；
  • arr：数组对象本身；
  1.  <>
  2.         var arr = [23,40,1,14,39,99];
  3.         var newArr = arr.filter(function(value,index,arr){
  4.             // return value >= 20;//筛选出大于20的数；
  5.             return value %  2 == 0;//筛选出偶数；
  6.         })
  7.         console.log(newArr);
  8. </>
查找数组中是否有满足条件的元素some()方法
  • array.some(function(currentValue,index,arr){})
  • some()方法用于检测数组中的元素是否满足指定条件，通俗点，查找数组中是否有满足条件的元素；
  • 注意它返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false；
  • 如果找到第一个满足条件的元素，则终止循环，不再继续查找；
  • currentValue：数组当前项的值；
  • index：数组当前项的索引；
  • arr：数组对象本身；
  1. <>
  2.         // some() 查找数组中是否有满足条件的元素；
  3.         // 查找数组中是否有大于等于20的元素；
  4.         var arr = [10,30,4];
  5.         var flag = arr.some(function(value,index,arr){
  6.             return value >= 20;
  7.         })
  8.         console.log(flag);//true
  9.  
  10.         // 查找数组中是否有包含pink的元素；
  11.         var arr1 = ['pink','plue','red'];
  12.         var flag1 = arr1.some(function(value,inex,arr){
  13.             return value === 'pink';
  14.         })
  15.         console.log(flag1);//true
  16.         /*
  17.             1、filter 是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来；
  18.             2、some 是查找满足条件的元素是否存在，返回的是一个布尔值，如果查找到第一个满足条件的元素就终止循环；
  19.         */ 
  20.     </>
案例：查询商品案例-利用数组新增方法操作数据
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         table {
  11.             width: 400px;
  12.             border: 1px solid #000;
  13.             border-collapse: collapse;
  14.             margin: 0 auto;
  15.         }
  16.  
  17.         td,
  18.         th {
  19.             border: 1px solid #000;
  20.             text-align: center;
  21.         }
  22.  
  23.         input {
  24.             width: 50px;
  25.         }
  26.  
  27.         .search {
  28.             width: 600px;
  29.             margin: 20px auto;
  30.         }
  31.     </style>
  32. </head>
  33.  
  34. <body>
  35.     <div class="search">
  36.         按照价格查询：<input type="text" class="start"> - <input type="text" class="end">
  37.         <button class="search-price">搜索</button>
  38.         按照商品名称查询：<input type="text" class="product">
  39.         <button class="search-pro">查询</button>
  40.     </div>
  41.     <table>
  42.         <thead>
  43.             <tr>
  44.                 <th>id</th>
  45.                 <th>产品名称</th>
  46.                 <th>价格</th>
  47.             </tr>
  48.         </thead>
  49.         <tbody>
  50.             <!-- <tr>
  51.                 <td>1</td>
  52.                 <td>小米</td>
  53.                 <td>3999</td>
  54.             </tr> -->
  55.         </tbody>
  56.     </table>
  57.     <>
  58.         var data = [
  59.             {
  60.                 id: 1,
  61.                 pname: '小米',
  62.                 price: '299'
  63.             },
  64.             {
  65.                 id: 2,
  66.                 pname: '大米',
  67.                 price: '399'
  68.             },
  69.             {
  70.                 id: 3,
  71.                 pname: '中米',
  72.                 price: '499'
  73.             }
  74.         ]
  75.         // 1、获取相应的元素；
  76.         var tbody = document.querySelector('tbody');
  77.         setData(data);
  78.         // 2、把数据渲染到页面中；
  79.         function setData(myData) {
  80.             // 先清空原来tbody里面的数据；
  81.             tbody.innerHTML = '';
  82.             // 再渲染新的数据；
  83.             myData.forEach(function (value, index, arr) {
  84.                 var tr = document.createElement('tr');
  85.                 tr.innerHTML = `<td>${value.id}</td><td>${value.pname}</td><td>${value.price}</td>`;
  86.                 tbody.appendChild(tr);
  87.             })
  88.         }
  89.  
  90.         // 3、根据价格查询商品（当我们点击了按钮，就可以根据我们的商品价格去筛选数组里面的对象）；
  91.         var start = document.querySelector('.start');
  92.         var end = document.querySelector('.end');
  93.         var searchPrice = document.querySelector('.search-price');
  94.         searchPrice.addEventListener('click', function () {
  95.             var newData = data.filter(function (value) {
  96.                 return value.price >= start.value && value.price <= end.value;
  97.             })
  98.             // console.log(newData);
  99.             // 把筛选完之后的对象渲染到页面中；
  100.             setData(newData);
  101.         })
  102.         // 4、根据商品名称查询；
  103.         var product = document.querySelector('.product');
  104.         var searchPro = document.querySelector('.search-pro');
  105.         searchPro.addEventListener('click', function () {
  106.             // var newDataByName = data.filter((item) => {
  107.             //     return item.pname === product.value;
  108.             // })
  109.             // console.log(newDataByName);//some方法返回的是布尔值；
  110.             // setData(newDataByName);
  111.  
  112.             // 如果查询数组中唯一的元素，用some方法更合适，因为它找到这个元素，就不再进行循环，效率更高；
  113.             var arr = [];
  114.             var newDataByName = data.some(function (value) {
  115.                 if (value.pname === product.value) {
  116.                     // console.log(value);
  117.                     arr.push(value);
  118.                     return true;//return后面必须写true；
  119.                 };
  120.             })
  121.             setData(arr);
  122.         })
  123.     </>
  124. </body>
  125.  
  126. </html>
some和forEach区别
  1. <>
  2.         var arr = ['red', 'green', 'blue', 'pink'];
  3.         // 1、forEach迭代 遍历
  4.         // arr.forEach(function (value) {
  5.         //     if (value == 'green') {
  6.         //         console.log('找到该元素了');
  7.         //         return true; // 在forEach里面 return true 不会终止迭代；
  8.         //     }
  9.         //     console.log(11);//打印了3次11，'red','blue', 'pink'各打印了一次；
  10.         // })
  11.  
  12.         // 2、some 迭代 遍历（如果查询数组中唯一的元素，用some方法更合适）；
  13.         arr.some(function (value) {
  14.             if (value == 'green') {
  15.                 console.log('找到该元素了');
  16.                 return true; // 在some里面 return true 就是终止遍历，效率更高；
  17.             }
  18.             console.log(11);//只打印了1次11，'red'打印的，找到'green'后就不再往下执行了；
  19.         })
  20.     </>
trim方法去除字符串两侧空格
  • trim()方法会从一个字符串的两端删除空白字符；
  • str.trim()
  • trim()方法并不会影响原字符串本身，它返回的是一个新的字符串；
  1. <body>
  2.     <input type="text"><button>点击</button>
  3.     <div></div>
  4.     <>
  5.         // trim方法去除字符串两侧空格
  6.         var str = '   andy  ';
  7.         console.log(str);
  8.         var str1 = str.trim();
  9.         console.log(str1);
  10.  
  11.         var input = document.querySelector('input');
  12.         var btn = document.querySelector('button');
  13.         var div = document.querySelector('div');
  14.         btn.addEventListener('click', function () {
  15.             var str = input.value.trim();
  16.             if (str === '') {
  17.                 alert('请输入内容');
  18.             } else {
  19.                 div.innerHTML = str;
  20.             }
  21.         })
  22.     </>
  23. </body>
对象方法：Object.defineProperty方法
  • Object.defineProperty()定义对象中新属性或修改原有的属性；
  • Object.defineProperty(obj,prop,deor)
  • obj：必需，目标对象；
  • prop：必需，需定义或修改的属性的名字；
  • deor：必需，目标属性所拥有的特性；
  • 第三个参数deor说明：以对象形式{}书写
    （1）、value：设置属性的值，默认为undefined；
    （2）、writable：值是否可以重写。true | false，默认为false；
    （3）、enumerable：目标属性是否可以被枚举（遍历）。true | false，默认为false；
    （4）、configurable：目标属性是否可以被删除或是否可以再次修改特性。true | false，默认为false；
  1. <>
  2.         // Object.defineProperty() 定义新属性或修改原有的属性
  3.         var obj = {
  4.             id: 1,
  5.             pname: "小米",
  6.             price: 1999
  7.         };
  8.         // 1、以前的对象添加和修改属性的方式；
  9.         // obj.num = 10000;
  10.         // obj.price = 99;
  11.         // console.log(obj);
  12.  
  13.         // 2、Object.defineProperty() 定义新属性或修改原有的属性
  14.         Object.defineProperty(obj, 'num', {
  15.             value: 9000
  16.         });
  17.         // console.log(obj);
  18.  
  19.         // 如果对象中原来就有该属性，则会修改原属性；如果对象中原来没有该属性，就添加该属性；
  20.         Object.defineProperty(obj, 'price', {
  21.             value: 9.9
  22.         });
  23.         // console.log(obj);
  24.  
  25.         Object.defineProperty(obj, 'id', {
  26.             // 如果值为false，则不允许重写（不允许修改该属性值）；
  27.             writable: false,
  28.         });
  29.         obj.id = '999';
  30.         // console.log(obj);
  31.  
  32.         Object.defineProperty(obj, 'address', {
  33.             value: '南京',
  34.             // 如果值为false，则不允许重写（不允许修改该属性值）；
  35.             writable: false,
  36.             // enumerable 如果值为false，则不允许遍历，默认的值是 false；
  37.             enumerable: false,
  38.             // configurable 如果为false则不允许删除某个属性，并且不允许再次修改第三个参数里面的【特性】；
  39.             configurable: false,
  40.         });
  41.         console.log(Object.keys(obj));
  42.         delete obj.address // 删除对象中的某个属性；
  43.     </>

函数进阶

函数的定义和调用

函数的定义方式
  • 函数声明方式function关键字（命名函数）；
  • 函数表达式（匿名函数）；
  • new Function()（此处的Function()是一个构造函数）；
  • var fn= new Function('参数1','参数2',...,'函数体');
  • 注意：Function里面参数都必须是字符串格式；
  • 第三种方式执行效率低，也不方便书写因此较少使用；
  • 所有函数都是Function的实例（对象）；
  • 函数也属于对象；
    在这里插入图片描述
  1. <>
  2.         // 函数的定义方式
  3.         // 1、自定义函数（命名函数）；
  4.         function fn() { }
  5.  
  6.         // 2、函数表达式（匿名函数）；
  7.         var fun = function () { };
  8.  
  9.         // 3、利用 new Function('参数1','参数2','函数体');
  10.         var f = new Function('console.log(123)');
  11.         f();
  12.  
  13.         var t = new Function('a', 'b', 'console.log(a + b)');
  14.         t(1, 2);
  15.  
  16.         // 4、所有函数都是 Function 的实例（对象）；
  17.         console.dir(f);
  18.         // 函数也属于对象；
  19.         console.log(f instanceof Object); // true  // instanceof 用于检测前者是否属于后者；
  20.     </>
函数的调用方式
1、普通函数
2、对象的方法
3、构造函数
4、绑定事件函数
5、定时器函数
6、立即执行函数
  1. <>
  2.         // 1、普通函数
  3.         function fn() {
  4.             console.log(111);
  5.         }
  6.         // fn();  或  fn.call();
  7.  
  8.         // 2、对象的方法（把函数放到对象里面叫方法）；
  9.         var o = {
  10.             sayHi: function () {
  11.                 console.log(2222);
  12.             }
  13.         }
  14.         o.sayHi();
  15.         // 3、构造函数
  16.         function Star() { };
  17.         new Star();// 产生一个新的实例对象；
  18.         // 4、绑定事件函数
  19.         btn.onClick = function () { };//点击了按钮就可以调用这个函数；
  20.         // 5、定时器函数
  21.         setInterval(function () { }, 1000);//这个函数是定时器自动1秒钟调用一次；
  22.         // 6、立即执行函数（立即执行函数是自动调用）；
  23.         (function () {
  24.             console.log(3333);
  25.         })()
  26.     </>
函数内部的this指向

在这里插入图片描述

改变函数内部this指向（call()、apply()、bind()）
  • JavaScript为我们专门提供了一些函数方法来帮助我们更优雅的处理函数内部this的指向问题，常用的有call()、apply()、bind()；
call()方法
  • call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的this指向；
  • fun.call(thisArg,arg1,arg2,...)
  1. <>
  2.         // 改变函数内this指向，js提供了三种方法 call()、apply()、bind()；
  3.  
  4.         // 1、call()，第一个可以调用函数，第二个可以改变函数内的this指向；
  5.         var o = {
  6.             name: 'andy'
  7.         }
  8.         function fn(a, b) {
  9.             console.log(a);
  10.             console.log(b);
  11.             // console.log(this);
  12.             console.log(a + b);
  13.         }
  14.         fn(); //this 指向 window；
  15.         fn.call(o, 1, 6) // this 指向 o 对象；
  16.         // call() 的主要作用可以实现继承；
  17.         function Father(uname, age, sex) {
  18.             this.uname = uname;
  19.             this.age = age;
  20.             this.sex = sex;
  21.         }
  22.         function Son(uname, age, sex) {
  23.             Father.call(this, uname, age, sex)//调用Father函数，并将Father的this指向改为Son的this；
  24.         }
  25.         var son = new Son('刘德华', 18, '男');
  26.         // console.log(son);
  27.     </>
apply()方法
  • apply()方法调用一个函数，简单理解为调用函数的方式，但是它可以改变函数的this指向；
  • fun.apply(thisArg,[argsArray])
  • thisArg：在fun函数运行时指定的this值；
  • argsArray：传递的值，必须包含在数组里面；
  • 返回值就是函数的返回值，因为它就是调用函数；
  1. <>
  2.         // 2、apply() 应用、运用的意思
  3.         var o = {
  4.             name: 'andy',
  5.         };
  6.         function fn(arr) {
  7.             console.log(this);
  8.             console.log(arr); // pink（注意：打印出来的是一个字符串，不是数组）
  9.         }
  10.         fn();// this 指向 window；
  11.         fn.apply(o, ['pink']); // this 指向 o ；
  12.         // 1、也是调用函数，第二个可以改变函数内部的this指向；
  13.         // 2、但是它的参数必须是数组形式的（伪数组）；
  14.         // 3、apply的主要应用：比如说我们可以利用apply借助于数学内置对象求最大值；
  15.         // Math.max();
  16.         var arr = [1, 33, 55, 99, 8];
  17.         // var max = Math.max.apply(null, arr);// null表示不需要改变this指向；
  18.         var max = Math.max.apply(Math, arr);//this指向方法max的调用者Math，所以写成 Math 比 null 合适；
  19.         console.log(max);// 99
  20.     </>
bind()方法
  • bind()方法不会调用函数，但是能改变函数内部this指向；
  • fun.bind(thisArg,arg1,arg2,...)
  • thisArg：在fun函数运行时指定的this值；
  • arg1,arg2：传递的其他参数；
  • 返回由指定的this值和初始化参数改造的原函数拷贝；
  1. <body>
  2.     <button>点击</button>
  3.     <button>点击</button>
  4.     <button>点击</button>
  5.     <>
  6.         // bind 绑定 捆绑 的意思；
  7.         // var o = {
  8.         //     name: 'andy'
  9.         // };
  10.         // function fn(a, b) {
  11.         //     console.log(a + b);
  12.         //     console.log(this);
  13.         // }
  14.         // var f = fn.bind(o, 4, 12);// 没调用函数，所以没有打印；而是返回一个函数
  15.         // f();//调用返回的函数；
  16.  
  17.         // 1、不会调用原来的函数，可以改变原来函数内部的this指向；
  18.         // 2、返回的是原函数改变this之后产生的新函数；
  19.         // 3、如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向，此时用bind；
  20.         // 4、bind()方法应用案例：我们有一个按钮，当我们点击了之后，就禁用这个按钮，3秒钟之后开启这个按钮；
  21.         var btn = document.querySelector('button');
  22.         // btn.addEventListener('click', function () {
  23.         //     this.disabled = true;
  24.         //     // 方法一：用变量来保存this指向（需要开辟新的内存空间，浪费内存）；
  25.         //     var that = this;
  26.         //     setInterval(function () {//定时器函数里面的this指向的是window；
  27.         //         that.disabled = false;
  28.         //     }, 3000)
  29.         // })
  30.  
  31.         // btn.addEventListener('click', function () {
  32.         //     // 方法二：用bind更方便；
  33.         //     this.disabled = true;
  34.         //     // setInterval(function () {//定时器函数里面的this指向的是window；
  35.         //     //     this.disabled = false;
  36.         //     // }.bind(btn), 3000)
  37.         //     setInterval(function () {//定时器函数里面的this指向的是window；
  38.         //         this.disabled = false;
  39.         //     }.bind(this), 3000)//这个this指向的是btn这个对象，用this可以防止后期btn改变或有多个button的情况；
  40.         // })
  41.  
  42.         // 当有多个按钮时
  43.         var btns = document.querySelectorAll('button');
  44.         for (let i = 0; i < btns.length; i++) {
  45.             btns[i].onclick = function () {
  46.                 this.disabled = true;
  47.                 setInterval(function () {
  48.                     this.disabled = false;
  49.                 }.bind(this), 1000)
  50.             }
  51.         }
  52.     </>
  53. </body>
call() apply() bind()总结
  • 相同点：都可以改变函数内部this指向；
  • 区别点：
    （1）、call()和apply()会调用函数，并且改变函数内部this指向；
    （2）、call()和apply()传递的参数不一样，call()传递参数arg1 、arg2… ，apply()必须是数组形式[arg]；
    （3）、bind()不会调用函数，可以改变函数内部this指向；
  • 主要应用场景：
    （1）、call()经常做继承；
    （2）、apply()经常跟数组有关系，比如借助于数学对象实现数组最大值最小值；
    （3）、bind()不调用函数，但是还想改变this指向，比如改变定时器内部this指向；
严格模式
1、什么是严格模式以及如何开启严格模式
  • JavaScript除了提供正常模式外，还提供了严格模式（strict mode）。ES5的严格模式是采用具有限制性JavaScript变体的一种方式，即在严格的条件下运行JS代码。
  • 严格模式在IE10以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。
  • 严格模式对正常的JavaScript语义做了一些更改；
    （1）、消除了JavaScript语法的一些不合理、不严谨之处，减少了一些怪异行为（例如变量不声明就不能使用）；
    （2）、消除代码运行的一些不安全之处，保证代码运行的安全；
    （3）、提高编译器效率，增加运行速度；
    （4）、禁用了在ECMAScript的未来版本中可能会定义的一些语法，为未来新版本的JavaScript做好铺垫。比如一些保留字如：class enum export extends import super不能做变量名；
2、开启严格模式
  • 严格模式可以应用到【整个脚本】或【个别函数】中。因此在使用时，我们可以将严格模式分为【为脚本开启严格模式】和【为函数开启严格模式】两种情况；
  • 为脚本开启严格模式：为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句"use strict"（或'use strict'）；
  1. <>
  2. 	"use strict"
  3. 	console.log("这是严格模式")
  4. </>

有的基本是严格模式，有的脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他脚本文件。

  1. <>
  2. 	(function(){
  3. 		"use strict"
  4. 		var num = 10;
  5. 		function fn(){}
  6. 	})();
  7. </>
  • 为函数开启严格模式：要把某个函数开启严格模式，需要把"use strict"；（或'use strict';）声明放在函数体所有语句之前；
  1. <>
  2. 	function fn(){
  3. 		//此时，只是给fn函数开启严格模式；
  4. 		'use strict';
  5. 		//下面的代码按照严格模式执行；但是fun里面的函数按照普通模式执行；
  6. 	}
  7. 	function fun(){}
  8. </>
3、严格模式中的变化
  • 严格模式对JavaScript的语法和行为，都做了一些变化；
  • 变量规定：
    （1）、在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用var命令声明，然后再使用；
  1.  <>
  2.       'use strict';
  3.        // 1、严格模式下变量名必须先声明再使用；
  4.       num = 10;
  5.       console.log(num);// num is not defined
  6. </>

（2）、严禁删除已经申明的变量。例如：delete语法是错误的；

  1. <>
  2.   'use strict';        
  3.    // 2、严格模式下不能删除已经声明好的变量；
  4.    var num = 10;
  5.    console.log(num);
  6.    delete num; //Uncaught SyntaxError: Delete of an unqualified identifier in strict mode. 
  7.     </>
  • 严格模式下this指向问题：
    （1）、以前在全局作用域函数中this指向window对象；
    （2）、严格模式下全局作用域中函数的this是undefined；
    （3）、以前构造函数时不加new也可以调用，当普通函数调用，里面的this指向全局对象；
    （4）、严格模式下，如果构造函数不加new调用，this会报错；
    （5）、new实例化的构造函数指向创建的对象实例；
  1. <>
  2.         'use strict';        
  3.         // 3、严格模式下，如果构造函数不加new调用，this会报错；
  4.         function Star() {
  5.             this.sex = '男';
  6.         }
  7.         Star();
  8.         console.log(window.sex);//普通模式下可以打印出“男”；严格模式下报错07.开启严格模式.html:25 Uncaught TypeError: Cannot set properties of undefined (setting 'sex')
  9. // 严格模式下全局作用域中函数的`this`是`undefined`；
  10. </>

（6）、定时器this还是指向window；
（7）、事件、对象还是指向调用者；

  • 函数变化：
    （1）、函数不能有重名的参数；
    （2）、函数必须声明在顶层、新版本的JavaScript会引入“块级作用域”（ES6中已引入）。为了与新版本接轨，不允许在非函数的代码块内声明函数；
  • 更多严格模式要求参考：https://developer.mozilla.org/zh-CN/docs/Glossary/strict_mode

高阶函数

  • 高阶函数是对其他函数进行操作的函数，它【接收函数作为参数】或【将函数作为返回值输出】；
  • 函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     < src="../../jQuery/jquery.min.js"></>
  10.     <style>
  11.         div {
  12.             width: 100px;
  13.             height: 100px;
  14.             background: pink;
  15.             position: absolute;
  16.         }
  17.     </style>
  18. </head>
  19.  
  20. <body>
  21.     <div></div>
  22.     <>
  23.         // 高阶函数 - 函数可以作为参数传递；
  24.         function fn(a, b, callback) {
  25.             console.log(a + b);
  26.             callback && callback();
  27.         }
  28.         fn(1, 2, function () {
  29.             console.log('我是最后调用的');
  30.         });
  31.  
  32.         // 让div移动一段距离再变色；
  33.         $("div").animate({ left: 500 }, function () { $("div").css("backgroundColor", "purple") })
  34.     </>
  35. </body>
  36.  
  37. </html>

闭包

复习：变量作用域

  • 变量根据作用域的不同分为两种：全局变量和局部变量。
  • 函数内部可以使用全局变量；
  • 函数外部不可以使用局部变量；
  • 当函数执行完毕，本作用域内的局部变量会销毁；

什么是闭包？

  • 闭包（closure）：指有权访问另一个函数作用域中变量的函数。—JavaScript高级程序设计
  • 简单理解就是，一个作用域可以访问另外一个函数内部的局部变量；
  • 闭包也是高阶函数；

闭包的作用

  1. <>
  2.         // 闭包：指有权访问另一个函数作用域中变量的函数；
  3.         // 一个作用域可以访问另外一个函数的局部变量；
  4.         // 我们 fn 外面的作用域可以访问 fn 内部的局部变量；
  5.         // 闭包的主要作用：延伸了变量的作用范围；
  6.         function fn() {
  7.             var num = 10;
  8.             // function fun() {
  9.             //     console.log(num);
  10.             // }
  11.             // fun();
  12.             // return fun;
  13.             return function () {
  14.                 console.log(num);
  15.             }
  16.         }
  17.         var f = fn();
  18.         f();
  19.         // 类似于
  20.         // var f = function fun() {
  21.         //     console.log(num);
  22.         // }
  23.     </>

闭包案例：点击li打印当前索引号

  1. <body>
  2.     <ul class="nav">
  3.         <li>榴莲</li>
  4.         <li>臭豆腐</li>
  5.         <li>鲱鱼罐头</li>
  6.         <li>大猪蹄子</li>
  7.     </ul>
  8.     <>
  9.         // 闭包案例：点击li输出当前li的索引号；
  10.  
  11.         // 1、我们可以利用动态添加属性的方法来做；
  12.         var lis = document.querySelector('.nav').querySelectorAll('li');
  13.         for (var i = 0; i < lis.length; i++) {//for循环是一个同步任务；（for循环里i++是最后一步）
  14.             // 解决方法：利用动态添加属性的方法来做；
  15.             lis[i].index = i;
  16.             lis[i].onclick = function () {//function是一个异步任务，只有点击了才会去执行；而for循环是一个同步任务；
  17.                 console.log(i);//所以打印出来的全部都是4；
  18.                 console.log(this.index);//打印出来的是索引；
  19.             }
  20.         }
  21.  
  22.         // 2、利用闭包的方式得到当前小li的索引号；
  23.         for (var i = 0; i < lis.length; i++) {
  24.             // 利用for循环创建了4个立即执行函数；
  25.             // 立即执行函数也称为小闭包，因为立即执行函数里面的任何一个函数都可以使用它的i这个变量；
  26.             (function (i) {
  27.                 // console.log(i);
  28.                 lis[i].onclick = function () {
  29.                     console.log(i);//缺点：特别占用内存，容易造成内存泄漏；好处：延长了变量的作用范围；
  30.                 }
  31.             })(i)
  32.         }
  33.     </>
  34. </body>

闭包案例：3秒钟之后打印li内容

  1. <body>
  2.     <ul class="nav">
  3.         <li>榴莲</li>
  4.         <li>臭豆腐</li>
  5.         <li>鲱鱼罐头</li>
  6.         <li>大猪蹄子</li>
  7.     </ul>
  8.     <>
  9.         // 闭包应用：3秒钟之后，打印所有li元素的内容；
  10.         var lis = document.querySelector('.nav').querySelectorAll('li');
  11.         for (var i = 0; i < lis.length; i++) {
  12.             (function (i) {
  13.                 setTimeout(function () {
  14.                     // 异步任务的3种情况：定时器中的回调函数、事件（点击事件、鼠标事件等）中的回调函数、ajax中的回调函数;
  15.                     console.log(lis[i].innerHTML);
  16.                 }, 3000)
  17.             })(i)
  18.         }
  19.     </>
  20. </body>

闭包案例：计算打车价格

  1. <body>
  2.     <>
  3.         /*
  4.         闭包应用：计算打车价格
  5.         打车起步价13（3公里内），之后每多一公里增加5块钱，用户输入公里数就可以计算打车价格；
  6.         如果有拥堵情况，总价格多收取10块钱拥堵费；
  7.         */
  8.         var car = (function () {
  9.             var start = 13;//起步价
  10.             var total = 0;//总价
  11.             return {
  12.                 // 正常的总价
  13.                 price: function (n) {
  14.                     if (n <= 3) {
  15.                         total = start;
  16.                     } else {
  17.                         total = start + (n - 3) * 5
  18.                     }
  19.                     return total;
  20.                 },
  21.                 //拥堵之后的费用；
  22.                 yd: function (flag) {
  23.                     return flag ? total + 10 : total;
  24.                 }
  25.             }
  26.         })();
  27.         console.log(car.price(5));
  28.         console.log(car.yd(true));
  29.         console.log(car.price(1));
  30.         console.log(car.yd(false));
  31.     </>
  32. </body>

思考题

  1. <>
  2.         // 1、思考题一：
  3.         // var name = "The Window";//在全局作用域下定义的属性是挂在window下的；
  4.         // var object = {
  5.         //     name: "My Object",
  6.         //     getNameFunc: function () {
  7.         //         return function () {
  8.         //             return this.name;//此处相当于一个立即执行函数，所以此处的this指向的是window；
  9.         //         };
  10.         //     }
  11.         // }//此题中没有产生局部变量，所以没有闭包的产生；
  12.         // console.log(object.getNameFunc()());//The Window
  13.         // 分析
  14.         // var f = object.getNameFunc();
  15.         // 类似于
  16.         // var f = function () {
  17.         //     return this.name;
  18.         // }
  19.         // f();
  20.         // function(){this}() // 立即执行函数里的this指向的是window；
  21.  
  22.         // 2、思考题二：
  23.         var name = "The Window";
  24.         var object = {
  25.             name: "My Object",
  26.             getNameFunc: function () {
  27.                 var that = this;//此处的this指向的是object；
  28.                 return function () {
  29.                     return that.name;//
  30.                 };
  31.             }
  32.         }
  33.         console.log(object.getNameFunc()())//My Object，有闭包的产生；
  34.         // 分析
  35.         // var f = object.getNameFunc();
  36.         // var f = function () {
  37.         //     return that.name;//
  38.         // };
  39.         // f();
  40.     </>

闭包总结

闭包是什么？
  • 闭包是一个函数（一个作用域可以访问另外一个函数的局部变量）；（这个变量所在的函数就是一个闭包函数）
  • 简单理解：嵌套函数可以访问父级函数的变量，故return嵌套函数就可以在全局环境访问该变量；
  • 闭包的形成：函数嵌套+内函数调外函数的局部变量；
闭包的作用是什么？
  • 延伸变量的作用范围；

递归

什么是递归？

  • 如果一个函数在内部可以调用其本身，那么这个函数就是递归函数；
  • 简单理解：函数内部自己调用自己，这个函数就是递归函数；
  • 递归函数的作用和循环效果一样；
  • 由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return；
  1. <>
  2.         // 递归函数：函数内部自己调用自己，这个函数就是递归函数；
  3.         var num = 1;
  4.         function fn() {
  5.             console.log('我要打印6句话');
  6.             if (num === 6) {
  7.                 return;//递归里面必须加退出条件；
  8.             }
  9.             num++;
  10.             fn();
  11.         }
  12.         fn()
  13.     </>

利用递归求阶乘

  1. <>
  2.         // 1、求1*2*3...*n 阶乘
  3.         function fn(n) {
  4.             if (n === 1) {
  5.                 return 1;
  6.             }
  7.             return n * fn(n - 1);
  8.         }
  9.         console.log(fn(3));
  10.     </>

利用递归求斐波那契数列

  1. <>
  2.         // 利用递归函数求斐波那契数列（兔子序列）1、1、2、3、5、8、13、21...
  3.         // 用户输入一个数字n就可以求出这个数字对应的兔子序列值；
  4.         // 我们只需要知道用户输入的n的前面两项（n-1 ）就可以计算出n对应的序列值；
  5.         // 这种方法效率较低，输入的数值较大时直接卡死；
  6.         function fb(n) {
  7.             if (n === 1 || n === 2) {// 用户输入1或2时，序列值都是1；
  8.                 return 1;
  9.             }
  10.             return fb(n - 1) + fb(n - 2);
  11.         }
  12.         console.log(fb(1));
  13.         // console.log(fb(6));
  14.     </>

利用递归求：根据ID返回对应的数据对象

  1. <body>
  2.     <>
  3.         var data = [{
  4.             id: 1,
  5.             name: '家电',
  6.             goods: [{
  7.                 id: 11,
  8.                 gname: '冰箱',
  9.                 goods: [{
  10.                     id: 111,
  11.                     gname: '美的'
  12.                 }, {
  13.                     id: 112,
  14.                     gname: '海尔'
  15.                 }]
  16.             }, {
  17.                 id: 12,
  18.                 gname: '洗衣机'
  19.             }]
  20.         }, {
  21.             id: 2,
  22.             name: '服饰'
  23.         }]
  24.         // 我们想要做输入id号，就可以返回的数据对象；
  25.         // 1、利用 forEach 去遍历里面的每一个对象；
  26.         function getID(json, id) {
  27.             var o = {};
  28.             json.forEach(function (item) {
  29.                 // console.log(item); // 2个数组元素
  30.                 if (item.id == id) {
  31.                     // console.log(item);
  32.                     o = item;
  33.                     // 2、我们想要得到里层的数据 11 12 可以利用递归函数；
  34.                     // 里面应该有 goods 这个数组并且数组的长度不为0；
  35.                 } else if (item.goods && item.goods.length > 0) {
  36.                     o = getID(item.goods, id);
  37.                 }
  38.             });
  39.             return o;
  40.         }
  41.         console.log(getID(data, 1));
  42.         console.log(getID(data, 2));
  43.         console.log(getID(data, 11));
  44.         console.log(getID(data, 12));
  45.         console.log(getID(data, 111));
  46.     </>
  47. </body>

浅拷贝和深拷贝

  • 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用；
  • 深拷贝拷贝多层，每一级别的数据都会拷贝；
  • Object.assign(target,...sources) ES6新增方法可以浅拷贝；
  1. <>
  2.         // 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用；
  3.         // 深拷贝拷贝多层，每一级别的数据都会拷贝；
  4.         var obj = {
  5.             id: 1,
  6.             name: 'andy',
  7.             msg: {
  8.                 age: 18
  9.             }
  10.         };
  11.         var o = {};
  12.         // for (var k in obj) {
  13.         //     // k 是属性名；obj[k] 是属性值；
  14.         //     o[k] = obj[k];
  15.         // }
  16.         // console.log(o);
  17.         // o.msg.age = 90;
  18.         // console.log(obj);
  19.         console.log('--------------');
  20.         Object.assign(o, obj);//浅拷贝的语法糖
  21.         console.log(o);
  22.         
  23. 		// 数组也属于Object
  24.         var arr = [];
  25.         console.log(arr instanceof Object); //true
  26.     </>

正则表达式

  • 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在javaScript中，正则表达式也是对象；
  • 正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本，例如：验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等等；
  • 其他语言也会使用正则表达式，本阶段我们主要利用javaScript正则表达式完成表单验证；

创建正则表达式

  • 在javaScript中，可以通过两种方式创建一个正则表达式。
1、通过调用RegExp对象的构造函数创建
var 变量名=new RegExp(/表达式/)
2、通过字面量创建
var 变量名=/表达式/
  • //注释中间放表达式就是正则字面量；

测试正则表达式test

  • test()正则对象方法，用于检测字符串是否符合该规则，该对象会返回true或false,其参数是测试字符串；
  • regexObj.test(str)

正则表达式中的特殊字符

  • 一个正则表达式可以由简单的字符构成，比如：/abc/，也可以是简单和特殊字符的组合，比如：/ab*c/。其中特殊字符也被称为【元字符】，在正则表达式中是具有特殊意义的专用符号，如：^、$、+等；
边界符
  • 正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符；
    -
  • 如果^和$在一起，表示必须是精确匹配；
  1. <>
  2.         // 边界符 ^ $
  3.         var rg = /abc/; //正则表达式里面不需要加引号，不管是数字型还是字符串型；
  4.         // /abc/只要包含有abc这个字符串返回的都是true；
  5.         console.log(rg.test("abc"));//true
  6.         console.log(rg.test("abcd"));//true
  7.         console.log(rg.test("aabcd"));//true
  8.  
  9.         console.log("------------");
  10.  
  11.         var reg = /^abc/;//以abc开头；
  12.         console.log(reg.test("abc"));//true
  13.         console.log(reg.test("abcd"));//true
  14.         console.log(reg.test("aabcd"));//false
  15.  
  16.         console.log("------------");
  17.  
  18.         var reg1 = /^abc$/; //精确匹配，要求必须是abc字符串才符合规范；即以abc开头，又以abc结尾；
  19.         
  20.     </>
字符类
  • 字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内；
  • [-] 方括号内部范围符-
  • [^]方括号内部 取反符 ^
  1. <>
  2.         // 字符类：[] 表示有一系列字符可供选择，只要匹配其中一个就可以了；
  3.         var rg = /[abc]/;//只要包含有a 或者 包含有b 或者包含有c 都返回为true；
  4.         console.log(rg.test('andy'));//字符串andy里面包含有a，所以打印结果为true；
  5.  
  6.         var reg = /^[abc]$/; //三选一 只有是a 或者是b 或者是c 这三个字母才返回true；
  7.  
  8.         var rg1 = /^[a-z]$/;//26个英文字母任何一个字母返回true；-表示的是a到z的范围；
  9.  
  10.         // 字符组合
  11.         var reg2 = /^[a-zA-Z]$/;//在小写和大写的26个英文字母中任选一个都可以；
  12.         var reg3 = /^[a-zA-Z0-9]$/;//小写和大写的26个英文字母、0-9的数字
  13.         var reg4 = /^[a-zA-Z0-9_]$/;//小写和大写的26个英文字母、0-9的数字、_
  14.  
  15.         // 如果中括号里面有^，表示取反的意思，千万别和边界符^混淆；
  16.         var reg5 = /^[^a-zA-Z0-9_-]$/;//第一个^是边界符，表示以它开头；第二个^表示取反，即不能包含26个大写和小写英文字母和_-，
  17.  
  18.     </>
量词符
  • 量词符用来设定某个模式出现的次数；
    -
  1. <>
  2.         // 量词符：用来设定某个模式出现的次数；
  3.         // 简单理解：就是让下面的a这个字符重复多少次；
  4.         var reg = /^a$/;
  5.  
  6.         // * 相当于 >= 0，可以出现0次或者很多次；
  7.         var reg1 = /^a*$/;
  8.         console.log(reg1.test(''));//true
  9.         console.log(reg1.test('aaaaaa'));//true
  10.  
  11.         // + 相当于 >= 1，可以出现1次或者很多次；
  12.  
  13.         // ? 相当于 1 || 0；
  14.  
  15.         // {3 } 就是重复3次；
  16.         var reg2 = /^a{3}$/;
  17.  
  18.         // {3, } 大于等于3；
  19.  
  20.         // {3,16} 大于等于3 并且 小于等于16；
  21.  
  22.     </>
  • 量词重复某个模式的次数；
  1. //前面的模式可以重复6到16次；
  2. var reg=/^[a-zA-Z0-9_-]{6,16}/
案例：用户名验证
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         span {
  11.             color: #aaa;
  12.             font-size: 14px;
  13.         }
  14.  
  15.         .right {
  16.             color: green;
  17.         }
  18.  
  19.         .wrong {
  20.             color: red;
  21.         }
  22.     </style>
  23. </head>
  24.  
  25. <body>
  26.     <!-- 
  27.         功能需求：
  28.           1、如果用户名输入合法，则后面提示信息为：用户名合法，并且颜色为绿色；
  29.           2、如果用户名输入不合法，则后面提示信息为：用户名不符合规范，并且颜色为红色；
  30.         分析：
  31.           1、用户名只能为英文字母、数字、下划线或者短横线组成，并且用户名长度为6-16位；
  32.           2、首先准备好这种正则表达式模式 /$[a-zA-Z0-9_-]{6,16}^/；
  33.           3、当表单失去焦点就开始验证；
  34.           4、如果符合正则规范，则让后面的span标签添加right类；
  35.           5、如果不符合正则规范，则让后面的span标签添加wrong类；
  36.      -->
  37.     <input type="text" class="uname"><span>请输入用户名</span>
  38.     <>
  39.         var reg = /^[a-zA-Z0-9_-]{6,16}$/;
  40.         var uname = document.querySelector('.uname');
  41.         var span = document.querySelector('span');
  42.         uname.onblur = function () {
  43.             if (reg.test(this.value)) {
  44.                 console.log('正确的');
  45.                 span.className = 'right';
  46.                 span.innerHTML = '用户名格式输入正确';
  47.             } else {
  48.                 console.log('错误的');
  49.                 span.className = 'wrong';
  50.                 span.innerHTML = '用户名格式输入错误';
  51.             }
  52.         }
  53.     </>
  54. </body>
  55.  
  56. </html>
括号总结
  • 大括号 量词符。 里面表示重复次数；
  • 中括号 字符集合。 匹配方括号中的任意字符；
  • 小括号 表示优先级；
  1. <>
  2.         // 中括号 字符集合。 匹配方括号中的任意字符；
  3.         var reg = /^[abc]$/; // a也可以，b也可以，c也可以；
  4.  
  5.         // 大括号 量词符。 里面表示重复次数；
  6.         var reg1 = /^abc{3}$/; //它只是让c重复3次；abccc
  7.         console.log(reg1.test(abc));//false
  8.         console.log(reg1.test(abcabcabc));//false
  9.         console.log(reg1.test(abccc));//true
  10.  
  11.         // 小括号 表示优先级；
  12.         var reg2 = /^(abc){3}$/;//把abc重复3次；
  13.     </>
预定义类以及座机号码验证
  • 预定义类：指的是某些常见模式的简写方式；
    -
  1. <>
  2.         // 座机号码验证：全国座机号码 两种格式：010-12345678 或者 0530-1234567
  3.         // 正则里面的“或者”符号 |
  4.         var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
  5.         var reg1 = /^\d{3,4}-\d{7,8}$/;
  6.     </>
案例：表单验证
  1. window.onload = function () {
  2.     var regtel = /^1[3|4|5|7|8]\d{9}$/; // 手机号码的正则表达式；
  3.     var regqq = /^[1-9]\d{4,}$/; // QQ号1000；
  4.     var regnc = /^[u4e00-\u9fa5]{2,8}$/;//昵称
  5.     var regmsg = /^\d{6}$/;//短信验证码，由6位数字组成；
  6.     var regpwd = /^[a-zA-Z0-9]{6,16}$/;//密码
  7.  
  8.     var tel = document.querySelector('#tel');
  9.     var qq = document.querySelector('#qq');
  10.     var nc = document.querySelector('#nc');
  11.     var msg = document.querySelector('#msg');
  12.     var pwd = document.querySelector('#pwd');
  13.     var surepwd = document.querySelector('#surepwd');
  14.  
  15.     regexp(tel, regtel);//手机号码验证
  16.     regexp(qq, regqq);//QQ号码验证
  17.     regexp(nc, regnc);//昵称验证
  18.     regexp(msg, regmsg);//短信验证码
  19.     regexp(pwd, regpwd);//密码框验证
  20.  
  21.     // 表单验证的函数封装
  22.     function regexp(ele, reg) {
  23.         ele.onblur = function () {
  24.             if (reg.test(this.value)) {
  25.                 console.log('正确的');
  26.                 this.nextElementSibling.className = 'success';//nextElementSibling下一个兄弟
  27.                 this.nextElementSibling.innerHTML = '<i class="success_icon"></i>恭喜你输入正确';
  28.             } else {
  29.                 console.log('错误的');
  30.                 this.nextElementSibling.className = 'error';//nextElementSibling下一个兄弟
  31.                 this.nextElementSibling.innerHTML = '<i class="error_icon"></i>输入错误';
  32.             }
  33.         }
  34.     }
  35.     // 确认密码
  36.     surepwd.onblur = function () {
  37.         if (this.value === pwd.value) {
  38.             this.nextElementSibling.className = 'success';//nextElementSibling下一个兄弟
  39.             this.nextElementSibling.innerHTML = '<i class="success_icon"></i>恭喜你输入正确';
  40.         } else {
  41.             this.nextElementSibling.className = 'success';//nextElementSibling下一个兄弟
  42.             this.nextElementSibling.innerHTML = '<i class="error_icon"></i>两次输入密码不一致';
  43.         }
  44.     }
  45. }
正则表达式中的替换 replace()
  • replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式；
  • stringObject.replace(regexp/substr,replacement)
  • 第一个参数：被替换的字符串 或者 正则表达式；
  • 第二个参数：替换为的字符串；
  • 返回值是一个替换完毕的新的字符串；
正则表达式参数
  • /表达式/[switch]
  • switch（也称为修饰符）按照什么样的模式来匹配，有三种值：
  • g：全局匹配；
  • i：忽略大小写；
  • gi：全局匹配 + 忽略大小写；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             width: 100px;
  12.             height: 50px;
  13.             background: pink;
  14.         }
  15.     </style>
  16. </head>
  17.  
  18. <body>
  19.     <textarea name="" id="message" cols="30" rows="10"></textarea>
  20.     <button>提交</button>
  21.     <div></div>
  22.     <>
  23.         // 替换 replace()
  24.         var str = 'andy和red';
  25.         //var newStr = str.replace('andy', 'bady');//第一个参数是被替换掉的，第二个参数是替换为的；
  26.         var newStr = str.replace(/andy/, 'bady');
  27.         console.log(newStr);//bady和red
  28.  
  29.         var text = document.querySelector('textarea');
  30.         var btn = document.querySelector('button');
  31.         var div = document.querySelector('div');
  32.         btn.onclick = function () {
  33.             // 注意：replace() 只能替换第一个满足条件的字符串，需要替换掉的字符串出现多次，它也只替换第一个；
  34.             // div.innerHTML = text.value.replace(/激情/, '**');
  35.             div.innerHTML = text.value.replace(/激情|gay/g, '**');//替换所有的“激情”和“gay”两个敏感词；
  36.         }
  37.     </>
  38. </body>
  39.  
  40. </html>

ES6

  • ES的全称是ECMAScript,它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范。

var let const关键字

面试题一
  1. <>
  2.         var arr = [];
  3.         for (var i = 0; i < 2; i++) {//for循环里用 var 申明变量，是一个全局变量；
  4.             arr[i] = function () {
  5.                 console.log(i);
  6.             }
  7.         }
  8.         // arr[0] 和 arr[1] 是两个函数，下面两句代码是在调用数组中的函数；
  9.         arr[0]();//2 函数执行时在自己的作用域中找不到i值，根据作用域链会到上级作用域中去查找；
  10.         arr[1]();//2
  11.         // 当循环条件为 0 和 1 时，进入循环体；当循环条件为2时才跳出循环体，开始执行循环体后面的代码；
  12.         // 注意：当i=0 和 i=1时，函数并没有执行；
  13.         // 此题的关键点在于：变量i是全局的，函数执行时输出的都是全局作用域下的i值；
  14.         // 当i=0 和i=1 时，arr数组中有两个值，这两个值都是 function () {console.log(i);}
  15.     </>

在这里插入图片描述

面试题二
  1. <>
  2.         let arr = [];
  3.         for (let i = 0; i < 2; i++) {
  4.             arr[i] = function () {
  5.                 console.log(i);
  6.             }
  7.         }
  8.         // arr[0] 和 arr[1] 是两个函数，下面两句代码是在调用数组中的函数；
  9.         arr[0]();//0 
  10.         arr[1]();//1
  11.         // 此题的关键点在于：每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的；
  12.         // 函数执行时，输出的是自己上一级（循环产生的块级作用域）作用域下的i值；
  13.     </>
const关键字
  • 作用：声明常量，常量就是值（内存地址）不能变化的量；
  • 声明常量时必须赋初始值；
  • 常量赋值后，值（基本数据类型）不能更改；
  • 常量赋值后，复杂数据类型内部的值可以更改；
    -

解构赋值（分解数据结构，为变量赋值）

  • ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构；
数组解构
  1. <>
  2.         // 数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量；
  3.         let arr = [1, 2, 3]
  4.         let [a, b, c, d, e] = arr;//a、b、c和arr中的1、2、3是一一对应的关系；
  5.         console.log(a);//1
  6.         console.log(b);//2
  7.         console.log(c);//3
  8.  
  9.         // 如果解构不成功，变量的值为undefined；
  10.         console.log(d);//undefined
  11.         console.log(e);//undefined
  12.     </>
对象解构
  1. <>
  2.         // 对象解构允许我们使用变量的名字匹配对象的属性；匹配成功，将对象的属性值赋值给变量；
  3.         let person = { name: '张三', age: 20 };
  4.  
  5.         // let { name, age } = person;
  6.         // console.log(name);//张三
  7.         // console.log(age);//20
  8.  
  9.         let { name: myName } = person;//此处的name只是用来属性匹配；此处的myName才是真正的变量；
  10.         console.log(myName);//张三
  11.     </>

箭头函数

  • ES6中新增的定义函数的方式；
  • 箭头函数是用来简化函数定义语法的；
  1. ()=>{}
  2. const fn=()=>{} //通常将箭头函数赋值给一个变量；
  3. fn()//调用箭头函数
  • 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号；
  • 如果形参只有一个，可以省略小括号；
  1. <>
  2.         // 普通函数写法；
  3.         function sum(num1, num2) {
  4.             return num1 + num2;
  5.         }
  6.         // 箭头函数写法
  7.         const sum = (num1, num2) => {
  8.             return num1 + num2
  9.         };
  10.         // 1、在箭头函数中，如果函数体中只有一句代码，并且代码的执行结果就是函数的返回值，函数体 大括号 和 return 可以省略；
  11.         const sum = (num1, num2) => num1 + num2;
  12.  
  13.         // 2、如果形参只有一个，可以省略小括号；
  14.         function fn(v) {
  15.             return v;
  16.         }
  17.         const fn = v => v;
  18.     </>
  • 箭头函数中的this关键字
  • 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this；即箭头函数被定义在哪，箭头函数中的this就指向哪；
  • 箭头函数经典面试题：
  1.  <>
  2.         var obj = {
  3.             age: 20,
  4.             say: () => {
  5.                 alert(this.age);
  6.             }
  7.         }
  8.         obj.say();//全局作用域下没有age属性，所以是undefined；
  9.     </>

剩余参数

  • 剩余参数语法允许我们将一个不定数量的参数表示为一个数组；
  1. <>
  2.         function sum(first, ...args) {
  3.             console.log(first);//10
  4.             console.log(args);//[20,30]
  5.         }
  6.         sum(10, 20, 30);
  7.  
  8.         // 注意：在箭头函数中，使用不了arguments；
  9.         const sum = (...args) => {
  10.             let total = 0;
  11.             args.forEach(item => total += item)
  12.             return total;
  13.         }
  14.         console.log(sum(10, 20));//30
  15.         console.log(sum(10, 20, 30));//60
  16. </>
  • 剩余参数和解构配合使用：
  1. <>
  2.         let students = ['王五', '张三', '李四'];
  3.         let [s1, ...s2] = students;// s1 接收'王五'；...s2 接收'张三', '李四'，注意 s2 是一个数组；
  4.         console.log(s1);//'王五'
  5.         console.log(s2);//['张三','李四']
  6. </>

Array的扩展方法

扩展运算符（展开语法）
  • 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列；
  • 用 console.log();打印结果时，逗号会解析为 console.log();里多个元素的分隔符；
  1. <>
  2.         let arr = [1, 2, 3];
  3.         // ...arr --> "a","b","c"
  4.         console.log(...arr);//1 2 3
  5.     </>
扩展运算符应用
  • 用于【合并数组】
构造函数方法Array.from()
  1.  <>
  2.         // 扩展运算符
  3.         // let arr = [1, 2, 3];
  4.         // ...arr --> "a","b","c"
  5.         // console.log(...arr);//1 2 3
  6.  
  7.         // 扩展运算符应用
  8.  
  9.         // 1、用于 合并数组；
  10.         // 合并数组方法1：
  11.         let arr1 = [1, 2, 3];
  12.         let arr2 = [4, 5, 6];
  13.         // ...arr1 //1,2,3
  14.         //...arr2  //4,5,6
  15.         // let arr3 = [...arr1, ...arr2]
  16.         // console.log(arr3);//[1, 2, 3, 4, 5, 6]
  17.  
  18.         // 合并数组方法2：
  19.         arr1.push(...arr2);
  20.         console.log(arr1); //[1, 2, 3, 4, 5, 6]
  21.  
  22.         // 2、将 类、数组 或者 可遍历对象转换为真正的数组；
  23.         let oDivs = document.getElementsByTagName('div');
  24.         oDivs = [...oDivs];
  25.         // Array.from 方法（将伪数组转换为真正的数组）；
  26.         var arrayLike = {
  27.             "0": "张三",
  28.             "1": "李四",
  29.             "2": "王五",
  30.             "length": 3
  31.         }
  32.         var ary = Array.from(arrayLike);
  33.         console.log(ary);//['张三', '李四', '王五']
  34.     </>
  • 该方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组；
  1.  // Array.from 还可以接收第二个参数，第二个参数是一个函数，对数组中的元素进行加工处理，数组中有多少个元素，该函数就会被调用多少次；形参item代表当前要处理的那个值；
  2.         let arrayLike = {
  3.             "0": 1,
  4.             "1": 2,
  5.             "length": 2
  6.         }
  7.         let newAry = Array.from(arrayLike, item => item * 2);
  8.         console.log(newAry);//[2, 4]
Array.find()方法
  • 用于找出第一个符合条件的数组成员，如果没有找到返回undefined；
  1.  <>
  2.         let ary = [{
  3.             id: 1,
  4.             name: '张三'
  5.         }, {
  6.             id: 2,
  7.             name: '李四'
  8.         }];
  9.         let target = ary.find((item, index) => item.id == 2);
  10.         console.log(target);//{id: 2, name: '李四'}
  11.     </>
Array.findIndex()方法
  • 用于找出第一个符合条件的数组成员的位置，如果没有找到返回 -1；
  1. <>
  2.         let arr = [1, 5, 10, 15];
  3.         let index = arr.findIndex((value, index) => value > 9);
  4.         console.log(index);//2
  5.     </>
Array.includes()方法
  • 表示某个数组是否包含给定的值，返回布尔值；
  1. [1,2,3].includes(2);//true
  2. [1,2,3].includes(5);//false

string的扩展方法

1、模版字符串
  • ES6新增的创建字符串的方式，使用反引号定义；
  • 模版字符串中可以解析变量；
  • 模版字符串中可以换行；
  1. let result={
  2. 	name:'zhangsan',
  3. 	age:20,
  4. 	sex:'男'
  5. };
  6. let html=`<div>
  7. 	<span>${result.name}</span>
  8. 	<span>${result.age}</span>
  9. 	<span>${result.sex}</span>
  10. </div>
  11. console.log(html);
  12. `
  • 在模版字符串中可以调用函数；
  1. const sayHello = function () {
  2.    return '哈哈哈哈哈哈';
  3. };
  4. let greet = `${sayHello()}aaaa`;
  5. console.log(greet);
2、startsWith()和endsWidth()
  • startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值；
  • endsWidth()：表示参数字符串是否在原字符串的尾部，返回布尔值；
3、repeat()方法
  • repeat()方法表示将原字符串重复n次，返回一个新字符串；
  1. 'x'.repeat(3);//'xxx'
  2. 'hello'.repeat(2);//'hellohello'

Set数据结构

  • ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值；
  • 应用：用于网站存储用户搜索历史关键字；
  • Set本身是一个构造函数，用来生成Set数据结构；
  • const s = new Set();
  • Set函数可以接受一个数组作为参数，用来初始化；
  • const set = new Set([1,2,3,4,4])
  • 利用Set数据结构做数组去重：
  1. <>
  2.         const s1 = new Set();
  3.         console.log(s1.size);//0
  4.  
  5.         const s2 = new Set(['a', 'b']);
  6.         console.log(s2.size);
  7.  
  8.         const s3 = new Set(['a', 'a', 'b', 'b']);
  9.         console.log(s3);//Set(2) {'a', 'b'}
  10.         console.log(s3.size);//2 Set会把重复的值给过滤掉；
  11.         const arr = [...s3];
  12.         console.log(arr);//['a', 'b']
  13.     </>
Set对象实例方法
  • add(value)：添加某个值，返回Set结构本身；
  • delete(value)：删除某个值，返回一个布尔值，表示删除是否成功；
  • has(value)：返回一个布尔值，表示该值是否为Set的成员；
  • clear()：清除所有成员，没有返回值；
  1. const s = new Set();
  2. s.add(1).add(2).add(3);
遍历Set
  • Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值；
  • s.forEach(value=>console.log(value))
  1.  const s = new Set(['a', 'b', 'c', 'a', 'a']);
  2.         s.forEach(element => {
  3.             console.log(element);//a b c
  4.         });
文章知识点与官方知识档案匹配，可进一步学习相关知识
Python入门技能树首页概览435628 人正在系统学习中
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/871200
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号