js数组方法归纳总结

1. js数组方法归纳总结

1.1 操作使原数组改变

1.1.1 数组的增

1. unshift()方法

unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组**)**

语法:arr.unshift(element1,...,elementN) 返回length属性值

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

arr = [4,5,6]; // 重置数组
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);
console.log(arr); // [3, 2, 1, 4, 5, 6]
2. push()方法

push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

语法:arr.push(element1, ..., elementN) 返回length属性值

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

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

console.log(total);
// 4

1.1.2 数组的删

1. shift()方法

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

语法:arr.shift()

返回值:从数组中删除的元素; 如果数组为空则返回undefined 。

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

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

var shifted = myFish.shift();

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

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

**pop()**方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

语法:arr.pop()

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

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

let popped = myFish.pop();

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

console.log(popped);
// surgeon

1.1.3 数组的改

1. splice()方法 (增、删、换)

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

语法:array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

参数

  • start

    指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第0位。

  • deleteCount 可选

    整数,表示要移除的数组元素的个数。

    如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

    如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。

    如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。

  • item1, item2, *...* 可选

    要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

返回值:由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

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

// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

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

1.1.4 数组的排序

1. sort()方法

sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

由于它取决于具体实现,因此无法保证排序的时间和空间复杂性

2. reverse()方法

reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

语法:arr.reverse() 返回值:颠倒后的数组

2.1 颠倒数组中的元素
const a = [1, 2, 3];

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

a.reverse();

console.log(a); // [3, 2, 1]
2.2 颠倒类数组中的元素

类数组是对象需要使用apply或call方法才能调用数组方法

[].reverse.apply({0: 1, 1: 2, 2: 3, length: 3})

[].reverse.call({0: 1, 1: 2, 2: 3, length: 3})

const a = {0: 1, 1: 2, 2: 3, length: 3};

console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}

Array.prototype.reverse.call(a); //same syntax for using apply()

console.log(a); // {0: 3, 1: 2, 2: 1, length: 3}

[].reverse.call({},...[]) 等价于 Array.prototype.reverse.call({},...[])

[].reverse.apply({},[]) 等价于 Array.prototype.reverse.apply({},[])

1.1.5 数组的填充

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法:

var old_arr = arr.fill(value[,start[,end]]);

start 默认值为0

end默认值为 this.length

该方法修改原数组

fill 方法故意被设计成通用方法, 该方法不要求 this 是数组对象。

fill 方法是个可变方法, 它会改变调用它的 this 对象本身, 然后返回它, 而并不是返回一个副本。

当一个对象被传递给 **fill**方法的时候, 填充数组的是这个对象的引用。

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

arr === old_arr; // true

arr.fill(8);//[8, 8, 8, 8]

1.2 原数组不改变

1.2.1 数组转字符串

1. toString()方法

**toString()**返回一个字符串,表示指定的数组及其元素

语法:arr.toString()

返回值:一个表示指定的数组及其元素的字符串。

当一个数组被作为文本值或者进行字符串连接操作时,将会自动调用其 toString 方法。

2. join()方法

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

语法:arr.join([separator])

separator 可选

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

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

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的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"
2.1 连接类数组对象
function f(a, b, c) {
  var s = Array.prototype.join.call(arguments);
  console.log(s); // '1,a,true'
}
f(1, 'a', true);

1.2.2 数组的遍历

1. forEach()方法

forEach() 方法对数组的每个元素执行一次给定的函数。

语法:arr.forEach(callback(currentValue[,index[,array]])[,thisArg])

**注:**只有回调函数callback中的第一个参数==currentValue==是必须的

参数

  • callback

    为数组中每个元素执行的函数,该函数接收一至三个参数:

    currentValue数组中正在处理的当前元素。index 可选数组中正在处理的当前元素的索引。array 可选forEach() 方法正在操作的数组。

  • thisArg 可选

    可选参数。当执行回调函数 callback 时,用作 this 的值。

返回值

undefined

如果省略了 thisArg 参数,或者其值为 nullundefinedthis 则指向全局对象。

典型用例是在一个调用链的最后执行副作用(side effects,函数式编程上,指函数进行 返回结果值 以外的操作)。

forEach 不会直接改变调用它的对象,但是那个对象可能会被 callback 函数改变。

1.0 可以终止循环的遍历方法

注意: 除了抛出异常以外,没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环,forEach() 方法不是应当使用的工具。

若你需要提前终止循环,你可以使用:

