JavaScript相关知识点记录-CSDN博客

本文链接：https://blog.csdn.net/xhh22900/article/details/108465561

文章目录

数据类型和变量
函数
标准对象
面向对象编程
浏览器
jQuery
错误处理
underscore
Node.js
Web开发

看教程的时候在OneNote上记录的一些知识点，然后把这些知识点复制粘贴上来。

数据类型和变量

- 数据类型和变量
- Number
	○ 不区分整数和浮点数
	○ NaN: Not a Number
	○ Infinity
- 字符串
	○ `'"`
	○ 模版字符串：var message = `你好, ${name}, 你今年${age}岁了!`;
	○ s.length
	○ s.toUpperCase()   //全部变成大写
	○ s.toLowerCase()
	○ s.indexOf('world')
	○ s.substring(0,3);
	○ s.substring(7);   //7开始到结束
- 布尔值
	○ False
	○ True
	○ 逻辑运算符：&&、||、!
	○ 比较运算符：>、<、>=、<=、==（自动类型转换后比较）、===（不做类型转换，推荐使用）
	○ NaN===NaN;//false
	○ isNaN(NaN);//true
	○ null：空值，undefined：未定义
- 数组
	○ 可以包含任意数据类型
	○ -var arr=[1,2,3.13,'Hello',null,true];
	○ -new Array(1,2,3);    //[1,2,3]
	○ arr[0]
	○ arr.length
	○ arr.indexOf(3);
	○ arr.slice(0,3);
	○ arr.push('a','b');
	○ arr.pop();
	○ arr.unshift('a','b');
	○ arr.shift();
	○ arr.sort();
	○ arr.reverse();
	○ arr.splice(2,3,'Google','Facebook');		//从索引2开始删除3个元素然后再添加两个元素
	○ var added=arr.concat([1,2,3]);
	○ arr.join('-');		//将arr中的元素用指定的字符连接成字符串
	○ 多维数组，数组的元素也可以是数组
- 对象
	○ 由键值组成的无序集合
	○ -var person={name:'Bob',age:20,hasCar:tree};
	○ person.name
	○ person.hasOwnProperty('name');
- 变量
- map和set
	○ var m=new Map([['Micheal',95],['Bob',75],['Tracy',85]]);
	○ m.set('Adam',67);  //添加
	○ m.has('Adam');
	○ m.get('Adam');
	○ m.delete('Adam');
	○ var s1=new Set();
	○ s.add(4);
	○ s.delete(4);
- iterable
	○ Array、Map、Set都是iterable类型的
	○ 可以通过		for…of	循环来遍历
	○ for (var x of a){}
	○ for  .. of 和for … in 的区别：for …in实际遍历的是数组的属性
	○ forEachshow example，它接受一个函数，每次迭代自动回调该函数，对于Array接受的函数接受三个参数：element、index、array，对于Set，三个参数是element、element、set，对于Map，三个参数是value、key、map

函数

- 函数
- 两种定义方式
- arguments
- 全局作用域：window
- 用	let	声明一个块级作用域的变量，for(let i=0;i<10;i++){}
- 解构赋值：同时对一组变量进行赋值，（这样在交换两个变量时就不用临时变量了）
- var [x,y,z]=['hello','Javascript','ES6'];
- 对象内部定义某个属性为函数，此时也可以称为方法，在对象内可以用this指向该对象
- apply，指定函数内的this指向的对象，如 getAge.apply(xiaoming,[]);
- call()把参数按顺序传入
- 高阶函数：将其他函数作为参数接受的函数
- map()函数定义在Array中，调用它生成要给原数组的关于指定函数的映射数组
- var result=arr.map(pow);
- reduce()也定义在Array中，它的作用是对数组做累积计算
- [x1,x2,x3].reduce(f)=f(f(x1,x2),x3);
- filter，过滤掉Array中的某些元素，返回剩下的元素，接受的回调函数接受三个参数：element,index,array
- Array的sort函数默认将元素转换为String再排序，这里是一个坑，要对数组排序的话需要传入一个函数，
- every
- find
- findIndex
- 闭包，可以将函数作为返回值。示例
- 一个立即执行的匿名函数：function (x) { return x * x } (3);
- 可以利用闭包来封装一个私有变量。示例
- 箭头函数：x=>x*x，相当于匿名函数，简化了函数定义，有两种格式。(lambda)
- x=>{…return x*x;}
- (x,y)=>x*x+y*y;
- 箭头函数中的this总是指向词法作用域，即外层调用者，所以用call()或apply()调用箭头函数时无法对this进行绑定。
- generator：生成器，由function*定义，注意有*号，示例

