资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Javascript处理数组基础知识（含es6新语法）

Javascript处理数组基础知识（含es6新语法）

Panda / 3277人阅读

摘要：对数组中每一项进行给定函数返回该函数会返回的项组成新的数组。可选，规定回调函数所指向的对象。新增新操作数组的方法传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。必需，回调函数，它制定了对数组元素的检索规则。

迭代方法 1.every()

对数组中每一项进行给定函数，如果每一项都返回true，则返回true。

every(callback(element,index,array), thisArg)

callback:必需，对数组每一项所要执行的函数。

thisArg:可选，规定callback回调函数this所指向的对象。

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
    return item>2;
});
console.log(everyResult); //false
var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var everyResult = numbers.every(function(item,index,array){
    return item>this.num;
},obj);
console.log(everyResult);  //false

特别说明：第一个参数是回调函数，第二个参数是一个对象，它可以重置回调函数中this的指向。那么，上述代码中回调函数的this就指向obj，于是this.num值等于2。

2.some()

对数组中每一项进行给定函数，如果任意一项都返回true，则返回true

some(callback(element,index,array), thisArg)

callback:必需，对数组每一项所要执行的函数。

thisArg:可选，规定callback回调函数this所指向的对象。

var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item,index,array){
    return item>2;
});
console.log(someResult);   //true

var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var someResult = numbers.some(function(item,index,array){
    return item>this.num;
},obj);
console.log(someResult);  //true
3.filter()

对数组中每一项进行给定函数,返回该函数会返回true的项组成新的数组。

filter(callback(element,index,array), thisArg)

callback:必需，对数组每一项所要执行的函数。

thisArg:可选，规定callback回调函数this所指向的对象。

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
    return item>2;
});
console.log(filterResult);   //  [3,4,5,4,3]
var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var filterResult = numbers.filter(function(item,index,array){
    return item>this.num;
},obj);
console.log(filterResult);   //  [3,4,5,4,3]
4.map()

对数组中每一项进行给定函数,返回每次函数调用的结果组成的新数组。

map(callback(element,index,array), thisArg)

callback:必需，对数组每一项所要执行的函数。

thisArg:可选，规定callback回调函数this所指向的对象。

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){
    return item*2;
});
alert(mapResult);   //  [2, 4, 6, 8, 10, 8, 6, 4, 2]
var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
var mapResult = numbers.map(function(item,index,array){
    return item*this.num;
},obj);
alert(mapResult);   //  [2, 4, 6, 8, 10, 8, 6, 4, 2]
5.forEach()

对数组中每一项进行给定函数,没有返回值，和for循环类似。

forEach(callback(element,index,array), thisArg)

callback:必需，对数组每一项所要执行的函数。

thisArg:可选，规定callback回调函数this所指向的对象。

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
  console.log(item*2)
});
//2, 4, 6, 8, 10, 8, 6, 4, 2

console.log(numbers) //1,2,3,4,5,4,3,2,1
var numbers = [1,2,3,4,5,4,3,2,1];
var obj = {num:2}
numbers.forEach(function(item,index,array){
  console.log(item*this.num)
},obj);
//2, 4, 6, 8, 10, 8, 6, 4, 2
归并方法

ES5新增了两个归并数组的方法：reduce(callback(prev,cur,index,array))和reduceRight(callback(prev,cur,index,array))。这两个方法迭代数组所有项，然后构建一个最终返回的值。reduce从左到右，reduceRight从右到左。

prev:前一个值

cur:当前值

index:下标

array:数组对象

var numbers = [1,2,3,4,5];
var sum = numbers.reduce(function(prev,cur,index,array){
    return prev + cur;
});
console.log(sum); //15

这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。

检测数组 1.instanceof

ES3的方法

var numbers = [1,2,3];
if(numbers instanceof Array){
    //对数组进行某些操作
}
2.Array.isArray

ES5的方法

var numbers = [1,2,3];
if(Array.isArray(numbers)){
    //对数组进行某些操作
}
数组转化成字符串 1.toLocaleString() toString() 
var numbers = [1,2,3];
console.log(numbers.toLocaleString())  //1,2,3
console.log(numbers.toString())//1,2,3
2.join()

