JavaScript学习笔记（二十四）——数组的内置功能

数组的内置功能

es5中：

1、创建数组

var arr=[1,2,3];
​
var arr2=new Array(1,2,4);
​

2、数组常用方法

方法	功能描述
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。不传参默认','
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

所有数组的方法，返回了一个新数组，新数组中的元素，如果是以前数组中的引用数据，那么是同一个引用。浅拷贝过来的。

1. concat( ) 把几个数组合成一个，返回一个新的数组，不会改变原数组。

   var arr=[1,2,3];
   var arr2=['hello'];
   var arr3=arr.concat(arr2);
   console.log(arr3); //打印[1, 2, 3, 'hello']

2. join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

   var arr=[1,2,3];
   var re=arr.join('*');//不传参默认,
   console.log(re); //打印 1*2*3             

    

3. pop( ) 删除并返回数组的最后一个元素。

   var arr=[1,2,3,4,5];
   var re=arr.pop();
   arr.pop();  //删除5之后，在删除最后一个4
   console.log(re,arr);  //5  [1, 2, 3]

    

4. push( ) 向数组的末尾添加一个或更多元素，并返回新的长度。

   var arr=[1,2,3,4,5];
   var re=arr.push(6,7);
   console.log(re,arr);  //7  [1, 2, 3, 4, 5, 6, 7]

   数组的length的值是由数组最后一个数字的下标+1决定的，而不是元素的个数。

5. shift() 删除并返回数组的第一个元素。

   var arr=[1,2,3,4,5];
   var re=arr.shift();
   console.log(re,arr);//1  [2, 3, 4, 5]

   unshift( ) 向数组的开头添加一个或更多元素，并返回新的长度。

   var arr=[1,2,3,4,5];
   var re=arr.unshift(6);
   console.log(re,arr); //6  [6, 1, 2, 3, 4, 5]

6. splice() 删除元素返回删除的元素，并从开头向数组添加新元素。

   var arr=[1,2,3,4,5];
   var re=arr.splice(0,3,'hello','hi');//从下标0开始往后删除3个元素，再添加hello和hi 这两个元素
   console.log(re,arr);//[1, 2, 3]  ['hello', 'hi', 4, 5]

   用这个方法可以做出前几个方法的效果。

7. sort( ) 对数组的元素进行排序。一般用来名字字母排名，默认按照表码排序。

   数字排序方法：

   var arr=[1,4,6,23,56,9];
   var re=arr.sort(function(a,b){
       return b-a;//大到小
   })
   console.log(re);//[56, 23, 9, 6, 4, 1]
   ​
   var arr=[1,4,6,23,56,9];
   var re=arr.sort(function(a,b){
       return a-b;//小到大
   })
   console.log(re);//[1, 4, 6, 9, 23, 56]

es6新增：

1、数组创建

• Array.of()：将参数中所有值作为元素形成数组。

console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
 
// 参数值可为不同类型
console.log(Array.of(1, '2', true)); // [1, '2', true]
 
// 参数为空时返回空数组
console.log(Array.of()); // []

• Array.from()：将类数组对象或可迭代对象转化为数组。

  // 参数为数组,返回与原数组一样的数组
  console.log(Array.from([1, 2])); // [1, 2]
   
  // 参数含空位
  console.log(Array.from([1, , 3])); // [1, undefined, 3]

  参数说明：Array.from(arrayLike[, mapFn[, thisArg]])

  • arrayLike：想要转换的类数组对象或可迭代对象。

  console.log(Array.from([1, 2, 3])); // [1, 2, 3]

  • mapFn：可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。

  console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]

  • thisArg：可选，用于指定 map 函数执行时的 this 对象。

  let map = {
      do: function(n) {
          return n * 2;
      }
  }
  let arrayLike = [1, 2, 3];
  console.log(Array.from(arrayLike, function (n){
      return this.do(n);
  }, map)); // [2, 4, 6]

• 类数组对象：一个类数组对象必须含有 length 属性，且元素属性名必须是数值或者可转换为数值的字符。

let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
});
console.log(); // ['1', '2', 3]
 
// 没有 length 属性,则返回空数组
let array = Array.from({
  0: '1',
  1: '2',
  2: 3,
});
console.log(array); // []
 
// 元素属性名不为数值且无法转换为数值，返回长度为 length 元素值为 undefined 的数组  
let array1 = Array.from({
  a: 1,
  b: 2,
  length: 2
});
console.log(array1); // [undefined, undefined]

 

• 转换可迭代对象：

  • 转换map

  let map = new Map();
  map.set('key0', 'value0');
  map.set('key1', 'value1');
  console.log(Array.from(map)); // [['key0', 'value0'],['key1','value1']]

  • 转换set

  let arr = [1, 2, 3];
  let set = new Set(arr);
  console.log(Array.from(set)); // [1, 2, 3]

  • 转换字符串

  let str = 'abc';
  console.log(Array.from(str)); // ["a", "b", "c"]

2、扩展的方法

• 查找：

  • find()：查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。

  let arr = Array.of(1, 2, 3, 4);
  console.log(arr.find(item => item > 2)); // 3
   
  // 数组空位处理为 undefined
  console.log([, 1].find(n => true)); // undefined

  • findIndex()：查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。

  let arr = Array.of(1, 2, 1, 3);
  // 参数1：回调函数
  // 参数2(可选)：指定回调函数中的 this 值
  console.log(arr.findIndex(item => item = 1)); // 0
   
  // 数组空位处理为 undefined
  console.log([, 1].findIndex(n => true)); //0

• 填充：

  • fill()：将一定范围索引的数组元素内容填充为单个指定的值。

  let arr = Array.of(1, 2, 3, 4);
  // 参数1：用来填充的值
  // 参数2：被填充的起始索引
  // 参数3(可选)：被填充的结束索引，默认为数组末尾
  console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]

• 遍历：

  • entrys()：遍历键值对。

  for(let [key, value] of ['a', 'b'].entries()){
      console.log(key, value);
  }
  // 0 "a"
  // 1 "b"
   
  // 不使用 for... of 循环
  let entries = ['a', 'b'].entries();
  console.log(entries.next().value); // [0, "a"]
  console.log(entries.next().value); // [1, "b"]
   
  // 数组含空位
  console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]

  • keys()：遍历键名。

  for(let key of ['a', 'b'].keys()){
      console.log(key);
  }
  // 0
  // 1
   
  // 数组含空位
  console.log([...[,'a'].keys()]); // [0, 1]

  • values()：遍历键值

  for(let value of ['a', 'b'].values()){
      console.log(value);
  }
  // "a"
  // "b"
   
  // 数组含空位
  console.log([...[,'a'].values()]); // [undefined, "a"]

• 包含：

  • includes()：数组是否包含指定值。注意：与 Set 和 Map 的 has 方法区分；Set 的 has 方法用于查找值；Map 的 has 方法用于查找键名。

  // 参数1：包含的指定值
  [1, 2, 3].includes(1);    // true
   
  // 参数2：可选，搜索的起始索引，默认为0
  [1, 2, 3].includes(1, 2); // false
   
  // NaN 的包含判断
  [1, NaN, 3].includes(NaN); // true

• 嵌套数组转一维数组：

  • flat()

  console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
   
  // 指定转换的嵌套层数
  console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
   
  // 不管潜逃多少层
  console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
   
  // 自动跳过空位
  console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]

3、扩展运算符（...）

• 复制数组：

let arr = [1, 2],
    arr1 = [...arr];
console.log(arr1); // [1, 2]
 
// 数组含空位
let arr2 = [1, , 3],
    arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]

• 合并数组：

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