首页 > 其他分享 >JS 数组操作

JS 数组操作

时间:2023-07-15 18:35:57浏览次数:32  
标签:arr console log 元素 JS let 数组 操作

JS数组操作如下:

// at(), 用于接收一个整数值并返回该索引对应的元素,允许正数和负数。负整数从数组中的最后一个元素开始倒数
const arr = [{name: 'a', age: 15}, {name: 'b', age: 12}, {name: 'c', age: 13}, {name: 'd', age: 12}, {name: 'e', age: 12}];
console.log(arr.at(1)); // {name: 'b', age: 12}
console.log(arr.at(-3)); // {name: 'c', age: 13}

// concat(), 用于连接两个或多个数组,该方法不会改变现有的数组,而是返回一个新的数组
const arr1 = [1,2,3];
const arr2 = [6,5,4];
console.log(arr1.concat(arr2), arr1, arr2);

// copyWithin(), 用于从数组的指定位置拷贝元素到数组的另一个指定位置中,会改变原数组
// copyWithin(target, start, end)
// target: 必需。复制到指定目标索引位置
// start: 可选。元素复制的起始位置
// end: 可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。
const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);

// entries(), 返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key, 数组元素作为 value。
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.entries());

// every(function), 用于检测数组所有元素是否都符合指定条件(通过函数提供),不会对空数组进行检测,不会改变原始数组
// 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测
// 如果所有元素都满足条件,则返回 true
let arr = [{name: 'a', age: 15}, {name: 'b', age: 12}, {name: 'c', age: 13}, {name: 'd', age: 12}, {name: 'e', age: 12}];
let res1 = arr.every(el => el.age > 10);
let res2 = arr.every(el => el.age >= 15);
console.log(res1, res2); // true false

// fill(value, start, end), 用于将一个固定值替换数组的元素
// value: 必需。填充的值 
// start: 可选。开始填充位置 
// end: 可选。停止填充位置 (默认为 array.length)
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4); // ['Banana', 'Orange', 'Runoob', 'Runoob']

// filter(function), 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,不会对空数组进行检测,不会改变原始数组
let arr = [1,2,3,5,7,8,9,2,4,5];
let res1 = arr.filter(el => el> 5);
console.log(res1, arr); //[7, 8, 9], [1, 2, 3, 5, 7, 8, 9, 2, 4, 5]

// find(function) 返回通过测试(函数内判断)的数组的第一个元素的值, 没有改变数组的原始值
// 为数组中的每个元素都调用一次函数执行:
//   当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数
//   如果没有符合条件的元素返回 undefined
//   对于空数组,函数是不会执行的
// array.find(function(currentValue, index, arr),thisValue)
/**
 * array.find(function(currentValue, index, arr),thisValue)
 * currentValue	必需。当前元素
 * index: 可选。当前元素的索引值
 * arr: 可选。当前元素所属的数组对象
 * thisValue: 可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
 */
let arr = [{a:2},{a:1},{a:5},{a:3},{a:1}];
let res = arr.find((item, index, items) => {
    console.log(item, index, items)
    return item.a === 3;
})
console.log(res);//{a:3}

// findIndex() 返回传入一个测试条件(函数)符合条件的数组第一个元素位置, 没有改变数组的原始值
// 为数组中的每个元素都调用一次函数执行:
//   当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数
//   如果没有符合条件的元素返回 -1
//   对于空数组,函数是不会执行的
/**
 * array.findIndex(function(currentValue, index, arr), thisValue)
 * currentValue: 必需。当前元素
 * index: 可选。当前元素的索引
 * arr: 可选。当前元素所属的数组对象
 * thisValue: 可选。 传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
 */
let arr = [{a:2},{a:1},{a:5},{a:3},{a:1}];
let res = arr.findIndex((item, index, items) => {
    console.log(item, index, items)
    return item.a === 3;
})
console.log(res);//3