将数组转换为字符串，且用分隔符分割

var numbers = [1,2,3];
alert(numbers.join("|"));  // 1|2|3
栈方法

栈方法是指Last-In-First-Out后进先出

push() 从数组末尾添加
pop()  从数组末尾移除
队列方法

队列方法是First-In-First-Out先进先出

shift()    从数组前端移除
unshift()  从数组前端添加
重排序方法 1.reverse()

反转数组

var numbers = [1,2,3];
console.log(numbers.reverse())  //3,2,1
2.sort() 
var numbers = [0,1,5,10,15];
numbers.sort(function(a,b){
    return b-a;
});
console.log(numbers);  //[15, 10, 5, 1, 0]
操作方法 1.concat()

用于复制或者从尾部添加，创建新数组。

concat(n1,n2,...,nN)

n1,n2,...,nN:都可选，既可以是数组，也可以是单个字符。

var numbers = [1,2,3];
var n1 = values.concat();  //复制
var n2 = values.concat(4);  //尾部添加
var n3 = n1.concat(n2,10,11); //尾部添加

console.log(numbers);  //[1,2,3]
console.log(n1);      //[1,2,3]
console.log(n2);      //[1,2,3,4]
console.log(n3);      //[1, 2, 3, 1, 2, 3, 4,10,11]
2.slice()

用于复制或截取数组，创建新数组。

slice(start,end)

strat:可选，数组其实位置，截取的时候包括其实位置

end:可选，结束位置，截取的时候不包括结束位置

var numbers = [1,2,3];
var n1 = numbers.slice(); //复制
var n2 = numbers.slice(1); //截取
var n3 = numbers.slice(1,3); //截取

console.log(numbers);  //[1,2,3]
console.log(n1);      //[1,2,3]
console.log(n2);      //[2,3]
console.log(n3);      //[2,3]
3.splice()

用于删除、插入、替换，号称最强大的数组方法

删除：可以删除任意数量的项，需要两个参数，要删除的第一项的位置和要删除的项数

splice(start,num)

var values = [1,2,3,4,5,6];
var v = values.splice(0,2);
console.log(values);  //[3,4,5,6]
console.log(v);       //[1,2]

插入和替换：至少三个参数，第一个是起始位置，第二个是要删除的项数，第三个及以后是要插入或替换的值。

splice(start,num,n1,n2,...,nN)

//插入demo
var values = [1,2,3,4,5,6];
var v1 = values.splice(1,0,1,1,1);
console.log(values);  //[1,1,1,1,2,3,4,5,6]
console.log(v1);      //[]

//替换demo
var values = [1,2,3,4,5,6];
var v1 = values.splice(1,2,1,1,1);
console.log(values);  //[1,1,1,1,4,5,6]
console.log(v1);       //[2,3]
位置方法 
indexOf(value,start)
lastIndexOf(value,start)

都接受两个参数：查找的值、查找起始位置。不存在，返回 -1 ；存在，返回位置。
indexOf 是从前往后查找， lastIndexOf 是从后往前查找。

var numbers = [1,2,3,4,5,6,7,8,9,5,3];
console.log(numbers.indexOf(5))  //4
console.log(numbers.lastIndexOf(5))  //9
ES6新增新操作数组的方法 1.find()

传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。

find(callback(element,index,array), thisArg)

callback：必需，回调函数，它制定了对数组元素的检索规则。

thisArg：可选，用来规定回调函数中this所指向的对象。

let arr = [2,3,4,5,6,7,8,9,10];
let elem=arr.find(function (ele) {
  if (ele > 4) {
    return true
  }
})
console.log(elem); //5
let arr = [2,3,4,5,6,7,8,9,10];
let obj = {num: 4};
let elem=arr.find(function (ele) {
  if (ele > this.num) {
    return true
  }
},obj)
console.log(elem); //5
2.findIndex()

传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。

findIndex(callback(element,index,array), thisArg)

callback：必需，回调函数，它制定了对数组元素的检索规则。

thisArg：可选，用来规定回调函数中this所指向的对象。

