数组详细操作方法及解析合集,Angularjs之如何在跨域请求中传输Cookie的方法

前言

前言

一般情况我们在使用WebApi之类的技术时,都会遇到跨域的问题,这个只需要在服务端做一下处理即可。

最近在用webpack+vue写项目,经过几天的熬夜加班改BUG,终于把基本的框架给写完了,后面只要加一些小功能就可以了,太好吧!先来npm
run build 打包出来看看吧!

在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易忘记,还是要谷歌一下。所以就希望对这块内容有一个比较系统性的总结,在这背景下,就有了本篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。

如果这些GET或POST请求不需要传递Cookie数据的话,就没什么问题了,但如果需要,那么会发现
虽然已经处理了跨域请求的问题,但后台始终无法获取到Cookie。

图片 1

创建一个数组:

跨域传输Cookie是需要后台和前台同时做相关处理才能解决的。

打包中…,我们用本地服务器打开看一下。

// 字面量方式:
// 这个方法也是我们最常用的,在初始化数组的时候 相当方便
var a = [3, 11, 8]; // [3,11,8];
// 构造器:
// 实际上 new Array === Array,加不加new 一点影响都没有。
var a = Array(); // [] 
var a = Array(3); // [undefined,undefined,undefined]
var a = Array(3,11,8); // [ 3,11,8 ]

就好比一个握手会话,前台先表示,我的跨域请求是带有Cookie的;请求到了服务端,服务端表示可以接收跨域Cookie,成交(开始重新带着Cookie发起请求)

额,不看不知道,一看吓一跳,坑咋这么多呢!但是作为一名积极向上的IT从业者,填坑吧。

ES6 Array.of() 返回由所有参数值组成的数组

后台代码

1.打包之后没有被渲染出来

定义:返回由所有参数值组成的数组,如果没有参数,就返回一个空数组。

Response.Headers.Add("Access-Control-Allow-Credentials", "true");

图片 2

目的:Array.of()
出现的目的是为了解决上述构造器因参数个数不同,导致的行为有差异的问题。

前台代码

怎么回事,刚打开就告诉我啥也没有,这是要搞事情的前奏啊!,我们看一下错误信息,告诉我路径有问题,默默的看一下自己的地址栏和自己的文件所在目录,原来是我的打包文件没有放到根目录下,这个时候我们可以把我们的两个文件放到根目录下,但是作为一名有个性的IT人士,当然要看有没有其他方法。从上面的路径中隐隐约约有点预感,static是直接相对于根目录,说明这有可能打包的时候,有可能设置了绝对路径,如果我改成相对路径,那不就可以了吗。

let a = Array.of(3, 11, 8); // [3,11,8]
let a = Array.of(3); // [3]
$http.post("http://a.domain.com/Api/Product", { productId: 3 }, {
  withCredentials: true,
  params: { name: "Ray" },
  headers: {'Authorization':"这个不重要"}
}).success(function (data) {
  //TODO
});

图片 3

ES6 Arrar.from() 将两类对象转为真正的数组

这个是在单独的请求中设置,如果要在所有的请求中都应用该设置则要使用
$httpProvider

我们去看一下项目文件下的config>index.js找到里面的build下的assetsPublicPath:’/’,把它改成assetsPublicPath:’./’,加个小点表示相对路径,不加表示绝对路径。npm
run build运行。成功。

定义:用于将两类对象转为真正的数组(不改变原对象,返回新的数组)。

angular.module("app").config(function ($httpProvider) {
  $httpProvider.defaults.withCredentials = true;
  $httpProvider.defaults.headers.common['Authorization'] = "89757";
})

2.路由(router)mode:’history’,导致页面不能渲染问题

参数:

如果使用jQuery,则是这样子的

图片 4

第一个参数(必需):要转化为真正数组的对象。

$.ajax({
  type: "POST",
  url: "http://a.domain.com/Api/Product",
  xhrFields: {
    withCredentials: true
  },
  success: function (data) {
    console.log(data)
  },
  error: function (data) {
    console.error(data)
  }
})

