周星星

Appearance

创建数组 ​

js
    // 字面量方式:
    // 这个方法也是我们最常用的，在初始化数组的时候 相当方便
    var a = [1,2,3];  // [1,2,3];
    // 构造器:
    // 实际上 new Array === Array,加不加new 一点影响都没有。
    var a = Array(); // [] 
    var a = Array(4); // [,,,,] 
    var a = Array(1,2,3); // [1,2,3]
    // 字面量方式:
    // 这个方法也是我们最常用的，在初始化数组的时候 相当方便
    var a = [1,2,3];  // [1,2,3];
    // 构造器:
    // 实际上 new Array === Array,加不加new 一点影响都没有。
    var a = Array(); // [] 
    var a = Array(4); // [,,,,] 
    var a = Array(1,2,3); // [1,2,3]

Arrary.from() ​

定义语法参数是否改变原对象
对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。Array.from(arrayLike, mapFn, thisArg)arrayLike:想要转换成数组的伪数组对象或可迭代对象。
mapFn (可选):如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg (可选):可选参数，执行回调函数 mapFn 时 this 对象。		❌
js
    // 1. 对象拥有length属性
    let obj = {0: '周', 1: '星', 2:'星', length: 3};
    let arr = Array.from(obj); // ['周','星','星'];
    
    // 2. 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象
    let arr = Array.from('hello'); // ['h','e','l','l','o']
    let arr = Array.from(new Set(['a','b'])); // ['a','b']
    // 1. 对象拥有length属性
    let obj = {0: '周', 1: '星', 2:'星', length: 3};
    let arr = Array.from(obj); // ['周','星','星'];
    
    // 2. 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象
    let arr = Array.from('hello'); // ['h','e','l','l','o']
    let arr = Array.from(new Set(['a','b'])); // ['a','b']

Array.of ​

定义语法参数是否改变原数组
创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。Array.of(element)element:任意个参数，将按顺序成为返回数组中的元素。
❌
js
    Array.of(7);       // [7]
    Array.of(1, 2, 3); // [1, 2, 3]
    Array.of(7);       // [7]
    Array.of(1, 2, 3); // [1, 2, 3]

改变原数组的方法（9个） ​

js
    let a = [1,2,3];
    ES5:
     a.splice()/ a.sort() / a.pop()/ a.shift()/  a.push()/ a.unshift()/ a.reverse()
    ES6:
    a.copyWithin() / a.fill
    let a = [1,2,3];
    ES5:
     a.splice()/ a.sort() / a.pop()/ a.shift()/  a.push()/ a.unshift()/ a.reverse()
    ES6:
    a.copyWithin() / a.fill

对于这些能够改变原数组的方法，要注意避免在循环遍历中改变原数组的选项，比如: 改变数组的长度，导致遍历的长度出现问题。

splice ​

定义：通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容

语法：Array.splice( start, deleteCount,...arguments )

参数：

  • start:
    1. 指定修改的开始位置（从0计数）。
    2. 如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位；
    3. 如果负数的绝对值大于数组的长度，则表示开始位置为第0位
  • deleteCount (可选):
    1. 整数，表示要移除的数组元素的个数。
    2. 如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
    3. 如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
    4. 如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
  • ...arguments (可选):要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。 是否改变原数组：✅

返回值：如果有元素被删除,返回包含被删除项目的新数组，否则返回空数组。

js

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// 运算后的 myFish: ["angel", "clown"]
// 被删除的元素: ["mandarin", "sturgeon"]


var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

var myFish = [1, 2, 3, 4, 5, 6, 7]; 
var removed = myFish.splice(-2,3,'添加1','添加2'); 

// 运算后的 myFish: [1,2,3,4,5,'添加1','添加2']
// 被删除的元素: [6,7], 没有元素被删除

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// 运算后的 myFish: ["angel", "clown"]
// 被删除的元素: ["mandarin", "sturgeon"]


var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

var myFish = [1, 2, 3, 4, 5, 6, 7]; 
var removed = myFish.splice(-2,3,'添加1','添加2'); 

// 运算后的 myFish: [1,2,3,4,5,'添加1','添加2']
// 被删除的元素: [6,7], 没有元素被删除