let arr = [2,3,4,5,6,7,8,9,10];
let elem=arr.findIndex(function (ele) {
  if (ele > 4) {
    return true
  }
})
console.log(elem);  //3
let arr = [2,3,4,5,6,7,8,9,10];
let obj = {num: 4};
let elem=arr.findIndex(function (ele) {
  if (ele > this.num) {
    return true
  }
},obj)
console.log(elem);  //3
3.fill()

用新元素替换掉数组内的元素，可以指定替换下标范围。

fill(value,start,end)

value：必需，用来进行填充的值。

start：可选，规定填充开始位置，默认从索引0处开始。

end：可选，规定填充结束位置，默认填充到数组结尾。

const arr = ["a", "b", "c", "d"]
console.log(arr.fill("ss", 1, 3))  // ["a", "ss", "ss", "d"]

const arr2 = ["a", "b", "c", "d"]
console.log(arr.fill("ss"))  // ["ss", "ss", "ss", "ss"]
4.includes()

判断数组中是否存在该元素，可以替换 ES5 时代的 indexOf 判断方式。

includes(value,start)

value：必需，要检测的元素。

start：可选，规定填充开始位置，默认从索引0处开始。

let arr = ["a", "b","c", "d", NaN]
arr.includes("a") //true
arr.includes(NaN) //true
arr.indexOf(NaN) //-1
5.Array.from()

方法可以将指定的参数转换为真正的数组。当然并不是任意参数都是可以被转换为数组，可以转换的参数如下：类数组对象、具有遍历器接口的对象。

Array.from(arrayLike, mapFn, thisArg)

arrayLike：必需，将要被转换为真正数组的类数组或者具有遍历器接口的对象。

mapFn：可选，对参数arrayLike中的数据进行处理并返回，作为新数组的元素。

thisArg：可选，规定mapFn的调用对象，那么mapFn中的this将会指向此调用对象。

let obj = {
  "0": "蚂蚁部落",
  "1": "www.softwhy.com",
  "2": 6,
  "3":"ES2015",
  length:4
};
console.log(Array.from(obj)); // ["蚂蚁部落", "www.softwhy.com", 6, "ES2015"]

obj = {
  "a": "蚂蚁部落",
  "b": "www.softwhy.com",
  "c": 6,
  "d":"ES2015",
  length:4
};
console.log(Array.from(obj)); //[undefined, undefined, undefined, undefined]

obj = {
  length:3
};
console.log(Array.from(obj)); //[undefined, undefined, undefined]

上述代码将类数组对象转换为真正的数组，什么是类数组对象：很多材料上对类数组的描述比较严苛，其实很简单，只要一个对象具有length属性就是类数组。当然一个类数组对象，如果属性恰好类似于数组递增式索引，那就更好了，比如上面代码中的对象。上面对象只有一个length属性，他也是一个类数组对象，只不过生成的数组元素都是undefined。

let str = "蚂蚁部落";
console.log(Array.from(str)); // ["蚂", "蚁", "部", "落"]

因为字符串具有遍历器接口，那么字符串也可以生成数组，数组的每一个元素，就是构成字符串的字符。

let obj = {
  "0": 1,
  "1": 2,
  "2": 3,
  "3": 4,
  length:4
};
let thisObj = {
  num:2
}
console.log(Array.from(obj, function (elem, index) {
  return elem * this.num
}, thisObj)); //[2, 4, 6, 8]

扩展:展开运算符生成数组

let str="蚂蚁部落";
console.log([...str]);  //["蚂", "蚁", "部", "落"]
6.Array.of() 
Array.of(element0,element1,...,elementN)

此方法可以接受任意类型的参数，参数之间用逗号分隔，并且能够将参数转换为数组。

console.log(Array.of(2)); //[2]
console.log(Array.of(2,3,4)); //[2,3,4]

扩展：Array()与Array.of()方法区别

console.log(Array(2)) // [undefined, undefined]
console.log(Array.of(2)) // [2]

console.log(Array(2,3,4)) // [2,3,4]
console.log(Array.of(2,3,4)) // [2,3,4]

这个方法的主要目的，是弥补数组构造函数 Array() 的不足。