标准对象

- 标准对象
- Date
- RegExp
	○ 正则表达式是一种用来匹配字符串的强有力的武器
	○ \d 匹配数字，\w 匹配一个字母或数字，. 匹配任意字符
	• *表示任意个字符，+表示字少一个字符，?表示0个或1个，{n}表示n个，{n,m}表示n-m个字符
	• []表示范围，A|B可以匹配A或B，^表示行的开头，$表示行的结束
	• 可以通过两种方式创建正则表达式。用test()方法判断字符串是否符合条件
	• 用split()切分字符串。split()接受一个参数，可以是字符串或者正则表达式
	• 用exec()可以提取字串，返回一个Array，第一个元素为整个字符串，后面的元素是匹配成功的字串
	• 正则匹配默认是贪婪匹配，可以加个?采用非贪婪匹配
	• 用标志g表示全局匹配
- JSON
	• JavaScript Object Notation的缩写，是一种数据交换格式
	• JSON中的数据类型：Number、boolean、string、null、array、object  及其中的任意组合
	• 规定字符集必须是UTF-8，字符串必须用双引号。
	• JSON.stringify(xiaoming,null,'   ');
	• 第二个参数可以是数组或者函数
	• 可以给对象定义一个toJSON()的方法。
	• 可以用JSON.parse()把JSON格式的字符串变成一个JacaScript对象

面向对象编程

- 面向对象编程
- JavaScript不区分类和实例的概念，它是通过原型来实现面向对象编程的。
- xiaoming.__proto__=student;
- 构造函数定义了以后，可以用new来调用这个函数
- class…extends..来实现继承

浏览器

- 浏览器
- 浏览器对象
	○ window--innerWidth，innerHeight，outerWidth，outerHeight
	○ navigator--appName，appversion，language，platform，userAgent
	○ screen--width，height，colorDepth
	○ location--href，protocal，host，port，pathname，Search，hash
	○ document--title，getElementsById()，getElementsByTagName()，getElementsByClassName()，Cookie
	○ history--back()，forward()
- 操作DOM
	○ HTML文档被浏览器解析后就是一颗DOM树，操作DOM节点有以下几个操作：
		§ 更新
		§ 遍历
		§ 添加
		§ 删除
	○ 首先需要先获得这个节点，有两种方法
		§ getElementById()…
		§ querySelector()、querySelectorAll()
	○ 更新DOM，有两种方法
		§ 修改innerHTML属性，可以直接修改其内部子树
		§ 修改innerText或textContent属性，
		§ 也可以修改CSS，用style属性对应的所有CSS都可以直接获取或修改
	○ 插入新节点有两种方法
		§ appendChild()
		§ parentElement.insertBefore(newElement,referenceElement)
	○ 删除，调用父节点的removeChild