sort ​

定义：对数组的元素进行排序，并返回数组

语法：Array.sort(compareFunction)

参数：

  • compareFunction（可选）:用来指定按某种顺序进行排列的函数。如果省略，默认按字母升序，如果不是元素不是字符串的话，会调用toString()方法将元素转化为字符串的Unicode(万国码)位点，然后再比较字符。 是否改变原数组：✅

返回值：排序后的数组。

js
     // 字符串排列 看起来很正常
    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];
     // 字符串排列 看起来很正常
    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];

compareFunction的两个参数：

sort的compareFunction有两个默认参数，要在函数中接收这两个参数，这两个参数是数组中两个要比较的元素，通常我们用 a 和 b 接收两个将要比较的元素：

  • 若compareFunction返回值<0，那么a将排到b的前面;
  • 若compareFunction返回值=0，那么a 和 b 相对位置不变；
  • 若compareFunction返回值>0，那么b 排在a 将的前面；

常见用法：

1、数组元素为数字升序、倒序

js
 var array =  [10, 1, 3, 20,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;
 });
 //也可以简写成
 array.sort((a, b) => a - b)
 
 console.log(array); // [1,3,8,10,20,25];
 // 降序 被减数和减数调换了  20-10>0 被减数b(20)在减数a(10)的前面
 array.sort(function(a,b){
   return b-a;
 });
 //也可以简写成
 array.sort((a, b) => b - a)
 
 console.log(array); // [25,20,10,8,3,1];
 var array =  [10, 1, 3, 20,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;
 });
 //也可以简写成
 array.sort((a, b) => a - b)
 
 console.log(array); // [1,3,8,10,20,25];
 // 降序 被减数和减数调换了  20-10>0 被减数b(20)在减数a(10)的前面
 array.sort(function(a,b){
   return b-a;
 });
 //也可以简写成
 array.sort((a, b) => b - a)
 
 console.log(array); // [25,20,10,8,3,1];

2、数组元素为对象

js
var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];

// sort by value
items.sort(function (a, b) {
  return (a.value - b.value)
});
var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];

// sort by value
items.sort(function (a, b) {
  return (a.value - b.value)
});

3、自定义compareFunction函数，可以让你玩出更多新花样

js
var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];

// sort by name
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
});
var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];

// sort by name
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
});

pop ​

定义：从数组中删除最后一个元素，并返回该元素的值

语法：Array.pop()

参数：无

是否改变原数组：✅

返回值：从数组中删除的元素(当数组为空时返回undefined）。

js
let myFish = ["angel", "clown", "mandarin", "surgeon"];

let popped = myFish.pop();

console.log(myFish);
// ["angel", "clown", "mandarin"]

console.log(popped);
// surgeon
let myFish = ["angel", "clown", "mandarin", "surgeon"];

let popped = myFish.pop();

console.log(myFish);
// ["angel", "clown", "mandarin"]

console.log(popped);
// surgeon

shift ​

定义：从数组中删除第一个元素，并返回该元素的值

语法：Array.shift()

参数：无

是否改变原数组：✅

返回值：从数组中删除的元素(当数组为空时返回undefined）。

js
let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

var shifted = myFish.shift();

console.log('调用 shift 之后: ' + myFish);
// "调用 shift 之后: clown,mandarin,surgeon"

console.log('被删除的元素: ' + shifted);
// "被删除的元素: angel"
let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

var shifted = myFish.shift();

console.log('调用 shift 之后: ' + myFish);
// "调用 shift 之后: clown,mandarin,surgeon"

console.log('被删除的元素: ' + shifted);
// "被删除的元素: angel"

push ​

定义：将一个或多个元素添加到数组的末尾

语法：Array.push(element1, ..., elementN)

参数：

  • element1, ..., elementN:被添加到数组末尾的元素。

是否改变原数组：✅

返回值：该数组的新长度。

常见用法

1、添加新元素到数组

js
var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports);
// ["soccer", "baseball", "football", "swimming"]

console.log(total);
// 4
var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports);
// ["soccer", "baseball", "football", "swimming"]

console.log(total);
// 4

2、合并数组