// findLast() 返回通过测试(函数内判断)的数组从后向前查找的第一个元素的值, 没有改变数组的原始值
// 为数组中的每个元素都调用一次函数执行:
//   当数组中的元素在测试条件时返回 true 时, findLast() 返回符合条件的元素,之后的值不会再调用执行函数
//   如果没有符合条件的元素返回 undefined
//   对于空数组,函数是不会执行的
// array.findLast(function(currentValue, index, arr),thisValue)
/**
 * array.findLast(function(currentValue, index, arr),thisValue)
 * currentValue	必需。当前元素
 * index: 可选。当前元素的索引值
 * arr: 可选。当前元素所属的数组对象
 * thisValue: 可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
 */
let arr = [{a:2},{a:1},{a:5},{a:3},{a:1}];
let res = arr.findLast((item, index, items) => {
    console.log(item, index, items)
    return item.a === 3;
})
console.log(res);//{a:3}

// findLastIndex() 返回传入一个测试条件(函数)符合条件的数组从后向前查找的第一个元素位置, 没有改变数组的原始值
// 为数组中的每个元素都调用一次函数执行:
//   当数组中的元素在测试条件时返回 true 时, findLastIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数
//   如果没有符合条件的元素返回 -1
//   对于空数组,函数是不会执行的
/**
 * array.findLastIndex(function(currentValue, index, arr), thisValue)
 * currentValue: 必需。当前元素
 * index: 可选。当前元素的索引
 * arr: 可选。当前元素所属的数组对象
 * thisValue: 可选。 传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
 */
let arr = [{a:2},{a:1},{a:5},{a:3},{a:1}];
let res = arr.findLastIndex((item, index, items) => {
    console.log(item, index, items)
    return item.a === 3;
})
console.log(res);//3

// flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
// flat会移除数组中的空项
// flat返回一个包含将数组与子数组中所有元素的新数组
/**
 * flat()
 * flat(depth)
 * depth: 指定要提取嵌套数组的结构深度,默认值为 1。
 */
let arr1 = [1, 2, [3, 4]];
arr1.flat();// [1, 2, 3, 4]

let arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();// [1, 2, 3, 4, [5, 6]]

let arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);// [1, 2, 3, 4, 5, 6]

//使用 Infinity,可展开任意深度的嵌套数组
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

//扁平化与数组空项:flat() 方法会移除数组中的空项:
var arr5 = [1, 2, , 4, 5];
arr4.flat();// [1, 2, 4, 5]

// flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
// 返回新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为 1
/**
 * flatMap(function(currentValue, index, array) {  }, thisArg)
 * currentValue: 当前正在数组中处理的元素
 * index: 可选的。数组中正在处理的当前元素的索引
 * array: 可选的。被调用的 map 数组
 * thisArg: 可选的。执行 callback 函数时 使用的this 值
 */
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);// [2, 4, 6, 8]
// only one level is flattened
arr1.flatMap(x => [[x * 2]]);// [[2], [4], [6], [8]]

let arr2 = ["it's Sunny in", "", "California"];
arr2.map(x => x.split(" "));// [["it's","Sunny","in"],[""],["California"]]
arr2.flatMap(x => x.split(" "));// ["it's","Sunny","in", "", "California"]

let a = [5, 4, -3, 20, 17, -33, -4, 18];
let b = a.flatMap( (n) =>
    (n < 0) ? [] :
    (n % 2 == 0) ? [n] :
    [n-1, 1]
)
console.log(b);// [4, 1, 4, 20, 16, 1, 18]

// forEach() 用于调用数组的每个元素,并将元素传递给回调函数,对于空数组是不会执行回调函数
/**
 * array.forEach(callbackFn(currentValue, index, arr), thisValue)
 * currentValue: 必需。当前元素
 * index: 可选, 当前元素的索引值
 * arr: 可选。当前元素所属的数组对象
 * thisValue: 可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
 */
