由于三大框架的出现,对 DOM 的操作转成对数据的操作,对数据的操作主要体现在数组和对象上,今天就以数组为例,对数组的各种操作进行总结
用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接的新数组
let arr = [1, 2]; let arr2 = [123, 456, 678]; let obj = { name: '王二', age: 123 }; let initbool = false; let newarr = arr.concat([3, 4, 5], 7, 8, [9, 10]); let newarr2 = arr.concat(3, 4, 5, arr2, obj, initbool); console.log(arr); //[1, 2] console.log(newarr); //[1, 2, 3, 4, 5, 7, 8, 9, 10] console.log(newarr2); //[1, 2, 3, 4, 5, 123, 456, 678, {name: "王二", age: 123}, false]
(ES6 新增) 将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。
语法: Arr.copyWithin(target, start = 0, end = this.length)
参数:传入的值 默认为 number,传入其他类型值 (bool,string,array,object,undefined)会进行类型转化成 number 类型(参数为 NaN 的话为默认值)
返回值:返回当前数组。也就是说,使用这个方法,会修改当前数组
let arr = [1, 2, 3, 4, 5]; let arr1 = [1, 2, 3, 4, 5]; let arr2 = [1, 2, 3, 4, 5]; let arr3 = [1, 2, 3, 4, 5]; let arr4 = [1, 2, 3, 4, 5]; let arr5 = [1, 2, 3, 4, 5]; let arr6 = [1, 2, 3, 4, 5]; let arr7 = [1, 2, 3, 4, 5]; let arr8 = [1, 2, 3, 4, 5]; let arr9 = [1, 2, 3, 4, 5]; let arr10 = [1, 2, 3, 4, 5]; let newarr = arr.copyWithin(0, 3, 4); arr1.copyWithin(0, 3); arr2.copyWithin(2); arr3.copyWithin(1, 2, 4); arr4.copyWithin(false, 3); arr5.copyWithin(true, 3); arr6.copyWithin(2, NaN); arr7.copyWithin(2); arr8.copyWithin(2, -1); arr9.copyWithin(2, -2); arr10.copyWithin(2, -2, -1); console.log(arr); //[4, 2, 3, 4, 5] console.log(newarr); //[4, 2, 3, 4, 5] console.log(arr1); //[4, 5, 3, 4, 5] console.log(arr2); //[1, 2, 1, 2, 3] console.log(arr3); //[1, 3, 4, 4, 5] console.log(arr4); //[4, 5, 3, 4, 5] console.log(arr5); //[1, 4, 5, 4, 5] console.log(arr6); //[1, 2, 1, 2, 3] console.log(arr7); //[1, 2, 1, 2, 3] console.log(arr8); //[1, 2, 5, 4, 5] console.log(arr9); //[1, 2, 4, 5, 5] console.log(arr10); //[1, 2, 4, 4, 5]
(ES6 新增) 是对键值对的遍历 方法返回一个新的 Array Iterator 对象,该对象包含数组中每个索引的键/值对,不会改变原数组
let arr = ['a', 'b', 'c']; let iterator1 = arr.entries(); console.log(iterator1); //Iterator console.log(iterator1.next()); //{value: Array(2), done: false} console.log(iterator1.next().value); //[1, "b"] console.log(iterator1.next().value); //[2, "c"] console.log(iterator1.next().value); // undefined console.log(arr); // ["a", "b", "c"]
用于检测数组所有元素是否都符合指定条件(通过函数提供)
const isBigEnough = (element, index, array) => { return element >= 10; }; let passed1 = [12, 5, 8, 130, 44].every(isBigEnough); let passed2 = [12, 54, 18, 130, 44].every(isBigEnough); console.log(passed1); // false console.log(passed2); // true
(ES6 新增)用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
let arr1 = [1, 2, 3]; let arr2 = [1, 2, 3]; let arr3 = [1, 2, 3]; let arr4 = [1, 2, 3]; let arr5 = [1, 2, 3]; let arr6 = [1, 2, 3]; let arr7 = [1, 2, 3]; let arr8 = [1, 2, 3]; let arr9 = [1, 2, 3]; let newarr = arr1.fill(7); arr2.fill(4); arr3.fill(4, 1); arr4.fill(4, 1, 2); arr5.fill(4, 1, 1); arr6.fill(4, 3, 3); arr7.fill(4, -3, -2); arr8.fill(4, NaN, NaN); arr9.fill(4, 3, 5); // [1, 2, 3] console.log(arr1); //[7, 7, 7] console.log(newarr); //[7, 7, 7] console.log(arr2); // [4, 4, 4] console.log(arr3); // [1, 4, 4] console.log(arr4); // [1, 4, 3] console.log(arr5); // [1, 4, 3] console.log(arr6); // [1, 2, 3] console.log(arr7); // [1, 2, 3] console.log(arr8); // [4, 2, 3] console.log(arr9); // [1, 2, 3]
创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
let arr = [1, 2, 4, 5, 6, 9, 10, 15]; let newarr = arr.filter(function(x) { return x % 2 !== 0; }); console.log(arr); // [1, 2, 4, 5, 6, 9, 10, 15] console.log(newarr); //[1, 5, 9, 15] //去重 let arr2 = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry']; let arr3 = arr2.filter(function(element, index, self) { return self.indexOf(element) === index; }); console.log(arr3); // ["apple", "strawberry", "banana", "pear", "orange"]
(ES6 新增) 用来查找目标元素,找到就返回该元素,找不到返回 undefined
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8]; let arr2 = arr1.find((value, index, arr) => { return value > 4; }); let arr3 = arr1.find((value, index, arr) => { return value > 14; }); console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8] console.log(arr2); //5 console.log(arr3); //undefined
(ES6 新增) 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8]; let arr2 = arr1.findIndex((value, index, arr) => { return value > 4; }); let arr3 = arr1.findIndex((value, index, arr) => { return value > 14; }); console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8] console.log(arr2); //4 console.log(arr3); //-1
对数组的每个元素执行一次提供的函数
let arr = [{ a: 1 }, {}]; arr.forEach(function(item, idx) { item.b = idx; }); console.log(arr); // [{a: 1, b: 0}, {b: 1}]
(ES6 新增) from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。如果对象是数组返回 true,否则返回 false。
let setObj = new Set(['a', 'b', 'c']); let arr = Array.from(setObj); console.log(arr); //["a", "b", "c"] console.log(Array.from([1, 2, 3], x => x + x)); //[2, 4, 6]
(ES6 新增)方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, NaN].includes(NaN); // true let e1 = { name: 'zs', age: '12' }; let e2 = { name: 'ls', age: '13' }; let arr1 = [e1, e2]; let arr4 = arr1.includes(e1); console.log(arr4); //true
方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
let arr = [{ name: 'zs', age: '12' }, { name: 'ls', age: '13' }]; let index = arr.indexOf({ name: 'zs', age: '12' }); console.log(index); //-1 let e1 = { name: 'zs', age: '12' }; let e2 = { name: 'ls', age: '13' }; let arr1 = [e1, e2]; let index1 = arr1.indexOf(e2); console.log(index1); //1
isArray() 方法用于判断一个对象是否为数组。如果对象是数组返回 true,否则返回 false。
console.log(Array.isArray([])); //true console.log(Array.isArray([1])); //true console.log(Array.isArray(new Array())); //true console.log(Array.isArray()); //false console.log(Array.isArray({})); //false console.log(Array.isArray(null)); //false console.log(Array.isArray(undefined)); //false console.log(Array.isArray(17)); //false console.log(Array.isArray('Array')); //false console.log(Array.isArray(true)); //false console.log(Array.isArray(false)); //false
方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。
let elements = ['1', '2', '3']; console.log(elements.join()); console.log(elements.join('+')); console.log(elements.join('-'));
(ES6 新增) keys() 方法用于从数组创建一个包含数组键的可迭代对象。如果对象是数组返回 true,否则返回 false。
let arr = ['a', 'b', 'c']; let iterator = arr.keys(); console.log(iterator.next()); // { value: 0, done: false } console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: undefined, done: true }
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。如果要检索的字符串值没有出现,则该方法返回 -1。
let arr = ['ab', 'cd', 'ef', 'ab', 'cd']; console.log(arr.lastIndexOf('cd')); //4 console.log(arr.lastIndexOf('cd', 2)); //1 console.log(arr.lastIndexOf('ab', -3)); //0
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 我们