JS数组ES3-ES6常用方法

已于 2023-03-01 09:51:20 修改
阅读量508 收藏
点赞数 1
分类专栏： JavaScript 文章标签： javascript js 字符串
于 2020-12-23 21:21:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46210850/article/details/111597415
版权

concat

		// 数组合并
        let arr = [1,2]
        let arrs = [1,2]
        console.log(arr.concat(arrs))//[1,2,1,2]

join

		let arr = [1,2]
        console.log(arr.join(','))//1,2 以逗号分割

pop

 		// let arr = [1,2]
        // console.log(arr.pop()) //[2]  删除尾部元素

shift

		let arr = [1,2]
        console.log(arr.shift())//[1]头部删除

push

		let arr = [1,2]
        arr.push(3)
        console.log(arr)//[1,2,3]尾部添加

unshift

		let arr = [1,2]
        arr.unshift(0)
        console.log(arr)//[0,1,2]头部添加

reverse

		let arr = [1,2]
        console.log(arr.reverse())//[2,1]数组反转

slice

		let arr = [1,2,3,4]
        console.log(arr.slice(0,2))[1,2] //数组截取

sort

默认字典顺序 从小到大 如果是字符串的话 默认前一位数，比如‘29’比‘100’小，比较的是前一位

		let arr = [1,2,3,4]
        console.log(arr.sort((a,b)=>{return b-a})) //排序

splice

		let arr = [1,2,3,4]
        arr.splice(2,2)//参1 起始删除的下标，参2 删除的数量
        console.log(arr)//[1,2]
        arr.splice(2,0,3)//参1 起始的下标，参2 0 不删除 参3 添加
        console.log(arr)//[1,2,3]
        arr.splice(2,1,4)参1 起始的下标，参2 删除 参3 替换
        console.log(arr)//[1,2,4]

toString

		let arr = [1,2,3,4]
        console.log(arr.toString())// 1，2，3，4转化字符串

toLocaleString

	let arr = [1,2,3,4]
    console.log(arr.toLocaleString())// 1,2,3,4转化本地数组,可以转化时间

forEach

		let arr = [1,2,3,4]
        arr.forEach(item=>console.log(item))//1 2 3 4

map

Map： ES6 提供了新的数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 结构提供了“值—值”的对应。
size 属性： 返回 Map 结构的成员总数。

		const map = new Map();
        map.set('foo', true);
        map.set('bar', false);
        console.log(map.size) // 2
        console.log(map) // 0: {"foo" => true} 1: {"bar" => false}

set(key, value)： set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。返回的是当前的Map对象

		const m = new Map();
        m.set('aa', 6)        // 键是字符串
        m.set(262, 'standard')     // 键是数值
        m.set(undefined, 'nah')    // 键是 undefined
        console.log(m)
        //链式写法
        let map = new Map()
            .set(1, 'a')
            .set(2, 'b')
            .set(3, 'c');
            console.log(map)

get(key)： get方法读取key对应的键值，如果找不到key，返回undefined。

		const m = new Map();
        const hello = function () {
            console.log('hello');
        };
        m.set(hello, 'Hello ES6!') // 键是函数
        m.set(undefined, 'Undefined!') // 键是undefined
        console.log(m.get(hello)); // Hello ES6!
        console.log(m.get(undefined)); // Undefined!
        console.log(m)

has(key)： 返回一个布尔值，表示某个键是否在当前 Map 对象之中。

		const m = new Map();
        m.set('aaa', 6);
        m.set(111, 'standard');
        console.log(m.has('aaa'))     // true
        console.log(m.has('bbb'))     // false
        console.log(m.has(111))

delete(key)： 删除某个键，返回true。如果删除失败，返回false。

		const m = new Map();
        m.set(undefined, 'aaa');
        console.log(m.has(undefined))     // true
        m.delete(undefined)
        console.log(m.has(undefined))       // false

clear()： clear方法清除所有成员，没有返回值

		let map = new Map();
        map.set('foo', true);
        map.set('bar', false);
        console.log(map.size) // 2
        map.clear()
        console.log(map.size) // 0

filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组
Array的filter接收一个函数。但是和map不同的是， filter把传入的函数依次作用于每个元素，然后根据返回值是 true 还是false决定保留还是丢弃该元素。

		let arr = [1,2,3,4]
        console.log(arr.filter(item=> {return item >3}))//4