地址栏的那个#怎么那么让我不舒服呢!对于有轻度强迫症的我来说,这是不能忍不了的。

第二个参数(可选):
类似数组的map方法,对每个元素进行处理,将处理后的值放入返回的数组。

撇开Cookie跨域传输的问题,angularjs的跨域POST请求与jQuery有些区别:

我们在项目打包前,开发项目时(npm
start),在vueRouter里设置mode:”history”.可以去掉#号。

第三个参数(可选): 用来绑定this。

jQuery跨域与本域的区别仅仅是请求头信息的变化;

这里强行解释一番:

// 1. 对象拥有length属性
let obj = {0: 'a', 1: 'b', 2:'c', length: 3};
let arr = Array.from(obj); // ['a','b','c'];
// 2. 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象
let arr = Array.from('hello'); // ['h','e','l','l']
let arr = Array.from(new Set(['a','b'])); // ['a','b']

angularjs跨域后,会变成两次请求,第一次的Request
Method是OPTIONS,这里有个概念叫preflight,这里不谈。

路由(router)默认 hash 模式,使用 URL 的 hash 来模拟一个完整的
URL,于是当 URL
改变时,页面不会重新加载,因为对于正常的页面来说,更换URl一定是会导致页面的更换的,
而只有更换URL中的查询字符串和hash值的时候才不会重新加载页面。

方法:

第一次请求到服务器后,会针对请求的下面三项进行赋值

路由(router)的history模式,这种模式充分利用了history.pushState
API来完成URL的跳转而不需要重新加载页面。没有#号。

数组原型提供了非常多的方法,这里分为三类来讲,一类会改变原数组的值,一类是不会改变原数组,以及数组的遍历方法。

  1. Access-Control-Allow-Origin
  2. Access-Control-Allow-Methods
  3. Access-Control-Allow-Headers”

npm run build打包中….

改变原数组的方法(9个):

浏览器接收到返回信息后,会再次发送请求,这次的Request
Method是POST,这回就跟普通本域请求一样了。

什么鬼,为什么我的路由(router)部分没有被渲染出来,这就是history的坑了,解决方法一,会到以前的hash模式;解决方法二,设置routes里的路由name。

let a = [1,2,3];
ES5:
a.pop()/ a.shift()/ a.push()/ a.unshift()/ a.reverse()/ a.splice()/ a.sort() 
ES6:
a.copyWithin() / a.fill

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

图片 5

对于这些能够改变原数组的方法,要注意避免在循环遍历中改变原数组的选项,比如:
改变数组的长度,导致遍历的长度出现问题。

您可能感兴趣的文章:

  • Angular
    ng-animate和ng-cookies用法详解
  • Angularjs cookie
    操作实例详解
  • angular中的cookie读写方法
  • Angular.js与node.js项目里用cookie校验账户登录详解
  • AngularJS入门教程之Cookies读写操作示例

这是因为路由(router)无法找到路径中的组件,所以也就无法渲染了。只需要修改
src > router >
index.js,在每个path后加上组件名称就行了,这样就可以了。

pop() 删除一个数组中的最后的一个元素

这里有个小问题:

定义: pop()方法删除一个数组中的最后的一个元素,并且返回这个元素。

图片 6

参数: 无。

图片 7

let a = [1,2,3];
let item = a.pop(); // 3
console.log(a); // [1,2]

为了我们的时间考虑,还是放到根目录吧!

shift() 删除数组的第一个元素

首页没有问题了,逐个链接测试一下。

定义: shift()方法删除数组的第一个元素,并返回这个元素。

图片 8

参数: 无。

图片 9

let a = [1,2,3];
let item = a.shift(); // 1
console.log(a); // [2,3]

这是什么鬼,路径和其他图片路径一样,图片也存在啊,为啥你就是这么傲娇,就是报错。来看一下控制台。

push() 向数组的末尾添加元素

图片 10

