原生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()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值