这些数组方法则可以对数组元素判断,以便确定是否需要继续遍历:

译者注:只要条件允许,也可以使用 filter() 提前过滤出需要遍历的部分,再用 forEach() 处理。

1.1 不对未初始化的值进行任何操作(稀疏数组)
const arraySparse = [1,3,,7];
let numCallbackRuns = 0;

var result = arraySparse.forEach((currentValue, index, array) => {
    console.log(currentValue * 10);
}, null);//如果省略了 `thisArg` 参数,或者其值为 `null` 或 `undefined`,`this` 则指向全局对象

console.log("numCallbackRuns: ", numCallbackRuns);
// 10
// 30
// 70
// numCallbackRuns: 3
console.log(result); // undefined
1.2 将for循环转换为forEach
const items = ['item1','item2','item3'];
const copy1 = [];
const copy2 = [];
//使用for循环复制数组
for(let i = 0; i < items.length; i ++){
    copy1.push(items[i]);//正向复制
    copy2.unshift(items[i]);//反向复制
}
console.log(copy1); //["item1", "item2", "item3"]
console.log(copy2); //["item3", "item2", "item1"]

const copy3 = [];
const copy4 = [];
//使用forEach方法复制数组
var result = items.forEach((currentValue,index,items) => {
    copy3.push(currentValue);//正向复制
    copy4.unshift(currentValue);//反向复制
},undefined);
console.log(result); //undefined

console.log(copy3); //["item1", "item2", "item3"]
console.log(copy4); //["item3", "item2", "item1"]

1.3 按照每个数组中的元素值,更新一个对象的属性
function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry;
    ++this.count;
  }, this);
  // ^---- Note
};

const obj = new Counter();
obj.add([2, 5, 9]);
obj.count;
// 3 === (1 + 1 + 1)
obj.sum;
// 16 === (2 + 5 + 9)

创建一个对象需要原型对象及属性

Object.create(proto[,propertyObject])

proto:新创建对象的原型对象。

propertyObject = {
 'prop1':{
     value:'valu1',
     configurable:true,
     writable:true,
     enumerable:true
 },
 'prop2':{
     value:'value2',
     configurable:true,
     writable:true,
     enumerable:true
 }
}
1.4 复制一个对象

复制对象时需要复制对象的原型对象及其属性

方法复习:

Object.create(proto[,propertyObject])

Object.getPrototypeOf(obj)

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyDescriptor(obj,prop)

Object.getOwnPropertyDescriptors(obj)

Object.defineProperty(obj,prop,desc)

Object.defineProperties(obj,props)

desc = {
 value:'value',
 configurable:true,
 writable:true,
 enumerable:true
}
//props 同上面的propertyObject
{
 'prop1':{
     value:'value1',
     configurable:true,
     writable:true,
     enumerable:true
 },
     'prop1':{
     value:'value1',
     configurable:true,
     writable:true,
     enumerable:true
 },
     ...
}
//下面的代码会创建一个给定对象的副本
function copy(obj){
    const copyObj = Object.getPrototypeOf(obj);
    const propNames = Object.getOwnPropertyNames(obj);
    
    propNames.forEach((currentValue,index,propNames) => {
        //根据每个属性名获得对应的属性描述对象
        const desc = Object.getOwnPropertyDescriptor(obj,currentValue);
        //根据属性描述对象定义属性并赋值给副本对象
        Object.defineProperty(copyObj,currentValue,desc);        
    },null);
    return copyObj;//返回副本对象
}
const obj1 = {a:1,b:2};
const copyObj = copy(obj1);
console.log(obj1 === copyObj); //false
2. map()方法

map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

语法:

var new_array = arr.map(callback(currentValue[,index[,arr]])[,thisARg]);

callback参数和thisArg都同forEach

返回值:一个由原数组每个元素执行回调函数的结果组成的新数组

map不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)

2.1 求数组中每个元素的平方根
//求数组中每个元素的平方根
//一般写法
var numbers = [1,4,9];
var roots = numbers.map((currentValue,index,numbers) => {
    return Math.sqrt(currentValue);
},undefined);

//极简写法 优化写法 
var roots = numbers.map(Math.sqrt);
/*
	总结:省略掉的都是可预测的
*/
2.2 在一个 String 上使用 map 方法

需要结合call或apply方法使用

var map = Array.prototype.map;
var a = map.call('hello world',(currentValue,index,str) => {
	return currentValue.charCodeAt(0);    
},null);