js
var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// 将第二个数组融合进第一个数组
// 相当于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables);
// ['parsnip', 'potato', 'celery', 'beetroot']

console.log(moreVegs);
//['celery', 'beetroot']
var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// 将第二个数组融合进第一个数组
// 相当于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables);
// ['parsnip', 'potato', 'celery', 'beetroot']

console.log(moreVegs);
//['celery', 'beetroot']

unshift ​

定义：将一个或多个元素添加到数组的开头

语法：Array.unshift(element1, ..., elementN)

参数：

  • element1, ..., elementN:要添加到数组开头的元素或多个元素。

是否改变原数组：✅

返回值：该数组的新长度。

js
const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// 5

console.log(array1);
// [4, 5, 1, 2, 3]
const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// 5

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

reverse ​

定义：将数组中元素的位置颠倒

语法：Array.reverse()

参数：无

是否改变原数组：✅

返回值：颠倒后的数组。

js
const a = [1, 2, 3];

a.reverse();

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

a.reverse();

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

copyWithin ​

定义：浅复制数组的一部分到同一数组中的另一个位置

语法：Array.copyWithin(target, start, end)

参数：

  • target：从该位置开始替换数据。如果为负值，表示倒数。
  • start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
  • end（可选）：到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置。

是否改变原数组：✅

返回值：改变后的数组。

js
[1, 2, 3, 4, 5].copyWithin(-2)
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
// [1, 2, 3, 3, 4]
[1, 2, 3, 4, 5].copyWithin(-2)
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
// [1, 2, 3, 3, 4]

第一个例子：target = -2 、start=0、end=数组长度，从4的位置从1开始复制到最后一个
第二个例子：target = 0 、start=3、end=数组长度，从0的位置从4开始复制到最后一个
第三个例子：target = 0 、start=3、end=4，从0的位置从4开始复制到5前的数据
第四个例子：target = -2 、start=-3、end=-1，从4的位置从3开始复制到最后一个

fill ​

定义：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

语法：Array.fill(value, start, end)

参数：

  • value：用来填充数组元素的值。
  • start（可选）：起始索引，默认值为0。
  • end（可选）：终止索引，到该位置前停止读取数据，默认值为 this.length。

是否改变原数组：✅

返回值：改变后的数组。

js
[1, 2, 3].fill(4);               // [4, 4, 4]

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

[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4);               // [4, 4, 4]

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

[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]

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

js
    ES5：
    slice、join、toLocateString、toString、cancat、indexOf、lastIndexOf、
    ES7：
    includes
    ES5：
    slice、join、toLocateString、toString、cancat、indexOf、lastIndexOf、
    ES7：
    includes

slice ​

定义：一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）

语法：Array.slice(begin, end)

参数：

  • begin（可选）：索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。
  • end（可选）：终止索引，到该位置前停止读取数据，接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。

是否改变原数组：❌

返回值：一个含有被提取元素的新数组。

js
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits 输出 ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus 输出 ['Orange','Lemon']

var citrus = fruits.slice(-2, -1);

// citrus 输出 ['Apple']
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits 输出 ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus 输出 ['Orange','Lemon']

var citrus = fruits.slice(-2, -1);

// citrus 输出 ['Apple']

真的就只是浅拷贝

js
let a= ['Banana','Orange'];
let b=a.slice(0,1); // ['Banana']
a[0]='改变原数组';
console.log(a,b); // ['改变原数组','Orange'] ['Banana']

b[0]='改变拷贝的数组';
console.log(a,b); // ['改变原数组','Orange'] ['改变拷贝的数组']
let a= ['Banana','Orange'];
let b=a.slice(0,1); // ['Banana']
a[0]='改变原数组';
console.log(a,b); // ['改变原数组','Orange'] ['Banana']

b[0]='改变拷贝的数组';
console.log(a,b); // ['改变原数组','Orange'] ['改变拷贝的数组']

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

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

