原生js必背题

js数组去重

数组去重:
let arr = [1,2,1,2,3,4,4,5,6,5,7,20,25,20,24,27,27,28];

1、Spilce() 从数组后面往前找相同的数据并去除多余的数据

function Fun1(arr){
	let newArr = [...arr];
	for(let l=0, len = newArr.length;l<len;l++){
		let item = newArr[l];
		for(let j=len;j>l;j--){
			if(item === newArr[j]){
				newArr.splice(j,1)
			}
		}
	}
	return newArr;
}
console.log(Fun1(arr)); //[1, 2, 3, 4, 5, 6, 7, 20, 25, 24, 27, 28]

缺点:不能过滤NaN、Object

2、indexOf() 遍历旧数组,在新数组中寻找,如果不存在就添加
function Fun2(arr){
	let newArr = [];
	for(let l = 0;l<arr.length;l++){
		if(newArr.indexOf(arr[l])==-1){
			newArr.push(arr[l])
		}
	}
	return newArr;
}
console.log(Fun2(arr));

缺点:不能过滤NaN、Object

3、Set() 利用set的去重性
function Fun3(arr){
	let newArr = Array.from(new Set(arr));
	return newArr;
}
console.log(Fun3(arr));

缺点:不能过滤重复的Object

4、Includes()

function Fun4(arr){
	let newArr = [];
	for(let l = 0;l<arr.length;l++){
		if(!newArr.includes(arr[l])){
			newArr.push(arr[l])
		}
	}
	return newArr;
}
console.log(Fun4(arr));

缺点:不能过滤Object

js数组排序

1、sort()
数量从小到大
var arr2 = [1,2,1,2,3,4,4,5,6,5,7,20,25,20,24,27,27,28];
function Fun5(a,b){
	return a-b; //第一个参数减去第二个参数
}
arr2.sort(Fun5);
console.log(arr2);

数量从大到小
var arr2 = [1,2,1,2,3,4,4,5,6,5,7,20,25,20,24,27,27,28];
function Fun5(a,b){
	return b-a; //第二个参数减去第一个参数
}
arr2.sort(Fun5);
console.log(arr2);

js数组方法

1.splice(index,howmany,[item1,…])：从数组中添加/删除元素，返回被删除项，注意：这个操作会改变原始数组。
2.slice(start,[end])：从已有数组中返回选定元素,此操作不会修改原始数组。
3.shift()：删除数组第一个元素，返回删除项，改变原始数组，不产生新数组。
4.unshift(newelement1,[…]):在数组开头添加一或多个元素，并返回新的长度。改变原数组，不产生新数组。
5.pop():删除数组最后一个元素，并返回删除的值，若是操作空数组，返回undefined。改变原数组。
6.push(element1，[…]):向数组末尾添加一个或多个元素，返回数组长度。直接修改原数组。
7.concat(arrayX,…):连接两个或多个数组，返回被连接数组的副本，不会改变原始数组。
8.reverse():颠倒数组元素顺序，改变原始数组，不会创建新数组。
9.sort():对现有数组进行排序，改变原始数组。此方法会在排序之前首先对数组的每一项调用toString()方法，再进行排序
10.join([separator]):对数组元素以指定的分隔符进行分隔，参数为空，默认以“，”进行分隔。返回值是分隔后形成的字符串

json与jsonp的区别

json是浏览器与服务期间传输数据的方法，是一种轻量级的数据交互格式，与js对象格式相似。

jsonp是自创的模拟json格式，是为了解决跨域问题，jsonp最大的特点就是不支持同步处理，只能用get方式来请求数据

jsonp原理

1.首先是利用script标签的src属性来实现跨域。

2.通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信

3.由于使用script标签的src属性，因此只支持get方法

什么是ajax

ajax是一种数据请求技术，可以实现页面无刷新，可以请求到不同的数据，他是一种编程技术而非与语言

原生ajax的实现步骤

创建ajax对象
绑定事件
初始化请求参数（get/post）
发送请求

如何动态修改this指向

es5中是重定向
es6中是call apply bind

call、apply、bind区别

call，apply，bind的第一个参数都是this要指向的对象，
bind是返回对应函数，便于稍后调用，call与apply是立即调用
call传递参数是按顺序传入，apply是把参数放入数组中
例:
call(this指向的对象,参数1,参数2,参数3…);
apply(this指向的对象，[参数1,参数2,参数3…]);

什么情况下会导致跨域

不满足同源策略就会发生跨域，
同源策略：协议 端口号 域名相同
如果协议 端口号 域名不相同就会发生跨域

什么叫回调地狱

函数作为参数层层嵌套 ,一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套

什么是同步什么是异步

同步:等到浏览器响应后才继续向下执行
异步:不等浏览器响应就继续向下执行

写出flex布局中对父级元素以及子级元素的属性分别有哪些

flex-direction    设置主轴的方向（即项目的排列方向）
		内有四个值:
			row（默认值）：主轴为水平方向，起点在左端。
			row-reverse：主轴为水平方向，起点在右端。
			column：主轴为垂直方向，起点在上沿。
			column-reverse：主轴为垂直方向，起点在下沿
justify-content   设置主轴上的子元素排列方式

	内有五个值:
		flex-start（默认值）：左对齐
		flex-end：右对齐
		center： 居中
		space-between：两端对齐，项目之间的间隔都相等。
		space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

flex-wrap  设置子元素是否换行
	内有三个值:
		nowrap（默认）：不换行
		wrap：换行，第一行在上方
		wrap-reverse：换行，第一行在下方

align-content 设置侧轴上的子元素排列方式（多行）
align-items： 设置侧轴上的子元素排列方式（单行）
flex-flow： 复合属性，相当于同时设置了flex-direction和flex-wrap

通过Flex布局设置水平垂直居中

通过给父元素设置CSS样式：

display:flex;
align-items:center;
justify-content:center;

箭头函数和普通函数的区别

箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向;箭头函数全部都是匿名函数, 书写方式: =>

普通函数的this指向调用它的那个对象;普通函数大多为具名,少部分会用匿名函数

本地储存cookie

认识cookie

cookie类型为小型文本文件，是某些网站为了辨别用于身份，由用户端计算机暂时或用永久保存的信息

cookie的特点

1.cookie可以实先跨页面全局变量
2.cookie可以跨同域名下的多个网页，但是不能跨多个域名使用
3.同一个网站中所有页面共享一套cookie
4.可以设置有效期限
5.储存空间只有4kb左右

cookie的优点:

cookie机制将信息储存于用户硬盘，因此可以作为跨页面全局变量，这是他的最大一个优点

cookie的缺点:

1.cookie可能被禁用
2.cookie与浏览器相关，不能互相访问
3.cookie可能被删除
4.cookie安全性不够高
5.cookie储存空间很小 只有4kb左右

cookie的常用场合:

1.保存用户登录状态
2.跟踪用户行为 等等

cookie能用来干什么

1.用于记录用户的登录信息
2.用于限制一些网站进入前的状态

本地储存：把数据储存在本地的浏览器上
1.cookie/session
2.storge 大容量
3.indexedDB 数据库
4.web sql 带sql命令的储存模式

本地存储 Storage

特点：
1.不会随着http请求发送给服务器
2.容易操作
3.移动端普及较高

localStorage为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名下使用。
设置：localStorage.setItem(‘下标’,‘值’)
读取：localStorage.getItem(‘下标’,‘值’)
查看长度：.length()
查看建：key
删除：removeItem
清空：clear()