// forEach() 本身是不支持的 continue 与 break 语句的,我们可以通过 some 和 every 来实现。
// 使用 return 语句实现 continue 关键字的效果:
let arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
    if (item === 3) return;
    console.log(item); // 1 2  4 5,跳过了3
});

// includes() 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false
/**
 * arr.includes(searchElement, fromIndex)
 * searchElement: 必须。需要查找的元素值
 * fromIndex: 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
 */
let arr = [1,2,3,4,5,6];
console.log(arr.includes(3));// true
console.log(arr.includes(2, 3));// false
console.log(arr.includes(4, -3));// true

// indexOf() 返回数组中某个指定的元素位置
// 该方法将从头到尾地检索数组,看它是否含有对应的元素
// 开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)
// 如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。
// 如果在数组中没找到指定元素则返回 -1
/**
 * array.indexOf(item,start)
 * item: 必须。查找的元素
 * start: 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
 */
let fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
conosle.log(fruits.indexOf("Apple",4)); // 6

// join() 用于把数组中的所有元素转换一个字符串,元素是通过指定的分隔符进行分隔的
/**
 * array.join(separator)
 * separator: 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
 */
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join(" and ")); //Banana and Orange and Apple and Mango

// keys() 此方法用于从数组创建一个包含数组键的可迭代对象
// 如果对象是数组返回 true,否则返回 false
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.keys();

// lastIndexOf() 此方法可返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找
// 如果要检索的元素没有出现,则该方法返回 -1
/**
 * array.lastIndexOf(item,start)
 * item:必需。规定需检索的字符串值
 * start:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1
 * 如省略该参数,则将从字符串的最后一个字符处开始检索
 */
let numbers = [2, 3, 4, 1, 2, 3, 4];
console.log(numbers.lastIndexOf(2)); // 4

// map() 此方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
// 不会对空数组进行检测,不会改变原始数组
/**
 * array.map(function(currentValue,index,arr), thisValue)
 * currentValue:必须。当前元素的值
 * index:可选。当前元素的索引值
 * arr:可选。当前元素属于的数组对象
 * thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值
 * 如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象
 */
let numbers = [1, 2, 3, 4];
let newNums = numbers.map(el => el * 2);
console.log(newNums); //[2,4,6,8]

// pop() 此方法用于删除数组的最后一个元素并返回删除的元素,此方法改变数组的长度
const sites = ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu'];
console.log(sites.pop());// 输出结果为: "Baidu"
console.log(sites);// 输出结果为: ['Google', 'Runoob', 'Taobao', 'Zhihu']

// push() 此方法可向数组的末尾添加一个或多个元素,并返回新的长度
// 此方法改变数组的长度
let numbers = [1, 2, 3, 4];
numbers.push(5);// 5
console.log(numbers);// [1, 2, 3, 4, 5]

// reduce() 此方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
/**
 * array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
 * total: 必需。初始值, 或者计算结束后的返回值
 * currentValue: 必需。当前元素
 * currentIndex: 可选。当前元素的索引
 * arr: 可选。当前元素所属的数组对象
 * initialValue: 可选。传递给函数的初始值
 */
let numbers = [1, 2, 3, 4];
function getSum(total, num) {
    return total + Math.round(num);
}
numbers.reduce(getSum, 0);//10

// reduceRight() 方法的功能和 reduce() 功能是一样的
// 不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加
// 对于空数组是不会执行回调函数的
/**
 * array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
 * total: 必需。初始值, 或者计算结束后的返回值。
 * currentValue: 必需。当前元素
 * currentIndex: 可选。当前元素的索引
 * arr: 可选。当前元素所属的数组对象。
 * initialValue: 可选。传递给函数的初始值
 */
let nums = [3,4,5,6,7,8];
let all = nums.reduceRight((total, currentValue, currentIndex, arr) => {
    console.log(total, currentValue, currentIndex, arr);
    if(currentValue % 2 === 0){
        return total - currentValue;
    }
    return currentValue;
});
console.log(all);