//写法二
var a = map.call('hello world',currentValue => currentValue.charCodeAt(0));

console.log(a);//

var a = map.call('hello world',(currentValue,index,str) => {
    console.log(str);//类数组对象
    console.log(str instanceof String); //true
    return currentValue.charCodeAt(0);    
},null);

类数组对象如arguments使用map方法遍历时,需使用call或apply方法指定this

var newArr = Array.prototype.map.call(obj,callback(currentValue[,index[,obj]])[,thisArg]);
2.3 parseInt()方法
['1','2','3'].map(parseInt) //[1, NaN, NaN]
['1','2','3'].map((x,y) => parseInt(x)) //[1, 2, 3]
//原因:parseInt方法在遍历时需要接受两个参数
3. filter()方法

**filter()**方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法:

var newArray = arr.filter(callback(currentValue[,index[,arr]])[,thisArg])

参数都同forEach,map

返回值:一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组

//数组的元素由原数组中值大于 10 的元素组成
var newArr1 = [12,5,8,130,44].filter((currentValue,index,arr) => {
    return currentValue >= 10;
},null);
//简写
var newArr2 = [12,5,8,130,44].filter(currentValue => currentValue >= 10);

3.1 判断一个对象是否为纯数字
function isNumber(obj){
    return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}
4. every()方法

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

注意:若收到一个空数组,此方法在一切情况下都会返回 true

语法:

var bool = arr.every(callback(currentValue[,index[,arr]])[,thisArg]);

参数都同于forEach,map,filter方法

返回值:如果回调函数的每一次返回都为 truthy 值,返回 true ,否则返回 false

//下例检测数组中的所有元素是否都大于 10
//写法一
function isBigEnough(currentValue,index,arr){
    return currentValue >= 10;
}
[12,5,8,1300,44].every(isBigEnough,null); //false

//写法二
[12,5,8,1300,44].every((currentValue,index,arr) => {
    return currentValue >= 10;
},null); //false

//写法三  使用箭头函数
[12,5,8,1300,44].every(currentValue => currentValue >= 10); //false
5. some()方法

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

**注意:**如果用一个空数组进行测试,在任何情况下它返回的都是false

语法:

var bool = arr.some(callback(currentValue[,index[,arr]])[,thisArg]);

参数都同于forEach,map,filter,every方法

返回值:数组中有至少一个元素通过回调函数的测试就会返回**true;所有元素都没有通过回调函数的测试返回值才会为false**。

//下面的例子检测在数组中是否有元素大于 10
function isBiggerThan10(currentValue,index,arr){
    return currentValue > 10;
}
[2,5,8,1,4].some(isBiggerThan10,null); //false
[12,5,8,1,4].some(isBiggerThan10); //true

//使用箭头函数
[2,4,8].some(currentValue => currentValue > 10); //false
6. reduce()方法

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

**注:**reduce()方法意为汇总,返回汇总后的单一结果

语法:

var result = arr.reduce(callback(accumulator,currentValue[,index[,arr]])[,initialValue])

参数:两个必选参数**accumulatorcurrentValue**,其余都是可选参数

返回值:汇总后的单个结果

6.1 accumulatorcurrentValue取值有两种情况

回调函数第一次执行时,accumulatorcurrentValue取值有两种情况:如果调用reduce()时提供了initialValueaccumulator取值为initialValuecurrentValue取数组中的第一个值;如果没有提供 initialValue,那么accumulator取数组中的第一个值,currentValue取数组中的第二个值。

**注意:**如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

6.2 reduce()实现数值数组累加
[0,1,2,3,4].reduce((accu,curr) => accu + curr); // 10

//for循环实现累加  比较繁琐
var arr = [0,1,2,3,4];
var sum = 0;
for(var i = 0; i < arr.length; i ++){
    sum += arr[i];
}
console.log(sum); // 10
6.3 将二维数组转化为一维数组

reduce() + concat()实现

var arr = [[0, 1], [2, 3], [4, 5]];
var flattened = arr.reduce((accu,curr) => accu.concat(curr), []);
console.log(flattened); //[0, 1, 2, 3, 4, 5]

Array.prototype.flat()实现

var arr = [[0, 1], [2, 3], [4, 5]];
var flattened = arr.flat(); //  [0, 1, 2, 3, 4, 5]
6.4 计算数组中每个元素出现的次数

