导图社区 前端交互技术
- 48
- 0
- 0
- 举报
前端交互技术
下图是一个前端交互技术的思维导图，从概述、是什么、应用场景、特点、组成、版本、后缀、引入方式、输出工具、输入工具、变量、数据类型、等几个方面作了详细的介绍。
编辑于2022-07-19 14:23:14- web
- JavaScript
- 相似推荐
- 大纲
前端交互技术
编程
概述
布兰登艾奇10天
网景+sun联合推出
ecma国际化组织
是什么
js是一门跨平台，面向对象的动态的、弱类型的、轻量级解释型 （及时编译） 脚本语言
应用场景
网页动效
开发服务器，nodejs
与用户进行交互：点击/提交信息/
前端与服务器进行连接
开发桌面端APP
开发h5
开发游戏
开发数据可视化（图表，柱状图、折线图）
特点
弱类型：不严格校验
解释型：不需要编译/及时编译，直接运行在浏览器上
基于对象：js一切皆对象/面向对象编程
事件驱动：页面中的点击，鼠标之类的操作都叫事件
单线程/异步：（单线程）一次只能做一件事、（异步）同时可以做的事情
组成
ECMAScript
DOM
BOM
版本
es5
2015之前
es6
2015--今
后缀
.js
引入方式
嵌入式
<script>js代码</script>
外部引入
<scriptsrc="./a.js"></script>
放在body结束部分，后者body后面，在页面 加载完成后，再执行js动效
输出工具
在页面中输出
document.write("11111");
在页面中弹出
alert("yes")
在控制台输出
console.log("张三123")
输入工具
prompt（）在页面中弹出带有输入框的弹窗
prompt("请输入年龄")
变量
变量是存放数据的容器
声明变量
声明单个变量
es5：var 变量名;
es6：let 变量名;
声明多个变量
var a,b,c=30;
变量的命名规范
严格区分大小写
变量名必须以下划线、$、英文字母开头（名字中也不能有其他特殊符号）余下的部分可以是任意的字母，数字，或者是_或者是$；
不能用关键字或者是保留字命名；
js有自己的命名法：
驼峰命名法：getName、getElementsByClassName
首字母大写：Function、Object
命名要有意义：
变量初始化
如果变量没有赋值，该变量的值为undifined
声明的同时赋值
var name="张三";
先声明同时赋值
varage;
age=30;
数据类型
初始数据类型/基础数据类型
引用数据类型
object
数组[]
vararr=[];
变量：存储数据的容器var name=“张三”
数组是什么？
存储大量数据的容器
引用数据类型之一
为什么要用数组？
解决存储大量数据的问题
怎么用？
数组的创建方式
隐式创建:(隐式的调用new Array( );)
var arr=[ ]; vararr=[]; console.log(arr);
实例化构造函数
var arr=new Array( ); vararr1=newArray(); console.log(arr1);
数组赋值/初始化
声明的同时赋值
vararr=[10,30,5,true,"张三"]; console.log(arr); vararr1=newArray(22,"女"); console.log(arr1);
先声明，后赋值
vararr2=[]; arr2[0]=10; arr2[1]="8"; // 中间没定义的为空值
数组访问
通过下标方式访问
语法：数组[下标]
var arr3=[666,888,999] console.log(arr3[0]); console.log(arr3[2]);
通过数组长度进行访问：
console.log(arr3.length);//3,数组长度 console.log(arr3.length-1);//2，数组的最后一个下标 // 根据下标，访问对应的值 console.log(arr3[arr3.length-1]);//999，最后一个下标对应的值 给数组的末尾添加数据， arr3[arr3.length]=60 console.log(arr3);
数组的遍历
for循环
for(var i=0;i<arr.length;i++){ console.log(i) console.log(arr[i]) }
for...in
for(var i in arr){ console.log(i) console.log(arr[i]) }
【es6】for...of
for(variofarr){ console.log(i) // 对应的是值，不是下标 }
二维数组
vara=[[1,2],[3,4],[5,6],[7,8]]; console.log(a);
排序
冒泡排序[1,16,9,20,100,40,30]
选择排序[1,16,9,20,100,40,30]
对象{}
varobj={};
基于对象
描述一些实物特征
组成
属性
方法【functon】
创建方式
隐式/字面量
{}
var obj={}
实例化
new Object
var obj=new Object（）
实例化自定义构造
new 自己声明函数
functionPerson(){ // 创建函数 } varobj2=newPerson();
实例化类
new 类
classcup{ } varobj3=newcup(); console.log(cup);
增
声明的同时赋值
var obj={ 属性名：属性值， 属性名：属性值 }
var obj= new Object（{ 属性名：属性值， 属性名：属性值 }）
先声明后赋值
对象.属性名=属性值
varrubbit={}; rubbit.name="兔子" rubbit.jump=function(){ console.log("2米") }
查
属性
对象.属性名
对象["属性名"]
当属性名是动态的变量必须用
方法
对象.方法名（）
对象.["方法名"]（）
基本不用
对象访问属性或者方法的时候，如果找不到属性返回undefined，找不到方法，就会报错
改
改属性
对象.属性名=属性值
对象["属性名"]=属性值
改方法
1.对象.方法名=新的方法
2.对象["方法名"]=新的方法
删
删除整个对象
对象=null
删除单个方法
delete 对象.属性名
delete 对象.方法名
delete ani.eat;
遍历
for...in
i属性名
键
对象[i]
值
键值对
for(var i in ani){ //ani[i] 当属性名是动态的变量，访问的属性的时候----值 // 一个键值对 console.log(ani[i]) }
对象拷贝【首先有个对象】
浅拷贝：
直接赋值，拷贝引用地址修改
直接赋值
var newobj=obj;
Object.assign(要拷贝对象)
var newobj=Object.assign(obj)
深拷贝：
在内存里面拷贝出来一个对象，修改原对象之后新对象不会修改
Object.assign({}, 要拷贝对象) 只能深拷贝第一层级
JSON.parse(JSON.stringify(要拷贝对象)) 如果有函数丢失
JSON.stringify() 将对象转换成字符串
JSON.parse() 将字符串转换成对象
递归逐层拷贝
字符串对象
字符串(String),字符串用于存储和处理文本。字符串对象是用来处理字符串
// 1.在js中单引号和双引号没有区别，都可以表示字符或字符串
//2. json格式的文件必须使用双引号
属性
length :字符串的长度
console.log(str2.length);
// 方法
str.charAt(index)
返回下标为index的子字符串;参数: 数字下标;返回值: 对应下标字符串
str.charCodeAt(0)
根据下标，返回对应下标的字符的ACSCII码
console.log(String.fromCharCode(104));
根据下标，返回对应下标的字符的ACSCII码
str.indexOf('o')
查找一个字符或者字符串在字符串中第一次出现的位置,未找到则返回-1、
// 三种截取方式
str.slice(起始下标,结束下标)
字符串截取，识别负数，跟数组相同
str.substring(起始下标,结束下标)
字符串截取，同slice方法，但不识别负数
str.substr(起始下标，截取的长度)
根据长度进行字符串截取
str.lastIndexOf('o')
倒序查找一个字符或者字符串在字符串中第一次出现的位置,返回位置，,未找到则返回-1、
str.replace("替换的内容","替换后的内容")
将指定的字符串替换，只能替换第一个
str.split('o')
以某一字符串将目标字符串分割，可用于将特定格式的字符串转化
str.toLowerCase()
将str字符串中的字符转化为小写，不修改原字符串
str.toUpperCase()
将str字符串中的字符转化为大写
str.trim()
将字符串左右空格去除，可用于接收表单数据 IE9以下不识别
// 去除空格,只能前后的空格
str.match('l')
在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
str.concat('a', 'b', 'c')
用于连接两个或多个字符串,与数组中的concat方法很象，不会修改原字符串
向字符串开头(padStart)或结尾(padEnd)添加字符，使字符串达到指定的长度。
返回在原字符串开头或末尾填充指定的填充字符串直到目标长度所形成的新字符串
// 将对象转化为字符串
// 将对象转化为字符串 var obj={ aa:"小黑", bb:"black" } console.log(JSON.parse(JSON.stringify(obj))); console.log(JSON.stringify(obj));
数组对象
属性
length: 数组中元素的个数
console.log(arr.length);
方法
arr.push();
向数组的末尾追加元素
arr.unshift(); 向数组的开头添加函数
arr.pop(); 删除末尾的元素
arr.shift(); 开头删除一个元素
arr.splice(位置，删除元素的个数，要追加的元素)
任意位置添加删除
arr.join("分隔符") 使用分隔符将数组数据隔开变为字符串
arr.concat 多个数组的连接
arr.indexOf(值); 查找某个值在数组中第一次出现的下标
arr.lastIndexOf(值); 倒叙查找某个值在数组中第一次出现的位置
arr.sort() 数组的排序
arr.forEach() 遍历数组
// 箭头函数
// 接收一个回调函数，回调函数第一个参数是 数组值
// 第二个参数是 下标
arr.filter() 过滤（根据条件筛选数组元素）
var newArr = arr.filter(function (value, index) { return value > 100; //筛选arr数组中值大于100的元素； })
arr.map() 映射 将数组中的所有数据按照条件改变，形成新数组
var k = arr5.map(function (v) { return v * 2 }) console.log(k);
arr.some() 判断 根据回调函数的判断条件来选择真假
只要有一个回调函数返回值是true，最终some结果是true
var end = arr3.some(function (value, index) { return value < 500; }); console.log(end); //true
可以只传一个值
arr.every() 判断 根据回调函数的判断条件来选择真假(与some比较记忆)
只要有一个回调函数返回值是false，最终every结果是false；
var end = arr3.every(function (value, index) { return value < 500; }); console.log(end); //false
可以只传一个值
arr.reverse() 数组倒序
Array.from 方法用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象（包括 ES6 新增的数据结构 Set 和 Map）
var obj2={ 0:"10", 1:"20", 2:"30", length:3 } console.log(Array.from(obj2));
Array.of方法用于将一组值，转换为数组。
Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组
Array.of(1, 2) // [1, 2]
arr.includes()用于检查数组是否包含某元素，包含返回true，否则返回false
var hh=arr5.includes(1) console.log(hh);
数组乱序
将数组顺序打乱：例如不重复随机选取数组内容，可将数组打乱后按顺序取出
日期对象
日期、
主要是用来处理日期和实践的
时间基准：1970-1-1开始算起
网页中需要显示年月日时分秒
需要获取当前（现在）日期
页面距离活动结束还剩xx天xx时xx分xx秒
字符串2022-5-16就是日期？不是，仅仅是字符串不是日期
创建日期
四种传参方式：
vardate1 = newDate("2022-5-5")
vardate1 = newDate("2022-5-5 12:12:12")
vardate1 = newDate("2022/5/8")
vardate1 = newDate("1999", "2", "12")
Date上的方法
● Date.now() 返回自1970-1-1 00:00:00 UTC (世界标准时间)至今所经过的毫秒数。
● Date.parse() 解析一个表示日期的字符串，并返回从 1970-1-1 00:00:00 所经过的毫秒数。
获取日期信息的方法
varyear = date.getFullYear()
varmouth = date.getMonth()
varday = date.getDate()
varhour = date.getHours()
varminutes = date.getMinutes()
vars = date.getSeconds()
varweek = date.getDay()
设置日期的方法
date.setFullYear(2020)
date.setMonth(6)
//从0开始
date.setDate(20)
date.setHours(12)
date.setMinutes(30)
date.setSeconds(6)
// 设置时间戳
date.setTime(154635132135)
console.log(date);
获取时间戳的方法
vartimestamp1 = Date.parse(newDate());
// 不推荐这种办法，毫秒级别的数值被转化为000
vartimestamp2 = (newDate()).valueOf();
vartimestamp3 = newDate().getTime();
vartimetamp4 = Number(newDate());
console.log(Date.now());
正则对象：
为什么要用？
检索字符串
替换字符串、字符串匹配、拆分
过滤内容、数据验证
创建方式
字面量创建方式：
var reg=/正则表达式/模式修正符
i不区分大小写【其次】
g全局匹配【最多】
m多行匹配
var
reg = / /
实例化构造函数：
var reg=new RegExp（）
varreg1=newRegExp()
console.log(reg1);
检测是否检索到
判断一个字符串是否满足条件 ，检索成功true，没有检索到返回false
语法：正则表达式.test（字符串）
返回检索到的字符
根据给定的正则返回第一次检索到的字符
语法： 正则.exec（字符串）
规则：
原子表
[]、匹配其中的一个字符，多个用逗号隔开
[^]、匹配除了字符以外的其他字符
[0-9]、匹配0-9任意一位数字
[a-z]、匹配a-z任意一位字母
[A-Z]、匹配A-Z任意一位字母
原子：
varreg=/\d/ \d表示0-9数字
varreg=/\D/ // 表示除了0-9数字以外
varreg=/\w/ // 匹配字母a-z
varreg=/\W/ // 匹配除了字母a-z以外
varreg=/\s/ // 匹配空格
varreg=/\S/ // 匹配空格以外的
varreg=/./ // 查找单个字符
量词：
{n}重复n次
{n，}出现 n次或者n次以上【出现次数》=n】
{n，m}出现的次数在n-m之间
{0，}==*出现0次或者无数次
{1，}==+出现一次或者无数次
(?=n)匹配后面紧跟着n的字符串
(?！n)匹配后面不紧跟着n的字符串
符号：
^以...开头
$以...结尾
|| 管道符，或者
方法
查询：字符串.search（正则）---->找到返回下标/-1
替换：字符串.replace（正则,要替换的字符）---->
分割字符串：字符串.split（正则）
对象的特性
es6属性和方法的简写
age,//前面已经声明好了，属性简写
run(){ console.log(2); }//方法简写
原型
每个对象都有自己的原型，原型也是一个对象，一个对象可以使用它原型身上的所有属性和方法
在es5中是通过构造函数来表现类的 new是用来实例化构造类得到对象的
获取某个对象原型【两种方式】
__proto__ 原本只是浏览器提供的用于方便查找对象原型的属性，并不是js语法中规定的特性
console.log(someone.__proto__);
构造函数的属性 prototype可以访问到对象的原型
//在实例化构造之前进行原型属性的添加
humen.prototype.say=function(){ console.log("定义在原型身上的say方法"); //say在humen的原型身上的say方法 } var someone=new humen() console.log(someone);
console log humen prototype );
console log someone constructor );
对象继承
new
函数 function(){}
varfn= function () {};
创建方式
1.具名函数
function 函数名（）{ 函数体 }
2.匿名函数/字面量
var 变量名=function（）{ 函数体 }
3.实例化构造函数
var 变量名= new Function（"","函数体"）
函数调用方式
1.通过括号方式调用
函数名（）
变量名（）
2.自调用：自己调用
第一种： （function（）{ }）（）；
第二种： （function（）{ }（））；
第三种： ！function（）{ }（）；
注意：自调用函数前面必须加分号 ; 结束之前的语句
3.通过事件调用
<divclass="box"onclick="fx()"></div> functionfx(){ console.log(1); }
函数名注意事项
1.函数名相同覆盖
2.具名函数在前后都能调用，而匿名函数职能在后面进行调用
3.在不同的script代码块中：不管是具名还是匿名函数，只能在后面的代码块进行调用，前面进行调用就会报错
如何进行封装：将代码放入函数中，进行调用
先写出特定功能代码
创建函数/函数调用
将特定功能的代码放在函数里面
检查函数哪些是动态的值，动态的值以参数的方式写进去
如果需要用到返回值，将结果返回
为什么要学习函数？
可以一次声明，多次使用
根据不同的参数返回不同的结果
代码简洁，方便维护
参数
根据不同的参数返回不同的结果
分类
实参：函数在调用的时候传入参数----【真实值】
形参：函数声明的时候接受收的参数----【变量】
传值
传单个值：
varfn1 =function (n){//形参接收 console.log(n); } fn1(20);//实参
传多个值：
// 可以一次传多个，且任意数据类型都可以传 varfn1 =function (n,x,y){//形参接收 console.log(n,x,y); } fn1(10,null,true);//实参
注意
参数可以是任意的数据类型
参数个数：
参数个数是一一对应的：实参==形参
形参>实参：多余的形参，为undefined
形参<实参：多余的实参
函数声明的同时会自动创建arguments对象，
arguments对象只能在函数内部使用
arguments对象存储的是所有参数的信息
arguments对象存储的是有序数列，序号叫下标
下标是从0开始的
arguments[0下标]
参数个数arguments.length
返回值
当需要对于函数的结果，进行处理的时候需要返回值
中断函数运行
详解：
函数返回值可以是任意的数据类型
任意一个函数都有返回值，如果函数没有返回值，默认返回undefined
一个函数只能有一个返回值，如果返回多个，则默认返回最后一个
什么情况下拿到函数返回值：
将函数调用赋值给一个变量，变量就是函数返回值【不赋值就是函数调用】
将函数调用输出的时候，输出的就是函数返回值
函数高级
环境
代码运行环境
宿主环境：浏览器/服务器
执行环境：
全局环境
局部环境:函数内部
作用域：
一段代码的作用范围
全局变量：在全局环境下用var声明的变量或者全局环境下的函数
局部变量：在函数内部内部声明的变量或者函数，职能在
补充：全局变量只能在后面的环境下使用，不管在什么环境，如果在声明变量之前输出undefined
作用域链：
使用变量或者函数的时候，会在当前环境中去找，当前环境找不到，回去上一个环境中找，上一个找不到再去上一个环境去找，直到找的全局环境位置为止。变量找不到报错，函数找不到也会报错
补充：
在当前环境下找的时候，如果找到了但是声明变量之前输出----undefined
变量或者函数只能在当前环境或者子环境下使用
预解析：
按照script顺序依次解析
从上到下进行解析
全局变量直接运行
函数内部程序 ：什么时候调用什么时候执行
如果全局变量/函数，提前解析到内存里面
回调函数
形参：函数声明的时候接受的参数
实参：函数调用的时候传入的参数
参数可以是任意的数据类型
实参是函数--回调函数
将一个函数当做是另一个函数的参数，这个函数叫做回调函数
递归函数
逐层递进，逐步回归，寻找规律
循环可以实现，递归一定能实现
递归可以实现的，循环不一定能实现
终止的能力
在一个函数内部调用他自己，并且必须要有一个终止条件，否则会造成堆栈溢出
function fn（）{ fn（）； }
应用场景：
数据结构与算法
编程时，对象逐层拷贝
逐层....
闭包函数
定义在一个函数内部并且可以访问外部函数中的变量或者参数
内部函数在外部函数被调用就是闭包
闭包函数特点：
函数内部嵌套另一个函数
函数内部可以访问函数外部的的变量或者参数
内部函数在外部函数被调用
区别闭包函数和回调函数
函数参数可以是任意的数据类型：如果实参是函数，是一个回调函数
函数返回值可以是任意数据类型：返回值是函数，是一个闭包函数
典型闭包函数【两种】：
一个函数内部返回另一个函数
function fn（）{ var n=10 return function aa(){ console. } } var s=fn() s()
函数内部是自调用
function fun(){ (function(){ })() }
缺点
常驻内存，增大内存的使用，使用不当很容易造成内存泄漏
一般函数在执行完成之后，内部的变量就会被垃圾回收机制回收，内存里面仅仅四保留全局变量，而闭包函数常驻内存，变量不会被销毁
好处：
闭包函数：私有成员存在【闭包函数外部不可以访问闭包函数内部的变量】
避免全局变量被污染，
内置顶层函数：
内置：ECMAScript自带的
顶层：当前 作用域的顶端 --全局变量
ECMAScript自带的全局函数
Number（） 将任意数据类型转换成数值
转不了就是 NaN
null/“”/false-->0
true-->1
"123"-->123
"123abc"-->NaN
[]-->0
{}/[1,2,3]/function(){}--->NaN
ParseInt（） 将任意数据类型转换成整数
转换不了就是 NaN
小数点转换成整数
null/true/false-->NaN
"123"/"123abc"--->123
//不会四舍五入,直接舍去
ParseFloat（） 将任意数据类型转换成浮点数
String（） 将任意数据类型转换成字符串
Boolean（） 将任意数据类型转换成布尔类型
is NaN（） 判断是否可以转换成数值，可以装换false，不可以转换返回true
eval（） 将传入的字符串当做js来执行
安全性差，需要解析速度慢，不建议使用
varh = eval("3+2*3")
console.log(h);
eval("alert(1)")
数据类型转换
强制类型转换
Number() 转换成数值类型
String() 转换成字符串类型
Boolean() 转换成布尔类型
parseInt() 将字符串转换为整型
parseFloat() 转换为浮点型
隐式类型转换：
算术运算符、关系运算符、赋值运算符、逻辑运算符、if....
null+1--->1
"12">9 -->true
null +=1
"1"==1&&true==1
// 判断一个字符串是否为空
varstr = "666"; if (str) { console.log("str is true") }
检测数据类型
变量的内存划分
堆区：引用数据类型
栈区：初始数据类型
运算符
算术运算符
关系运算符
赋值运算符
逻辑运算符
三元运算符
一元运算符
特殊运算符
流程控制
顺序结构
选择结构
循环结构
es6新增
ES新特性
区别
重复声明
变量提升
全局注册
方便创建局部变量 识别块级作用域
块级作用域：
if{}、elseif{}、{}等花括号
let能识别块级作用域
const ：声明常量，必须声明同时进行赋值，不能先声明后赋值，
初始数据类型：
数值
进制数：
16进制，Ox
8进制，Oo（es5位o）
2进制，Ob
字符串：
str=` ` 不用换行了
模板字符串方便的插入一些表达式
boolean：两个对立事件
undefined：
null：用来占位
symbol：js内部利用symbol进行值得存储
引用数据类型：
对象
(函数)、(数组)、、document、window、
document.quesrtySelect（“#aa”）
{a:1}
Math
Object
string
String.prototype
在内存中的存储方式
初始数据类型存在栈区 一个变量对于一个值
引用数据类型存在堆区 一个变量对于一个值的引用地址
赋值操作就是在进行变量值的拷贝
运算符
es5：
算术:+ - * / % ++ --
比较
:true/false > < >= <= != == ===
特殊情况:数值和字符串可以进行比较，实在比较不了返回false
两个字符串进行比较，对比每一个的ASCII码
==和===，===还要去比较其他的
赋值:= += -+ /= %=
逻辑:&&、||、！ 断路运算
假值:0、null、undefined、false、NaN、空字符串""
三元:表达式1？表达式2：表达式3
一元: 正+ 负- delete、 typeof ++ --
特殊:()
/ es6 扩展运算
// 数组扩展运算
letarr1=[1,2,3] letarr2=[4,5,6] console.log([...arr1,...arr2]);
// 对象扩展运算
letobj1={name:"小黑"} letobj2={age:3} console.log({...obj1,...obj2});
// 输出数组的最大值
letgrade=[56,66,77,98,55,86] console.log(Math.max(...grade));
// 解构赋值
// 1、= += -= *= /=、%=
// 2、实参传递给形参
// 3、函数返回(return)
// 剩余运算
let[foo,...bar]=numbers; console.log(foo); console.log(...bar);
// 两个值交换的三种方式
// 只适用于数值
// x=x+y // y=x-y // x=x-y
// 结构赋值实现交换
[x,y]=[y,x]
// 第三个变量进行交换
es6属性和方法的简写
属性简写
age,//前面已经声明好了，
方法简写
run(){ console.log(2); }
this
意义
// 1.每个函数当中都有this
//2.只有在调用的时候才有意义，this是什么，取决于调用的方式
window
普通函数调用
fn()【相当于注册到了window身上】
注意：在严格模式下是undefined【变成严格模式，在代码前加"use strict"】
匿名函数
数组方法中需要作为参数的回调函数，
setinteval/settimeout部分回调函数中
指向某个对象
对象.方法()
let obj={ say:function(){ console.log(666); } } obj.say()
构造函数去使用，this指得是最终构造出的对象
直接指定
call/apply调用函数的时候，直接指定当前这次调用this的指向
// fn.call(this的 参数，剩余参数)
// fn.apply(this的 参数，[剩余参数])
bind 在定义匿名函数的时候，直接将this的值固定为某个值
let foo=function(){}.bind(o1) foo()
setInterval function (){}. bind this参数 ), 1000
div onclick = function (){}. bind this参数
let obj2 ={ fn function (){}. bind this参数 )}
原型
每个对象都有自己的原型，原型也是一个对象，一个对象可以使用它原型身上的所有属性和方法
在es5中是通过构造函数来表现类的 new是用来实例化构造类得到对象的
//在实例化构造之前进行原型属性的添加
humen.prototype.say=function(){ console.log("定义在原型身上的say方法"); //say在humen的原型身上的say方法 }
获取某个对象原型【两种方式】
1. __proto__ 原本只是浏览器提供的用于方便查找对象原型的属性，并不是js语法中规定的特性
console.log(someone.__proto__);
2. 构造函数的属性 prototype可以访问到对象的原型
console.log(humen.prototype);
console.log(Object.getPrototypeOf(obj4)); //获取obj4的原型【第三种获取原型的方法】
面向对象
继承
概念：一个子类可以拥有父类所有的属性和方法
es5表现：一个对象可以拥有另一个对象所有的属性和方法
基于原型继承 是一种实现继承的手段
// 将someone指定为student的原型
// student.prototype=someone
基于对象冒充： 是一种实现继承的手段
function student(classname){ humen.call(this) //this指代xiaoming this.class=classname }
es6表现：真正的定义类的写法
class 类 语法糖【只是一个写法上的变化，实际没有任何区别】
class humen{ //构造函数，每个类中一定有自己的构造函数 constructor(){ this.args=2; this.legs=2; this.eyes=2; } }
子类继承父类
class student extends humen{ constructor(classname){ //先调用父类构造函数的方式，再执行自己的，避免产生冲突 super() this.class=classname } } let xiaohong=new student("2203班") console.log(xiaohong);
//在原型上加方法，可以直接写在类中
//say就是加到了humen的原型上 say(){ console.log("这是一个加到原型身上的say方法"); }
//实例化类
let someone=new humen() console.log(someone);
本地对象
object array string number boolean function Math JSON Date
1. Object
对象合并，把obj2合并到obj1中，obj1也会发生改变
let obj3=Object.assign(obj1,obj2)
基于原型obj1创建obj4
let obj4=Object.create(obj1)
给obj4添加一个test属性
Object.defineProperty(obj4,"test",{ enumerable:true, //是否可以遍历false/true configurable:true, //是否可以被重新配置 //数据描述符 value:"hello world", //当前属性值是什么 Writable:true //当前属性值是否可以被修改 })
获取对象的属性
console.log(Object.getOwnPropertyDescriptor(obj4,"test"));
获取对像自己的属性名集合，不获取 原型身上的
console.log(Object.getOwnPropertyNames(obj4));
获取身上symbol的属性
obj4[Symbol("1")]=1 console.log(Object.getOwnPropertySymbols(obj4))
console.log( obj4[Symbol("1")]);//前后两个symbol是不一样的
给对象添加一些私有的属性，每一个symbol都是独一无二的
//获取obj4的原型【第三种获取原型的方法】
console.log(Object.getPrototypeOf(obj4));
console log Object keys obj4 ));
console log Object values obj4 ));
console log Object entries obj4 ));
//可以转换成一个对象
let arr=[["name","zhangsan"],["age",20]] console.log(Object.fromEntries(arr));
//判断name是不是obj4的name自己身上的属性，是obj1的，输出false
console.log(obj4.hasOwnPropert("name"));
//obj1是不是obj4的原型
console.log(obj1.isPrototypeOf(obj4));
//2. object.prototype(原型链的终点，所有对象都可以使用的)
宿主对象
bom dom
DOM
文档对象模型
核心对象：document对象的属性，方法
console.log() 输出标签【是个值的时候用】
console.dir() 可以用来输出dom对象身上的属性和方法【标签的属性用dir】
属性
方法
操作内容
操作样式
操作属性
事件
节点
表单元素
本地存储
BOM
浏览器对象模型
根对象window-->js根对象
浏览器包含：
window浏览器窗口相关信息
定时器
【根据给定的时间间隔反复执行】
setInterval(function run() { console.log(1) }, 1000)
停止定时器
clearInterval（定时器的名字）
在给定的时间后执行一次
在指定（给定）时间后执行一次
setTimeout(function(){ console.log(1); },2000)
停止/清除定时器 【不是暂停计时器】
clearTimeout(t)
console对象
location
history
navigater
Math对象
js插件与库
数据可视化
AJAX
1.名称：Ajax 异步的javascript和xml
//Asyncnours异步的
//java Script
//and
//XML 是一种数据交换格式【可扩展标记语言】 用来进行前后台交互的数据
js的运行方式，单线程异步机制
//单线程，同一个时刻只能一件事
//异步机制
//js会将一些开销大的操作当做异步代码，其他的都是同步代码 当js程序运行的时候回先将所有的同步代码执行完成 之后再去判断有没有异步代码可以去执行，如果有就立即执行，执行完成之后，继续判断有没有异步代码可以去执行===>整个过程叫做事件循环
//2.功能：使用javascript 通过异步的方式进行前后台数据交互的技术
//3.优势：使用Ajax进行数据交互相比与传统的数据内容包含在页面中的方式 拥有更好的交互性体验 可以在不刷新不跳转网页的前提下更新页面的数据和表现
//4.如何去使用Ajax？
以前的方式
xhr.onreadystatechange=function(){ if(xhr.readyState===4){ //判断一下状态码 if(xhr.status){ //接收返回的 console.log(JSON.parse(xhr.responseTexts)); } } }
现在的方式
//实例化 // let xhr=new XMLHttpRequest()
// 配置请求 // xhr.open("请求的方法get","请求地址","是否启用同步")
//发送请求 默认是异步的 // xhr.send()
//接收结果 默认是异步接收 // xhr.onload=function(){ //接收服务器的返回值 // xhr.response // }
jQuary
是一个快速的、小型化的包含丰富内容的javascript函数库， 它通过一些方便使用的API让我们对于文档遍历和操作、事件处理、动画和Ajax更易操作，并且很好的处理了浏览器兼容性