7.entries()

返回迭代器：返回一个遍历器对象【键值对】

//数组
const arr = ["a", "b", "c"];
for(let v of arr.entries()) {
  console.log(v)
}
// [0, "a"] [1, "b"] [2, "c"]
for(let [key, value] of arr.entries()) {
  console.log(key+"--"+value)
}
//0--a 1--b 2--c

//Set
const arr = new Set(["a", "b", "c"]);
for(let v of arr.entries()) {
  console.log(v)
}
// ["a", "a"] ["b", "b"] ["c", "c"]

//Map
const arr = new Map();
arr.set("a", "a");
arr.set("b", "b");
for(let v of arr.entries()) {
  console.log(v)
}
// ["a", "a"] ["b", "b"]
8.keys()

返回迭代器：返回键值对的key

//数组
const arr = ["a", "b", "c"];
for(let v of arr.keys()) {
  console.log(v)
}
// 0 1 2

//Set
const arr = new Set(["a", "b", "c"]);
for(let v of arr.keys()) {
  console.log(v)
}
// "a" "b" "c"

//Map
const arr = new Map();
arr.set("a", "a");
arr.set("b", "b");
for(let v of arr.keys()) {
  console.log(v)
}
// "a" "b"
9.values()

返回迭代器：返回键值对的value

//数组
const arr = ["a", "b", "c"];
for(let v of arr.values()) {
  console.log(v)
}
//"a" "b" "c"

//Set
const arr = new Set(["a", "b", "c"]);
for(let v of arr.values()) {
  console.log(v)
}
// "a" "b" "c"

//Map
const arr = new Map();
arr.set("a", "a");
arr.set("b", "b");
for(let v of arr.values()) {
  console.log(v)
}
云服务器 GPU云服务器 javascript语法基础 javascript基础语法 es6新特性 es6的新特性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102674.html

相关文章

  • JavaScript 语言核心笔记（持续更新）

    摘要：在同一个块内，不允许用重复声明变量。中为新增了块级作用域。自带遍历器的对象有数组字符串类数组对象对象的对象等和结构对象。返回一个遍历器，使遍历数组的键值对键名键值。 目录 1.语法 2.类型、值和变量 3.表达式和运算符 4.语句 5.数组 6.对象 7.函数 8.全局属性和方法 9.词法作用域、作用域链、闭包 10.原型链、继承机制 11.this的理解 12.ES5新特性 13.E...

    suosuopuo 评论0 收藏0

  • Javascripts数组原生方法集合

    摘要：如果数组已经为空，则不改变数组，并返回值。中所有在数组被修改时都遵从这个原则，以下不再重复方法会给原数组中的每个元素都按顺序调用一次函数。每次执行后的返回值没有指定返回值则返回组合起来 数组应该是我们在写程序中应用到最多的数据结构了，相比于无序的对象，有序的数组帮我们在处理数据时，实在是帮了太多的忙了。今天刚好看到一篇Array.include的文章，忽然发现经过几个ES3,ES5,E...

    awokezhou 评论0 收藏0

  • ES6（中）

    摘要：它用来比较两个值是否严格相等，与严格比较运算符的行为基本一致。两个对象的地址不一样与严格比较运算符的不同之处只有两个一是不等于，二是等于自身基本用法方法用于对象的合并，将源对象的所有可枚举属性，赋值到目标对象。 这是ES6的入门篇教程的笔记，网址：链接描述，以下内容中粗体+斜体表示大标题，粗体是小标题，还有一些重点；斜体表示对于自身，还需要下功夫学习的内容。这里面有一些自己的见解，所以...

    dreamGong 评论0 收藏0

  • 这一次，我们换种姿势学习 javascript

    摘要：操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。此外可以使用和来设置对象及其属性的不可变性级别。忽视这一点会导致许多问题。使用调用函数时会把新对象的属性关联到其他对象。 前言 《你不知道的 javascript》是一个前端学习必读的系列，让不求甚解的JavaScript开发者迎难而上，深入语言内部，弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题：...

    zone 评论0 收藏0

发表评论

登陆后可评论

0条评论

Panda

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<