Summary of js array operations and parsing methods-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Summary of js array operations and parsing methods

php中世界最好的语言

Jun 04, 2018 am 09:40 AM

javascript method Summary

This time I will bring you a summary of js array operation and parsing methods. What are the precautions for js array operation and parsing? The following is a practical case, let's take a look.

Preface

In development, there are many usage scenarios for arrays, and many api/related operations of arrays are also involved in daily life. There has never been any discussion on this content. Make a summary together. In many cases, even if you have used this API several times, it is easy to forget it during development, so you still need to Google it. So I hope to have a more systematic summary of this content. Against this background, this article is here. If you like it, you can like/follow it and support it. I hope everyone can gain something from reading this article.

Create an array:

// 字面量方式:
// 这个方法也是我们最常用的，在初始化数组的时候 相当方便
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 ]

Copy after login

ES6 Array.of() returns an array composed of all parameter values

Definition: Returns an array composed of all parameter values If there are no parameters, an empty array will be returned.

Purpose: The purpose of Array.of() is to solve the problem of different behaviors of the above constructors due to different number of parameters.

1 2	`let a = Array.of(3, 11, 8);` `// [3,11,8]` `let a = Array.of(3);` `// [3]`

Copy after login

ES6 Arrar.from() Converts two types of objects into real arrays

Definition: Used to convert two types of objects into real arrays (does not change original object, returns a new array).

Parameters:

The first parameter (required): the object to be converted into a real array.

Second parameter (optional): An array-like map method that processes each element and puts the processed value into the returned array.

The third parameter (optional): used to bind this.

// 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']

Copy after login

Methods:

The array prototype provides a lot of methods, which are divided into three categories. One type will change the value of the original array, and the other type will not change the original array. And array traversal methods.

Methods to change the original array (9):

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

Copy after login

For these methods that can change the original array, be careful to avoid changing the options of the original array during loop traversal , for example: changing the length of the array will cause problems with the length of the traversal.

pop() deletes the last element in an array

Definition: pop() Method deletes the last element in an array element and returns this element.

Parameters: None.

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

Copy after login

shift() deletes the first element of the array

Definition: shift()The method deletes the first element of the array and Return this element.

Parameters: None.

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

Copy after login

push() adds elements to the end of the array

Definition: push() The method adds one or more elements to the end of the array element and returns the new length.

Parameters: item1, item2, …, itemX, the elements to be added to the end of the array

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

Copy after login

unshift()

Definition: unshift() Method adds one or more elements to the beginning of the array and returns the new length.

Parameters: item1, item2, …, itemX, the elements to be added to the beginning of the array

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

Copy after login

reverse() reverses the order of the elements in the array

Definition: reverse() The method is used to reverse the order of elements in the array.

Parameters: None

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

Copy after login

splice() Add/delete array elements

Definition: splice() Method to/ Add/remove items from the array and return the deleted item

Syntax: array.splice(index,howmany,item1,...,itemX)

Parameters:

index: required. An integer specifying the position at which to add/remove an item. Use a negative number to specify the position from the end of the array.
howmany: Required. The number of items to delete. If set to 0, items will not be deleted.
item1, …, itemX: Optional. New items added to the array.

Return value: If an element is deleted, a new array containing the deleted item is returned.

eg1: Delete element

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

Copy after login

eg2: Delete and add

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'

Copy after login

eg3: Do not delete but only add:

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] 在最后一个元素的前面添加两个元素

Copy after login

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

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

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];

Copy after login

比较函数的两个参数：

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];

Copy after login

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}]

Copy after login

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"}]

Copy after login

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

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

