JS知识点
前端向后台发送请求有几种方式？
- link标签的href属性
- script标签的src属性
- img标签的src属性
- ajax发送请求
- 表单提交发送请求
- a标签的href发送请求
- iframe的src属性发送请求
JaveScript数组
1.概念
a)作用--用于保存多个数据,便于对数据的使用
b)数组元素--数组中的数据
c)索引--数组中的元素按照下标(数值)的方式排列(从0 开始),依次递增(也有可能是字符串的类型--不用)
d)长度--数组中的元素个数--length
2.创建方式
a)构造函数创建方式 var arr = new Array (1,2,3);
b)字面量方式创建 var arr = [1,2,3];
c)获取指定元素 arr[index]
d)设置元素 arr[index]=要设置的值
3.length
a)与index的关系-index= length-1
b)length > 元素个数 没有意义 --会产生误导
c)length < 元素个数 后面多出的元素会被删除
d)清空数组 arr.length-0;--修改数组的元素值
arr=[];--更换为新的数组
4.数组遍历
a)使用for循环
b)反向遍历 for(var= arr.length-1; i >=0;i-- ){ 从后往前取值 };
练习:
1)将0-99之间的数放入到数组中
var arr=[];
for (var i = 0 ; i <100,i++){
arr[i]=i;
}
console.log(arr);
2)将1-100所有数放入到数组中
复制代码
var arr= [ ];
for (var i = 0 ; i<=100;i++){
arr[i-1]=i;//索引默认从0 开始,-1就是第一个索引是1
arr[arr.length]=i;
}
console.log(arr)
复制代码
3)将1-100之间的所有偶数放入到数组中
复制代码
var arr = [ ];
for (var i = 1 ; i <=100 ; i++){
if (i%2===0){
arr[arr.length]=i;
}
}
console.log(arr);
复制代码
4)求一组数中的最大值和最小值，以及所在位置（索引值）
复制代码
var arr= [ 1,5,4,33,6,67,999];
var max=arr[0];//声明变量
var min =arr[0];
var maxIndex=0;//声明索引值
var minIndex=0;
for (var i = 0 ; i <arr.length;i++){
if (max<arr[i]){
max = arr[i];
maxIndex=i;//索引值=i
}
if (min>arr[i]){
min=arr[i];
minIndex=i;
}
}
console.log(max, maxIndex);
console.log(min, minIndex);
复制代码
5)将字符串数组用|或其他符号分割
复制代码
var arr = ["abc","asd","asdqwe"];
var str =[];
var fuhao="-";
for (var i = 0 ; i < arr.length;i++){
str=str+fuhao+arr[i];
}
console.log(str);
复制代码
5.翻转数组
a)反向遍历
复制代码
var arr=["a","b","c"];
var resultArr=[];
for (var i = arr.length-1;i>=0;i++){
resultArr[resultARR.length]=arr[i];
}
console.log(arr);
复制代码
b)直接在原有数组的基础上进行翻转
复制代码
var arr=["a","b","c"];
var temp;
for (var i = 0 ; i<parseInt(arr.length/2-1);i++){
temp=arr[i];
arr[i]=arr[arr.length-1-i];
arr[arr.length-1-i]=temp;
}
console.log(arr);
复制代码
6.冒泡排序
a)基本的冒泡排序
复制代码
var arr = [1,2,6,4,9,2];
var j,temp;
for(var i = 0 ; i < arr.length-1;i++){
for (j = 0 ; j <arr.length -i -1;j++){
if (arr[j]>arr[j+1]){
temp = arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
console.log(arr);
复制代码
b)冒泡排序的优化---假设成立
1)找到不确定的点,设置假设条件
2)找到可以让假设失败的条件,设置flag=false
3)验证flag的结果
复制代码
var arr = [1,2,6,4,9,2];
var j,temp,flag;
for(var i = 0 ; i < arr.length-1;i++){
//假设是真
flag=true;
for (j = 0 ; j <arr.length -i -1;j++){
if (arr[j]>arr[j+1]){
temp = arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
//假设不成立
flag =false;
}
}
//是真--成立--跳出
if (true){
break;
}
}
console.log(arr);
复制代码
7.数组去重
a)假设成立法
复制代码
var arr = [1,2,6,4,9,2];
var j,temp,flag;
for(var i = 0 ; i < arr.length-1;i++){
//假设是真
flag=true;
for (j = 0 ; j <arr.length -i -1;j++){
if (arr[j]>arr[j+1]){
temp = arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
//假设不成立
flag =false;
}
}
//是真--成立--跳出
if (true){
break;
}
}
console.log(arr);
复制代码
b)计数法
复制代码
var arr= [1,1,1,12,2,2,234,346,5,6,78,0];
var resultArr=[];
resultArr[0]=arr[0];
var j ,count;//设置计数
for(var i = 0 ; i <arr.length;i++){
count=0;//针对arr[i]设置新的计数
for(j = 0 ; j <resultArr.length;j++){
if(resultArr[j]=arr[i]){//相等不执行
count++;
break;
}
}
if(count=0){检测count的值
resultArr[resultArr.length]=arr[i];
}
}
console.log(resultArr);
复制代码
c)循环特性--利用循环特性
//数组去重：有一个数据重复的数组，我们需要通过处理，得到一个不重复的数组
复制代码
var arr = [1, 1, 2, 3, 3, 2, 4, 5, 5, 4, 3, 2, 1];
//1 创建一个结果数组
//结果数组一定不能重复
var resultArr = [];
resultArr[0] = arr[0];
var j;
//利用循环特性的解题方式实际上通过判断循环变量和数组长度之间的关系，去检测循环的结束方式
for (var i = 1; i < arr.length; i++) {
for (j = 0; j < resultArr.length; j++) {
if (arr[i] === resultArr[j]) {
//如果找到相等的项，执行break;
break;
}
}
//在内循环结束后，检测j和resultArr.length的关系
if (j === resultArr.length) {
//说明循环正常结束,说明没有执行过跳出，意味着没有找到相等的元素，进行放入操作
resultArr[resultArr.length] = arr[i];
}
}
console.log(resultArr);
复制代码
8.数组的类型检测--复杂数据类型
a)Array.isArray([1,2,3]); 返回值--布尔 数组==true IE9以下不支持
b)[1, 2, 3] instanceof Array
c)Object.prototype.toString.call([1,2,3]);
9.简单数据类型与复杂数据类型的区别
a)保存数据个数上不同
简单--一个值
复杂--多个值
b)在内存中的保存方式
简单--具体值--值类型--保存于栈中
复杂--具体值的指向(箭头)--引用类型--保存于堆总(初学者)
c)进行复制操作是,结果不同
简单--复制前后无关联 复制粘贴
复制--复杂前后的结果是一样的 设立快捷方式
10.二维数组--数组中还有数组
var arr = [1,2,3,[4,5,6]];
遍历:
复制代码
var j ,temp;
for (var i = 0 ; i <arr.length ; i ++){
temp = arr[i];//进行保存,方便下次使用
if (temp instanceof Array){//检测是否是数组
for ( j = 0 ; j <temp.length ; j ++){
console.log(temp[j]);//是数组,打印出来
}
}else{
console.log(temp);不是数组,直接打印
}
}
复制代码
JaveScript函数
1.函数的基本使用
a)作用:代码的复用,灵活性比较强
b)声明方式:function 名 (形参){函数体}
c)调用: 名(实参);
d)封装函数--书写一个函数的结构,而且放入一些功能,在需要使用的时候直接调用函数名字
e)参数:--形参+实参
1)形参:书写在函数体的小括号,是函数内的变量,不需要声明,默认值是undefined
2)实参:书写在函数调用的小括号,用于给形参传值
3)多个参数使用逗号分隔
f)当一个函数的整体功能是一定的,但是内部的值不确定的时候,可以使用参数
g)返回值的设置
1)在函数体外使用函数的计算结果 设置返回值
2)语法: return 值;
3)接受方式:通过函数的调用,调用本身就是返回值
4)return的其他作用: 结束函数的执行--跳出函数
5)函数没有设置返回值,默认是undefined
2.作用域
a)全局变量:声明在全局作用域的变量,在任意位置都可以进行访问
b)局部变量:声明在某个局部的作用域中,只能在声明这个变量的局部作用域中访问
3.预解析
注意:与解析在每个作用域代码执行前都会发生
1)查找当前作用域中的var变量声明,将声明提升到当前作用域顶端,赋值保留在原地;
2)查找当前作用域中的function函数声明语句,将函数整体提升到当前作用域顶端,调用保留
注意:
1)全局作用域的预解析在页面加载的时候执行
2)局部作用域的预解析在调用时进行执行
不规则的声明方式:
1)单个变量--不加var
2)多个变量--连续赋值 var n1=n2=n3=1;
4.变量的访问规则--作用链域的访问规则
1)在当前作用域查找,找到--使用
2)没有找到--查找上级作用域,找到--使用
3)依次往复
4)到全局作用域后,使用方式不同,结果不同
a)取值--直接报错
b)赋值--声明一个全局变量
5.参数的值传递--实参给形参传值的方式--采用值传递(复制)方式
a)实参为复杂数据类型时,函数的功能那个是内部直接处理实参数据,不需要设置返回值
b)接收的返回值数组和原数组实际上还是同一个数据的时候,没有必要接收
注意: 封装函数用于计算任意数组中的和---设置返回值
封装函数对数组进行排序,不需要设置返回值
6.函数的多种声明方式
1)函数声明语句 function 名( ){ }
2)函数表达式 var fun= function (){}
函数表达式是在预解析阶段参与的是变量提升的规则,所以无法再声明之前进行调用操作
7.匿名函数的使用--没有函数名的函数 --无法单独使用 function( ){ }
用法:
a)将匿名函数保存在变量中做为函数表达式使用 var fun = function( ){ }
b)做为自调用函数的形式使用 (function(){ 函数体--只能在书写的位置执行一次})(调用)
作用:
1)用于包裹作用域降低变量名的难度
2)提高变量访问时的访问效率
3)JS高级--给每个功能套用一个自调用函数
c)将匿名函数做为回调函数使用
d)将匿名函数做为函数的返回值使用--函数做为另一个函数的返回值使用(命名函数+匿名方式)
8.将一个函数做为另一个函数的参数使用
a)当一个函数的整体功能一定,但是内部的某些值不确定时,可以传入参数
b)一个固定功能的函数中,不仅仅是某个值不确定,而是某段代码功能不确定将函数做为参数传递
9.回调函数
a)将一个函数作为另一个函数的参数使用时,称之为回调函数
b)使用场景:当一个函数整体功能一定时,内部的某段功能呢不确定时,可以使用回调函数
1)将命名函数做为函数传递
2)要传递的实参值是一个函数,使用匿名方式传参
10.函数的数据类型-typeof==function
11.arguments的使用
a)只能在函数内部使用
b)是一个数组形式的数据,伪数组结构(类数组结构)
c)内部保存了本次调用传入的所有实参
练习:对传入的所有实参进行求和
1
2
3
4
5
6
7
8
function fun (a,b){
var sum = 0 ;
for (var i = 0 ; i <arguments.length;i++){
sum += arguments[i];
}
console.log(sum);
}
fun(1,2,3,4,5,6,7,8,8,9);
12.函数重载的模拟--使用传入的参数个数不同
1
2
3
4
5
6
7
8
function fun(){
//通过判断argument.length属性的值去进行函数重载的模拟
var len=arguments.length;
if(len===2){
.....
}
}
fun (1,2,3);
13.构造函数
1)使用--通过new调用的函数,就是构造函数(作用-创建对象)
2)书写一个构造函数
a)命名要求---首字母大写
b)调用前一定要加new
c)只要通过this给创建的对象设置属性和方法
3)在构造函数内部使用return的效果说明
a)返回值为基本数据类型:会被忽略
b)返回值为复杂数据类型:这个复杂数据类型值会替换掉原有的对象
面试总结
前言
最近参加了一场面试，对此，做了一下小总结
笔试
XHTML和HTML的具体区别是什么？
前端页面有哪三层构成，分别是什么？
H5为什么要写！DOCTYPE HTML？
DOCTYPE的作用是什么？严格模式和兼容模式有什么区别？
上面4个问题是具有逻辑性的，循序渐进，
在面试的时候面试官有问对于面试题目有什么看法？
2应该在4后面，DOCTYPE决定了三体
请描述一下cookie 和 sessionStroneg 和 lacalStrage的区别？
如何实现浏览器老多个标签页之间的通信？
什么是跨域？跨域请求职员的方法有哪些？
请写出几种IE6 bug 的解决方法？
页面导入样式时，使用link 和@import有什么区别？
4题，因为自己之前做项目只是兼容到IE9，所以这个没有完整的回答
ajax请求的时候get和post方式的区别？
ajax请求是，如何解析json数据？
ajax技术体系的组成部分有哪些？
ajax都有哪些优缺点？
3题
XMLHttpRequest =>一个用于在后台与服务器交换对象
JS-=>向服务器发送请求，更新页面
CSS=>封装数据
请写出身份证号码的正则表达式？
没有写答案。 我自己对火星文真的不熟悉，一般都是工具生成，只是会在代码中简单的应用一下
Vue中active-class是哪个组件的属性？嵌套如有是怎么定义的？
Vue中v-model是什么？怎么使用？vue中标签怎么绑定？
MVVM框架是什么？他和其他框架（juery）的区别是什么？
请详细说下vue生命周期？
具体使用vue的理解？
vue组件是怎么定义的？父组件怎么给子组件传值？
都是vue最基础的知识和一些小细节
面试
一般第一个问题都会让自我介绍一下
我一般都是简单的介绍一下自己，和应聘的岗位，为什么学习前端，和大概的工作经历
JS的数据类型是什么？
我觉得这个问题的考察点是在于对ES6有没有了解。
undefined，Null，Number，String，Boolean，引用类型Object，ES6新增Symbol，表示独一无二的。
数组怎么进行去重？
用ES6 新语法Set ， 转换为对象，再用Array.from转换为数组
移动端的触摸事件有了解不？
touchstart: 当手指触摸屏幕时候触发；
touchmove: 当手指在屏幕上滑动的时候连续触发；可以调用阻止默认事件preventDefault()阻止屏幕滚动；
touchend: 手指离开屏幕时触发；
touchcancel: 系统停止跟踪触摸时触发；
以上的这些时间都会冒泡，而且都可以取消冒泡，而且，对于以上事件也提供了和鼠标事件中常用的属性：bubble,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrKey和metaKey。
除了上面这些属性外，触摸事件还提供了下面这些属性：
touches: 跟踪返回Touch对象的数组；
targetTouchs: 特定事件目标的Touch对象的数组；
changeTouchs: 上次触摸以来改变了的Touch对象的数组；
每个Touch对象包含一下的属性：
clientX: 触摸目标在浏览器中的x坐标
clientY: 触摸目标在浏览器中的y坐标
identifier: 标识触摸的唯一ID。
pageX: 触摸目标在当前DOM中的x坐标
pageY: 触摸目标在当前DOM中的y坐标
screenX: 触摸目标在屏幕中的x坐标
screenY: 触摸目标在屏幕中的y坐标
target: 触摸的DOM节点目标。
做项目中有遇到跨域吗？
跨域就是域名，协议，端口号，有一个不相同
解决跨域一般用Jsonp，Cors，反向代理。
jsonp 核心是动态创建script标签，生成动态src
Cors核心是服务器，会自动生成请求头
反向代理核心是用代理服务器去接受浏览器的请求，再将请求转发客户端
闭包
闭包就是有权访问另外一个函数作用域的函数。闭包可以保存私有变量，闭包可以避免全局污染，避免内存泄露。
