数组Array属性和方法整理

常用属性

Array.length

返回或设置一个数组中元素的个数

//获取数组的长度。 let arr1 = ['a', 'b', 'c']; let arr2 = [5, 2, 54, 22, 44, 0]; console.log(arr1.length); // 3 console.log(arr2.length); // 6

Array.prototype

数组构造函数的原型,允许向Array对象添加新的属性和方法

//JavaScript Array本身并不提供 test() 方法。 if(!Array.prototype.test) { Array.prototype.test = function() { //自定义方法。。。 console.log('自定义test方法'); } }

常用方法

Array.isArray()

确定传递的值是否是一个Array
返回true或者false

Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false Array.isArray("string"); // false Array.isArray(undefined); // false

Array.from()

从一个类数组或可迭代对象中创建一个新的数组实例

console.log(Array.from('foo')); // ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // [2, 4, 6]

Array.of()

创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型

//Array.of() 和 Array 构造函数之间的区别在于处理整数参数: //Array.of(7) 创建一个具有单个元素 7 的数组, //而 Array(7) 创建一个长度为7的空数组(注意:这是指有7个空位的数组,而不是7个undefined) Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]

Array.pop()

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

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

Array.push()

在数组的末尾添加一个或多个元素,并返回添加之后数组的长度

let animals = ['pigs', 'goats', 'sheep']; let pushed = animals.push('cows'); console.log(animals); // ["pigs", "goats", "sheep", "cows"] console.log(pushed); // 4

Array.shift()

移除数组的第一个元素,并返回该元素
此方法更改数组的长度

let sports = ['swim', 'run', 'bike', 'climb']; let shifted = sports.shift(); console.log(sports); // ['run', 'bike', 'climb'] console.log(shifted); // swim

Array.unshift()

在数组的开头添加一个或多个元素,并返回添加之后的数组长度

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

Array.splice()

通过删除现有元素和/或添加新元素来更改一个数组的内容

let months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // 从第1位开始删除0个元素,插入“Feb” console.log(months); // ['Jan', 'Feb', 'March', 'April', 'June'] months.splice(4, 1, 'May'); // 从第4位开始删除1个元素,然后插入“May” console.log(months); // ['Jan', 'Feb', 'March', 'April', 'May']

Array.fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,不包括终止索引
改变原数组

let arr = [1, 2, 3, 4]; console.log(arr.fill(0, 2, 4)); // [1, 2, 0, 0] 用0填充索引2到4 console.log(arr.fill(5, 1)); // [1, 5, 5, 5] 用5从索引1开始填充 console.log(arr.fill(6)); // [6, 6, 6, 6] 用6填充整个数组 console.log(arr); // [6, 6, 6, 6]

Array.reverse()

返回原数组的一个副本,并将该副本中的元素逆置
会改变原数组

let arr = ['one', 'two', 'three']; console.log(arr); // ['one', 'two', 'three'] let reversed = arr.reverse(); console.log(reversed); // ['three', 'two', 'one'] console.log(arr); // ['three', 'two', 'one']

Array.concat()

用于合并两个或多个数组
不会更改现有数组,而是返回一个新数组

let arr1 = ['a', 'b', 'c']; let arr2 = ['x', 'y', 'z']; console.log(arr1.concat(arr2)); // ["a", "b", "c", "x", "y", "z"] console.log(arr1); // ['a', 'b', 'c'] console.log(arr2); // ['x', 'y', 'z'] // concat的参数可以不是数组,不是数组的话,相当于push console.log(arr1.concat(1)) // [ 'a', 'b', 'c', 1 ] // concat的参考可以有多个 console.log(arr1,concat([2, 3], 4, 5)) // [ 'a', 'b', 'c', 2, 3, 4, 5 ]

Array.find()

返回数组中满足提供的测试函数的第一个元素的值,否则返回undefined

let arr = [5, 12, 8, 130, 44]; let found = arr.find(item => item > 10); console.log(found); // 12