js
let a= [{name:'Banana'}];
let b=a.slice();
console.log(b,a); // [{"name":"Banana"}]  [{"name":"Banana"}]
a[0].name='改变原数组';
console.log(b,a); // [{"name":"改变原数组"}] [{"name":"改变原数组"}]
b[0].name='改变拷贝数组',b[0].age='改变拷贝数组';
//  [{"name":"改变拷贝数组","age":"改变拷贝数组"}] [{"name":"改变拷贝数组","age":"改变拷贝数组"}]
let a= [{name:'Banana'}];
let b=a.slice();
console.log(b,a); // [{"name":"Banana"}]  [{"name":"Banana"}]
a[0].name='改变原数组';
console.log(b,a); // [{"name":"改变原数组"}] [{"name":"改变原数组"}]
b[0].name='改变拷贝数组',b[0].age='改变拷贝数组';
//  [{"name":"改变拷贝数组","age":"改变拷贝数组"}] [{"name":"改变拷贝数组","age":"改变拷贝数组"}]

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

join ​

定义：将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串

语法：Array.join(separator)

参数：

  • separator（可选）：指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果缺省该值，数组元素用逗号（,）分隔。如果separator是空字符串("")，则所有元素之间都没有任何字符。

是否改变原数组：❌

返回值：一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

常见用法

1、数组元素为数字或者字符串

js
var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(' + '); // myVar2的值变为"Wind + Rain + Fire"
var myVar3 = a.join('');    // myVar3的值变为"WindRainFire"
var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(' + '); // myVar2的值变为"Wind + Rain + Fire"
var myVar3 = a.join('');    // myVar3的值变为"WindRainFire"

2、数组元素为数组或者对象

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

第一种：在数组元素是数组的时候，会将里面的数组也调用join()
第二种：在数组元素是对象的时候，对象会被转为[object Object]字符串

toLocaleString ​

定义：将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

语法：Array.toLocaleString(locales,options)

参数：

是否改变原数组：❌

返回值：一个所有数组元素连接的字符串。

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

toString ​

定义：将数组转换为由逗号链接起来的字符串。

语法：Array.toString()

参数：无

是否改变原数组：❌

返回值：一个所有数组元素连接的字符串。

js
const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
//  "1,2,a,1a"
const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
//  "1,2,a,1a"

cancat ​

定义：合并两个或多个数组。

语法：Array.cancat(valueN)

参数：

  • valueN：数组和/或值，将被合并到一个新的数组中。如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝

是否改变原数组：❌

返回值：返回新的数组。

常见用法

1、数组元素为数字或者字符串

js
var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];

alpha.concat(numeric);
// ['a', 'b', 'c', 1, 2, 3]
var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];

alpha.concat(numeric);
// ['a', 'b', 'c', 1, 2, 3]

2、扁体化数组

js
var arr1 = [[0, 1], [2, 3], [4, 5]];
var arr2 = [].concat.apply([], arr1);
// arr2 [0, 1, 2, 3, 4, 5]
var arr1 = [[0, 1], [2, 3], [4, 5]];
var arr2 = [].concat.apply([], arr1);
// arr2 [0, 1, 2, 3, 4, 5]

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

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

indexOf ​

定义：用于查找数组是否存在某个元素。

语法：Array.indexOf(searchElement,fromIndex)

参数：

  • searchElement：被查找的元素
  • fromIndex：开始查找的位置(不能大于等于数组的长度，返回-1)，接受负值，默认值为0。

是否改变原数组：❌

返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

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

注意：indexOf()不能识别NaN

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

lastIndexOf ​

定义：用于查找在数组中的最后一个的索引。

语法：Array.lastIndexOf(searchElement,fromIndex)

参数：

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

是否改变原数组：❌

返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

严格相等的搜索: 跟数组的indexOf一样

注意：lastIndexOf()不能识别NaN

js
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

includes ​

定义：用来判断一个数组是否包含一个指定的值。

语法：Array.includes(searchElement,fromIndex)

参数：

  • searchElement：被查找的元素
  • fromIndex：默认值为0，参数表示搜索的起始位置，接受负值。正值超过数组长度，数组不会被搜索，返回false。负值绝对值超过长数组度，重置从0开始搜索。

是否改变原数组：❌

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

js
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

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

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

结语 ​

这次就仅介绍这些方法

如果大家有建议或者发现问题的都可以在下面评论中指出