定义:push()方法可向数组的末尾添加一个或多个元素,并返回新的长度。

结合之前的./原来是相对路径问题,是我的开发文件assets下多个图片文件夹。

参数: item1, item2, …, itemX ,要添加到数组末尾的元素

图片 11

let a = [1,2,3];
let item = a.push('末尾'); // 4
console.log(a); // [1,2,3,'末尾']

这个时候为了开发项目的可读性和维护性。只能默默的把前面改的相对路径’./’改回绝对路径’/’了。这就尴尬了,额额额,大家就当没看到哈!

unshift()

暂时遇到这些坑,这是自己写项目的有感而发,希望对看过这篇文章的人有所帮助。

定义:unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

总结

参数: item1, item2, …, itemX ,要添加到数组开头的元素

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

let a = [1,2,3];
let item = a.unshift('开头'); // 4
console.log(a); // ['开头',1,2,3]

您可能感兴趣的文章:

  • Vue.js中用webpack合并打包多个组件并实现按需加载
  • 详解如何使用webpack打包Vue工程
  • vue打包后显示空白正确处理方法
  • Vue项目webpack打包部署到服务器的实例详解
  • Vue
    中批量下载文件并打包的示例代码
  • Parcel.js + Vue 2.x
    极速零配置打包体验教程
  • 关于Vue背景图打包之后访问路径错误问题的解决
  • vue
    打包后的文件部署到express服务器上的方法
  • 详解vue静态资源打包中的坑与解决方案
  • Vue打包后出现一些map文件的解决方法

reverse() 颠倒数组中元素的顺序

定义: reverse()方法用于颠倒数组中元素的顺序。

参数: 无

let a = [1,2,3];
a.reverse(); 
console.log(a); // [3,2,1]

splice() 添加/删除数组元素

定义: splice()方法向/从数组中添加/删除项目,然后返回被删除的项目

语法: array.splice(index,howmany,item1,…..,itemX)

参数:

  1. index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
  2. howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。
  3. item1, …, itemX: 可选。向数组添加的新项目。

返回值: 如果有元素被删除,返回包含被删除项目的新数组。

eg1:删除元素

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0, 3); // [1,2,3]
console.log(a); // [4,5,6,7]
// 从数组下标0开始,删除3个元素
let item = a.splice(-1, 3); // [7]
// 从最后一个元素开始删除3个元素,因为最后一个元素,所以只删除了7

eg2: 删除并添加

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,3,'添加'); // [1,2,3]
console.log(a); // ['添加',4,5,6,7]
// 从数组下标0开始,删除3个元素,并添加元素'添加'
 let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-2,3,'添加1','添加2'); // [6,7]
console.log(b); // [1,2,3,4,5,'添加1','添加2']
// 从数组最后第二个元素开始,删除3个元素,并添加两个元素'添加1'、'添加2'

eg3: 不删除只添加:

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,0,'添加1','添加2'); // [] 没有删除元素,返回空数组
console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]
let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-1,0,'添加1','添加2'); // [] 没有删除元素,返回空数组
console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素

从上述三个栗子可以得出:

  1. 数组如果元素不够,会删除到最后一个元素为止
  2. 操作的元素,包括开始的那个元素
  3. 可以添加很多个元素
  4. 添加是在开始的元素前面添加的

sort() 数组排序

定义: sort()方法对数组元素进行排序,并返回这个数组。

参数可选: 规定排序顺序的比较函数。

默认情况下sort()方法没有传比较函数的话,默认按字母升序,如果不是元素不是字符串的话,会调用toString()方法将元素转化为字符串的Unicode(万国码)位点,然后再比较字符。

// 字符串排列 看起来很正常
var a = ["Banana", "Orange", "Apple", "Mango"];
a.sort(); // ["Apple","Banana","Mango","Orange"]
// 数字排序的时候 因为转换成Unicode字符串之后,有些数字会比较大会排在后面 这显然不是我们想要的
var a = [10, 1, 3, 20,25,8];
console.log(a.sort()) // [1,10,20,25,3,8];

