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