JS基础教程——峰华前端工程师B站视频

JavaScript基础语法教程视频课来自于B站UP主：峰华前端工程师：https://space.bilibili.com/302954484。

基础课的很多内容与之前的视频，但是相比之前的课程更加全面，通过学习峰华老师课程可能无法记住所有的内容，但是能够对JS知识有一个整体了解和前面学习的基础知识查缺补漏，便于以后出现疑惑，能够知道去何处查找。

下面是我做的简单笔记，推荐大家去看原视频，有些地方需要看好几遍才能理解，虽然当时理解了之后有可能还是记不住，深深感觉到JS内容是多并且杂乱的，有很多小的知识点，而且JS还在不断更新中。

1、数据类型

变量，使用var定义；常量，使用const定义，不可修改。

基本数据类型包括布尔类型、number类型、string类型（引号定义）、undefined类型（变量未进行初始化或赋值为undefined）、null（变量被赋值为unll）。

typeof可以判断变量类型；parseInt() 字符串转整数；

注释有三种方式，使用双斜杠单行注释，使用/*内容*/多行注释，使用/**内容*/进行文档注释。

"5"==5是true，所以使用===可以不仅仅判断数值是否相等，还判断类型是否一样。

2、运算符

逻辑判断符还有短路特性，当一个复合条件表达式中的某一条件已经可以确定整个表达式的结果时，就不再继续判断后面的条件，直接返回结果。

位运算符是数据对应的二进制数据进行操作，包括与&、或|、异或^、非~、左移<<、右移>>。

三目运算符是使用?，相当于if，前面条件为真，则执行?后面为真时的代码，否则执行为假时的代码。

3、判断和循环

let定义的变量和const定义的常量，只能在语句块内访问，var定义的可以语句块内外访问。

switch case语句可以用于多次重复判断，基本结构如下：

switch(变量){
        case:输入的变量值1：
        表达式1；
        break;
        case:输入的变量值2：
        表达式2；
        break;
        ......
        default:
        // default用于上面条件都不满足时
}

break和continue用于流程控制，break强行中断循环，continue是跳过本次循环，之后的继续执行。

4、函数

函数递归是函数自己调用自己，定义在函数内部的变量被称为局部作用域，局部作用域的变量有可能被全局覆盖。

函数之前没有学习的概念包括：箭头函数使用=>；闭包是函数内再定义一个函数，内部的函数可以作为返回值被函数输出；柯里化（curry）是把一个接收多个参数的函数变为一系列接收一个内部参数的函数；自执行函数是函数定义后自己执行自己，内部定义的变量不影响外部，内部变量也不受外部变量影响；回调函数是一段代码执行后要调用的函数。

5、数组

数组定义有三种方式，除了经常使用的[a,b]直接定义外， 还可以使用new Araay()或者Array()。

从后往前删除数组内容可以直接使用修改array.length=n的方式；删除任意内容使用array.splice(索引+几个)。

遍历数组除了使用for循环外，可以使用for(let bianliang of shuzu){}结构、arrcy内置的forEach()。

栈模式是先进后出的数据结构，常用的包括.push元素入栈、pop弹出最后一个元素并返回该元素值。

队列是先进先出模式，入队使用.push，出队使用.shift，使用unshift从队列头部插入元素。

反转数组或者字符串使用.reverse操作，排序使用.sort，数组连接使用.concat方法，裁切使用.slice，map数组是创建在原数组基础上进行运算后的一个新的数组，不对原来的数组进行变化。

reduce数组是对数组中所有的元素调用回调函数，将回调函数运行后的返回值作为累计结果，并且该累计结果在下一次调用该回调函数时作为一个参数，实现了累积的效果。

数组过滤是筛选一些满足条件的元素，使用.filter；数组测试是监测所有元素是否都满足条件.every或者部分元素是否满足了条件.some。

结构操作符是把数组的元素赋值给变量，同时可以使用rest操作符...将数组赋值给变量后，被赋值数组元素后面的余下的部分数组，也可以使用...参数名的方式来给函数传递不固定个数的参数。

6、对象

创建对象除了之前使用的var 对象名 = {键: 属性,}还可以使用var 对象名 = new Object(); 对象名.键 = 属性;的方式。

修改或者添加对象的内容可以使用对象名.键 = "新属性"或者对象名["键"] = "新属性"的方式。