比较函数的两个参数:

sort的比较函数有两个默认参数,要在函数中接收这两个参数,这两个参数是数组中两个要比较的元素,通常我们用
a 和 b 接收两个将要比较的元素:

  • 若比较函数返回值<0,那么a将排到b的前面;
  • 若比较函数返回值=0,那么a 和 b 相对位置不变;
  • 若比较函数返回值>0,那么b 排在a 将的前面;

对于sort()方法更深层级的内部实现以及处理机制可以看一下这篇文章深入了解javascript的sort方法

sort排序常见用法:

1、数组元素为数字的升序、降序:

var array = [10, 1, 3, 4,20,4,25,8];
// 升序 a-b < 0 a将排到b的前面,按照a的大小来排序的 
// 比如被减数a是10,减数是20 10-20 < 0 被减数a(10)在减数b(20)前面 
array.sort(function(a,b){
 return a-b;
});
console.log(array); // [1,3,4,4,8,10,20,25];
// 降序 被减数和减数调换了 20-10>0 被减数b(20)在减数a(10)的前面
array.sort(function(a,b){
 return b-a;
});
console.log(array); // [25,20,10,8,4,4,3,1];

2、数组多条件排序

var array = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}];
 array.sort(function(a,b){
  if(a.id === b.id){// 如果id的值相等,按照age的值降序
   return b.age - a.age
  }else{ // 如果id的值不相等,按照id的值升序
   return a.id - b.id
  }
 })
 // [{"id":2,"age":8},{"id":5,"age":4},{"id":6,"age":10},{"id":9,"age":6},{"id":10,"age":9},{"id":10,"age":2}] 

3、自定义比较函数,天空才是你的极限

类似的:运用好返回值,我们可以写出任意符合自己需求的比较函数

var array = [{name:'Koro1'},{name:'Koro1'},{name:'OB'},{name:'Koro1'},{name:'OB'},{name:'OB'}];
array.sort(function(a,b){
 if(a.name === 'Koro1'){// 如果name是'Koro1' 返回-1 ,-1<0 a排在b的前面
  return -1
 }else{ // 如果不是的话,a排在b的后面
  return 1
 }
})
// [{"name":"Koro1"},{"name":"Koro1"},{"name":"Koro1"},{"name":"OB"},{"name":"OB"},{"name":"OB"}] 

ES6: copyWithin() 指定位置的成员复制到其他位置

定义: 在当前数组内部,将指定位置的成员复制到其他位置,并返回这个数组。

语法:

array.copyWithin(target, start = 0, end = this.length)
参数:

三个参数都是数值,如果不是,会自动转为数值.

  1. target(必需):从该位置开始替换数据。如果为负值,表示倒数。
  2. start(可选):从该位置开始读取数据,默认为
    0。如果为负值,表示倒数。
  3. end(可选):到该位置前停止读取数据,默认等于数组长度。使用负数可从数组结尾处规定位置。

浏览器兼容(MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE
不支持

eg:

// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
var a=['OB1','Koro1','OB2','Koro2','OB3','Koro3','OB4','Koro4','OB5','Koro5']
// 2位置开始被替换,3位置开始读取要替换的 5位置前面停止替换
a.copyWithin(2,3,5)
// ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"] 

从上述栗子:

  1. 第一个参数是开始被替换的元素位置
  2. 要替换数据的位置范围:从第二个参数是开始读取的元素,在第三个参数前面一个元素停止读取
  3. 数组的长度不会改变
  4. 读了几个元素就从开始被替换的地方替换几个元素

ES6: fill() 填充数组

定义: 使用给定值,填充一个数组。

参数:

第一个元素(必须): 要填充数组的值

第二个元素(可选): 填充的开始位置,默认值为0

第三个元素(可选):填充的结束位置,默认是为this.length

MDN浏览器兼容

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

发表评论

电子邮件地址不会被公开。 必填项已用*标注