去重操作
filter 接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身

var Arr,
   arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
        Arr = arr.filter(function (element, index, self) {
            // console.log(self) //数组
            // console.log(index)//下标
            // console.log(element)//属性值
            return self.indexOf(element) === index;
        });
        console.log(Arr);

every

用于检测数组中所有元素是否都符合指定条件，若符合返回true，否则返回false

		let arr = [1,2,3,4]
        console.log(arr.every(item=> {return item >0}))//true

some

用于检测数组中的元素是否有满足指定条件的，若满足返回true，否则返回false

		var arr = [1,-56,80,-5];
		var main = arr.some(n => n > 0);
		console.log(main)    //输出:true

reduce

		// 回调函数中有4个参数。
        // prev（之前计算过的值），
        // next（之前计算过的下一个的值），
        // index，arr。把数组列表计算成一个单一值 。
        var arr = [10, 20, 30, 40]
        let list = arr.reduce(function (prev, next, index, arr) {
            return prev + next;
            console.log(prev)// 只打印第一个
            console.log(next)//不打印第一个
        })
        console.log(list);  //输出:100

Array.from

将对象或字符串转成数组，注意得有length

		let str = '12345'
        console.log(Array.from(str))

Array.of

		let str = '12345'
        console.log(Array.of(str))//[12345]

copyWithin

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 对象转数组(建议用es6的Array.from(Obj)转换比较直观)
Array.from({length: 5, 3: 1})
// [undefined, undefined, undefined, 1, undefined]

// 转换完毕，进行处理
[undefined, undefined, undefined, 1, undefined].copyWithin(0,3);
// [1, undefined, undefined, 1, undefined]
// 恢复回类对象(忽略undefined,补上length)
[0:1,3:1,length:5]

find

用于找出第一个符合条件的数组成员

		let arr = [1,2,3,3,4,5]
        console.log(arr.find(item=> {return item==3}))//3

findIndex

返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

		let arr = [1,2,3,3,3,4,5]
        console.log(arr.findIndex(item=> {return item==3}))

keys,values,entries

keys循环遍历key值，就是下标
valuse遍历valie值，就是属性值
entries遍历键值队列，属性：属性值

		var arr = ["a","b","c","d"];
        for(let index of arr.keys()){
            console.log(index);//0,1,2,3
        }
        for(let elem of arr.values()){
            console.log(elem);//a,b,c,d
        }
        for(let [index,elem] of arr.entries()){
            console.log(index,elem);//0 a,1 b,2 c,3 d,
        }

flat

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

		var arr = [1,[2,[3,[4,[5,[6]]]]]]
        console.log(arr.flat(Infinity))

flatmap

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。 这里我们拿map方法与flatMap方法做一个比较。

		var arr1 = [1, 2, 3, 4];
        arr1.map(x => [x * 2]);
        // [[2], [4], [6], [8]]
        arr1.flatMap(x => [x * 2]);
        // [2, 4, 6, 8]
        // 只会将 flatMap 中的函数返回的数组 “压平” 一层
        arr1.flatMap(x => [[x * 2]]);
        // [[2], [4], [6], [8]]

Set

Set： ES6 提供了新的数据结构。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成 Set 数据结构。
Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

size属性： 返回Set实例的成员总数。

		let set = new Set();
		set.add('a');
		console.log(set.size) // 1
		set.add("b");
		console.log(set.size) //2

add(value)添加某个值，返回 Set 结构本身

		let set = new Set();
		set.add(1).add(2);
        console.log(set.size) // 2
        console.log(set)
		set.add(1).add(2).add(2).add(3);
        console.log(set.size) // 3 
        console.log(set)
		//2被添加两次,set可以去重

delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

		let set = new Set();
        set.add(1).add(2).add(3);
        console.log(set.size) //3
        set.delete(2);
        console.log(set)// 1,3
        console.log(set.size) //2

has(value)：返回一个布尔值，表示该值是否为Set的成员。

		let set = new Set();
        set.add(1).add(2);
        console.log(set.has(1)) // true
        console.log(set.has(2)) // true
        console.log(set.has(3)) // false

