开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 面向编程的知识点总结 -> 正文阅读

[JavaScript知识库]面向编程的知识点总结

前言

假期结束，我们都得快点回到工作状态，也得进入学习状态。为此我们需要努力的进行一个知识的记录和复习。这篇知识点总结希望能帮到大家可以回忆自己学习的内容。

一、函数的定义

当我们需要面对新的函数内容的时候，我们需要去重新回忆一下函数的定义：

在js里面，万物皆对象，数组可以是对象，字符串可以是对象，函数可以是对象。

二、函数的调用(this)

函数的调用我们知道，有一个方法叫做this，这里我们就来看看，this的指向有些什么特别之处，对于不同的函数调用下this指向会有什么样的改变。

this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同，一般指向我们的调用者。这里用图片进行了一个归纳，让我们来看看：

this的指向一般都是固定的，但是我们可以通过使用一些方法去改变他们的指向。

1.call

call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向

应用场景: ?经常做继承

var o = {
	name: 'andy'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn(1,2)// 此时的this指向的是window 运行结果为3
fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3

2.apply

apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

应用场景: ?经常跟数组有关系

var o = {
	name: 'andy'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn()// 此时的this指向的是window 运行结果为3
fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3

3.bind

bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数

如果只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind

应用场景:不调用函数,但是还想改变this指向

var o = {
 name: 'andy'
 };

function fn(a, b) {
	console.log(this);
	console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
f();//调用新函数  this指向的是对象o 参数使用逗号隔开

总结

共同点 : 都可以改变this指向
不同点:

call 和 apply ?会调用函数, 并且改变函数内部this指向
call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
bind ?不会调用函数, 可以改变函数内部this指向

应用场景

call 经常做继承
apply经常跟数组有关系. ?比如借助于数学对象实现数组最大值最小值
bind ?不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向

三、严格模式

JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。
严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。

严格模式对正常的 JavaScript 语义做了一些更改：?

消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
消除代码运行的一些不安全之处，保证代码运行的安全。
提高编译器效率，增加运行速度。
禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class,enum,export, extends, import, super 不能做变量名

如何开启严格模式

严格模式可以应用到整个脚本或个别函数中。因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。

情况一 :为脚本开启严格模式?

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

(function (){
  //在当前的这个自调用函数中有开启严格模式，当前函数之外还是普通模式
　　　　"use strict";
       var num = 10;
　　　　function fn() {}
})();
//或者 
<script>
  　"use strict"; //当前script标签开启了严格模式
</script>
<script>
  			//当前script标签未开启严格模式
</script>

情况二: 为函数开启严格模式?

要给某个函数开启严格模式，需要把“use strict”; ?(或 'use strict'; ) 声明放在函数体所有语句之前。

function fn(){
　　"use strict";
　　return "123";
} 
//当前fn函数开启了严格模式

严格模式下的变化

我们来看看，已经总结好的内容：

?其他更多的内容，可以通过严格模式参考来了解

四、高阶函数

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。
此时fn 就是一个高阶函数
函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。
同理函数也可以作为返回值传递回来

闭包

在了解闭包之前，我们先来冲洗复习一下变量的作用域：

变量根据作用域的不同分为两种：全局变量和局部变量。

函数内部可以使用全局变量。
函数外部不可以使用局部变量。
当函数执行完毕，本作用域内的局部变量会销毁。

了解了之后，我们来看看什么是闭包：

闭包（closure）指有权访问另一个函数作用域中变量的函数。
简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。??

闭包的作用，就是延伸变量的作用范围。

?function fn() {
? ?var num = 10;
? ?function fun() {
? ? ? ?console.log(num);
??? ?}
? ? return fun;
?}
var f = fn();
f();

递归

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数

递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。

//利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
        function fn(n) {
            if (n == 1) { //结束条件
                return 1;
            }
            return n * fn(n - 1);
        }
        console.log(fn(3));

拷贝?

穿插一个拷贝的知识点：

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用。
深拷贝拷贝多层，每一级别的数据都会拷贝。
object.assign(target,…sources) es6新增方法可以拷贝

五、正则表达式

正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。

正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript 正则表达式完成表单验证。

正则表达式的特点：

灵活性、逻辑性和功能性非常的强。
可以迅速地用极简单的方式达到字符串的复杂控制。
对于刚接触的人来说，比较晦涩难懂。比如：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式. ? 比如用户名: ? /^[a-z0-9_-]{3,16}$/?

使用方法

创建的方法：

在 JavaScript 中，可以通过两种方式创建一个正则表达式。

方式一：通过调用RegExp对象的构造函数创建?
var regexp = new RegExp(/123/);
console.log(regexp);

方式二：利用字面量创建正则表达式（常用）
var rg = /123/;

测试的方法：

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

var rg = /123/;
console.log(rg.test(123));//匹配字符中是否出现123  出现结果为true
console.log(rg.test('abc'));//匹配字符中是否出现123 未出现结果为false

拓展：?

组成

一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。

MDN查询
jQuery(查文档)

边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
边界符
^表示匹配行首的文本（以谁开始）
$表示匹配行尾的文本（以谁结束）

字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

量词符??

?总结

例子：用户名验证?

功能需求:

1. 如果用户名输入合法, 则后面提示信息为: ?用户名合法,并且颜色为绿色
2. 如果用户名输入不合法, 则后面提示信息为: ?用户名不符合规范, 并且颜色为红色
分析:

1. 用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为6~16位.
2. 首先准备好这种正则表达式模式/$[a-zA-Z0-9-_]{6,16}^/
3. 当表单失去焦点就开始验证.?
4. 如果符合正则规范, 则让后面的span标签添加 right类.
5. 如果不符合正则规范, 则让后面的span标签添加 wrong类.

<body>
    <input type="text" class="uname"> <span>请输入用户名</span>
    <script>
        //  量词是设定某个模式出现的次数
        var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
        var uname = document.querySelector('.uname');
        var span = document.querySelector('span');
        uname.onblur = function() {
            if (reg.test(this.value)) {
                console.log('正确的');
                span.className = 'right';
                span.innerHTML = '用户名格式输入正确';
            } else {
                console.log('错误的');
                span.className = 'wrong';
                span.innerHTML = '用户名格式输入不正确';
            }
        }
    </script>
</body>

预定义类?

?放入代码中使用即可

替换

replace方法

?正则表达式参数?

六、ES6?

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

为什么要用es6？

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

变量提升特性增加了程序运行时的不可预测性
语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

语法?

来让我们学习看看ES6中的各种语法。

1.let

ES6中新增了用于声明变量的关键字

1.let声明的变量只在所处于的块级有效

if (true) { 
     let a = 10;
 }
console.log(a) // a is not defined

?注意：**使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

2.不存在变量提升

console.log(a); // a is not defined 
let a = 20;

?3.暂时性死区

利用let声明的变量会绑定在这个块级作用域，不会受外界的影响?

var tmp = 123;
 if (true) { 
     tmp = 'abc';
     let tmp; 
 }

小结?

let关键字就是用来声明变量的
使用let关键字声明的变量具有块级作用域
在一个大括号中使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
防止循环变量变成全局变量
使用let关键字声明的变量没有变量提升
使用let关键字声明的变量具有暂时性死区特性

2.const

声明常量，常量就是值（内存地址）不能变化的量

1.具有块级作用域?

if (true) { 
     const a = 10;
 }
console.log(a) // a is not defined

?2.声明常量时必须赋值

const PI; // Missing initializer in const declaration

?3.常量赋值后，值不能修改

const PI = 3.14;
PI = 100; // Assignment to constant variable.

const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 
ary = ['a', 'b']; // Assignment to constant variable.

?小结?

const声明的变量是一个常量
既然是常量不能重新进行赋值，如果是基本数据类型，不能更改值，如果是复杂数据类型，不能更改地址值
声明 const时候必须要给定值

总结?

使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

数组解构

 let [a, b, c] = [1, 2, 3];
 console.log(a)//1
 console.log(b)//2
 console.log(c)//3
//如果解构不成功，变量的值为undefined

对象解构

let person = { name: 'zhangsan', age: 20 }; 
 let { name, age } = person;
 console.log(name); // 'zhangsan' 
 console.log(age); // 20

 let {name: myName, age: myAge} = person; // myName myAge 属于别名
 console.log(myName); // 'zhangsan' 
 console.log(myAge); // 20

箭头函数

ES6中新增的定义函数的方式。

使用方法

() => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体
const fn = () => {}//代表把一个函数赋值给fn

函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

?function sum(num1, num2) {?
? ? ?return num1 + num2;?
?}
?//es6写法
?const sum = (num1, num2) => num1 + num2;?

如果形参只有一个，可以省略小括号

function fn (v) {
? ? ?return v;
?}?
//es6写法
?const fn = v => v;?

this的指向

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

const obj = { name: '张三'}?
?function fn () {?
? ? ?console.log(this);//this 指向 是obj对象
? ? ?return () => {?
? ? ? ? ?console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
? ? ?}?
?}?
?const resFn = fn.call(obj);?
?resFn();

小结

箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁
箭头函数的优点在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题

数组的扩张方法?

扩张运算符

1.扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

let ary = [1, 2, 3];
?...ary ?// 1, 2, 3
?console.log(...ary); ? ?// 1 2 3,相当于下面的代码
?console.log(1,2,3);

?2.可以合并数组

// 方法一 
 let ary1 = [1, 2, 3];
 let ary2 = [3, 4, 5];
 let ary3 = [...ary1, ...ary2];
 // 方法二 
 ary1.push(...ary2);

3.将类数组或可遍历对象转换为真正的数组

let oDivs = document.getElementsByTagName('div'); 
oDivs = [...oDivs];

构造函数的方法

1.Array.from()

将伪数组或可遍历对象转换为真正的数组

//定义一个集合
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}; 
//转成数组
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

let arrayLike = { 
     "0": 1,
     "1": 2,
     "length": 2
 }
 let newAry = Array.from(arrayLike, item => item *2)//[2,4]

注意：如果是对象，那么属性需要写对应的索引

2.find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

let ary = [{
     id: 1,
     name: '张三'
 }, { 
     id: 2,
     name: '李四'
 }]; 
 let target = ary.find((item, index) => item.id == 2);//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个

3.findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 2

4.includes()

判断某个数组是否包含给定的值，返回布尔值。

[1, 2, 3].includes(2) // true 
[1, 2, 3].includes(4) // false

String的扩展方法

模板字符串

ES6新增的创建字符串的方式，使用反引号定义
let name = `zhangsan`;

1.模板字符串中可以解析变量

let name = '张三'; 
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

2.模板字符串中可以换行

let result = { 
     name: 'zhangsan', 
     age: 20,
     sex: '男' 
 } 
 let html = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;

3.?在模板字符串中可以调用函数

const sayHello = function () { 
    return '哈哈哈哈 追不到我吧 我就是这么强大';
 }; 
 let greet = `${sayHello()} 哈哈哈哈`;
 console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

实例方法：startsWith() 和 endsWith()

startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

let str = 'Hello world!';
str.startsWith('Hello') // true 
str.endsWith('!')       // true

repeat

repeat方法表示将原字符串重复n次，返回一个新字符串

'x'.repeat(3)      // "xxx" 
'hello'.repeat(2)  // "hellohello"

Set 数据结构

ES6 提供了新的数据结构 ?Set。它类似于数组，但是成员的值都是唯一的，没有重复的值，可以用于去重
Set本身是一个构造函数，用来生成 ?Set ?数据结构

const s = new Set();
Set函数可以接受一个数组作为参数，用来初始化。
const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}

实例方法

add(value)：添加某个值，返回 Set 结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表示该值是否为 Set 的成员
clear()：清除所有成员，没有返回值

 const s = new Set();
 s.add(1).add(2).add(3); // 向 set 结构中添加值 
 s.delete(2)             // 删除 set 结构中的2值   
 s.has(1)                // 表示 set 结构中是否有1这个值 返回布尔值 
 s.clear()               // 清除 set 结构中的所有值
 //注意：删除的是元素的值，不是代表的索引