Array.findIndex()

返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1

let arr = [5, 12, 8, 130, 44]; let found = arr.findIndex(item => item > 10); console.log(found); // 1

Array.indexOf()

返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
不会改变原数组

let arr = ['ant', 'bison', 'camel', 'duck', 'bison']; console.log(arr.indexOf('bison')); // 1 console.log(arr.indexOf('bison', 2)); // 4 从索引2开始找 console.log(arr.indexOf('giraffe')); // -1 console.log(arr); // ['ant', 'bison', 'camel', 'duck', 'bison']

Array.includes()

判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false
不会改变原数组

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

Array.some()

测试数组中的某些元素是否通过由提供的函数实现的测试
只要数组中有项通过就返回true
不会改变原数组

/* some 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 false。 callback 被调用时传入三个参数:元素的值,元素的索引,被遍历的数组。 注意:对于放在空数组上的任何条件,此方法返回false。 */ let arr1 = [2, 5, 8, 1, 4]; let arr2 = [12, 5, 8, 1, 4]; console.log(arr1.some(item => item > 10)); // false console.log(arr2.some(item => item > 10)); // true console.log(arr1); // [2, 5, 8, 1, 4] console.log(arr2); // [12, 5, 8, 1, 4]

Array.every()

测试数组的所有元素是否都通过了指定函数的测试
数组中每个项都通过才返回true
不会改变原数组

var arr = [1, 30, 39, 29, 10, 13]; console.log(arr.every(item => item < 40)); // true console.log(arr); // [1, 30, 39, 29, 10, 13]

Array.forEach()

对数组的每个元素执行一次提供的函数
不会改变原数组
没有返回值

let arr1 = [1, 2, 3, 4]; let arr2 = []; let res = arr1.forEach(item => { arr2.push(item * item); }); console.log(arr1); // [1, 2, 3, 4] console.log(arr2); // [1, 4, 9, 16] console.log(res); // undefined

Array.map()

创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
不会改变原数组

let arr = [1, 2, 3, 4]; const map = arr.map(x => x * 2); console.log(arr); // [1, 2, 3, 4] console.log(map); // [2, 8, 18, 32]

Array.filter()

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
不会改变原数组

let arr = [12, 5, 8, 130, 44]; const filtered = arr.filter(item => item >= 10); console.log(arr); // [12, 5, 8, 130, 44] console.log(filtered); // [12, 130, 44] //ES2015实现 const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; const filterItems = (query) => { return fruits.filter((el) => el.toLowerCase().indexOf(query.toLowerCase()) > -1 ); } console.log(filterItems('ap')); // ['apple', 'grapes'] console.log(filterItems('an')); // ['banana', 'mango', 'orange']

Array.slice()

返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象
不会改变原数组

let arr = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(arr.slice(2)); // ["camel", "duck", "elephant"] console.log(arr.slice(2, 4)); // ["camel", "duck"] console.log(arr.slice(1, 5)); // ["bison", "camel", "duck", "elephant"] console.log(arr); // ['ant', 'bison', 'camel', 'duck', 'elephant']

Array.reduce()

  • 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值

  • 作为一个高阶函数,用于函数的compose

  • 不会改变原数组

  • 第一个参数是一个方法,第二个参数是初始值

  • 语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