clear()：清除所有成员，没有返回值。

		let set = new Set();
        set.add(1).add(2).add(2).add(3);
        set.clear();
        console.log(set.size)//0
        console.log(set)

数组对象去重

let params=[{id:1},{id:1}]
[...new Set(params.map(e=>JSON.stringify(e)))].map(e=>JSON.parse(e))
那就随缘吧skr
关注
专栏目录
js 数组Array的常用方法 es3 es5 es6
Jiang_XiaoBai007的博客
09-18 297
js 数组Array的常用方法 es3 es5 es6 1.伪数组 1.1对象和伪数组的差别： 1.对象的原型链上只有Object.prototype，而数组的原型链上有Array.prototype和Object.prototype —所以伪数组无法使用数组的方法； 2.对象没有length属性，数组有并且自动更新； 3.对象根据键值对取值，而数组根据序号(索引)取值。 1.2定义伪数组: 1.拥有length属性,其他属性为非负整数字符串(因为对象使用[]来取值,会将数值隐式转换为字符串)—伪数组是对象
JavaScript的ES3, ES5, ES6实现继承方式
翾的博客
05-09 943
前言 该篇博客涉及__proto__, prototype属性, 如果不是太了解, 参见下面这篇博客 https://blog.csdn.net/c_kite/article/details/78484191 ES3 继承 在JavaScript中，所谓的类就是函数，函数就是类。一般情况下，我们在函数的prototype上面定义方法，因为这样所有类的实例都可以公用这些方法；在函数内部...
ES6数组操作方法
qq_66390045的博客
04-21 1968
1. forEach （1）没有返回值 （2）不能return，会返回undefinde var arr = [1, 2, 3, 4, 5, 4, 2] arr.forEach((item) => { console.log(item) }) 1, 2, 3, 4, 5, 4, 2 2. map （1）有返回值，返回一个新数组 （2）可以return，可以自定义返回值 var arr2 = [ { id: 1, name: 'jack', age: 18 }, { id
es6操作数组方法
qq_34576748的博客
08-11 304
1.forEach( item, index, array ): 遍历数组，对数组的每个元素执行一次提供的函数，改变当前数组，没有返回值 item: 当前项的值 index: 当前项的索引 array: 操作的数组 let arr1 = [ 'a', 'b', 'c' ]; let arr2 = arr1.forEach( ( item, index, arr ) => { if...
ES6操作数组的几种方法
hql1439493352的博客
05-08 738
1、map() 原数组被“映射”成对应的新数组，原数组不会被改变 2、reduce() 求和 ，也可以理解为一个迭代函数吧 3、filter() 过滤函数，返回符合条件的元素的数组 4、find() 查找到第一个符合条件的元素时，便立刻返回 ...
ES3常用数组方法
qq_38888512的博客
03-24 415
增删系列方法： push(元素1，元素2，…，元素n) 功能：往源数组的末端添加元素。 返回值：添加元素后，源数组的长度。 示例： var a = [1] a.push(2,3,4) console.log(a) //(4) [1, 2, 3, 4] unshift（元素1，元素2，…，元素n） 功能：往源数组从首端添加元素。 返回值：添加元素后，源数组的长度。 示例： var a = ...
开发中常用的ES6数组操作方法
清颖的博客
03-22 2119
继上一篇针对JS中是否改变原数组的操作方法总结，归纳一些项目开发中需要用到的ES6数组操作方法。毕竟有时处理数据时，忽然想不到方法是很捉急的事情呀！ [...arr]解构，数据去重/连接/合并，Array.from()，filter()，reducer()，map()，some()等，满足大多数的开发需求。
vue-es3-js:包含es6，vue，js
03-13
在"vue-es3-js"这个项目中，我们看到它包含了ES6（ECMAScript 2015）的语法特性，Vue.js框架，以及普通的JavaScript代码。这个压缩包很可能是为了一个基于Vue.js的项目提供源码，让我们来详细探讨这些知识点。 **...
JavaScript数组去重实现方法小结
10-15
JavaScript数组去重是编程中常见的需求，特别是在处理数据集合时，确保每个元素的唯一性至关重要。这篇文章主要讨论了在不同的JavaScript版本中实现数组去重的方法，包括ES3、ES5和ES6。以下是对这些方法的详细解释...
ES6 数组操作大全
朝花夕拾的博客
11-08 6497
一、改变原数组的方法 删除数组元素： 1、pop 删除数组的最后一个元素，返回删除的数组 2、shift 删除数组的第一个元素，返回删除的数组 3、splice(1,3,'a1','b2') 第一个位置开始，删除到元素的3个位置，添加a1,b2,返回删除的数组 扩展splice和slice的区别： splice 改变原数组 splice是返回更新后的数组长度 slice是返回新数组 slice 不改变原数组 slice（1,3）是从第1个位置开始，删除到3个元素后返回剩下的数组 ...
es6 处理数组的方法汇总
热门推荐
qq_58340302的博客
08-19 1万+
传给 reduce()和 reduceRight() 的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。注意，如果数组中的某一项是 null 或 undefined， 则在 join() toLocaleString() toString() valueOf() 返回的结果以空字符串表示。为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。
数组的一些常见方法
yinviolet的博客
08-29 115
数组的常用方法 数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样操作了 比如我们想改变一个数组 // 创建一个数组 var arr = [1, 2, 3] // 我们想把数组变成只有 1 和 2 arr = [1, 2] 这样肯定是不合理，因为这样不是在改变之前的数组 相当于心弄了一个数组给到 arr 这个变量了 相当于把 arr 里面存储的地址给换了，也就是把存...
ES3、ES5、ES6数组常用的方法
weixin_45674894的博客
10-10 782
Array对象 js中内置了一个Array构造函数,可以创建数组对象,本文主要介绍数ES3、ES5、ES6数组中一些常用的方法。 join(字符串分隔符) // 语法：arr.join(分隔符) var arr = ['刘备','张飞','关羽']; // 不传参数，默认每一项之间以 逗号 进行拼接 var str = arr.join(); //刘备,张飞,关羽 //按 - 进行拼接 va...
ES3~ES6数组的方法总结
luo1914_的博客
04-19 338
ES3数组的方法 push() arr.push(值) 向数组的最后一个位置添加一个元素 语法：arr.push() 返回值：改变之后的数组的长度 改变原数组 var arr = ["aa","bb","cc"] var res = arr.push('dd') console.log(res); //返回4 pop() arr.pop(值) 删除数组的最后一个元素 语法：arr.p...
【JS】数组处理（ES6）
强者惜字如金，弱者废话连篇！
06-16 233
【JS】数组处理（ES6）
js 数组操作方法（ES6）
xuehu837769474的博客
05-23 2528
1.Array数组的方法 Mutator方法————"突变方法"会改变数组自身的值； Accessor方法————"访问方法"不会改变数组自身的值； Iteration方法————"遍历的方法" Establish方法————"创建新方法" 2.Mutator方法（会改变数组自身的值） 1、[ ].push作用：将一个或多个元素添加到数组的末尾，传参：（单个或多个数组元素）；返回值：...
JavaScript 中的继承：ES3、ES5 和 ES6
weixin_33755557的博客
12-31 154
选择一种继承方式 JavaScript 是一门动态语言，动态意味着高灵活性，而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式，可以分成下面四类： Mixin 模式，即属性混入，从一个或多个对象中复制属性到新的对象中 方法借用模式，即通过 call 或 apply 实现方法的重用 原型模式，使用 Object.create 方法直接以一个对象为原型创造新的对象 类模式，实...
es修改文档(use postman)
fz13768884254的博客
02-20 8087
可以使用postman对es文档进行修改，具体操作步骤如下： 拼接访问链接： 服务ip:端口/index/type/文档id/_update 请求方式：post body:{     "doc" : {         "字段1" : 1100,          "字段2" : 1010             }}  ...
JavaScript上下文对象详细解析,ES3与ES6
最新发布
sxcsdsg的博客
03-17 389
JavaScript执行环境详细解析,VO对象、scope、this
JavaScript数组方法总结：从ES3到ES5
"JavaScript基础进阶之数组方法总结，涵盖了ES3中的常用数组操作，包括连接数组、转换为字符串、增删元素以及排序等方法。" 在JavaScript中，数组是处理数据的重要工具，掌握其内置的方法能极大提高编程效率。这篇...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值