定义对象时，如果对象的键是之前定义的变量或者函数，那么可以直接省略键，直接使用变量名或者之前定义的函数。

遍历对象的所有键可以使用.keys方法，删除可以使用delete 方式。

使用构造函数定义对象可以预先定义对象有哪些属性，使用this.定义对象属性，同时也可以使用this.调用对象属性。

getters和setters分别使用get关键字和set关键字。

对象原型主要是指__proto__，定义或者添加属性可以使用对象名.prototype.对象新属性名=新属性值的方式，这种方式会给对象所有的实例都添加属性和属性值；访问对象实例的proto采用实例名.__proto__方式或者Object.getPrototypeOf(实例名)。

对象的继承使用Object.create(对象实例名)，使一个对象实例可以继承另一个对象实例的所有属性。

原型链是指使用Object.getPrototypeOf来获取对象继承的上一层，而继承的上一层的上面还有一层，直到到达构造函数层、Object原型、null。修改原型的指向可以修改对象的继承关系，使用setPrototypeOf。

spread操作符...可以用来克隆一个新的对象，也适用于数组等。

对象也可以进行destructuing（解构赋值）和rest，分解赋值以下为例：

var post = {
	id:1,
	title: "标题"，
    content:"内容"
};
// 将对象post的id和title给id和headline使用冒号赋予别名
var {id, title:headline} = post;

解构对象和解构数组可以结合起来，结构部分需要去看书或者视频课，加深理解。rest（...）操作和数组一样，将解构之后剩余的属性返回作为一个子对象。

在JS中，有值传递和引用传递（传递内存地址）两种方式。在被函数引用后，值传递过程中，数组和对象的值（数字和布尔类型、字符串等基本类型除外）等是按照地址传递的，修改这个值之后，所有用到该地址上的值都会变化的。即函数修改值后，原地址上的值也发生改变。

call、apply、bind用来改变对象中this中的指向。

7、类

类本质上是ES6中的语法糖，语法糖是指通过在编程语言中添加语法，更加简洁高效、方便使用，但是其实本质上没有改变。

类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，但这些都不是必需的。在类中定义函数，是直接使用函数名，不需要使用var。

类的继承使用extends关键字，使用super关键字代表父类自身，调用父类的参数或方法。

此外，面向对象方法还有一些新版本浏览器才支持的内容，包括成员变量和静态成员。成员变量是在类里面定义的变量。静态成员需要在类中定义，在类的属性或者方法定义时，在前面加上static关键字，在调用静态变量时也只能通过类名.属性名的方式。

8、字符串

字符串截取使用.slice或者.substring方法，字符串拼接除了直接使用加号，还可以使用.concat方法；使用.trim()去除字符串首尾空格。

模板字符串

模板字符串：使用反引号将字符串按照原来的格式打印出来，并且支持使用变量替换模板中的占位符。

var name="峰华";
var str = `你好，${name}`;
console.log(str);

//使用标签函数
function greeting(strings,gender){
    let genderStr ="";
    if(gender==="M"){
        genderStr ="先生";
    } else if(gender==="F"){
        genderStr="女士";
    }
    return `${strings[0]}${genderStr}`
}

var gender = "M";
var result = greeting`你好，峰华${gender}`;
console.log(result);

正则表达式

正则表达式用于表达字符串是否符合某些规则或者模式，创建并执行正则表达式如下所示：

//创建正则
var str = "where when what";
// 直接使用字面值使用匹配wh
var re = /wh/;
// 创建正则表达式对象
var re2 = new RegExp("wh");
//执行表达式
//使用exec 返回匹配到的信息，只返回第一个匹配到的结果
console.log(re.exec(str));
console.log(re2.exec(str));
// test判断是否匹配到
console.log(re.test(str));
console.log(re2.test(str))
//全局搜索
var re = /wh/g;
//执行多次，匹配完
console.log(re.exec(str));
console.log(re.exec(str));
console.log(re.exec(str));

正则表达式还有一些语法，单纯的字符匹配如下所示：

var str = `This str contains 123 CAPITAIZED 
letters and _-&^% symbols`;
// 字符匹配，检查是否含有T、12等
console.log(/T/.test(str));
console.log(/12/.test(str));

特殊字符匹配，比如不知道字符具体内容等，如下所示：