// reverse() 用于颠倒数组中元素的顺序
let ips = [1,2,3,4,5];
console.log(ips.reverse());//[5, 4, 3, 2, 1]

// shift() 用于把数组的第一个元素从其中删除,并返回第一个元素的值, 此方法改变数组的长度
let stu = [3,2,4,1,5,6,8];
console.log(stu.shift(), stu);//3  [2, 4, 1, 5, 6, 8]

// slice() 可从已有的数组中返回选定的元素; 可提取字符串的某个部分,并以新的字符串返回被提取的部分; 不会改变原始数组
/**
 * array.slice(start, end)
 * start: 可选。规定从何处开始选取。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)
 * end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)
 * 返回一个新的数组,包含从 start(包括该元素) 到 end (不包括该元素)的 arrayObject 中的元素
 */
let children = [1,2,3,4,5,6,7,8];
console.log(children.slice(2, 5));//[3, 4, 5]
console.log(children.slice(2, -2));//[3, 4, 5, 6]
console.log(children.slice(-5, -1));//[4, 5, 6, 7]

// some() 用于检测数组中的元素是否满足指定条件(函数提供), 不会改变原始数组
// some() 方法会依次执行数组的每个元素:
// 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测
// 如果没有满足条件的元素,则返回false
// some() 不会对空数组进行检测
/**
 * array.some(function(currentValue,index,arr),thisValue)
 * function(currentValue,index,arr): 必须。函数,数组中的每个元素都会执行这个函数
 * currentValue: 必须。当前元素的值
 * index: 可选。当前元素的索引值
 * arr: 可选。当前元素属于的数组对象
 * thisValue: 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"
 */
let people = [2,3,1,5,3,6,7,8,4];
let ressult = people.some((value, index, arr) => {
    console.log(value, index, arr);
    return value === 5;
});
console.log(ressult); // true

// sort() 用于对数组的元素进行排序; 排序顺序可以是字母或数字,并按升序或降序; 默认排序顺序为按字母升序;
/**
 * array.sort(sortfunction)
 * sortfunction: 可选。规定排序顺序。必须是函数
 */
let points = [40,100,1,5,25,10];
//数字排序(数字和升序)
points.sort(function(a,b){return a-b});
console.log(points); //[1, 5, 10, 25, 40, 100]
//数字排序(数字和降序)
points.sort(function(a,b){return b-a;})
console.log(points); //[100, 40, 25, 10, 5, 1]
//数字排序 (字母和降序):
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
//升序
console.log(fruits); //['Apple', 'Banana', 'Mango', 'Orange']
fruits.reverse();
console.log(fruits); //['Orange', 'Mango', 'Banana', 'Apple']

// splice() 用于添加或删除数组中的元素,这种方法会改变原始数组
/**
 * array.splice(index,howmany,item1,.....,itemX)
 * index: 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字
 * howmany: 可选。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素
 * item1,.....,itemX: 可选。要添加到数组的新元素
 */
let arr = ['eric', 'lee', 'jhon'];
let res = arr.splice(1, 1);
console.log(arr, res); //['eric', 'jhon'] ['lee']

let arr1 = [1,2,3,4,5];
let res1 = arr1.splice(2, 2, 7,8,9);
console.log(arr1, res1); //[1, 2, 7, 8, 9, 5]  [3, 4]

// toLocaleString()

// toReversed()

// toSorted()

// toSpliced()

// toString() 可把数组转换为字符串,并返回结果,数组元素用逗号分隔
let arr = [1,2,3,4,5];
console.log(arr.toString());// 1,2,3,4,5

// unshift() 可向数组的开头添加一个或更多元素,并返回新的长度, 该方法将改变数组的数目
let arr = [2,3,4,5,6];
arr.unshift(1,2);// 7
console.log(arr);//[1, 2, 2, 3, 4, 5, 6]