- 制作表单
	○ HTML表单的输入控件主要有：
		§ 文本框，<input type="text">
		§ 口令框，password
		§ 单选框，radio
		§ 复选框，checkbox
		§ 下拉框，select
		§ 隐藏文件，hidden
	○ 获取值，value，用于text，password，hidden，select，对于单选和复选，要用checked判断
	○ HTML5控件，包括date、datetime、datetime-local、color
	○ 提交表单，有两种方式
		§ 通过	<form>	元素的	submit()	方法提交一个表单
		§ 响应<form>本身的onsubmit事件
	○ 操作文件
		§ HTML表单中，可以上传文件的唯一空间是<input  type="file">
		§ 表单中包含"file"时，enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。
		§ JavaScript可以在提交表单时对文件扩展名做检查，防止用户上传无效格式的文件。
		§ HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。
	○ AJAX
		§ Asynchronous JavaScript and XML，意思是用JavaScrpt执行异步网络请求
		§ 在浏览器上写AJAX主要依靠XMLHttpRequest对象
		§ 创建XMLHttpRequest对象后，要先设置onreadystatechange的回调函数，回调函数中通过readState===4判断请求是否完成，如果已完成，再根据status===200判断是否是一个成功的响应。
		§ XMLHttpRequest对象的open()方法有三个参数，第一个指定GET还是POST，第二个指定URL地址，第三个指定是否使用异步，默认是true
		§ 最后调用send()方法才真正发送请求，GET不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。
		§ 上面URL使用的是相对路径，如果要用JavaScript请求外域的URL，有以下几种方法：
			□ 通过Flash插件
			□ 通过同源域名下架设一个代理服务器
			□ JSONP，但只能用GET请求
			□ CORS，Cross-Origin Resource Sharing
	○ Promise
		§ then，catch
		§ race
	○ canvas
		§ getContext('2d')	2D
		getContext('webgl')	3D
		§ Path2D

jQuery