结果以json格式对象呈现

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce((allNames,name) => {
    if(name in allNames){
        allNames[name] ++;
    }else{
        allNames[name] = 1;
    }
   return allNames; 
},{})
console.log(countedNames); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
6.5 按属性对object分类

结果以json格式对象呈现

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

//objectArr为对象数组
function groupBy(objectArr,property){
    return objectArr.reduce((acc, obj) => {
        var key = obj[property];
        if(!acc[key]){
            acc[key] = [];
        }
        acc[key].push(obj);
        return acc;
    },{});
}

console.log(groupBy(people,'age'));
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }
6.6 数组去重
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
let orderedArr = myArray.reduce((acc,cur) => {
    if(acc.indexOf(cur) === -1){
        acc.push(cur);
    }
    return acc;
},[]);
console.log(orderedArr); //["a", "b", "c", "e", "d"]
7. find()方法

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

语法:

var value = arr.find(callback(currentValue[,index[,arr]])[,thisArg]);

参数都同于forEach,map,filter,every,some

返回第一个满足测试函数的元素的值

//用对象的属性查找数组里的对象
var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

//写法一
function findCherries(fruit){
    return fruit.name === 'cherries';
}
var cherries = inventory.find(findCherries); //{name: "cherries", quantity: 5}

//写法二
inventory.find(fruit => fruit.name === 'cherries'); //{name: "cherries", quantity: 5}
8. findIndex()方法

findIndex()方法返回数组中满足提供的测试函数的第一个元素索引。若没有找到对应元素则返回-1。

语法:

var index = arr.findIndex(callback(currentValue[,index[,arr]])[,thisArg]);

参数都同于forEach,map,filter,every,some,find

返回第一个满足测试函数的元素的索引

//查找元素值大于13的第一个元素的索引
const arr1 = [5,12,8,130,44];
//写法一
var index = arr1.findIndex(cur => cur > 10); // 1

//写法二
function findIndexBiggerThan10(currentValue){
    return currentValue > 10;
}
var index2 = arr1.findIndex(findIndexBiggerThan10); // 1
9. entries()方法

entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

语法:

const iterator = arr.entries()

没有参数

arr.keys()也是获得一个可迭代对象,但只获得keys 无参数

const arr = ['a', 'b', 'c'];
const iter = arr.keys();
for(const key of iter){
 console.log(key);
}
/*
	{
		done:false,
		value:0   // 0 是索引0
	}
*/

//var keys_arr = Array.from(iter); //[0, 1, 2]

arr.values()也是获得一个可迭代对象,但只获得values 无参数

const arr = ['a', 'b', 'c'];
const iter = arr.values();
var values_arr = Array.from(iter); //["a", "b", "c"]
const arr = ['a','b','c'];
const iterator = arr.entries();
const obj_a = iterator.next(); //返回一个对象
/*
	{
		done:false,
		value:[0,'a']
	}
	...
	{
        done:true,
        value:undefined
	}
*/

9.1 entries() + for…of 实现遍历
const arr = ['a','b','c'];
const iterator = arr.entries();
//value直接获得包含索引和对应值的数组
for(value of iterator){
    console.log(value);
}
//[0,'a']
//[1,'b']
//[2,'c']
for(value of iterator){
    console.log(value[1]);
}
//'a'
//'b'
//'c'


//当然可以用最简单单的for循环实现
for(var i = 0; i < arr.length; i ++){
    console.log(arr[i]);
}

1.2.3 合并数组

1. concat()方法

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

语法:

var new_array = old_array.concat(value1[,value2[,..[,valueN]]])

valueN可选

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

返回值为一个新数组

注:当复制的元素时对象时,复制的是对象的引用

var arr1 = [1,2,3];
var new_arr = arr1.concat(4,5); //[1, 2, 3, 4, 5]
var new_arr2 = arr1.concat([4,5],['a','b'],6,7);//[1, 2, 3, 4, 5, "a", "b", 6, 7]
//涉及到对象复制时,只是复制对象的引用,即浅复制
var arr1 = [1,{age:20},2];
var arr2 = {gender:'male'};
var new_arr = arr1.concat(3,4,arr2);
arr1[1].age = 18; // 新数组中对应的age值也会同步为18
arr2.gender = 'female'; // 新数组中对应的gender也会同步为female
2. 其它合并数组方法
2.1 push + apply 方式
var arr1 = [1,2];
var arr2 = ['a','b'];