// values() 此方法用于从数组创建一个包含数组键的可迭代对象
// 如果对象是数组返回 true,否则返回 false
let arr = [2,3,4,5,6];
arr.values();

// with() // 缺点较多,不建议使用

标签:arr,console,log,元素,JS,let,数组,操作
From: https://www.cnblogs.com/fishlittle/p/17389719.html

相关文章

  • java操作zookeeper
    java操作zookeeper创建一个maven项目在pom文件里引入如下依赖:<dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.10</version><scope>test</scope......
  • js
    1.js基础1.1js书写位置内部js外部js***请注意,外部js标签内编写的js代码并不执行。***行内js1.2js注释和结束符js注释分类:单行注释://多行注释:/**/js结束符:;(英文状态下的分号)***请注意,js结束符并不是必须的,可以加,也可以不加,但是建议编写时统一。***1.3......
  • C#中数组嵌套数组
    publicclassmo{publicintq1{get;set;}publicintcount{get;set;}}classClass1{staticvoidMain(string[]args){int[]a=newint[]{1,2,3,4,5};int[]b1=n......
  • 第五节 数组
    知识点数组题目1请创建一个长度为6的整数数组,并为数组中的元素赋值。遍历数组,打印所有元素,元素之间用空格隔开。比如:数组为:{1,2,3,4,5}打印结果:12345训练提示1、数组中的元素有索引,开始索引和结束索引分别是什么?使用循环语句,依次通过索引获取元素即可遍历数组。2、......
  • 后缀数组学习笔记
    后缀数组是什么后缀数组就是主要处理字符串后缀问题的,它的实现算法主要有两种:倍增法和DC3,复杂度分别是\(O(n\logn)\)和\(O(n)\)。这里由于DC3代码答辩且难以理解,我就只写了倍增法的实现。例题引入P3809【模板】后缀排序题目大意读入一个长度为\(n\)的由大小写英文......
  • 如何使用C#中的Lambda表达式操作Redis Hash结构,简化缓存中对象属性的读写操作
    Redis是一个开源的、高性能的、基于内存的键值数据库,它支持多种数据结构,如字符串、列表、集合、散列、有序集合等。其中,Redis的散列(Hash)结构是一个常用的结构,今天跟大家分享一个我的日常操作,如何使用Redis的散列(Hash)结构来缓存和查询对象的属性值,以及如何用Lambda表达式树来简化......
  • MySQL学习-基本操作
    1.数据库操作创建数据库createdatabasetest;查看数据库showdatabases;进入数据库usetest;删除数据库dropdatabasetest;2.表格操作创建表格 createtabletable1(namevarchar(20),date1date)删除表格droptabletest1修改表格表项altertabletable1modif......
  • office软件提示“您的组织策略阻止我们进行该操作”错误的解决办法-终极汇总
    环境系统:win1064位专业版时间:2023年7月15日1.选择默认软件在设置中打开默认应用,将web浏览器改为你想要的浏览器 2.修改注册表同时按下win+R,输入regedit打开注册表。修改计算机\HKEY_CURRENT_USER\Software\Classes\.html路径下的值为Htmlfile 3.重启office软件或......
  • Perl学习笔记2_标量数组哈希
    1.概述Perl是弱类型语言,变量不需要指定类型,解释器根据上下文自动选择匹配类型.Perl有三个基本的数据类型:标量($),数组(@),哈希(%).2.标量,scalar标量变量以$标记.my$a=123;#数字my$b="123";#字符串my$c=0x1F;#16进制my$d=047;#8进制my$e......
  • 启动Hadoop时需要进行的操作
    首先切换到hadoop用户su-hadoop启动hdfs集群start-dfs.sh启动yarn集群start-yarn.sh启动hive首先切换到hive文件夹cd/export/server/hive然后再运行下述命令#先启动metastore服务然后启动hiveserver2服务nohupbin/hive--servicemetastore>>logs/metastore.log......