- jQuery
- Write Less, Do More
- $:变量jQuery的别名，本质上是一个函数，也是一个对象，除了可以直接调用外也有很多其他属性
- 选择器
	○ var div=$('#abc');  //#开头，返回的对象是jQuery对象，按ID查找
	○ var divDom=div.get(0);
	○ var another=$(divDom);
	○ var ps=$('p');   //返回所有<p>的节点，按tag查找
	○ var a-$('.red');//返回所有包含class=red的节点，按class查找
	○ var a=$(.red.green');//同时包含red和green的节点
	○ var email=$('[name=email]');//按属性查找
	○ var icons=$('[name^=icon]';//name属性值以icon开头的DOM
	○ var names=$('[name$=with]');//name属性值以with结尾的DOM
	○ var emailInput=$('input[name=email]');//组合查找，<input>中的属性查找
	○ $('p,div');//多项选择器
- 层级选择器，$('ancestor descendant') 中间用空格隔开
- 子选择器，$('parent>child')
- 过滤器，$('ul.lang li:first-child');  
- 表单相关
- 查找和过滤
	○ find()，本身接受一个任意的选择器
	○ parent()，从当前节点开始向上查找
	○ 同一层级的节点，用next()和prev()
	○ filter()
	○ first()，last()，slice()
- 操作DOM
	○ jQuery对象的text()和html()方法分别获取文本和原始的HTML文本。
	○ 通过传入参数可以设置文本，对对象执行的操作作用在对应的一组DOM节点上
	○ 修改CSS，利用它的”批量操作“的特性，使操作方便很多
	○ div.css('color','#333333');
	○ hasClass，addClass，removeClass
	○ show()和hide()：显示和隐藏，也可以设置CSS的display属性
	○ width()和height()，直接获取宽高信息
	○ attr()和removeAttr()方法用于操作DOM节点的属性
	○ prop()和attr()类似
	○ 操作表单
		§ val()获取和设置value属性
- 修改DOM结构
	○ 添加DOM
		§ append()，可以传入字符串，或者原始DOM对象，jQuery对象和函数对象
		§ prepend()添加到最前
		§ after()
	○ 删除节点，remove()
- 事件
	○ on，或者直接click
	○ 能够绑定的事件有，鼠标事件
		§ click
		§ dblclick
		§ mouseenter
		§ mouseleave
		§ hover：鼠标进入和退出时触发两个函数
	○ 键盘事件
		§ keydown
		§ keyup
		§ keypress
	○ 其他事件
		§ focus：获得焦点
		§ blur：失去焦点
		§ change：内容改变
		§ submit：表单提交
		§ ready：页面被载入并且DOM树完成初始化后，仅用于document对象，适合用来写初始化代码，因为这个事件使用过于普遍，可以简写为$(function(){…});
	○ 通过off()可以将已经绑定的事件解除绑定。
- 动画
	○ show()，hide()，传递一个时间参数进去就变成了动画，toggle()
	○ slideUp，slideDown，slideToggle
	○ fadeIn, fadeOut, fadeToggle
	○ animate()
	○ delay()
- AJAX
	○ ajax(url,settings)，常用的选择有
		§ async，true
		§ method，GET, POST，PUT
		§ contentType，发送POST请求的格式
		§ data
		§ headers，发送的额外的HTTP头，必须是一个object
		§ dataType，接收的数据格式，可指定为html, xml, json, text等
	○ qXHR，类似于Promise
	○ get
	○ post
	○ getJSON
- 扩展
	○ 通过 $.fn，给jQuery对象绑定一个新方法
		§ 插件最后要return this;以支持链式调用
		§ 默认值绑定在$.fn.<pluginName>.defaults上
		§ 调用时可传入默认值以便覆盖默认值
	○ extermal, filter可以针对特定的DOM元素

错误处理

- 错误处理：
- try…catch…finally
- throw

underscore

- underscore
- underscore提供了一套完善的函数式编程接口。
- 类似于jQuery，underscore将自身绑定在唯一的全局变量_上
	○ _.map([1,2,3].(x)=>x*x);
	○ 可以作用于Object上
	○ _.map({a:1;b:2;c:3},(v,k)=>k+'='+v);
- Collections，支持Array，Object
	○ map/filter
	○ every/some
	○ max/min
	○ groupBy
	○ shuffle/sample
- Arrays
	○ first/last
	○ flatten，将Array变成一维的
	○ zip/unzip
	○ object
	○ range
- Functions
	○ bind()
	○ partial()，偏函数
	○ memoize，自动缓存函数计算的结果
	○ once()保证某个函数执行且仅执行一次。
	○ delay()，效果和setTimeout()是一样的
- Objects
	○ keys/allKeys
	○ values
	○ mapObject()
	○ invert()
	○ extend/extendOwn
	○ clone  浅复制，两个对象相同的key引用的value其实是同一个对象
	○ isEqual
- Chaining

Node.js

- Node.js
- 历史
	○ 微软通过IE击败Netscape，然后浏览器毫无进步
	○ Mozilla推出FireFox，Apple推出WebKit内核的Safari
	○ Google推出基于WebKt内核的Chrome，然后开发了一个高性能JavaScript引擎，V8
	○ Ryan于2009年推出了基于JavaScript和V8的开源Web服务器项目，命名为Node.js。它第一次把JavaScript带入到后端服务器开发。
	○ 它的优势：可以借助JavaScript的事件驱动机制和V8高性能引擎，轻松编写高性能Web服务器。
- 安装Node.js和npm
	○ 官网下载，node -v
	○ npm
		§ package manager，包管理工具
	○ 可以写一个简单的js文件，如hello.js，然后用node hello.js运行
	○ 通常是在命令行模式下，可以执行node进入交互式环境
	○ "use strict"
	○ node --use_strict cal.js
- 搭建Node开发环境
	○ Visual Studio Code
- 在Node中，一个.js文件就称为一个模块，module
	○ module.export=greet;//在模块中对外输出变量
	○ var greet=require('./hello');
	○ CommonJS规范
	○ JavaScript在浏览器中，不同js文件中变量可能存在命名冲突，这种语言本身没有保护机制可以在不同js文件中用同名的变量而不会冲突。为此，Node.js选择了比较聪明的做法，闭包，把一段js代码用一个函数包装起来，那么这段代码的所有变量都变成了函数内部的局部变量。
	○ 为了实现module.exports的输出，Node可以先准备一个对象，有两种方法可以在一个模块中输出变量
		§ 对module.exporst赋值
		§ 直接使用exports
- 基本模块
	○ fs--文件系统模块，读写，同时提供同步异步方法
		§ 因为JavaScript的单线程模型，执行IO操作时，JavaScript代码无需等待，而是传入回调函数，继续执行代码。同步操作虽然代码简单，但程序会等待IO操作，等待期间无法响应任何事件。
		§ fs.readFile('sample.txt','utf-8',function(err,data){});
		§ 对于一个二进制文件，fs.readFile('sample.png',function(err,data){});//回调函数的data参数将返回一个Buffer对象，一个包含零个或任意个字节的数组。它可以和String做转换，data.toString('utf-8'); var buf=Buffer.from(text,'utf-8');
		§ 同步读文件，readFileSync('sample.txt','utf-8');//可以用try…catch捕获可能的错误
		§ 写文件，writeFile(‘output.txt',data,function(err){});  //对应的同步方法为writeFileSync
		§ fs.stat(‘sample.txt',function(err,stat){});
		§ 大多数时候我们应该选择异步
	○ stream--又一个仅在服务区端可用的模块，支持流，他也是对象，createReadStream, createWriteStream
		§ data，chunk
		§ end
		§ error
		§ 以流的形式写入文件，通过调用write()方法，最后以end()结束
		§ 所有读取流继承自stream.Readable, 写入流继承自 stream.Writeable
		§ pipe，两个流可以串起来，rs.pipe(ws);
	○ http，一种浏览器和服务器之间的传输协议，
		§ HTTP请求的流程：
			□ 浏览器先向服务器发送HTTP请求，包括方法：GET、POST；路径；域名；以及其他的Header
			□ 服务器向浏览器返回HTTP响应，包括：响应代码，响应类型，及其他的Header
			□ 如果浏览器还需要继续向服务器请求其他资源，就再次发出HTTP请求，重复以上步骤
		§ request
		§ response
	○ crpto，提供通用的加密和哈希算法，用C/C++实现算法，通过cypto这个模块暴露为JavaScript接口。
		§ MD5，常用的哈希算法，给任意数据一个签名，这个签名用16进制字符串表示。
		§ update()，默认字符串编码为utf-8，也可以传入Buffer。
		§ Hmac，一种哈希算法，利用MD5或SHA1，它还需要一个密钥
		§ AES，对称加密算法
		§ Diffie-Hellman，一种密钥交换协议
		§ RSA，非对称加密算法，一个私钥和一个公钥构成的加密对。

Web开发

- Web开发
- Client/Server 模式，CS架构
- Brower/Server模式，BS架构
- Web开发经历的阶段
	○ 静态Web页面
	○ CGI，Common Gateway Interface，C/C++写的，处理表单
	○ ASP/JSP/PHP：Web应用需要频繁修改，所以需要用开发效率高的脚本语言。ASP：微软推出的用VBScript脚本编程的Web技术，JSP用Java，PHP本身是开源脚本语言
	○ MVC：Model-View-Controll模式，解决用脚本语言嵌入HTML导致可维护性差的问题，简化Web开发。ASP=>ASP.Net，JSP和PHP也有一大堆MVC框架
	○ 现在，Web开发技术继续向前发展，异步开发、新的MVVM前端技术层出不穷。
	○ 由于Node.js把JavaScript引入服务器端，现在也可以用Node.js开发。
- 用Node.js开发Web服务器端的几个显著优势：
	○ 语言是JavaScript
	○ 前后端统一
	○ 速度很快，支持异步
- 现在出现了无数的Web框架，在npm上发布的Node.js模块数量超过了30万个