JS基础知识（总结归纳）（常识笔记）
Javascript组成
- ECMAScript
- DOM （文档）
- BOM （浏览器）
函数中的arguments对象
- 每一个函数内部都有一个arguments对象，系统内置的。
- arguments是用来存储实际传入的参数。
- arguments.length 输出当前函数存储的参数个数
- 访问数据： arguments[下标] ，下标是从0开始计的。
- 优先使用参数(形参)，除非特殊情况。
垃圾回收机制
- 调用函数的时候，系统会分配对应空间给这个函数使用
(空间大小一般情况由这个函数声明的变量和形参决定)。
当函数使用完毕后，这个内存空间会释放，还给系统。
内存管理机制
- 在函数中声明的变量和形参，会随着函数的调用被创建，随着函数的调用结束而被销毁。
在函数中声明的变量和形参，有效范围是当前函数（即{ }内）局部作用域。
就近原则
- 离哪个作用域近，就使用哪个作用域内的同名变量。
函数递归
- 函数递归知识，其实问的是内存管理机制，函数递归会一瞬间开辟大量内存空间，计算机可能承受不住，因此不建议使用递归！
- 满足以下三个特点就是递归：
1. 函数自己调用自己
2. 一般情况有参数
3. 一般情况下有return - 递归方法：
1. 首先去找临界值，即无需计算获得的值。
2. 找这一次和上一次的关系。
3. 假设当前函数已经可以使用，调用自身计算上一次。
数组的方法
- concat(） 方法：
- 拷贝原数组，生成新数组。
- 合并数组
- 格式：数组.concat(数据1，数据2，…)；
- 返回值：生成的新数组，原数组不会发生任何改变。
- slice(） 方法：
- 格式：数组.slice(start,end)； [start ， end）
- 功能：可获取当前数组指定下标范围的元素(即包左不包右)，提取出元素生成新数组。
- 返回值：生成的新数组，原数组不会发生任何改变。
- splice(） 方法：
- 格式：数组.splice(start，length，数据1，数据2)；
- 参数：
- start：开始截取的位置
- length：要删除元素的长度(个数)
- 第三个参数开始：在start位置，插入的元素。
- 返回值：操作完成后，元素组成的数组（原数组改变）
- 功能：增加、删除、修改（先删除，再增加）
- join(） 方法：
- 格式：数组.join(字符串)
- 功能：将数组中的元素，用传入的拼接符，拼接成一个字符串
- 返回值：拼接好的字符串。
- reverse(） 方法：
- 数组逆序
- sort() 方法：
- 格式：数组.sort() 默认从小到大排序，按照字符串排序。
- 参数：一个函数，代表要怎么去进行排序（固定用法）
//固定用法示例：按数值大小排序
arr.sort( function(value1, value2){
return value2 - value1;
})
- 栈结构：先进后出
- push(） 方法：
- 格式： 数组.push(参数1，参数2，…)；
- 功能： 给数组的末尾添加元素。
- 返回值：插完元素之后的数组长度。
- pop(） 方法：
- 格式：数组.pop()； 【没有参数】
- 返回值：取下一个元素。
- 功能：从数组末尾取下一个元素。
- push(） 方法：
- 队列结构：先进先出
- shift(） 方法：
- 格式：数组.shift()；【没有参数】
- 功能：从数组的头部取下一个元素
- 返回值：头部取下的元素
- unshift(） 方法：
- 数组.unshift(参数1, 参数2…)；
- 功能：从数组的头部插入元素。
- 返回值：插完元素以后数组的长度。
- push(） 方法：
- 格式： 数组.push(参数1，参数2，…)；
- 功能： 给数组的末尾添加元素。
- 返回值：插完元素之后的数组长度。
- shift(） 方法：
//定义一个长度是10的数组
//【当参数为一个，且是整数时，定义的是带长度的数组】
var arr = new Array(10);
//数组的初始化
var arr1 = [10, 20, 30, 40];
var arr2 = new Array(10，“哈哈”，30.8，a);
声明提升
- 在当前作用域。声明变量和函数，会直接提升在整个代码的最前面运行。
alert(num); //undefined
var num = 10;
alert(num); //10
show(); //hello
function show(){
document.write("hello");
}
引用数据类型： 如数组（Arrary）
- 数组的变量存储的是数组的地址。如下图所示：
var arr1 = [10, 20, 30, 40];
var arr2 = arr1;
arr2.push(50, 60);
alert(arr1); //10,20,30,40,50,60
alert(arr2); //10,20,30,40,50,60
ES5新增数组的方法
- indexOf()
- 格式：数组.indexOf(item, start);
- 参数：
- item：要查找的元素
- start：下标从几开始，默认是0（选填）
- 功能：在数组中查找第一次出现item元素下标，从start开始去查找
- 返回值： -1 表示没有查找到 ， >=0 表示查找到的元素的下标。
- forEach() 【还有：for循环；for…in…】
var arr = [10, 20, 30, 40, 50];
arr.forEach( function(item, index, arr){
/*
item当前遍历到的元素
index当前遍历到元素的下标
arr数组本身
*/
document.write(item + ", " + index + ", " + arr + "
");
});
- map()
- 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
- map() 方法按照原始数组元素顺序依次处理元素。
- map与slice一样：不会改变原始数组。
var arr = [10, 20, 30, 40, 50];
var newArr = arr.map( function(item, index, arr){
//参数同上
//遍历要做的事情 映射关系
return item * 1.3;
});
alert(newArr); //13,26,39,52,65
//传入的原数组不改变
alert(arr); //10,20,30,40,50
- filter()
var arr = [10, 20, 30, 40, 50];
var newArr = arr.filter( function(item, index, arr){
//参数同上
//过滤的条件
return item > 20;
});
alert(newArr); //30，40，50
//传入的原数组不改变
alert(arr); //10,20,30,40,50
- some()
- 在数组中查找是否有符合条件的元素，有返回true，没有返回false。
- 短路操作：只要找到符合条件的元素，后面的循环就停止了。
var arr = [10, 20, 30, 40, 50];
var res = arr.some( function(item, index, arr){
//参数同上
//过滤的条件
return item > 20;
});
alert(res); //true
//传入的原数组不改变
alert(arr); //10,20,30,40,50
- every()
- 在数组中查找每一个元素是否有符合条件，符合返回true，不符合返回false。
- 短路操作：只要找到不符合条件的元素，后面的循环就停止了。
var arr = [10, 20, 30, 40, 50];
var res = arr.every( function(item, index, arr){
//参数同上
//过滤的条件
return item < 100;
});
alert(res); //true
//传入的原数组不改变
alert(arr); //10,20,30,40,50
- reduce() 归并
var arr = [10, 20, 30, 40, 50];
var res = arr.reduce( function(item, index, arr){
prev ：第一次是 下标为0的元素 ；
第二次开始 上一次遍历return的值
next ：从下标1开始，当前遍历到的元素
arr ：数组本身
return prev + next;
});
alert(res); //150 （10+20=30，30+30=60，60+40=100，100+50=150）即所有元素之和
严格模式
- 格式：“use strict”
- 写在哪个作用域下，在哪个作用域下生效。 【注】尽量注意不要严格模式写在全局。
- 使用严格模式的好处：
- 全局变量声明时，必须加var
- 函数内重名属性，不被允许
- arguments对象不允许被动态改变
- 不能取变量或函数名为新增保留字：
implements, interface, let, package, private, protected, public, static, yield
字符串
- 声明方法有三种：
var str1 = new String(100);
alert(typeof str1); //object 对象 引用数据类型
var str2 = String(100);
alert(typeof str2); //string
var str3 = "100";
alert(typeof str3); //string
- 访问字符串中字符的个数： 字符串.length
- 中文 utf-8(三个字符表示一个汉字))
- gbk(两个字符表示一个汉字)
- 在计数时（即计算长度时）是当做一个汉字计数。
- 访问单个字符：
1. 字符串[下标]
2. 字符串.charAt(下标) 【下标从0开始的】 - 字符串是只读，字符串一旦被声明就没有办法被修改。如果非要声明字符串，我们只能讲原字符串效果，重新生成新的字符串。
- 在JS中，字符串既是基本数据类型，又是复合数据类型。
// 如下图表示：
var str = "hello北京";
var str2 = str;
字符串的方法
- indexOf()
- 格式：supStr.indexOf(subStr, start);
- 参数：第一个参数，查找的字符串
start 从哪个下标开始去查找，如果不传入，默认从下标0开始查找 - 功能：在supStr中查找subStr第一次出现的位置，从start这个位置开始查找。
- 返回值：-1 说明没有查找到
- 数组的indexOf是查找任意数据，字符串的indexOf是只能查找字符串
- search()
- 格式：supStr.search(subStr);
- 参数：字符串/正则表达式
- 功能：在supStr中查找subStr第一次出现的位置
- 返回值： -1 没有查找到
- 与indexOf方法相比，该方法还能使用正则表达式，更加灵活。
- substring()
- 格式：字符串.substring(start, end);
- 功能：将字符串中 [start,end) 提取这部分字符，生成一个新字符串
- 返回值：新生成的字符串
- 与数组的slice(start，end) 功能相同
- substr()
- 格式：字符串.substr(start, length);
- 返回值：新生成的字符串
- replace()
- 格式：supStr.replace(oldStr, newStr);
- 功能：用newStr将oldStr，替换掉，生成新字符串。
- 参数：
第一个参数传入的是字符串只能替换一次。
第一个参数 正则表达式
/xxx/ig i忽略大小 g全局匹配 - 返回值：替换成的新字符串。
- split() （字符串分割）
- 格式：字符串.split(分割符, length)
- 参数：
第一个参数，用这个分割符对原字符串进行分割
第二个参数，控制返回（分割好）的数组的元素个数，一般情况下不用。 - 功能：用分割符对原字符串，进行字符串分割，将分割完毕以后的子串，放在数组中返回。
- 返回值：分割后的新数组
- 【注意】：
1、相邻的两个分割符，会产生空字符串 “”
2、分割符是空字符串"",直接将每一个字符，单独分割成子串，放在数组中返回
var str = "how are you";
var arr1 = str.split(" ");
alert(arr1); //how,are,you
alert(str); //how are you 即原字符串不变
var arr2 = str.split("");
alert(arr); //h,o,w, ,a,r,e, ,y,o,u
- toLowerCase()
- 功能： 字符串全转成全小写
- toUpperCase()
- 功能： 字符串全转成全大写
- concat()
- 功能：字符串拼接；但用的更多是 "+"来拼接字符串
var str1 = "hello";
//下面两行代码效果一样
var newStr = str1.concat("world", 100);
var newStr = str1 + "world" + 100;
alert(newStr); //helloworld100
BOM ：(browser object model）
window 方法 (一般情况下window可以省略)
- alert() 弹出警告框
- confirm() 弹出一个带确定和取消的提示框
- 返回值：
如果点击确定，返回true
如果点击取消，返回false
- 返回值：
- prompt() 弹出一个带输入框的提示框
- 参数：
第一个参数：面板上显示的内容
第二个参数：输入框里面的默认（可以不传入） - 返回值：
点击确定，返回输入框中的内容
点击取消，返回null
- 参数：
- open()
- 参数：
第一个参数：跳转的url 打开一个新窗口，加载url
第二个参数：字符串，给打开的窗口起一个名字
第三个参数：一串特殊含义的字符串，可以控制打开窗口的属性
- 参数：
- history对象
- 功能： 掌管当前窗口（注意：不是浏览器的历史记录）历史记录（只要加载url不一样就会产生历史记录）
- 属性：
- history.length 输出当前窗口历史记录的条数
- 方法：
- history.back() 返回上一条历史记录
- history.forward() 前进到下一条历史记录
- history.go()
- 参数：
- 0 ：刷新当前页面
- 正整数 ：前进n条记录
- 负整数 ：后退n条记录
- 参数：
- location对象 （地址栏）
- url：统一资源定位符。 协议://IP(域名)/:端口号/路径/?查询字符串#锚点
- 属性：
- location.search 设置或返回从问号 (?) 开始的 URL（查询部分）。
- location.href 设置或返回完整的 URL。
- location.protocol 设置或返回当前 URL 的协议。
- location.pathname 设置或返回当前 URL 的路径部分。
- location.port 设置或返回当前 URL 的端口号。
- location.host 设置或返回主机名和当前 URL 的端口号。
- location.hash 设置或返回从井号 (#) 开始的 URL（锚）。
- location.hostname 设置或返回当前 URL 的主机名。
- 方法：
- location.assign(url) 在当前窗口跳转到这个url，即加载新的文档。
- location.replace(url) 在当前窗口替换成新的url。不会产生历史记录。
- location.reload() 刷新窗前窗口，即重新加载当前文档。
- location.reload(true) 不经过浏览器缓存强制从服务器重载
- window.onload
window.onload = function(){
//写在这里的代码，是整个页面加载完成以后执行
}
DOM： document object model
- 节点类型
- 元素节点 ， 例如：《div》《/div》
- 属性节点 ， 例如： id = ‘div1’
- 文本节点 ， 例如：div内的文本
- 元素节点的获取01
- document.getElementById(id);
- node.getElementsByTagName(标签名);
- node.getElementsByClassName(class名字); （IE8以下不兼容）
- document.getElementsByName(name属性的值); （一般使用在表单元素里）
- 元素节点的获取02
- 参数：字符串 CSS选择器格式字符串。例如："#ID名"或".类名"或"标签名"或“#id li”
- document.querySelector() ； 返回值：一个元素节点，找到符合条件的第一个元素节点。
- document.querySelectorAll() ； 返回值：返回值，是一个伪数组。
- 获取当前有效的元素样式（即最终呈现的样式）
- 节点名.style.属性名的方式只能访问内联的css样式。
- 节点名.currentStyle[“属性名”] ； //IE兼容该方法
- getComputedStyle(节点名)[“属性名”] ；//火狐、谷歌该方法
/*
设置样式
.style.xxx方式设置css样式。
*/
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
oDiv.style.backgroundColor = 'orange';
oDiv.style.height = '500px';
}
- 其他：
- setAttribute() 支持自定义属性
- getAttribute()
- removeAttribute()
- attributes 获取当前元素节点上的所有的属性节点
- innerHTML 获取标签间内容，会解析标签
- innerText 获取标签间纯文本，不会解析标签，设置纯文本
- outerHTML 从外标签开始到外标签结束 会解析标签
- childNodes 访问当前节点下所有的子节点
- firstChild 访问子节点中的首位
- lastChild 访问子节点中的最后一位
- nextSibling 访问当前节点兄弟节点中的下一个节点
- previousSibling 访问当前节点兄弟节点中的上一个节点
- 【注】上述5个属性都包含文本节点，即标签内的内容。
- 【注】下述5个方法只获取子节点中的元素节点，即标签内的内容不计算在内。
- 【注】获取当前节点的父节点通过parentNode获取。
- children
- firstElementChild
- lastElementChild
- nextElementtSibling
- previousElementSibling
nodeType nodeName nodeValue
元素节点 1 标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本内容
用法：
oDiv.childNodes[1].nodeValue
oDiv.childNodes[0].nodeName
//以下两行效果一样
oDiv.attributes["title"].nodeValue （推荐使用√ ，简洁）
oDiv.attributes.getNamedItem("title").nodeValue
集合：1.无序 2.不重复.
var oDiv = document.getElementById("div1");
//oDiv.title 与 oDiv.getAttribute("title") 效果一样，都是获取div1中属性为title的值
//class的访问
//oDiv.className 与 oDiv.getAttribute("class") 效果一样
//oDiv.className = 'box4' 与 oDiv.setAttribute("class", 'box4') 效果一样
oDiv.className = ''; class属性还存在，只是类名置空
oDiv.removeAttribute("title"); class属性直接移除
oDiv.innerHTML = "hello world
"
- 节点操作
- createElement()
格式：document.createElement()
参数：标签名
返回值：创建好的这个节点 - appendChild()
格式：node1.appendChild(node2);
功能：将node2节点插入到node1节点子节点的末尾 - createTextNode()
格式：document.createTextNode(文本);
功能：创建文本节点(纯文本) - insertBefore()
格式：box1.parentNode.insertBefore(box2, box1);
功能：将box2添加到box1的前面 - replaceChild()
格式：box1.parentNode.replaceChild(box2, box1);
功能：用box2节点将box1节点替换掉。 - cloneNode()
格式：node.cloneNode()
格式2：node.cloneNode(true); 克隆节点本身和子节点
返回值：克隆出来的新节点 - removeChild()
格式：box.parentNode.removeChild(box);
功能：将box节点从页面上删除 - document.write()
【注】会覆盖页面上原有的内容。 - offsetWidth
- offsetHeight
- offsetLeft
- offsetTop
- createElement()
//使用格式：
oDiv.offsetWidth //width + border + padding
oDiv.offsetLeft //眼睛能看到实际距离第一个有定位的父节点的距离。
Event (事件)
- 绑定事件：①内联模式 ； ②外联模式/脚本模式（使用最多√）
- 绑定事件格式：
- 元素节点.on + 事件类型 = 匿名函数
- 系统会在事件绑定一旦完成的时候，生成一个事件对象。
- 触发事件的时候，系统会自动去调用事件绑定的函数。将事件对象当做第一个参数传入。
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(ev){
//事件对象获取的方式，固定写法。即兼容了所有浏览器
var e = ev || window.event;
alert(e);
}
}
- 事件类型的种类：
- 鼠标事件（可以绑定在任意的元素节点上）
- click ：单击触发
- dblclick ：双击触发
- mouseover ： 鼠标移入触发 //【注】经过子节点会重复触发
- mouseout ：鼠标移出触发 //【注】经过子节点会重复触发
- mousemove ：鼠标移动触发（会不停的触发）
- mousedown ：鼠标按下触发
- mouseup ：鼠标抬起触发
- mouseenter ：鼠标移入触发 //【注】经过子节点不会重复触发。IE8以后才有
- mouseleave ：鼠标移出触发 //【注】经过子节点不会重复触发。IE8以后才有
- 键盘事件（表单元素，全局window）
- keydown ： 键盘按下触发（如果按下不放手，会一直触发）
- keyup ： 键盘抬起触发
- keypress ： 键盘按下触发（只支持字符键）
- HTML事件
- window事件
- load ： 当页面加载完成以后会触发
- unload ： 当页面解构的时候触发(刷新页面，关闭当前页面)，只有IE浏览器兼容
- scroll ： 页面滚动
- resize ： 窗口大小发生变化的时候触发
- 表单事件
- blur ： 失去焦点
- focus ： 获取焦点
- select ： 当我们在输入框内选中文本的时候触发
- change ： 当我们对输入框的文本进行修改并且失去焦点的时候
- 以下两种必须添加在form元素上，即 submit 和 reset
- submit ： 当我们点击submit上的按钮才能触发
- reset ： 当我们点击reset上的按钮才能触发
- window事件
- 鼠标事件（可以绑定在任意的元素节点上）
- 事件对象的属性
- target
- 目标对象/触发对象 （即鼠标点击的对象是哪个元素）
- 【注】这个事件是由谁而起的。
- IE8以下不兼容 window.event.srcElement；
- this 永远指向当前函数的主人。
- 常用：(node)target.innerHTML / (node)target.nodeName / target.parentNode
- button
- 返回值：
- 0 表示按下左键
- 1 表示按下滚轮
- 2 表示按下右键
- 返回值：
- 获取当前鼠标位置：(计算时选择的原点位置不同)
- clientX 、clientY ：原点位置：可视窗口的左上角为原点
- pageX 、pageY ： 原点位置：整个页面的左上角(包含滚出去的滚动距离)
- screenX 、screenY ： 原点位置：电脑屏幕的左上角
- 四个修改键属性：
- shiftKey ， 如果按下shift键，值就是true，否则是false。
- ctrlKey ， 如果按下ctrl键，值就是true，否则是false。
- altKey ， 如果按下alt键，值就是true，否则是false。
- metakey ， （windows键 mac电脑下command键）
- keyCode 和 which
- 键码：只在keydown下支持。
- 【注】不管是在大写字母还是小写字母的情况下，返回的统一都是大写字母的ASIIC码值。
- charCode 和 which
- 字符码: 只在keypress下支持
- 【注】区分大小写，并且按下的时候返回当前按下这个键的ASCII码值。
- target
//使用方法，获取事件对象.属性访问，上同
document.onmousedown = function(ev){
var e = ev || window.event;
alert(e); // [object MouseEvent] ,即鼠标事件对象
alert(e.button);
alert(e.clientX + ", " + e.clientY);
alert(e.pageX + "," + e.pageY);
alert(e.screenX + ", " + e.screenY);
}
oBtn.onkeydown = function(ev){
//事件对象获取的方式，固定写法。
var e = ev || window.event;
alert(e); //[object KeyboardEvent] ，即键盘事件对象
}
//即：根据元素节点.方法来判断返回什么事件的对象。
//键盘键位
document.onmousedown = function(ev){
var e = ev || window.event;
if(e.shiftKey){
alert("按下了shift！");
}
}
//键码和字符码
window.onkeydown = function(ev){
var e = ev || window.event;
// alert(e.keyCode);
// alert(e.which);
var which = e.keyCode || e.which;
alert(which); //回车=13
}
window.onkeypress = function(ev){
var e = ev || window.event;
var which = e.charCode || e.which;
alert(which);
}
//target 和 this
//html布局
- 1111
- 2222
- 3333
//JS逻辑
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
//当点击第一个li时
alert(this.tagName); //显示：UL
alert(target.innerHTML); //显示：1111
}
- 事件监听器
- 传统事件绑定
- 重复添加，覆盖
- 不能精确的删除事件上的某一个函数
- 事件监听器（低版本IE浏览器下不兼容）
- addEventListener()
- 格式：node.addEventListener(“click”，show，false);
- 参数：
第一个参数： 事件类型
第二个参数： 绑定函数
第三个参数： 布尔值为 true 事件捕获 ， 为 false 事件冒泡 （默认冒泡）
- removeEventListener()
- 格式：node.removeEventListener(“click”，show);
- 参数：
第一个参数： 事件类型
第二个参数： 要删除的函数名字
- addEventListener()
- 传统事件绑定
/* 事件监听器的兼容
attachEvent()和 detachEvent()
*/
function addEvent(node, evenType, funcName){
if(node.addEventListener){
node.addEventListener(evenType, funcName, false);
}else{
node.attachEvent("on" + evenType, funcName);
}
}
function removeEvent(node, eventType, funcName){
if(node.removeEventListener){
node.removeEventListener(eventType, funcName);
}else{
node.detachEvent("on" + eventType, funcName);
}
}
正则表达式
- 创建正则表达式：（三种方式）
- 通过new RegExp(参数1，参数2)声明
- 第一个参数：正则表达式的主体，/字符串/，即原来的引号变成了斜杠
- 第二个参数：修饰符。 （修饰符没有顺序）
- i：忽略大小写。
- g：全局匹配。
- m：换行匹配。【如果在字符串中遇到换行，重新计算行首】
- 可以省略new声明，即var reg = RegExp;
- 通过常量赋值，即var reg = /hello/ig
- 通过new RegExp(参数1，参数2)声明
- 正则表达式对象的两个方法：
- test()
- 格式：正则.test(字符串)
- 功能：在字符串中匹配这个正则是否存在
- 返回值：如果匹配成功返回true，匹配失败返回false。
- exec()
- 格式：正则.exec(字符串)
- 功能：在字符串中匹配这个正则是否存在
- 返回值：返回匹配到的串，
匹配成功，返回一个装有字符串的数组，
匹配失败，返回null。
- test()
var str = "how aRe you";
var box = /are/i;
alert(box.test(str)); //true
alert(box.exec(str)[0]); //aRe
- 字符串的方法（注意：使用时和正则对象的方法相反）
- match()
- 格式：字符串.match(正则)
- 功能：在字符串匹配是否有符合正则表达式，
- 返回值：匹配成功，返回装有匹配到子串的数组；匹配失败，返回null。
- replace()
- 格式：字符串.replace(oldStr/正则, newStr);
- 功能：用newStr将oldStr替换，
- 返回值：替换成功的新字符串。
- split()
- 格式：字符串.split(分割符/正则);
- 功能：用分割符将原字符串进行分割，
- 返回值：分割剩下的子串组成的数组。
- search()
- 格式：字符串.search(子串/正则);
- 功能：找到符合条件的子串第一次出现的位置，
- 返回值：如果找到，返回 >=0 的下标 ； 否则，返回 -1
- match()
var str = "how are Are ARE you";
alert(str.search(/are/ig));
var arr = str.split(/are/i);
alert(arr);
var newStr = str.replace(/are/ig, "*");
alert(newStr);
var box = /arex/ig;
alert(str.match(box));
- 正则元字符
- 元字符：在正则表达式中有特殊含义的字符。
- 单个数字和字符的元字符：
- . ： 匹配单个的任意字符
- [ 0-9 ] 或简写为：\d ： 匹配单个0到9的数字
- [ a-zA-Z0-9_ ] 或简写为：\w 匹配单个的数字、字母和下划线
- [ ^0-9 ] 或简写为：\D 匹配任意一个非数字字符
- \w ： 匹配单个的数字、字母下划线 ，等价于 [a-zA-Z0-9_]
- \W ： 匹配单个非数字、字母下划线
- \d ： 匹配单个数字 等价于 [0-9]
- \D ： 匹配单个非数字 等价于 [^0-9]
- 空白字符：
- \s ： 匹配任意单个的空白字符
- \S ： 匹配任意单个非空白字符
- 重复字符： 如 x（任意的单个字符）
- x? ： 匹配0个或者1个x
- x+ ： 匹配至少一个x字符
- x* ： 匹配任意个x字符
- x{m,n} ： 匹配至少m个，最多n个x字符，包括n
- x{n} ： 必须匹配n个x字符
- (xyz)+ ： 小括号括起来的部分是当做单个字符处理
- 锚字符：
- ^ ： 行首匹配 必须以这个正则开头
- $ ： 行尾匹配 必须以这个正则结尾
- 替代字符： |
//匹配成功返回true，否则返回false
var str = "goo12le";
var box = /goo\d{2}le/;
alert(box.test(str)); //true
var str = "googabcabcabcle";
var box = /goog(abc)+le/;
alert(box.test(str)); //true
var str = "goog\nle";
var box = /goog\sle/;
alert(box.test(str)); //true
var str = "google";
var box = /^google$/;
alert(box.test(str)); //true
var str = "google";
var box = /google|baidu|bing/;
alert(box.test(str)); //true
// 将每行开头第一个数字换成*
var str = "1、ba13idu\n2、go33ogle\n3、b12ing";
var box = /^\d/gm;
alert(str.replace(box, "*"));
ES6
class(类) 和 extends(继承)
- ES6之前定义类的方式（通过构造函数）
//父类
function Person(name, sex, age){
this.name = name;
this.sex = sex;
this.age = age;
}
Person.prototype.showSelf = function(){
alert(`我是一个叫${this.name},今年${this.age}岁的${this.sex}孩`);
}
//子类
function Worker(name, sex, age, job){
//1、构造函数的伪装 -- 继承父级的属性
Person.call(this, name, sex, age); //继承父类(Person)的属性
this.job = job; //子类自己另外的属性
}
//2、原型链 继承父一级的方法
//<1>通过for...in遍历继承
for(var funcName in Person.prototype){
Worker.prototype[funcName] = Person.prototype[funcName];
}
//<2>Object.create()
// Worker.prototype = Object.create(Person.prototype);
//<3>调用构造函数继承
//Worker.prototype = new Person();
Worker.prototype.showJob = function(){ //添加子类自己另外的方法（即多态，与父类的区别）
alert("我的工作是" + this.job);
}
var w1 = new Worker("阿呆", "男", 23, "攻城狮");
w1.showSelf();
w1.showJob();
- ES6的Class语法：
//ECMA6class语法
class Person{
//class属性添加
constructor(name, sex, age){
this.name = name;
this.sex = sex;
this.age = age;
}
showSelf(){
alert(`我是一个叫${this.name},今年${this.age}岁的${this.sex}孩`);
}
}
var p1 = new Person("JerryBro", "男", 18);
p1.showSelf();
//extends 继承
class Worker extends Person{
constructor(name, sex, age, job){
//1、继承到父一级的属性
super(name, sex, age);
this.job = job;
}
showJob(){
alert("我的工作是" + this.job);
}
}
var w2 = new Worker("阿花", "男", 20, "攻城狮");
w2.showSelf();
w2.showJob();
关键字
- var【ES6之前的】
- 关键字用来声明变量；
- 将变量或者形参所在函数的大括号作为作用域处理。
- let
- 关键字用来声明变量；
- 只要遇到大括号就形成作用域；如：if{ },switch{ }
- let 关键字声明的变量，所在作用域叫做块级作用域。
- const
- 关键字用来声明常量；
- 一旦声明变量，就没有办法改，即常量
function show(){
var num = 10;
alert(num);
}
show(); // 10
alert(num); //报错，即函数外部访问不到函数内声明的num
if(1){
var num = 10;
}
alert(num); // 10
if(1){
let num = 10;
alert(num);
}
alert(num); // 报错，num访问不到
//若将let 改成 var i = 0，则点击每个按钮都输出的是i循环结束后的值，
//因为在点击按钮时(即页面已经渲染好了)，代码已经执行完成，
// i 是退出循环后的值，固显示的 i 都一样
//这里的每个按钮被点击，都会显示对应被赋予的 i 值。
//即函数执行了5遍，每遍的 i 值都不同，因为let定义的 i 是块级作用域，
//只能访问每个函数下对应的 i
var aBtns = document.getElementsByTagName("button");
for(let i = 0; i < aBtns.length; i++){
aBtns[i].onclick = function(){
alert(i);
}
}
箭头函数
- 箭头函数：新潮的函数写法。【仅仅是写法变了，效能上然并软，且不易阅读】
- 省略了函数中的function和return关键字
- 箭头函数，不能用new
- 箭头，如果返回值是一个对象，一定要加()
- 箭头函数中的 this ，指向的是上一层函数的主人
- 适合使用箭头函数的地方：
- 结合ES5数组的方法混合使用，尤其是只带 1 个参数，且有返回值的方法。
比如：数组的 filter() 、 map()
- 结合ES5数组的方法混合使用，尤其是只带 1 个参数，且有返回值的方法。
function add(x){
return x + 10;
}
//上述正常函数改成箭头函数表示：
var add = x => x + 10;
alert(add(5)); //15
/*
各种形式的箭头函数
*/
//1、无参数，无返回值
function show(){
alert("hello world");
}
var show = () => {
alert("hello world");
}
//2、有一个参数，无返回值
function xxx(num){
alert(num);
}
var xxx = num => {
alert(num);
}
//3、有一个参数，有返回值
function add(x){
return x + 10;
}
var add = x => {
//代码
return x + 10;
};
//4、多个参数，有返回值
function show(x, y){
alert(x + y);
}
var show = (x, y) => {
alert(x + y);
}
/*
箭头函数结合ES5数组的 filter 和 map 方法
*/
var arr = [10, 20, 30, 40, 50];
var newArr = arr.filter(function(item){ //正常写法
return item > 20;
});
var newArr = arr.filter(item => item > 20); //箭头函数写法，比较简洁
alert(newArr); //30，40，50
var newArr = arr.map(item => item * 1.3); //箭头函数写法，比较简洁
alert(newArr); //13,26,39,52,65
function show(){ //正常写法，return返回对象
return {
username: 'xxx'
}
}
var show = () => ({ //箭头函数写法，return返回对象，则要在{}外面包上(括号)
username: '小鱼儿'
});
var test = show();
alert(test.username); //小鱼儿
var person = {
username: "钢铁侠",
/* show: function(){
alert(person.username);
alert(this.username);
} */
show: () => {
alert(person.username); //钢铁侠
alert(this); //指向的是上一层函数的主人，而不是person
}
}
//注意这里的this不是指向person，而是上一层，即这里的上一层是Window
person.show(); //[object Window]
解构
- 格式： 中括号解构 [ ] 、 大括号解构 { }
- 使用解构的好处：
- 交换两个数，更简洁
- 函数可以返回多个值
- 函数定义的参数和传入参数的顺序可以改变，且参数可以带默认值
- 可以快速取出数组中的某一个元素
var x = 10, y = 20, z = 30; //一般定义变量
var [x, y, z] = [10, 20, 30]; //中括号解构定义变量
alert(x + ", " + y); // 10，30
var [x, [a, b], y] = [10, [20], 40];
alert(a + ", " + y); //20，40
alert(b); //Undefined
var {name, age, sex} = { //大括号解构
age: 18,
name: "小鱼儿",
};
alert(name); //小鱼儿
alert(age); //18
var [x, y] = [10, 20];
[x, y] = [y, x]; //快速交换x，y的值
alert(x + ", " + y); //20 ，10
function show(){ //能有多个返回值
return ["结果1", "结果2", "结果3"];
}
var [a, b, c] = show();
alert(a + ", " + c); //结果1，结果3
//参数可以带默认值，不传该参数即为默认值
function showSelf({name, age, sex = "男"}){
alert("我叫" + name + "，今年" + age + ",是一位" + sex + "性");
}
showSelf({ //调用函数，传入对象参数，只要键值对应即可，参数顺序可以改变
age: 18,
name: "小鱼儿",
sex: "男"
})
集合 （不重复 且 无序）
- Set （键 和 值 相同）
- Map （键 和 值 不同）
let imgs = new Set();
//添加元素
imgs.add(100);
imgs.add(100);
imgs.add("hello");
imgs.add("hello");
imgs.add(true);
imgs.add(new String("world"));
imgs.add(new String("world"));
//重复的只存一个，new String()产生的地址不同，因此会存两个String
console.log(imgs); // {100, "hello", true, String, String}
/*
集合遍历
for(...of...) 遍历集合
*/
for(let item of imgs.keys()){
console.log(item);
}
for(let item of imgs.values()){
console.log(item);
}
//每项item返回都是Array，存放了键和值都相同
for(let item of imgs.entries()){
console.log(`每一项：${item} ,key：${item[0]} , value：${item[1]}`);
}
//数组变集合
var set = new Set([10, 20, 30, 40, 50, 40, 30, 20, 10]);
console.log(set); //Set(5) {10, 20, 30, 40, 50},可通过遍历取出
//集合变数组 将Set的数据结构展开成数组
var arr = [...set];
alert(arr); //10，20，30，40，50
var arr = [10, 20, 30, 40, 50, 40, 30, 20, 10];
//数组去重，先将数组转成Set(即不能出现重复的)，再转回数组从而实现
arr = [...new Set(arr)];
alert(arr); //10，20，30，40，50
/*
map映射
*/
let map = new Map();
//添加数据
map.set("张三", "苹果");
map.set("李四", "香蕉");
map.set("王五", "菠萝");
map.set("李四", "橘子"); //后面的覆盖前面存在相同的Key
console.log(map); //Map(3) {"张三" => "苹果", "李四" => "橘子", "王五" => "菠萝"}
//取值01
alert(map.get("李四")); //橘子
//取值02
for(let [key,value] of map){
console.log(key,value);
}
字符串 （反引号 ``）
- 传统字符串：所有单引号，双引号括起来的都叫做字符串。
- ECMA6字符串：反引号 ``
- ECMA6字符串，想怎么写怎么写，换行，代码缩进，都能在字符串中体现出来
- 格式： ${变量/表达式/函数调用}
function showSelf({name, age, sex = "男"}){
// alert("我叫" + name + "，今年" + age + ",是一位" + sex + "性");
alert(`我叫${name},今年${Math.max(age, 20, 30)}岁,是一位${sex}性`);
}
showSelf({
age: 18,
name: "小鱼儿",
sex: "男"
})； // 我叫小鱼儿,今年30岁,是一位男性
新增数组方法
- Array.from(传入伪数组) ： 将伪数组转成真数组
- find()
- 格式：数组.find();
- 功能：在数组中查找符合条件的元素，只要找到第一个符合条件的元素，就终止遍历。
- 返回值：找到的元素。
- findIndex()
- 格式： 数组.findIndex();
- 功能：在数组中查找符合条件的元素，只要找到第一个符合条件的元素，就终止遍历。
- 返回值：找到的元素的下标。
- copyWithin()
- 格式： 数组.copyWithin();
- 功能：从第一个参数的数组下标开始(包括)往后替换值
- 第一个参数：从哪个下标开始
- 第二个参数 和 第三个参数是：范围 [start, end) , 即包左不包右
var arr = [10, 20, 30, 40, 50];
var res = arr.find(function(item, index, arr){
//查找条件
return item > 20;
})
alert(res); //30
//将上式改成箭头函数表示
alert(arr.find(item => item > 20)); //30
alert(arr.findIndex(item => item > 20)); //2
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.copyWithin(2, 4, 9); //从3(即数组下标2)开始替换5个数：5，6，7，8，9(即数组下标4，5，6，7，8)
alert(arr); //1,2,5,6,7,8,9,8,9,10
Object.assign 合并对象 （关于深浅拷贝）
- 功能： 将所有传入的对象，都合并到第一个对象中。
- 【注意】：第一层是深拷贝(复制)，第二层是浅拷贝(拷贝地址，会随着地址内容改变)
- 浅拷贝 : 只拷贝地址 （即不是直接复制的，拷贝对象的地址内容改变会随着改变）、引用类型赋值实现的是浅拷贝
- 深拷贝 : 将复合数据类型重新生成一份，进行拷贝（即全部原模原样的拷贝一份）
var obj1 = {
a: 10
}
var obj2 = {
b: 20,
c: 30
}
var obj3 = {
d: 40,
f: ["hello", "world", true]
}
Object.assign(obj1, obj2, obj3);
console.log(obj1); //{a: 10, b: 20, c: 30, d: 40, f: Array(3)}
obj2.b = 100;
console.log(obj2); //{b: 100, c: 30} ,即b的值改变了
//第一层是深拷贝(即复制)
console.log(obj1); //{a: 10, b: 20, c: 30, d: 40, f: Array(3)}
obj3.f.push("xxx"); //第二层浅拷贝(即会随原拷贝对象地址内容而改变)
console.log(obj3); //其中 f: (4) ["hello", "world", true, "xxx"]
console.log(obj1); //其中 f: (4) ["hello", "world", true, "xxx"]
面向对象
- 面向对象： 继承、封装(封装构造函数)、多态。
- 面向对象是一个编程思想，支撑面向对象编程思想的语法是类(ECMA6之前没有类这个概念)和对象，构造函数充当类的角色。构造函数和对象实现面向对象程序的时候，体现出 继承、 封装、 多态的特点。
prototype(原型)
- prototype： 原型对象
- 概念：每一个函数上，都有一个原型对象prototype
- 用在构造函数上，可以给构造函数的原型prototype，添加方法
- 如果我们将方法添加到构造函数的原型prototype对象上，构造函数构造出来的对象共享原型 上所有的方法。
var arr1 = [10, 20, 30, 40, 50];
var arr2 = [1, 2, 3, 4, 5];
Array.prototype.sum = function(){
var res = 0;
for(var i = 0; i < this.length; i++){
res += this[i];
}
return res;
}
alert(arr1.sum()); //150
alert(arr2.sum()); //15
alert(arr1.sum == arr2.sum); //true
闭包
- 概念：
- 1、函数嵌套函数
- 2、内部函数引用外部函数到的变量或者形参
- 3、被引用的变量或者形参就不会被垃圾回收机制所回收，常驻内存。
- 闭包的好处：
- 1、将一个变量常驻在内存当中
- 2、避免全局变量的污染
- 3、声明私有变量
- 【注】应该避免声明全局变量，避免全局变量的污染。即不要出现同变量名
/*
回顾垃圾回收机制：函数作用域（结果）
*/
function show(num1){
var num2 = 20;
alert(num1 + ", " + num2);
}
show(10); //10，20
alert(num1); //报错num1未定义，访问不到num1这个变量
//使用闭包写法
function aaa(num1){
var num2 = 20;
function bbb(){
alert(num1 + ", " + num2);
}
return bbb; //将函数bbb()返回，即bbb()这个函数能够使用到aaa() 函数的实参和形参
}
var ccc = aaa(10); //函数bbb()
ccc(); //10，20
/*
问题：a要进行累加，并且不能声明为全局变量。
解决：使用闭包
*/
function show(){ //不用闭包，每次调用show()都是新的函数a输出都为3
var a = 2; //局部变量
a++;
alert(a);
}
show(); //3
show(); //3
function aaa(){
var a = 2; //私有变量
function bbb(){
a++;
alert(a);
}
return bbb;
}
var ccc = aaa();
ccc(); //3
ccc(); //4
alert(a); // a is not defined */
立即执行函数
//第一种：声明函数
function show(){
alert("hello world");
}
//第二种：声明函数
var show = function(){
alert("hello world");
}
show(); //但都是要调用函数，代码长
//立即执行函数：直接调用声明的函数
(function(){
alert("hello world");
})();
闭包内存泄漏
/*
内存泄漏
低版本IE浏览器。
*/
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onclick = function(){
alert(oDiv.id);
}
//解决办法：刷新或关闭页面时，将获取变量置null
window.onunload = function(){
oDiv.onclick = null;
oDiv = null;
}
}
闭包实战中的使用
//使用循环给元素都添加点击事件
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
for(var i = 0; i < aBtns.length; i++){
//方法1： 每个元素都加一个index属性并赋予当前 i 值
aBtns[i].index = i;
aBtns[i].onclick = function(){
alert(this.index);
}
//方法2-1：用闭包写，返回函数
aBtns[i].onclick = (function(index){
return function(){
alert(index);
}
})(i);
//方法2-2：闭包拆开写，比较好理解
aBtns[i].onclick = btnClick(i);
}
//方法2-2：闭包拆开写，比较好理解
function btnClick(index){
return function(){
alert(index);
}
}
}
cookie
- 概念：
- 可以设置过期时间
- 最大可以存4KB
- Cookie会发送到服务器端，存储在内存中；Storage只存储在浏览器端
- 每一个域名下面最多可以存储50条数据(不同的浏览器，有偏差)
- 【注】只能字符串。一般只存储一些重要的信息。如：登录，购物车信息，是否点赞，视频播放进度等。
- cookie的语法
- 格式：name=value;[expires=date];[path=path];[domain=somewhere.com];[secure];
- name : 键 ， value ：值 (自己定义设置)
- expires：过期时间
- （=后面必须填写日期对象Date、系统会自动清除过期的cookie。）
- path ： 限制访问路径
- 如果不去设置，默认是加载当前.html文件的路径
- 设置的cookie的路径，和加载当前文件的路径，必须一致，如果不一致，cookie访问失败。
- domain 限制访问域名
- 如果不去设置，默认是加载当前.html文件的服务器域名/ip
- 如果加载当前文件域名和设置的域名不一致，设置cookie失败。
- secure
- 如果不设置，可以通过http协议加载文件设置，也可以通过https协议加载文件设置
- 设置这个字段以后，只能通过https协议加载cookie.
- https 证书认证协议 （即注册过的、安全的）
- 【注】后续中括号的内容（中括号是我加的），都是可选项。
- 【注】火狐支持本地加载的文 件缓存cookie，谷歌只支持服务器加载文件缓存cookie
- 格式：name=value;[expires=date];[path=path];[domain=somewhere.com];[secure];
- 方法：
- encodeURIComponent ： 将中文编译成对应的字符
- decodeURIComponent ： 将对应的字符编译成中文
localStorage(IE8以下不兼容)
- 本地存储技术：
- 永久存储
- 最大可以存储5M 客户端的一个微型数据库
- 只能存储string
- localStorage 对象的方法：【注：参数都是字符串格式】
- localStorage.setItem(name, value);
- localStorage.getItem(name);
- localStorage.removeItem(name);
localStorage.setItem("a", "1"); //存储方式1
localStorage.b = '2'; //存储方式2
localStorage["c"] = "3"; //存储方式3
alert(localStorage.getItem("b"));
alert(localStorage.c);
alert(localStorage['a']);
localStorage.removeItem("a");
sessionStorage（结合后台使用）
ajax
- 已拦截跨源请求：同源策略禁止读取位于 https://api.asilu.com/weather/ 的远程资源。
（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’） - 同源策略：
- 1、同协议
- 2、同域名/同IP
- 3、同端口号
- 跨源（跨域）的方式：
- 1、修改ajax同源协议(不建议)
- 2、后台操作
- 3、JSONP
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open("get", "https://api.asilu.com/weather/", true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
}
JSONP跨域
- JSONP跨域的使用流程：
- 1、先去声明一个函数，这个函数有一个形参，这个形参会拿到我们想要下载的数据，使用这个参数做后续数据的处理。
- 2、在需要下载数据的时候，动态创建script标签，将标签src属性设置成，下载数据的链接。
- 3、当script插入到页面上的时候，就会，调用已经封装好的函数，将我们需要的数据传过来。
常用的方法
- setTimeout(参数1，参数2） 定时器
- 第一个参数：传入函数或匿名函数(直接写参数里)，写要做的事情
- 第二个参数：传入时间，单位是毫秒。即每多少时间执行一次。
- clearTimeout(传入要关闭的定时器变量）
var timer = setTimeout(function(){
alert("hello world");
}, 4000);
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
clearTimeout(timer);
}
}
注意点
- 可以有多个script标签，多个script标签是自上而下顺序执行
- 一个script标签只能专心的做一个事情
//会执行demo.js的代码，但是
this关键字
- 概念：
- 只要封装函数，任何一个函数系统都会内置一个叫做this的变量。
- this变量存储的是地址，是当前函数主人的地址。
- this永远指向当前函数的主人。函数的主人要通过当前上下文去判断。
- this指向当前函数的主人。this 容易混乱的部分：1、事件绑定 ； 2、定时器
this类似于现实生活中，用到的"我"。
- 常见this,一般情况下是下面三种情况：
//1、全局函数
function show(){
alert(this); //[object Window]
}
//2、this => person
var person = {
username: "钢铁侠",
show: function(){
alert(person.username);
alert(this.username);
}
}
person.show(); // 显示：钢铁侠
//元素绑定函数，this指向元素
oBtn.onclick = function(){
alert(this.innerHTML); //显示：oBtn元素的内容
}
强制数据类型转换
- call
- 格式：函数名.call();
- 参数：
第一个参数： 传入该函数this指向的对象，传入什么强制指向什么
第二个参数开始： 将原函数的参数往后顺延一位。
- apply
- 格式：函数名.apply();
- 参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数：数组 数组，放入我们原有所有的参数
- bind （预设this指向）与前面两个方法相比，置后操作
- 返回值是原来的函数
- 参数跟原来的函数一样填写，不变
function show(x, y){
alert(this);
alert(x + ", " + y);
}
show(10, 20); [object Window]
show.call("call", 20, 40); //call的使用， 显示：call
show.apply("apply", [20, 40]); //apply的使用，第二个参数传入数组（原来的参数当数组传入）
var res = show.bind("bind"); //bind方式1
res(40, 50);
show.bind("bind")(40, 50); //bind方式2，即写在一行
document.write()
- 在当前页面上输出内容【如果内容中含有标签会自动解析】
- 会覆盖页面上原有的内容。
//这里的标签被自动解析了
document.write("黑人问号脸
");
显示：黑人问号脸
遍历(数组、对象、Set、Map)
/*
数组
for循环
for...in
foreach
for...of
对象（只能用for...in）
for...in
Set ：
for...of
Map ：
for...of
*/
var arr = [10, 20, 30, 40, 50];
for(var i = 0; i < arr.length; i++){
document.write("for循环：" + arr[i] + ", " + i + "
");
}
for(var i in arr){
document.write("for...in遍历：" + arr[i] + ", " + i + "
");
}
arr.forEach(function(item, index){
document.write("forEach：" + item + ", " + index + "
");
})
//通过for...of遍历数组
for(var item of arr){
/*
item是当前遍历到的元素
*/
document.write("for...of：" + item + "
");
}
var person = {
username: "钢铁侠",
age: 20,
sex: "男"
};
for(var attr in person){
/*
attr 遍历到的对象的属性
*/
document.write("对象：" + attr + person[attr] + "
");
}
JS中的 && 和 ||
- 看下面这个例子：
- a() && b() :如果执行a()后返回true，则执行b()并返回b的值；如果执行a()后返回false，则整个表达式返回a()的值，b()不执行；
- a() || b() :如果执行a()后返回true，则整个表达式返回a()的值，b()不执行；如果执行a()后返回false，则执行b()并返回b()的值；
- JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
// 若window.sessionStorage.getItem(STORAGE_KEY)为null,则JSON.parse('{}'),将字符串'{}'转成一个对象{}
网络协议
- 计算机网络
- ISO： 7层的网络分层
- 通用： 5层的网络分层
TCP：面向连接协议
- 传输数据：
- 1、建立链接 三次握手
- 2、传输数据
- 3、断开链接 四次挥手
- 优点：
- 1、安全
- 2、准确度非常高
- 缺点：
- 1、传输效率低
- 2、耗资源
UDP：无连接协议
- 适用于对于及时性要求高，但是对于数据准确度要求不高
- 传输数据：
- 直接传，根本不管是否收到数据。
- 优点：
- 1、及时性非常高
- 2、消耗资源少
- 缺点：
- 1、不安全
- 2、准确度非常低
- 3、经常丢包