var newArr_length = Array.prototype.push.apply(arr1,arr2); // 4
console.log(arr1); // [1, 2, "a", "b"]
console.log(arr2); // ["a", "b"]
2.2 push + call + …展开运算符方式
var arr1 = [1,2];
var arr2 = ['a','b'];

var newArr_length = [].push.call(arr1,...arr2); // 4
console.log(arr1); // [1, 2, "a", "b"]
console.log(arr2); // ["a", "b"]
2.3 只是用展开运算符 …
var arr1 = [1,2];
var arr2 = ['a','b'];

var newArr_length = arr1.push(...arr2); //
console.log(arr1); // [1, 2, "a", "b"]
console.log(arr2); // ["a", "b"]

1.2.4 其它数组方法 【不改变原数组】

1. slice()方法 复制原数组的一个片段

slice() 方法返回一个新的数组,这一数组是一个由 beginend 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

语法:

var sliced_arr = arr.slice([begin[,end]]);

begin【可选】

提取起始处的索引(从 0 开始),从该索引开始提取原数组元素。

如果省略 begin,则 slice 从索引 0 开始。

如果 begin 超出原数组的索引范围,则会返回空数组。

end【可选】

如果 end 被省略,则 slice 会一直提取到原数组末尾。

如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。

返回值:一个含有被提取元素的新数组【浅拷贝】。

1.1 将类数组对象转换为数组

比如对象中的参数对象arguments

function list(){
    //或者Array.prototype.slice.call(arguments);
    return [].slice.call(arguments);
}
var listArr = list(1,2,3);
console.log(listArr, listArr instanceof Array); //[1, 2, 3]  true
2. flat() 方法

flat()方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

var new_arr = arr.flat([depth]);

depth默认值为 1

var arr = [1, 2, [3, 4, [5, 6]]];
var new_arr = arr.flat(2); //[1, 2, 3, 4, 5, 6]
var new_arr2 = arr.flat(Infinity); //[1, 2, 3, 4, 5, 6]
2.1 移除数组空项
var arr = [1,2,,4,5];
var new_arr = arr.flat(arr); [1,2,4,5]
console.log(new_arr.length); // 4

1.2.5 找到一个元素的位置或者一个元素是否存在于数组中

可使用的方法:

1. Array.prototype.indexOf()

//若没有找到则返回 -1
var index = arr.indexOf(searchElement[,fromIndex]);
const text = 'dog';
const indexOfFirst = text.indexOf('o'); //1

2. Array.prototype.includes()

var bool = arr.includes(valueToFind[,fromIndex]);
const arr = [1,2,3];
const bool = arr.includes(3); // true

3. Array.prototype.findIndex()

var index = arr.findIndex(callback(currentValue[,index[,arr]])[,thisArg]);
//查找元素值大于13的第一个元素的索引
const arr1 = [5,12,8,130,44];
//写法一
var index = arr1.findIndex(cur => cur > 10); // 1

1.2.6 创建数组

1. Array.from()方法

Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

var arr = Array.from(arrayLike[, mapFn[, thisArg]])

参数

  • arrayLike

    想要转换成数组的伪数组对象或可迭代对象。

  • mapFn 可选

    如果指定了该参数,新数组中的每个元素会执行该回调函数。

  • thisArg 可选

    可选参数,执行回调函数 mapFnthis 对象。

返回值

一个新的数组实例。

Array.from() 可以通过以下方式来创建数组对象:

  • 伪数组对象(拥有一个 length 属性和若干索引属性的任意对象)
  • 可迭代对象(可以获取对象中的元素,如 Map和 Set 等) 还有 [].entri(),[].keys()返回的可迭代对象
1.1 由伪类数组对象创建数组
function list(){
    /*
    	也可以使用slice()方式转为数组
    	var arr = Array.prototype.slice.call(arguments); //[1, 2, 3]
    	console.log(Array.isArray(arr)); // true
    */
	var arr = Array.from(arguments); //[1, 2, 3]
    console.log(Array.isArray(arr)); //true
}
list(1,2,3);
1.2 由可迭代对象创建数组
var arr = ['a','b','c'];
var iter = arr.entries(); //iter是一个可迭代对象

// 返回包括键和值的数组,length为2
var keyValue_arr = Array.from(iter);//[[0,'a'],[1,'b'],[2,'c']]
Array.isArray(keyValue_arr); // true
2. Array.of()方法
var arr = Array.of(element0[, element1[, ...[, elementN]]])

参数

  • elementN

    任意个参数,将按顺序成为返回数组中的元素。

返回值

新的 Array 实例。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值