// 特殊字符匹配
var str = `This str contains 123 CAPITAIZED 
letters and _-&^% symbols`;
// 使用match和点号匹配某些字符
// 中间字符不明确的情况，点号代表任意一个字符
console.log(str.match(/Th.s/g));
// 匹配都一类字符，\d表示数字一类, \w表示数字字母和下划线
// d、w字母大写表示不匹配这些内容
console.log(str.match(/\d/g));
console.log(str.match(/\w/g));
// 空白字符使用\s
console.log(str.match(/\s/g));
// 匹配中文需要使用对应的unicode码或者直接使用中文
console.log("学习网络地理信息系统".match(/地.信/));

正则表达式的区间表示这个区间内，任意一个字符出现了一次，如下所示：

// 区间、逻辑和界定符
var str = `This str contains 123 CAPITAIZED letters and _-&^% symbols`;
// 匹配出现a、b、c任意一个的
console.log(str.match(/[abc]/g));
// 使用-表示一个连续的区间，比如匹配1到3
console.log(str.match(/[1-3]/g));
// 使用^表示匹配不是该区间，匹配不是a到z的
console.log(str.match(/[^a-z]/g));
// 使用竖线表示或逻辑
console.log(str.match(/This|letters/g));
// ^界定字符串开始，只返回开头的;$返回结尾的
var str1 = `this this this`;
console.log(str1.match(/^this/g));
console.log(str1.match(/this$/g));
// \b匹配单词边界，只返回完整的单词
var str2 = `this AthisA this`;
console.log(str2.match(/\bthis\b/g));

正则表达式使用小括号对模式进行分组，分组的内容作为一个整体被返回。使用如下所示：

// 分组，由圆括号包裹的一个小整体称为分组
var str1 = `Let's learn WebGIS together`;
// 返回le和er分组之间的内容
console.log(/(le).*(er)/.exec(str1));
var str2 = `aaaabb ababa bbaaba`;
//返回aa分组出现两次的
console.log(str2.match(/(aa){2}/g));

常见的正则表达式匹配有手机号匹配、用户名规则等，如下所示：

//定义正则表达式用于手机号匹配，一般都是1开头，13+9位数到19+9位数,\d表示数字
var mobileRe = /^1[3-9]\d{9}/g;
// 测试一下，.test是一个方法
console.log(mobileRe.test("15000000000"));
// 定义邮箱的正则表达式，数字字母下划线组合@数字字母点号组合.com或.cn
var emailRe = /^([a-zA-Z0-9_]+)@([a-zA-Z0-9\.]+)(.com|.cn)/;
// 测试
console.log(emailRe.test("Aba666@ab163.cn"));
console.log(emailRe.test("Aba666@163.edu.cn"));
console.log(emailRe.test("Aba666@163.edu.CN"));
console.log(emailRe.test("++++@163.edu.cn"));
// 定义用户名规则，只能是以英文字母开头，后面结尾可以有数字，6-12位
var usernameRe = /^([a-zA-Z]+)([a-zA-Z0-9]{5,11})$/g;
console.log(usernameRe.test("ABCaaa555"));

字符串的一些方法也可以用到正则表达式，如下所示：

// 使用普通方式替换
var str = "this is a car.";
console.log(str.replace("car","bus"));
// 使用正则表达式替换
// 将数字替换为空，删除数字的效果，使用加号表示出现一次或多次
var str = "this 1is 222a 3car";
console.log(str.replace(/\d+/g,""));
// 解析字符串，将hello world从表达式中解析出来
var htmlstr = "<span>hello</span><div>world</div>";
//使用$1替换为分组内的符号,([^<>]*)表示不被<>包裹起来的内容，即hello或者world
// /<[^>]*>表示<span>或者<div>，[^>]*表示以<开头但不包含>的部分，即span或者div
console.log(htmlstr.replace(/<[^>]*>([^<>]*)<\/[^>]*>/g,"$1"));

分割字符串也可以和正则表达式结合，如下所示：

// 分割字符串
var tags = "html, css, JS"
// 使用逗号+空格，分隔为数组
console.log(tags.split(", "));
// 使用正则表达式，使用\W，用出现一次到多次非字母的元素作为分隔符分隔开
var str = "this -is +=a 1bus";
console.log(str.split(/\W+/g));
// 结果可以看到，\W表示非数字、字母和下划线
// 使用非字母作为分割
console.log(str.split(/[^A-Za-z]+/g));

9、内置对象