ECMAScript 6——数组

1.扩展运算符之(spread)(...)

例如:

  1. console.log(...[4,5,6])
    //4 5 6
  2. console.log(1,...[4,5,6],7)
    //1 4 5 6 7
  3. const arr=[...(x>0?['a']:[]),'b'];
    //...运算符后面可以放表达式
  4. [...[],1]
    //[1] ...运算符号是空数组不产生任何结果。

可能会用到的地方:
函数
例:function f(z,x,c,v,b,n){}
var args=[0,1];
f(-1,...args,2,...[3])
此时...args等同于...[0,1]也就是0 1

2.es5的apply()方法被es6(spread)(...)取代,更方便。

举例
<b>1.两者的对比之求数组最大值</b>
例:
//ES5的写法
Math.max.apply(null,[1,2,3])
//ES6的写法
Math.max(...[1,2,3])
//等同于
Math.max(1,2,3)

更方便的应用于:

1..用于将一个数组添加到另一个数组的尾部

//ES5的写法
var arr1=[0,1,2];
var arr2=[3,4,5];
Array.prototype.push.apply(arr1,arr2);
//ES6的写法
var arr1=[0,1,2];
var arr2=[3,4,5];
arr1.push(...arr2);

2.与解构赋值结合使用,用于返回一个对象但是需要不同的分组的情况

const [first,...rest]=[1,2,3,4,5];
//first对应于值1
//rest对应于值[2,3,4,5]

3.函数返回值,es5中js只能返回一个值,如果是多个值则需要返回数组或者对象,es6(...)运算符可以直接解析返回的一堆数据</b>

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

4.用于将字符串转化为真正的数组</b>

[...'hello']
// [ "h", "e", "l", "l", "o" ]

3.Array.of()

<b>Array.of()将一组值,转化为数组</b>
Array.of(3, 11, 8) // [3,11,8]
<b>Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。</b>
<b>两者的对比:</b>
<b>Array()</b>
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
<b>Array.of</b>
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

4.数组实例的 copyWithin()

Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数。

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

<h3><b>5.数组实例的 find() 和 findIndex()</b></h3>
举例
<b>1.</b>[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
<b>2.</b>[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2

<p>find()方法找到的是第一个目标值,第二个就不管了。findIndex()找到的是第一目标值的索引位子,第二个就不继续找了。当然也弥补了indexof()方法的不足</p>
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0

<h3><b>6.遍历数组的不同方法</b></h3>
entries(),keys() 和 values()。区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
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"

<h3><b>7.includes(),indexOf()查找是否包含某个值</b></h3>
[1, 2, 3].includes(3, 3); // false 第一个参数表示要查找的值,
[1, 2, 3].includes(3, -1); // true
[NaN].indexOf(NaN)
// -1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容