语法:

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

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

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
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=[&#39;OB1&#39;,&#39;Koro1&#39;,&#39;OB2&#39;,&#39;Koro2&#39;,&#39;OB3&#39;,&#39;Koro3&#39;,&#39;OB4&#39;,&#39;Koro4&#39;,&#39;OB5&#39;,&#39;Koro5&#39;]
// 2位置开始被替换,3位置开始读取要替换的 5位置前面停止替换
a.copyWithin(2,3,5)
// ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"]

Copy after login

从上述栗子:

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

ES6: fill() 填充数组

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

参数:

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

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

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

MDN浏览器兼容

[&#39;a&#39;, &#39;b&#39;, &#39;c&#39;].fill(7)
// [7, 7, 7]
[&#39;a&#39;, &#39;b&#39;, &#39;c&#39;].fill(7, 1, 2)
// [&#39;a&#39;, 7, &#39;c&#39;]

Copy after login

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

ES5：
join、toLocateString、toStrigin、slice、cancat、indexOf、lastIndexOf、
ES7：
includes

join() 数组转字符串

定义: join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串。

语法:

array.join(str)
参数:

str(可选): 指定要使用的分隔符，默认使用逗号作为分隔符。

let a= [&#39;hello&#39;,&#39;world&#39;];
let str=a.join(); // &#39;hello,world&#39;
let str2=a.join(&#39;+&#39;); // &#39;hello+world&#39;

Copy after login

使用join方法或者下文说到的toString方法时，当数组中的元素也是数组或者是对象时会出现什么情况？

let a= [[&#39;OBKoro1&#39;,&#39;23&#39;],&#39;test&#39;];
let str1=a.join(); // OBKoro1,23,test
let b= [{name:&#39;OBKoro1&#39;,age:&#39;23&#39;},&#39;test&#39;];
let str2 = b.join(); // [object Object],test
// 对象转字符串推荐JSON.stringify(obj);

Copy after login

所以，join()/toString()方法在数组元素是数组的时候，会将里面的数组也调用join()/toString(),如果是对象的话，对象会被转为[object Object]字符串。

toLocaleString() 数组转字符串

定义: 返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接（由逗号隔开）组成。

语法:

array.toLocaleString()
参数：无。

1 2	`let a=[{name:'OBKoro1'},23,'abcd',new` `Date()];` `let str=a.toLocaleString();` `// [object Object],23,abcd,2018/5/28 下午1:52:20`

Copy after login

如上述栗子：调用数组的toLocaleString方法，数组中的每个元素都会调用自身的toLocaleString方法，对象调用对象的toLocaleString,Date调用Date的toLocaleString。

toString() 数组转字符串不推荐

定义: toString() 方法可把数组转换为由逗号链接起来的字符串。

语法:

array.toString()
参数: 无。

该方法的效果和join方法一样，都是用于数组转字符串的，但是与join方法相比没有优势，也不能自定义字符串的分隔符，因此不推荐使用。

值得注意的是：当数组和字符串操作的时候，js 会调用这个方法将数组自动转换成字符串

1 2	`let b= [ 'toString','演示'].toString();` `// toString,演示` `let a= ['调用toString','连接在我后面']+'啦啦啦';` `// 调用toString,连接在我后面啦啦啦`

Copy after login

slice() 浅拷贝数组的元素

定义：方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。

注意：字符串也有一个slice() 方法是用来提取字符串的，不要弄混了。

语法:

array.slice(begin, end);
参数:

begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。

end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。

let a= [&#39;hello&#39;,&#39;world&#39;];
let b=a.slice(0,1); // [&#39;hello&#39;]
a[0]=&#39;改变原数组&#39;;
console.log(a,b); // [&#39;改变原数组&#39;,&#39;world&#39;] [&#39;hello&#39;]
b[0]=&#39;改变拷贝的数组&#39;;
 console.log(a,b); // [&#39;改变原数组&#39;,&#39;world&#39;] [&#39;改变拷贝的数组&#39;]

Copy after login

如上：新数组是浅拷贝的，元素是简单数据类型，改变之后不会互相干扰。

如果是复杂数据类型(对象,数组)的话，改变其中一个，另外一个也会改变。

let a= [{name:&#39;OBKoro1&#39;}];
let b=a.slice();
console.log(b,a); // [{"name":"OBKoro1"}] [{"name":"OBKoro1"}]
// a[0].name=&#39;改变原数组&#39;;
// console.log(b,a); // [{"name":"改变原数组"}] [{"name":"改变原数组"}]
// b[0].name=&#39;改变拷贝数组&#39;,b[0].koro=&#39;改变拷贝数组&#39;;
// [{"name":"改变拷贝数组","koro":"改变拷贝数组"}] [{"name":"改变拷贝数组","koro":"改变拷贝数组"}]

Copy after login

原因在定义上面说过了的：slice()是浅拷贝，对于复杂的数据类型浅拷贝，拷贝的只是指向原数组的指针，所以无论改变原数组，还是浅拷贝的数组，都是改变原数组的数据。

cancat

定义：方法用于合并两个或多个数组，返回一个新数组。

语法：

var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)
参数：

arrayX（必须）：该参数可以是具体的值，也可以是数组对象。可以是任意多个。

eg1:

let a = [1, 2, 3];
 let b = [4, 5, 6];
 //连接两个数组
 let newVal=a.concat(b); // [1,2,3,4,5,6]
 // 连接三个数组
 let c = [7, 8, 9]
 let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]
 // 添加元素
 let newVal3 = a.concat(&#39;添加元素&#39;,b, c,&#39;再加一个&#39;); 
 // [1,2,3,"添加元素",4,5,6,7,8,9,"再加一个"]
// 合并嵌套数组 会浅拷贝嵌套数组
let d = [1,2 ];
let f = [3,[4]];
let newVal4 = d.concat(f); // [1,2,3,[4]]

Copy after login

ES6扩展运算符...合并数组：

因为ES6的语法更简洁易懂，所以现在合并数组我大部分采用...来处理，...运算符可以实现cancat的每个栗子，且更简洁和具有高度自定义数组元素位置的效果。

let a = [2, 3, 4, 5]
let b = [ 4,...a, 4, 4]
console.log(a,b); // [2, 3, 4, 5] [4,2,3,4,5,4,4]

Copy after login

indexOf() 查找数组是否存在某个元素，返回下标

定义: 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

语法:

array.indexOf(searchElement,fromIndex)
参数:

searchElement(必须):被查找的元素

fromIndex(可选):开始查找的位置(不能大于等于数组的长度，返回-1)，接受负值，默认值为0。

严格相等的搜索:

数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素，即数组元素要完全匹配才能搜索成功。

注意：indexOf()不能识别NaN

eg:

let a=[&#39;啦啦&#39;,2,4,24,NaN]
console.log(a.indexOf(&#39;啦&#39;)); // -1 
console.log(a.indexOf(&#39;NaN&#39;)); // -1 
console.log(a.indexOf(&#39;啦啦&#39;)); // 0

Copy after login

使用场景：

数组去重
根据获取的数组下标执行操作，改变数组中的值等。
判断是否存在，执行操作。

lastIndexOf() 查找指定元素在数组中的最后一个位置

定义: 方法返回指定元素,在数组中的最后一个的索引，如果不存在则返回 -1。（从数组后面往前查找）

语法:

arr.lastIndexOf(searchElement,fromIndex)
参数:

searchElement(必须): 被查找的元素

fromIndex(可选): 逆向查找开始位置，默认值数组的长度-1，即查找整个数组。

关于fromIndex有三个规则:

正值。如果该值大于或等于数组的长度，则整个数组会被查找。
负值。将其视为从数组末尾向前的偏移。(比如-2，从数组最后第二个元素开始往前查找)
负值。其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

let a=[&#39;OB&#39;,4,&#39;Koro1&#39;,1,2,&#39;Koro1&#39;,3,4,5,&#39;Koro1&#39;]; // 数组长度为10
// let b=a.lastIndexOf(&#39;Koro1&#39;,4); // 从下标4开始往前找 返回下标2
// let b=a.lastIndexOf(&#39;Koro1&#39;,100); // 大于或数组的长度 查找整个数组 返回9
// let b=a.lastIndexOf(&#39;Koro1&#39;,-11); // -1 数组不会被查找
let b=a.lastIndexOf(&#39;Koro1&#39;,-9); // 从第二个元素4往前查找，没有找到 返回-1

Copy after login

ES7 includes() 查找数组是否包含某个元素返回布尔

定义：返回一个布尔值，表示某个数组是否包含给定的值

语法：

array.includes(searchElement,fromIndex=0)
参数：

searchElement(必须):被查找的元素

fromIndex(可选):默认值为0，参数表示搜索的起始位置，接受负值。正值超过数组长度，数组不会被搜索，返回false。负值绝对值超过长数组度，重置从0开始搜索。

includes方法是为了弥补indexOf方法的缺陷而出现的:

indexOf方法不能识别NaN
indexOf方法检查是否包含某个值不够语义化，需要判断是否不等于-1，表达不够直观

eg:

let a=[&#39;OB&#39;,&#39;Koro1&#39;,1,NaN];
// let b=a.includes(NaN); // true 识别NaN
// let b=a.includes(&#39;Koro1&#39;,100); // false 超过数组长度 不搜索
// let b=a.includes(&#39;Koro1&#39;,-3); // true 从倒数第三个元素开始搜索 
// let b=a.includes(&#39;Koro1&#39;,-100); // true 负值绝对值超过数组长度，搜索整个数组

Copy after login

兼容性(MDN): chrome47, Firefox 43,Edge 14,Opera 34, Safari 9,IE 未实现。

遍历方法(12个):

js中遍历数组并不会改变原始数组的方法总共有12个:

ES5：
forEach、every 、some、 fliter、map、reduce、reduceRight、
ES6：
find、findIndex、keys、values、entries

关于遍历：

关于遍历的效率，可以看一下这篇详解JS遍历
尽量不要在遍历的时候，修改后面要遍历的值
尽量不要在遍历的时候修改数组的长度（删除/添加）

forEach
定义: 按升序为数组中含有效值的每一项执行一次回调函数。

语法：

array.forEach(function(currentValue, index, arr), thisValue)
参数:

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身

hisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

关于forEach()你要知道：

无法中途退出循环，只能用return退出本次回调，进行下一次回调。
它总是返回 undefined值,即使你return了一个值。

下面类似语法同样适用这些规则

1. 对于空数组是不会执行回调函数的
2. 对于已在迭代过程中删除的元素，或者空元素会跳过回调函数
3. 遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
4. 如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。

eg:

let a = [1, 2, ,3]; // 最后第二个元素是空的，不会遍历(undefined、null会遍历)
let obj = { name: &#39;OBKoro1&#39; };
let result = a.forEach(function (value, index, array) { 
 a[3] = &#39;改变元素&#39;;
 a.push(&#39;添加到尾端，不会被遍历&#39;)
 console.log(value, &#39;forEach传递的第一个参数&#39;); // 分别打印 1 ,2 ,改变元素
 console.log(this.name); // OBKoro1 打印三次 this绑定在obj对象上
 // break; // break会报错
 return value; // return只能结束本次回调 会执行下次回调
 console.log(&#39;不会执行，因为return 会执行下一次循环回调&#39;)
}, obj);
console.log(result); // 即使return了一个值,也还是返回undefined
// 回调函数也接受接头函数写法

Copy after login

every 检测数组所有元素是否都符合判断条件

定义: 方法用于检测数组所有元素是否都符合函数定义的条件

语法：

array.every(function(currentValue, index, arr), thisValue)
参数:(这几个方法的参数，语法都类似)

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

方法返回值规则:

如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。=

eg:

function isBigEnough(element, index, array) { 
 return element >= 10; // 判断数组中的所有元素是否都大于10
}
let result = [12, 5, 8, 130, 44].every(isBigEnough); // false
let result = [12, 54, 18, 130, 44].every(isBigEnough); // true
// 接受箭头函数写法 
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

Copy after login

some 数组中的是否有满足判断条件的元素

定义：数组中的是否有满足判断条件的元素

语法：

array.some(function(currentValue, index, arr), thisValue)
参数:(这几个方法的参数，语法都类似)

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

方法返回值规则：

如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

function isBigEnough(element, index, array) {
 return (element >= 10); //数组中是否有一个元素大于 10
}
let result = [2, 5, 8, 1, 4].some(isBigEnough); // false
let result = [12, 5, 8, 1, 4].some(isBigEnough); // true

Copy after login

filter 过滤原始数组，返回新数组

定义: 返回一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法：

let new_array = arr.filter(function(currentValue, index, arr), thisArg)
参数:(这几个方法的参数，语法都类似)

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

eg:

let a = [32, 33, 16, 40];
let result = a.filter(function (value, index, array) {
 return value >= 18; // 返回a数组中所有大于18的元素
});
console.log(result,a);// [32,33,40] [32,33,16,40]

Copy after login

map 对数组中的每个元素进行处理，返回新的数组

定义：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

语法：

let new_array = arr.map(function(currentValue, index, arr), thisArg)
参数:(这几个方法的参数，语法都类似)

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

eg:

let a = ['1','2','3','4'];
let result = a.map(function (value, index, array) {
 return value + '新数组的新元素'
});
console.log(result, a); 
// ["1新数组的新元素","2新数组的新元素","3新数组的新元素","4新数组的新元素"] ["1","2","3","4"]

Copy after login

reduce 为数组提供累加器，合并为一个值

定义：reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，最终合并为一个值。

语法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数：

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. total(必须)，初始值, 或者上一次调用回调返回的值
2. currentValue(必须),数组当前元素的值
3. index(可选), 当前元素的索引值
4. arr(可选),数组对象本身

initialValue(可选): 指定第一次回调的第一个参数。

回调第一次执行时:

如果 initialValue 在调用 reduce 时被提供，那么第一个 total 将等于 initialValue，此时 currentValue 等于数组中的第一个值；
如果 initialValue 未被提供，那么 total 等于数组中的第一个值，currentValue 等于数组中的第二个值。此时如果数组为空，那么将抛出 TypeError。
如果数组仅有一个元素，并且没有提供 initialValue，或提供了 initialValue 但数组为空，那么回调不会被执行，数组的唯一值将被返回。

eg:

// 数组求和 
let sum = [0, 1, 2, 3].reduce(function (a, b) {
 return a + b;
}, 0);
// 6
// 将二维数组转化为一维 将数组元素展开
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 (a, b) => a.concat(b),
 []
);
 // [0, 1, 2, 3, 4, 5]

Copy after login

reduceRight 从右至左累加

这个方法除了与reduce执行方向相反外，其他完全与其一致，请参考上述 reduce 方法介绍。

ES6：find()& findIndex() 根据条件找到数组成员

find()定义：用于找出第一个符合条件的数组成员，并返回该成员，如果没有符合条件的成员，则返回undefined。

findIndex()定义：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

这两个方法

语法：

1 2	`let new_array = arr.find(function(currentValue, index, arr), thisArg)` `let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)`

Copy after login

参数:(这几个方法的参数，语法都类似)

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

这两个方法都可以识别NaN,弥补了indexOf的不足.

eg:

// find
let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5
let b = [1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n)); // 返回元素NaN
// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
let b = [1, 4, -5, 10,NaN].findIndex((n) => Object.is(NaN, n)); // 返回索引4

Copy after login

浏览器兼容(MDN):Chrome 45,Firefox 25,Opera 32, Safari 8, Edge yes,

ES6 keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值

定义：三个方法都返回一个新的 Array Iterator 对象，对象根据方法不同包含不同的值。

语法：

array.keys()
array.values()
array.entries()

Copy after login

参数：无。

遍历栗子(摘自ECMAScript 6 入门)：

for (let index of ['a', 'b'].keys()) {
 console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
 console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
 console.log(index, elem);
}
// 0 "a"
// 1 "b"

Copy after login

在for..of中如果遍历中途要退出，可以使用break退出循环。

如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历:

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

Copy after login

entries()浏览器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 7.1

keys()浏览器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 8,

注意:目前只有Safari 9支持,，其他浏览器未实现，babel转码器也还未实现

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7839

Java Tutorial

1649

CakePHP Tutorial

1403

Laravel Tutorial

1300

PHP Tutorial

1240

Related knowledge

How to delete WeChat friends? How to delete WeChat friends Mar 04, 2024 am 11:10 AM

WeChat is one of the mainstream chat tools. We can meet new friends, contact old friends and maintain the friendship between friends through WeChat. Just as there is no such thing as a banquet that never ends, disagreements will inevitably occur when people get along with each other. When a person extremely affects your mood, or you find that your views are inconsistent when you get along, and you can no longer communicate, then we may need to delete WeChat friends. How to delete WeChat friends? The first step to delete WeChat friends: tap [Address Book] on the main WeChat interface; the second step: click on the friend you want to delete and enter [Details]; the third step: click [...] in the upper right corner; Step 4: Click [Delete] below; Step 5: After understanding the page prompts, click [Delete Contact]; Warm

How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts) May 01, 2024 pm 12:01 PM

Unfortunately, people often delete certain contacts accidentally for some reasons. WeChat is a widely used social software. To help users solve this problem, this article will introduce how to retrieve deleted contacts in a simple way. 1. Understand the WeChat contact deletion mechanism. This provides us with the possibility to retrieve deleted contacts. The contact deletion mechanism in WeChat removes them from the address book, but does not delete them completely. 2. Use WeChat’s built-in “Contact Book Recovery” function. WeChat provides “Contact Book Recovery” to save time and energy. Users can quickly retrieve previously deleted contacts through this function. 3. Enter the WeChat settings page and click the lower right corner, open the WeChat application "Me" and click the settings icon in the upper right corner to enter the settings page.

How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel. Mar 28, 2024 pm 12:50 PM

Tomato Novel is a very popular novel reading software. We often have new novels and comics to read in Tomato Novel. Every novel and comic is very interesting. Many friends also want to write novels. Earn pocket money and edit the content of the novel you want to write into text. So how do we write the novel in it? My friends don’t know, so let’s go to this site together. Let’s take some time to look at an introduction to how to write a novel. Share the Tomato novel tutorial on how to write a novel. 1. First open the Tomato free novel app on your mobile phone and click on Personal Center - Writer Center. 2. Jump to the Tomato Writer Assistant page - click on Create a new book at the end of the novel.

How to enter bios on Colorful motherboard? Teach you two methods Mar 13, 2024 pm 06:01 PM

Colorful motherboards enjoy high popularity and market share in the Chinese domestic market, but some users of Colorful motherboards still don’t know how to enter the bios for settings? In response to this situation, the editor has specially brought you two methods to enter the colorful motherboard bios. Come and try it! Method 1: Use the U disk startup shortcut key to directly enter the U disk installation system. The shortcut key for the Colorful motherboard to start the U disk with one click is ESC or F11. First, use Black Shark Installation Master to create a Black Shark U disk boot disk, and then turn on the computer. When you see the startup screen, continuously press the ESC or F11 key on the keyboard to enter a window for sequential selection of startup items. Move the cursor to the place where "USB" is displayed, and then

The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs) May 04, 2024 pm 06:01 PM

Mobile games have become an integral part of people's lives with the development of technology. It has attracted the attention of many players with its cute dragon egg image and interesting hatching process, and one of the games that has attracted much attention is the mobile version of Dragon Egg. To help players better cultivate and grow their own dragons in the game, this article will introduce to you how to hatch dragon eggs in the mobile version. 1. Choose the appropriate type of dragon egg. Players need to carefully choose the type of dragon egg that they like and suit themselves, based on the different types of dragon egg attributes and abilities provided in the game. 2. Upgrade the level of the incubation machine. Players need to improve the level of the incubation machine by completing tasks and collecting props. The level of the incubation machine determines the hatching speed and hatching success rate. 3. Collect the resources required for hatching. Players need to be in the game

How to set font size on mobile phone (easily adjust font size on mobile phone) May 07, 2024 pm 03:34 PM

Setting font size has become an important personalization requirement as mobile phones become an important tool in people's daily lives. In order to meet the needs of different users, this article will introduce how to improve the mobile phone use experience and adjust the font size of the mobile phone through simple operations. Why do you need to adjust the font size of your mobile phone - Adjusting the font size can make the text clearer and easier to read - Suitable for the reading needs of users of different ages - Convenient for users with poor vision to use the font size setting function of the mobile phone system - How to enter the system settings interface - In Find and enter the "Display" option in the settings interface - find the "Font Size" option and adjust it. Adjust the font size with a third-party application - download and install an application that supports font size adjustment - open the application and enter the relevant settings interface - according to the individual

Summary of methods to obtain administrator rights in Win11 Mar 09, 2024 am 08:45 AM

A summary of how to obtain Win11 administrator rights. In the Windows 11 operating system, administrator rights are one of the very important permissions that allow users to perform various operations on the system. Sometimes, we may need to obtain administrator rights to complete some operations, such as installing software, modifying system settings, etc. The following summarizes some methods for obtaining Win11 administrator rights, I hope it can help you. 1. Use shortcut keys. In Windows 11 system, you can quickly open the command prompt through shortcut keys.

Detailed explanation of Oracle version query method Mar 07, 2024 pm 09:21 PM

Detailed explanation of Oracle version query method Oracle is one of the most popular relational database management systems in the world. It provides rich functions and powerful performance and is widely used in enterprises. In the process of database management and development, it is very important to understand the version of the Oracle database. This article will introduce in detail how to query the version information of the Oracle database and give specific code examples. Query the database version of the SQL statement in the Oracle database by executing a simple SQL statement

See all articles