JavaScript Array

创建: 2019/02/19

更新: 2019/02/19 从【JavaScript 基础】迁入 Array相关内容

完成: 2019/3/27?

 生成
 符号生成 

var sample = [1, 2, 3 ,4];
 注意: 空白等于undefined, 也算长度length
  
var sample = [1, 2, , 4] // 1, 2, undefined, 4
sample.length; //4
 注意: 同一个数组的元素可以容纳任意类型
 构析函数   
[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

 

var 变量名 = new Array(各项元素); //以 ,  隔开

例:
var odd = new Array(1, 3, 5, 7, 9);
var empty = new Array(); // []
var includeBlank = new Array(1, 2, , 4); //[1, 2, , 4]
var various = new Array(1, 'One', {one: 1, two: 2});

 

 只有一个非负整数参数时，表示长度

var sample = new Array(1);

 
 获取

  数组变量[索引]

var array = [1, 2, 3, 4];
array[0]; // 1
array[1]; //2

 获取不存在的时返回undefined
 增加与删除元素

 增加元素

var a = [];
a[2] = 1; // 直接指定索引添加，索引前不存在的全部是undefined
//在末尾添加用push
a.push(5);// [, , 1, 5]

 删除元素

delete(a[3]); //参数是要删除的数组及要删除元素的索引的式子

 

 
 length属性  存在的最大索引数+1
 指定数值的话，后面的内容全部删除
 sample = [1, 2, 3, 4]
 sample.length = 2 // [1, 2]
 确认是否存在某元素

 hasOwnProperty("...")

 参数是数组的索引 

var a = [1, 2, 3, , , , 7];
a.hasOwnProperty(1); //true
a.hasOwnProperty(3); //fasle
a.hasOwnProperty(5); //false
a.hasOwnProperty(6); //true

 
 疏松的数组

 包含undefined的数组

 undefined也占长度，但是for/in 下是不存在的

 确认是否存在某元素 hasOwnProperty()
   
   
   
   

 

数组的方法(Array.prototype的属性)
 变更自身

 会改变数组自身

 copyWithin(target, start=0, end=ary.length)

 

copyWithin(target[, start[, end]])

 

 复制 begin~end-1 的元素到target

 ● 返回变化后的新数组

 

 target

 复制到的位置, 负数则+ary.length
 start

 开始复制的起点, 负数则+ary.length

 默认0
 end

 开始复制的终点(不包含此位置), 负数则+ary.length

 默认ary.length

 

a = Array(10);
a[a.length-1] = 2;
a[a.length-2] = 1;
a[a.length-3] = 0;
console.log(a); // => [empty × 7, 0, 1, 2]
a.copyWithin(0, -3);
console.log(a); // =>  [0, 1, 2, empty × 4, 0, 1, 2]

 
 fill(value, start=0, end=array.length)

 

fill(value[, start[, end]])

 

 将 begin~end-1 位置的元素替换为value
 pop()

 删除并返回末尾元素
 push(data1[, data2, ...])

 ● 在末尾添加data

 ● 返回变化后的数组长度

 注: 参数可以为多个 

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

 倒序(改变自身并返回自身)
 sort(callback)

 ● 对元素用callback方法来排序

 ● 返回排列后的数组

 ● 参数 

 f(a, b)

 a: 左元素, b: 右元素

 ● 返回值

 

 <0  a在b前
 =0  a和b位置相同
 >0  a在b后

 
   

 ● 省略参数则元素转换成字符串, 按词典顺序排序

    undefined放最后

 
 splice(index=0, howmany=this.length[, data, ...])

 

splice(index[, howmany[, data, ...]])

 

 ● 添加或删除元素

 ● 返回值为被删除的元素的数组

 ● 参数含义

 index

 开始位置

 大于数组长度则设为数组长度

 小于零则加上数组长度(即指 倒数第|index|个 )
 howmany

 删除的元素数

 省略则删除index后全部元素(包括index)

 0

 第三参数

 存在  
   

 
 >0  

 
 data...  

 例:

 

 只指定第一个参数

 删除第一个参数指定位置及之后的所有元素

a = [0, 1, 2, 3, 4, 5, 6];
// 指定第一个参数则删除之后(包含第一个参数)的
a.splice(1); // => [1, 2, 3, 4, 5, 6]
// a: [0]

 

 
 指定第1，2参数

 删除第一个参数指定位置起的第二个参数个的元素 

 第二参数为0则不删除

 

a.splice(1, 2); // => [1, 2]
// a: [0, 3, 4, 5, 6] 

 
 指定第1，2参数并继续指定参数

 删除后第3参数及之后的插入到原第一参数位置上 

a.splice(1, 2, 2, 1); // => [1, 2]
// a: [0, 2, 1, 3, 4, 5, 6]

 

 
 shift()  删除并返回开头第一个元素
 unshift(data1[, data2, ...])

 ● 在开头添加指定元素

 ● 按参数顺序从前往后:

 ● 返回变化后的数组长度

 

[1, 2, 3].unshift(4, 5, 6); //=> [4, 5, 6, 1, 2, 3]

 
   
   

 
 获取

 不改变自身

 concat(array1[,array2,...])

 把参数的数组连到现在数组最后

 ● 只展开一次

 ● 参数的数组内部元素全部都是浅复制(参照则为参照)
 join(string=",")

 把数组以参数string为分隔字符连接成字符串

 ● 先把元素转换成字符串

 ●  undefined/null 都转换成空字符串 "" 

 ● 分隔符指定为 "" 则为单纯的连接
 slice(begin=0, end=array.length)

 

slice(begin[, end])

 

 获取从begin到end-1的新数组

 ● 参数 

 begin

 开始处

 ● 默认0

 ● 负数时+array.length
 end

 结束处(不包含end位置)

 ● 默认array.length

 ● 负数时+array.length

 
 indexOf(searchElement, fromIndex=0)

 

indexOf(searchElement[, fromIndex = 0])

 获取和第一个searchElement相等元素的index

 ● 找不到则返回-1

 ● 参数

 searchElement  需要搜索的值
 fromIndex

 搜索开始的位置

 ● 默认0

 ● 负数时+array.length

 ● 一直搜索到最后一个(arr.length-1)

 故指定arr.length则不搜索(返回-1)

 
 lastIndexOf(searchElement, fromIndex=0)

 

lastIndexOf(searchElement[, fromIndex = 0])

 

 获取最后一个和searchElement相等元素的index

 ● 找不到则返回-1

 ● 参数

searchElement  需要搜索的值
 fromIndex

 搜索开始的位置(从后万前搜索)

 ● 默认array.length-1

 ● 负数时+array.length

 ● 一直搜索到第一个

 
 toLocaleString()

 把元素转换成所在地对应的字符串并以  ,  连接

 ● 相当于 join() 
 toString()

 把元素转换成字符串并以  ,  连接

 ● 相当于 join() 
   

 
 迭代 

 ● 对null/undefined不呼出callback

 ● thisArg对箭头函数无效

 every(callback[, thisArg])

 若有callback返回false, 则为false。否则为true

● 参数

 callback

 

function(value, index, array) {}

 可以省略部分或全部参数

 value  现在的值
 index  现在的索引
 array  现在的数组
 thisArg  callback里的this的值

 
 some(callback[, thisArg])

 元素中有没有元素满足callback

 有至少一个则返回true, 没有满足的则返回false

● 参数

 callback

 

function(value, index, array) {}

 

 可以省略部分或全部参数

 value  现在的值
 index  现在的索引
 array  现在的数组

 
 thisArg  callback里的this的值

 
 filter(callback[, thisArg])

 生成callback返回true的元素构成的新数组

● 参数

 callback

 

function(value, index, array) {}

 

 可以省略部分或全部参数

 value  现在的值
 index  现在的索引
 array  现在的数组

 
 thisArg  callback里的this的值

 
 find(callback[, thisArg])

 获取第一个使callback返回true的元素

 ● 参数

 callback

 

function(value, index, array) {}

 

 可以省略部分或全部参数

 value  现在的值
 index  现在的索引
 array  现在的数组

 
 thisArg  callback里的this的值

 
 findIndex(callback[, thisArg])

 获取第一个使callback返回true的元素的index

 ● 参数

 callback

 

function(value, index, array) {}

 

  可以省略部分或全部参数

 value  现在的值
 index  现在的索引
 array  现在的数组

 
 thisArg  callback里的this的值

 
 forEach(callback[, thisArg])

 按元素顺序用callback处理元素

● 参数

 callback

 

function(value, index, array) {}

 

 可以省略部分或全部参数

 value  现在的值
 index  现在的索引
 array  现在的数组
 thisArg  callback里的this的值

 
 map(callback[, thisArg])

 返回callback结果的数组

var b = a.map((v)=>{
  return 100;
});

 ● 参数

 callback

 

function(value, index, array) {}

 

 可以省略部分或全部参数

 value  现在的值
 index  现在的索引
 array  现在的数组
 thisArg  callback里的this的值

 
 reduce(callback[, initial])

 用callback把元素从左往右处理返回一个数

 ● 参数 

 callback

  function(prev, value[, index[, array]]) 

 参数全都可以省略

 prev

 上一次处理的返回值

 ● 第一次时

 (是否指定initial) ? (prev为initial, value为第一个) : (prev为第一个, value为第二个) 
 value  现在处理的值
 index  现在处理的值的索引
 array  当前数组

 
 initial

 第一次呼出callback时, prev的值

 ● 可省略

 
 reduceRight(callback[, initial])

 用callback把元素从右往左处理返回一个数

 ● 参数

 和reduce一样, 但是实际运行为从右往左
 entries()

 获取要素的index和值的数组构成的迭代器 

 ● 形式:  [index, value] 

a = [1, 2, 3, 4, 5, 6];
var iter = a.entries();
for (var temp of iter) {
  console.log(temp);
}
/*
(2) [0, 1]
(2) [1, 2]
(2) [2, 3]
(2) [3, 4]
(2) [4, 5]
(2) [5, 6]
*/

 

 
 keys()

 返回以index为值的迭代器
 values()

 返回元素的值的迭代器
   
   

 
   
多重数组
 生成

 数组的元素设为数组即可

var a = Array(10);
for(var i = 0; i < a.length; i++) {
    a[i] = [];
}

 

 
   
类似数组的对象
 数组

 ● 有属性名为0及自然数的属性

 ● 有length属性, 增加/删除元素时length会更新, 改变length也会改变数组

 ● 继承Array.prototype, 可用相关method

   可以用instanceof来判断是否由Array生成( a instanceof Array )
 类似数组的对象

 满足上面的前两条

 ● 例: Arguments, NodeList(document.getElementsByTagName,  document.getElementsByName等的返回值)

 ● 不可用直接用Array.prototype的方法

    调用方法: 

Array.prototype.map.call(a, () => {return 1;}); 

 例外: concat, 返回值为数组

 ● 可用for, for/in
   
   
   
   
   
ES6对数组和对象的新功能
 迭代器

 进行反复的数据结构

 ● 属性

 next方法

 返回Object

 ● Object必须有如下属性

 

 value  取出的值
 done  反复处理是否结束

 

 ● 例

 数组自带的迭代器:  ary[Symbol.iterator]() 

var a = Array(10);
for (var i = 0; i < a.length; i++) {
  a[i] = i;
}
var iter = a[Symbol.iterator]();
for (var i = 0; i < a.length+1; i++) {
  console.log(iter.next());
}
/* =>
{value: 0, done: false}
{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: false}
{value: 4, done: false}
{value: 5, done: false}
{value: 6, done: false}
{value: 7, done: false}
{value: 8, done: false}
{value: 9, done: false}
{value: undefined, done: true}
*/

 

 
 for/of语法

 直接取出value

 ● 能用 for/of 的条件

 有Symbol.iterator方法  
 Symbol.iterator方法返回iterator  

 ● 可用 for/of 的自带Object

 Array, String, TypedArray, Map, Set

 ● 迭代器的迭代语法(不用也可以，但是写法更繁琐)  

var a = Array(10);
for (var i = 0; i < a.length; i++) {
  a[i] = i;
}
var iter = a[Symbol.iterator]();
for (var v of iter) {
  console.log(v);
}
/* =>
0
1
2
3
4
5
6
7
8
9
*/

 

 ● 不用for/or的迭代写法

// while写法
while (true) {
  const temp = iter.next();
  if (temp.done) {
    break;
  }
  console.log(temp);
}

// for写法
for (var i = iter.next();i.done===false; i = iter.next()) {
  console.log(i);
}

 ● 对自己做的迭代器进行反复处理

var iterable = {};
iterable[Symbol.iterator] = function() { return iter; };
for(var v of iterable) {
    console.log(v);
}

 

 ● 系统自带的迭代器自身也有Symbol.iterator(返回自身)
 Generator函数

 返回迭代器, 可以暂停和继续处理

 ● 语法:  function* 来定义, 至少包含一个 yield或 yield* (每一个yield都是一个断点, 此处的值写入value)

function* sample() {
    yield 1;
    yield 2;
    yield 3;
}
const iter = sample();
for(var t of iter) {
    console.log(t);
}
/*
1
2
3
*/

 ● next(arg)

 可以带参数, 作为上一次的 yield 式子 的返回值

console.log(iter2.next());
console.log(iter2.next(true));
console.log(iter2.next());

 ● return(arg)

 结束迭代( done:true ), 把value设为arg

 ● throw(error)

iter.throw(new Error("error)); // 用try-catch来处理

 
 yield*

 用于可反复(有Symbol.iterator对象, 返回迭代器)对象

var iter3 = (function* iterator3() {
  const str = "i am kedaya";
  yield* str;
})();
for (var v of iter3) {
  console.log(v);
}

 
 分割代入  
 展开运算符   
 ArrayBuffer   
 Map   
 Set  
   
posted @ 2019-02-19 22:11  懒虫哥哥  阅读(141)  评论(0)  编辑  收藏  举报