// reduce为数组中的每一个元素依次执行callback函数,接受四个参数: // accumulator 累加器 // currentValue 当前值 // currentIndex 当前索引 // array 数组 let arr = [0, 1, 2, 3]; let sum1 = arr.reduce((a, b) => a + b, 0); let sum2 = arr.reduce((a, b)=> a + b, 10); console.log(sum1); // 6 console.log(sum2); // 16 console.log(arr); // [0, 1, 2, 3] // 计算元素相加后的总和 const numbers = [65, 44, 12, 4] const total = numbers.reduce((total, num) => (total + num), 0) console.log(total) // 求最大值/最小值 let arr = [1, 2, 3, 4, 5] console.log(arr.reduce((prev, cur) => Math.max(prev, cur))); // 5 console.log(arr.reduce((prev, cur) => Math.min(prev, cur))); // 1 // 数组去重 // 将一个空数组作为去重后的新数组 // 通过判断,如果该容器内已经存在某元素,就啥也不做; // 反之,如果该容器内还没有一个元素,就将其推入容器 let arr = [1, 2, 3, 1, 1, 2, 3, 3, 4, 3, 4, 5] let res = arr.reduce((prev, cur) => { !prev.includes(cur) && prev.push(cur) return prev }, []) console.log(res) // 数组扁平化 let arr = [1, 2, '3js', [4, 5, [6], [7, 8, [9, 10, 11], null, 'abc'], {age: 12}, [13, 14]], '[]']; function flatten(arr) { if(Array.isArray(arr)) { return arr.reduce((prev, cur) => { console.log(prev, cur) // 如果遍历的当前项是数组,再迭代展平 return Array.isArray(cur) ? prev.concat(flatten(cur)) : prev.concat(cur) }, []) } else { throw new Error(arr + ' is not array') } } console.log(flatten(arr))

Array.sort()

对数组的元素进行排序,并返回数组,排序不一定是稳定的
默认排序顺序是根据字符串Unicode码点
改变原数组

let arr = [4, 2, 5, 1, 3]; arr.sort((a, b) => a - b); // 增序排列 console.log(arr); // [1, 2, 3, 4, 5] arr.sort((a, b) => b - a); // 降序排列 console.log(arr); // [5, 4, 3, 2, 1]

Array.join()

接受一个string类型的参数,并用该参数将数组中的元素依次拼接起来,最后返回连接之后的字符串
默认使用,拼接
不会改变原数组

let arr = ['Fire', 'Wind', 'Rain']; console.log(arr.join()); // Fire,Wind,Rain console.log(arr.join('')); // FireWindRain console.log(arr.join('-')); // Fire-Wind-Rain console.log(arr); // ['Fire', 'Wind', 'Rain']

Array.toString()

返回一个字符串,表示指定的数组及其元素
不会改变原数组

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

Array.keys()

返回一个包含数组中每个索引键的Array Iterator对象
不会改变原数组

let arr = ['a', 'b', 'c']; let eArr = arr.keys(); console.log(arr); // ['a', 'b', 'c'] for (let key of eArr) { console.log(key); // 0 1 2 }

Array.values()

返回一个新的Array Iterator对象,该对象包含数组每个索引的值
不会改变原数组

let arr = ['w', 'y', 'k', 'o', 'p']; let eArr = arr.values(); console.log(arr); // ['w', 'y', 'k', 'o', 'p'] console.log(eArr.next().value); // w console.log(eArr.next().value); // y console.log(eArr.next().value); // k console.log(eArr.next().value); // o console.log(eArr.next().value); // p

Array.entries()

返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对
不会改变原数组

let arr = ['a', 'b', 'c']; let eArr = arr.entries(); console.log(arr); // ['a', 'b', 'c'] console.log(eArr.next().value); // [0, "a"] console.log(eArr.next().value); // [1, "b"] console.log(eArr.next().value); // [2, "c"] //iterator.next方法运行 let arr = ["a", "b", "c"]; let iter = arr.entries(); let a = []; // for(let i=0; i< arr.length; i++){ // 实际使用的是这个 for(let i = 0; i < arr.length + 1; i++){ // 注意,是length+1,比数组的长度大 let tem = iter.next(); // 每次迭代时更新next console.log(tem.done); // 这里可以看到更新后的done都是false if(tem.done !== true){ // 遍历迭代器结束done才是true console.log(tem.value); a[i] = tem.value; } } console.log(a); // 遍历完毕,输出next.value的数组 [[0, "a"], [1, "b"], [2, "c"]]

案例

案例参考:Javascript之数组


创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: