es6学习笔记一数组(下)
entries() 方法:
概述: entries() 方法返回一个 Array Iterator(数组迭代) 对象,该对象包含数组中每一个索引的键值对。
示例:
let arr = ["a", "b", "c"]; let eArr = arr.entries(); console.log(eArr);//数组迭代对象 console.log(eArr.next().value); // [0, "a"] console.log(eArr.next().value); // [1, "b"] console.log(eArr.next().value); // [2, "c"]
keys()方法:
概述: 数组的 keys()
方法返回一个数组索引的迭代器。(该方法和entries方法相似)
示例:
示例1:
var arr = ["a", "b", "c"]; var iterator = arr.keys(); console.log(iterator.next()); // { value: 0, done: false } console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: undefined, done: true }
示例2:
var arr = ["a", "b", "c"]; var iterator = arr.keys(); for(var i=0;i<arr.length;i++){ console.log(iterator.next()); }
打印结果:
示例3:索引迭代器会包含那些没有对应元素的索引
var arr = ['a','b',,'f']; var sparseKeys = Object.keys(arr); var denseKeys = [...arr.keys()]; console.log(sparseKeys); //["0", "1", "3"] console.log(denseKeys); // [0, 1, 2, 3]
示例4:
var arr = ['a','b',,'f']; var iterator = arr.keys(); for(var i=0;i<arr.length;i++){ console.log(iterator.next()); console.log('数组arr第'+(i+1)+'个元素的值是:'+arr[i]); }
打印结果:
forEach()方法:
概述: forEach() 方法让数组的每一项都执行一次给定的函数。
参数:
callback
:用来测试每个元素的函数;(注意:callback
只会被有值的索引调用,不会被那些被删除或从来未被赋值的索引调用)
currentValue:当前项(指遍历时正在被处理那个数组项)的值。
index:当前项的索引(或下标)。
array
:数组本身。
thisArg
:执行 callback
时使用的 this
值。(
。并不说只能传这几种类型的值哦thisArg
传:number、string、object、Boolean、null、undefined这几种类型的值都可以)
描述:
如果给forEach传递了thisArg
参数,它将作为 callback
函数的执行上下文,类似执行如下函数callback.call(thisArg, element, index, array)
。如果 thisArg
值为 undefined
或 null
,函数的this
值取决于当前执行环境是否为严格模式(严格模式下为 undefined,非严格模式下为全局对象)。
forEach
遍历的范围在第一次调用 callback
前就会确定。调用forEach
后添加到数组中的项不会被 callback
访问到。如果已经存在的值被改变,则传递给 callback
的值是 forEach
遍历到他们那一刻的值。已删除的项不会被遍历到。
示例:
var obj=[{ id:1, name:'张甜甜', age:20 },{ id:2, name:'一丢丢', age:22 },{ id:3, name:'zen', age:28 },{ id:4, name:'张小颖', age:22 },{ id:5, name:'五河士道', age:20 }]; obj.forEach(function(item){ console.log('第'+item.id+'个学生:'+item.name+'的年龄是:'+item.age); });
打印结果:
map()方法:
概述: map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。
参数:
callback
:用来测试每个元素的函数;(注意:callback
只会被有值的索引调用,不会被那些被删除或从来未被赋值的索引调用)
currentValue:数组中当前被传递的元素。
index:数组中当前被传递的元素的索引。
array
:调用 map
方法的数组。
thisArg
:执行 callback
时使用的 this
值。(
。并不说只能传这几种类型的值哦thisArg
传:number、string、object、Boolean、null、undefined这几种类型的值都可以)
描述:
如果 thisArg
参数有值,则每次 callback
函数被调用的时候,this
都会指向 thisArg
参数上的这个对象。如果省略了 thisArg
参数,
或者赋值为 null
或 undefined
,则 this 指向全局对象 。
map
不修改调用它的原数组本身(当然可以在 callback
执行时改变原数组)。
使用 map 方法处理数组时,数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中:原数组中新增加的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值;而被删除的元素将不会被访问到。
示例:
var nameData=['豆豆','大云','小二'] function findName(single){ if(single=='大云'){ single+='good'; } return single; } let mapData1=nameData.map(findName); console.log(mapData1);//["豆豆", "大云good", "小二"], console.log(nameData);//["豆豆", "大云", "小二"]
fill()方法:
概述: fill()
方法,可以将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值。会改变原数组的值
参数:
value:用来填充数组元素的值。
start:可选,开始索引。
end
:可选,结束索引。
描述:
具体要填充的元素区间是 [start
, end
) , 一个半开半闭区间.
fill
方法接受三个参数 value
, start
以及 end
. start
和 end
参数是可选的, 其默认值分别为 0
和 this
对象的 length 属性值
.
如果 start
是个负数, 则开始索引会被自动计算成为 length+start, 其中
length
是 this
对象的 length 属性值
. 如果 end
是个负数, 则结束索引会被自动计算成为 length+end
.
fill 方法故意被设计成通用方法, 也就是说它不需要 this
值必须是个数组对象, 类数组对象也是可以调用该方法的 .
fill 方法是个可变方法, 它会改变调用它的 this
对象本身, 然后返回它, 而并不是返回一个副本.
示例:
var a=[1,2,,4,6],b=[2,0,5,,6,8],c=['a','b','c',,'e',5,6,6],d=['a','b',,'e',5,6,8],e=['a','b',,'e',5,6,8]; console.log(a.fill(4));// console.log(a);// console.log(b.fill(1, 1, 7));// console.log(b);// console.log(c.fill(1, -3, -1));// console.log(c);// console.log(d.fill(1, -1, -3));// console.log(d);// console.log(e.fill(2, -5, -8));// console.log(e);//
打印结果:
includes()方法:
概述: includes() 方法用来判断当前数组是否包含某指定的值,如果是,则返回 true,否则返回 false。
参数:
searchElement:需要查找的元素值。
fromIndex:可选参数。从该索引处开始查找
searchElement
,默认为 0。
示例:
console.log([1, 2, 3].includes(2,1));//true console.log([1, 2, 3].includes(2,2));//false console.log([1, 2, 3].includes(2,-2));//true
indexOf()方法:
概述: indexOf()方法
返回给定元素能找在数组中找到的第一个索引值,否则返回-1。
参数:
searchElement:需要查找的元素值。
fromIndex:开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,仍然从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.
描述:
indexOf
使用strict equality (无论是 ===, 还是 triple-equals操作符都基于同样的方法)进行判断searchElement与
数组中包含的元素之间的关系。
示例:
示例1:
使用
indexOf方法确定多个值在数组中的位置。
var a=["1", "3", "2", "3", "0"]; console.log(a.indexOf ('3'));//1 console.log(a.indexOf (5,'0'));//-1 console.log(a.indexOf ('0'));//4 console.log(a.indexOf ('0',-5));//4 console.log(a.indexOf ('3',-1));//-1 console.log(a.indexOf ('3',-3));//3 console.log(a.indexOf ('1',5));//-1 console.log(a.indexOf (3));//-1 console.log(a);//["1", "3", "2", "3", "0"]
示例2:
使用
indexOf方法找出指定元素出现的所有位置。
var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.indexOf(element); while (idx != -1) { indices.push(idx); idx = array.indexOf(element, idx + 1); } console.log(indices);//[0, 2, 4]
示例3:
使用
indexOf方法判断一个元素是否在数组里,不在则更新数组
。
function updateVegetablesCollection (veggies, veggie) { if (veggies.indexOf(veggie) === -1) { veggies.push(veggie); //新的蔬菜集合:土豆、番茄、辣椒、青椒、菠菜 console.log('New veggies collection is : ' + veggies);//New veggies collection is : potato,tomato,chillies,green-pepper,spinach } else if (veggies.indexOf(veggie) > -1) { //番茄已经存在于蔬菜集合 console.log(veggie + ' already exists in the veggies collection.');//tomato already exists in the veggies collection. } } //土豆 番茄 辣椒 青椒 var veggies = ['potato', 'tomato', 'chillies', 'green-pepper']; //菠菜 updateVegetablesCollection(veggies, 'spinach'); updateVegetablesCollection(veggies, 'tomato');
lastIndexOf()方法:
概述: lastIndexOf()
方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex
处开始。
参数:
searchElement:需要查找的元素值。
fromIndex:开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找
,以此类推。 注意:如果参数中提供的索引值是一个负值,仍然从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.
描述:
lastIndexOf
使用严格相等(strict equality,即 ===)比较 searchElement
和数组中的元素。
示例:
示例1:
使用
lastIndexOf
定位数组中的值的位置。
var array = [2, 5, 9, 2]; console.log(array.lastIndexOf(2));//3 console.log(array.lastIndexOf(7));//-1 console.log(array.lastIndexOf(2, 3));//3 console.log(array.lastIndexOf(2, 2));//0 console.log(array.lastIndexOf(2, -2));//0 console.log(array.lastIndexOf(2, -1));//3 console.log(array.lastIndexOf(2, -4));//0 console.log(array.lastIndexOf(2, -5));//-1
示例2:
使用
lastIndexOf
查找到一个元素在数组中所有的索引(下标)。
var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.lastIndexOf(element); while (idx != -1) { indices.push(idx); idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1); } console.log(indices);//[4, 2, 0]
join()方法:
概述: join() 方法将数组中的所有元素连接成一个字符串。
参数:
separator
:可选,用于指定连接每个数组元素的分隔符。分隔符会被转成字符串类型;如果省略的话,默认为一个逗号。如果 seprator
是一个空字符串,那么数组中的所有元素将被直接连接。
描述:
所有的数组元素被转换成字符串,再用一个分隔符将这些字符串连接起来。如果元素是undefined 或者null, 则会转化成空字符串。
示例:
var a = ['苹果', '火龙果', '榴莲']; console.log('我爱吃:'+a.join());// 我爱吃:苹果,火龙果,榴莲 console.log('我爱吃:'+a.join(', ')); //我爱吃:苹果, 火龙果, 榴莲 console.log('我爱吃:'+a.join(' + ')); //我爱吃:苹果 + 火龙果 + 榴莲 console.log(a);//["苹果", "火龙果", "榴莲"] console.log('我爱吃:'+a.join('')); //我爱吃:苹果火龙果榴莲
reduce
()方法:
概述: reduce()
方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。
参数:
callback:执行数组中每个值的函数,包含四个参数
previousValue:上一次调用回调返回的值,或者是提供的初始值
currentValue:数组中当前被处理的元素
index:
当前元素在数组中的索引
array:调用 reduce
的数组
initialValue:作为第一次调用 callback 的第一个参数。
描述:
reduce
为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce
的数组。
回调函数第一次执行时,previousValue
和 currentValue
的取值有两种情况,如果 initialValue 在调用 reduce 时被提供,那么第一个 previousValue 等于 initialValue ,并且currentValue 等于数组中的第一个值;如果initialValue 未被提供,那么previousValue 等于数组中的第一个值,currentValue等于数组中的第二个值。
如果数组为空并且没有提供initialValue, 会抛出TypeError
。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue, 或者有提供initialValue但是数组为空,那么此唯一值将被返回并且callback不会被执行。
示例:
示例1:
var reduceValue = [0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) { return previousValue + currentValue; }); console.log(reduceValue);//10
previousValue |
currentValue |
index |
array |
return value | |
first call | 0 |
1 | 1 | [0,1,2,3,4] |
1 |
second call | 1 | 2 | 2 | [0,1,2,3,4] |
3 |
third call | 3 | 3 | 3 | [0,1,2,3,4] |
6 |
fourth call | 6 | 4 | 4 | [0,1,2,3,4] |
10 |
示例2:
var reduceValue=[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) { return previousValue + currentValue; }, 10); console.log(reduceValue);//20
previousValue |
currentValue |
index |
array |
return value | |
first call | 10 |
0 | 0 | [0,1,2,3,4] |
|
second call | 10 | 1 | 1 | [0,1,2,3,4] |
11 |
third call | 11 | 2 | 2 | [0,1,2,3,4] |
13 |
fourth call | 13 | 3 | 3 | [0,1,2,3,4] |
16 |
fifth call | 16 | 4 | 4 | [0,1,2,3,4] |
20 |
示例3:
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b); }); // flattened is [0, 1, 2, 3, 4, 5]
reduceRight()
方法:
概述: reduceRight()
方法接受一个函数作为累加器(accumulator),让每个值(从右到左,亦即从尾到头)缩减为一个值。(与 reduce()
的执行方向相反)
参数:
callback:执行数组中每个值的函数,包含四个参数
previousValue:上一次调用回调返回的值,或者是提供的初始值
currentValue:数组中当前被处理的元素
index:
当前元素在数组中的索引
array:调用 reduce
的数组
initialValue:作为第一次调用 callback 的第一个参数。
描述:
reduceRight
为数组中每个元素调用一次 callback
回调函数,但是数组中被删除的索引或从未被赋值的索引会跳过。回调函数接受四个参数:初始值(或上次调用回调的返回值)、当前元素值、当前索引,以及调用 reduce
的数组。
首次调用回调函数时,previousValue
和 currentValue
可以是两个值之一。如果调用 reduceRight
时提供了 initialValue
参数,则 previousValue
等于 initialValue
,currentValue
等于数组中的最后一个值。如果没有提供 initialValue
参数,则 previousValue
等于数组最后一个值, currentValue
等于数组中倒数第二个值。
如果数组为空,且没有提供 initialValue
参数,将会抛出一个 TypeError 错误。如果数组只有一个元素且没有提供
initialValue
参数,或者提供了 initialValue
参数,但是数组为空将会直接返回数组中的那一个元素或 initialValue
参数,而不会调用 callback
。
示例:
示例1:
var reduceRightValue=[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) { return previousValue + currentValue; }); console.log(reduceRightValue);//10
previousValue |
currentValue |
index |
array |
return value | |
first call | 4 |
3 | 3 | [0,1,2,3,4] |
7 |
second call | 7 | 2 | 2 | [0,1,2,3,4] |
9 |
third call | 9 | 1 | 1 | [0,1,2,3,4] |
10 |
fourth call | 10 | 0 | 0 | [0,1,2,3,4] |
10 |
示例2:
var reduceRightValue=[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) { return previousValue + currentValue; },2); console.log(reduceRightValue);//12
previousValue |
currentValue |
index |
array |
return value | |
first call | 2 |
4 | 4 | [0,1,2,3,4] |
|
second call | 6 | 3 | 3 | [0,1,2,3,4] |
9 |
third call | 9 | 2 | 2 | [0,1,2,3,4] |
11 |
fourth call | 11 | 1 | 1 | [0,1,2,3,4] |
12 |
fifth call | 12 | 0 | 0 | [0,1,2,3,4] |
12 |
示例3:
var flattened = [ [0, 1], [2, 3], [4, 5] ].reduceRight(function(a, b) { return a.concat(b); }, []); console.log(flattened); //[4, 5, 2, 3, 0, 1]
reverse()
方法:
概述: reverse()
方法颠倒数组中元素的位置。第一个元素会成为最后一个,最后一个会成为第一个。会改变原数组的值
描述:
reverse
方法颠倒数组中元素的位置,并返回该数组的引用。
示例:
var myArray = [1, 2, 3]; myArray.reverse(); console.log(myArray) //[3, 2, 1]
slice()
方法:
概述: slice()
方法会浅复制(shallow copy)数组的一部分到一个新的数组,并返回这个新数组。
参数:
begin:从该索引处开始提取原数组中的元素(从0开始)。
如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。
如果省略 begin,则slice从索引0开始。
end:在该索引处结束提取原数组元素(从0开始)。slice会提取原数组中索引从begin到end的所有元素(包含begin,但不包含end)。
slice(1,4)提取原数组中的第二个元素开始直到第四个元素的所有元素(索引为1,2,3的元素)。
如果该参数为复数,则它表示在原数组中的倒数第几个元素结束抽取。slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。
如果end被省略,则slice会一直提取到原数组末尾。
描述:
slice不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组,原数组的元素会按照下述规则拷贝:
如果该元素是个对象引用(不是实际的对象),slice会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
对于字符串、数字及布尔值来说(不是String、Number或者Boolean对象),slice会拷贝这些数值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。
如果像两个数组任意一个中添加了新元素,则另一个不会收到影响。
示例:
var myArray = [1, 2, 3,,5,6,7]; console.log(myArray.slice(1,9)); console.log(myArray.slice(1,5)); console.log(myArray); console.log(myArray.slice(-2)); console.log(myArray.slice(-4,-1)); console.log(myArray.slice(-9,-1));
sort()
方法:
概述: sort()
方法对数组的元素做原地的排序,并返回这个数组。 sort 排序可能是不稳定的。默认按照字符串的Unicode码位点(code point)排序。会改变原数组的值
参数:
compareFunction
:可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
描述:
如果没有指明 compareFunction
,那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。例如 "Banana" 会被排列到 "cherry" 之前。数字比大小时,9 出现在 80 之前,但这里比较时数字会先被转换为字符串,所以 "80" 比 "9" 要靠前。
示例:
示例1:
var fruit = ['cherries', 'apples', 'bananas']; console.log(fruit.sort()); //["apples", "bananas", "cherries"] console.log('数组fruit:'+fruit); //数组fruit:apples,bananas,cherries var scores = [1, 10, 2, 21]; console.log(scores.sort()); // [1, 10, 2, 21] console.log('数组scores:'+scores); //数组scores:1,10,2,21 var things = ['word', 'Word', '1 Word', '2 Words']; console.log(things.sort()); // ["1 Word", "2 Words", "Word", "word"] console.log('数组things:'+things); //数组things:1 Word,2 Words,Word,word
如果指明了 compareFunction
,那么数组会按照调用该函数的返回值排序。记 a 和 b 是两个将要被比较的元素:
- 如果
compareFunction(a, b)
小于 0 ,那么 a 会被排列到 b 之前;
- 如果
compareFunction(a, b)
等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
- 如果
compareFunction(a, b)
大于 0 , b 会被排列到 a 之前。 compareFunction(a, b)
必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
示例2:
var numbers = [4, 2, 5, 1, 3,21]; numbers.sort(function(a, b) { return a > b; }); console.log(numbers);//[1, 2, 3, 4, 5, 21]
toLocaleString()
方法:
概述: toLocaleString()
返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString
方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。
描述:
数组中的元素将会使用各自的 toLocaleString 方法:
Object
:Object.prototype.toLocaleString()
Number
:Number.prototype.toLocaleString()
Date
:Date.prototype.toLocaleString()
示例:
示例1:
var numbers = [4, 2, 5, 1, 3,21]; console.log(numbers.toLocaleString()); //4,2,5,1,3,21 console.log(numbers);//[4, 2, 5, 1, 3, 21]
示例2:
var number = '今天的时间:'; var date = new Date(); var myArr = [number, date, "西安"]; var str = myArr.toLocaleString(); console.log(str);//今天的时间:,2016/10/28 下午4:06:42,西安:
toString()
方法:
概述: toString()
返回一个字符串,表示指定的数组及其元素。
描述:
Array
对象覆盖了 Object
的 toString
方法。对于数组对象,toString
方法返回一个字符串,该字符串由数组中的每个元素的 toString()
返回值经调用 join()
方法连接(由逗号隔开)组成。例如,下面的代码创建了一个数组,然后使用 toString
方法把该数组转成一个字符串。
示例:
示例1:
var numbers = [4, 2, 5, 1, 3,21]; console.log(numbers.toString()); //4,2,5,1,3,21 console.log(numbers);//[4, 2, 5, 1, 3, 21]
示例2:
var number = '今天的时间:'; var date = new Date(); var myArr = [number, date, "西安"]; var str = myArr.toString(); console.log(str);//今天的时间:,Fri Oct 28 2016 16:52:41 GMT+0800 (中国标准时间),西安: