Js基础 ES6+ 数组、对象的常用方法

已于 2023-03-28 16:14:54 修改
阅读量1.7k 收藏 6
点赞数 1
文章标签： es6 数据结构 前端
于 2023-02-10 17:33:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_49720804/article/details/128936024
版权

目录

数组

1.map()

2. forEach()

 注意：map和forEach  有可能改变原数组

3. filter()

4.find() 

 5.findIndex() 

 6.some()

 7.every() 

  8. reduce()

对象

1.Object.is()

 2.Object.assign()

3.Object.keys()

 4.Object.values()

 5.Object.entries()

 拓展

1.Set()

2.Map()

积累~

1.Js直接将 字符串数组转为数字数组 和直接将 数字数组转为字符串数组

2.Js通过获取index截取字符串 不生成新数组或新字符串

数组

1.map()

        map() 遍历数组中每一项并依次处理元素  返回一个新数组

例：

写法一：

  写法二：

arr参数基本不用，可以不写

2. forEach()

        forEach() 遍历数组中每一项   没有返回值  

 注意：map和forEach  有可能改变原数组

当要改变的数组中的值是 引用类型 时，就可以直接改变，例：

 当要改变的数组中的值是 基本类型 时，就没有改变，例：

3. filter()

        filter() 过滤原数组中的数据  返回一个新数组，把满足条件的放在新数组中，如果没有满足条件的元素，则返回一个空数组   不改变原数组的值

例：

4.find() 

        find()  查找到数组中第一个满足条件的元素的值  返回查找到的那个数据，如果找不到则返回undefined

注：如果有多个满足条件的元素，只返回满足条件的第一个元素。

例：

 5.findIndex() 

        findIndex() 查找到数组中第一个满足条件元素的下标  返回查找到的那个数据的下标，如果找不到返回-1

例：

 6.some()

        some() 查找数组中是否有满足指定条件的元素  返回一个布尔值  只要有满足条件的返回true，没有满足条件，返回false

例：

 7.every() 

        every()  查找数组中是否所有元素都符合指定条件 返回一个布尔值  所有元素都满足条件的返回true，有一个元素不满足就返回false  即 一假则假

例：

  8. reduce()

        reduce()  接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 有四个参数 reduce(prev,item,index,array)    prev: 上次返回的结果  可以设置默认值  item 当前数据    index 当前数据的下标   array 当前操作的数组

给初始值如下所示，没有初始直接不写就行

 例：

 如果传入了空数组且没有给初始值会报错     给个初始值就可以了

 

对象

1.Object.is()

        Object.is() 判断两个对象是否相等（比对存储地址）。

例：

 2.Object.assign()

        Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，它将返回目标对象   如有同名属性，后面的会覆盖前面的。

3.Object.keys()

        Object.keys() 遍历对象   返回对象中每一项key的数组

处理数组 返回索引数组

 处理字符串 返回索引数组

也可以结合forEach()来用

 4.Object.values()

        Object.values() 遍历对象   返回对象中每一项Value的数组  只会遍历对象自身的可遍历属性

 5.Object.entries()

        Object.entries() 遍历对象   返回对象中每一项的 key value的数组 

Object.entries() 可以把一个对象的键值以数组的形式遍历出来，结果和for...in循环遍历该对象时返回的结果一样，但是不会遍历其原型属性

 拓展

1.Set()

        Set是ES6新增的一种数据结构，类似数组，但是它的元素成员是唯一的 可用来数组去重

  • 声明一个set数据类型         
  • Set.size：返回Set中元素的数量                       ​

       

   set里面的数据是唯一的  会自动把重复的去掉

      

  •  Set.has(key)：查找Set对象中是否存在key，返回一个布尔值 ​
  •  Set.add(key)：往Set对象中添加一个元素  ​
  •  Set.delete(key)：删除元素key  ​
  •  Set.clear(): 清空Set的全部元素  ​
  • 遍历Set                                                                                                              ​
  •  Set转数组                                                                                                

2.Map()

        Map也是ES6新增的数据结构，类似于对象，本质上就是键值对的集合，对象的键只能是字符串或者Symbols，但Map的键可以为任意类型

  • 通过传入二维数组方式创建                                                                      ​
  •  Map.size：返回Map对象中键值对数量                                          ​ 
  • Map.has(key)：查找Map对象中是否存在key，返回一个布尔值           ​ 
  •  Map.set(key, value)：设置Map对象的键值对（键名，键值），返回当前对象     ​
  •  Map.get(key)：返回key值对应的value，如果key不存在则返回undefined     
  • Map.delete(key)：删除Map对象中键名为key的键值对                         
  •  Map.clear()：移除Map对象中保存的所有键名/键值对

   数组和对象的方法在Set和Map中同样适用~

积累~

1.Js直接将 字符串数组转为数字数组 和直接将 数字数组转为字符串数组

 

2.Js通过获取index截取字符串 不生成新数组或新字符串

str.lastIndexOf("/")  获取最后一次斜杠的下标

需要斜杠的话就不用加1了

后续有学到用到的再继续积累~

去重数组的利器——JavaScript中的ES6数组去重方法
laugh666的博客
10-05 450
ES6中引入了Set数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。利用这个特性，我们可以将数组转换为Set，然后再将Set转换回数组，实现数组的去重。方法可以根据指定的条件筛选数组中的元素，并返回一个新的数组。利用这个特性，我们可以通过遍历数组，将重复的元素过滤掉，从而实现数组的去重。上述代码中，我们先将数组转换为Set数据结构，然后再通过扩展运算符将Set转回数组，得到去重后的数组。方法可以根据指定的条件筛选数组中的元素，并返回一个新的数组。我们可以利用这个特性来实现数组的去重。
ES6遍历对象和数组的方法
ByteProwl的博客
10-04 365
Object.entries方法返回一个包含对象自身所有可枚举属性的键值对数组。每个键值对都是一个由两个元素组成的数组，第一个元素是属性名，第二个元素是属性值。对于数组和类数组对象，它会迭代每个元素的值。forEach方法是数组的原生方法，用于遍历数组的每个元素，并对其执行指定的回调函数。map方法也是数组的原生方法，它对数组的每个元素执行指定的回调函数，并返回一个新的数组，新数组中的元素是回调函数的返回值。Object.keys方法返回一个包含对象自身所有可枚举属性的数组，顺序与遍历时的顺序一致。
前端学习之ES6+
qq_56101688的博客
11-08 1618
let、const 与 var 的区别
ES6数组和对象常用方法
qq_53793319的博客
07-25 727
ES6 引入了许多新的数组和对象操作方法，使得 JavaScript 编程更加方便和高效。
es6数组和对象常用方法
似水流年QC的博客
05-13 2605
随着es6的发布，新版标准提供了很多新的api，给了开发人员提供了很大的帮助，操作简便，提升效率，现在主要讲下es6提供新的操作数组和对象的一些常用方法。 数组的操作 Object.entries() 作用：将一个对象中可枚举属性的键名和键值按照二维数组的方式返回。若对象是数组，则会将数组的下标作为键值返回。 Object.entries({ one:1,two: 2}) // [['one', 1], ['two', 2]] Object.entries([1, 2]) ...
ES6的一些数组对象的方法
baleLjt的博客
08-18 307
ES6的一些新特性 ES6 数组结构赋值 const [a,b]=[1,2] console.log(a,b) //1,2 对象结构赋值 var obj = {name:'zs,age:18} const {name,age}=obj console.log(name,age) // 'zs',18 箭头函数 箭头函数不绑定关键字,箭头函数中的this指向的是函数定义位置的上下文this var obj = {name:'mark'}
es6 中 对象和数组常用的方法和属性
m0_46862838的博客
10-23 903
对象的方法和属性 for…in 以任意顺序遍历一个对象的除Symbol以外的可枚举属性 for (variable in object) statement variable 在每次迭代时，variable会被赋值为不同的属性名。 object 非Symbol类型的可枚举属性被迭代的对象。 let obj ={ a:1, b:2, c:3 } //遍历出对象属性 // 1、 for(let prop in obj){ console.log("obj."+prop
ES6新增字符串 数组 对象， 函数方法汇总
weixin_43569862的博客
07-02 458
字符串 String.fromCodePoint() 从 Unicode 码点返回对应字符 String.fromCodePoint(0x20BB7) // "????" 2.String.raw() 转译模板字符串 String.raw`Hi\n${2+3}!` // "Hi\n5!"
JavaScript 高级技巧：模块化、构造函数与 ES6+ 特性
最新发布
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
01-08 784
通过使用 ES6+ 特性，你可以让你的 JavaScript 代码更加简洁、可读和高效。随着 ES6 和更高版本的发布，JavaScript 语言不断发展，带来了许多新特性，极大地提升了开发者的工作效率和代码的可维护性。模块化可以帮助开发者将应用分割成独立的、可重用的部分，从而提高代码的可维护性、可扩展性以及可读性。的概念，提供了一种更加简洁和清晰的方式来创建对象和定义类。希望今天的分享能够帮助你更好地理解并应用这些高级技巧，不论是在个人项目还是团队协作中，都能让你写出更加优雅和高效的代码！
ES6——数组进阶1
azou1234的博客
06-20 644
数组（Array） 数组也是一个对象，是一个用来存储数据的对象和Object类似，但是它的存储效率比普通对象要高 数组中保存的内容我们称为元素 数组使用索引（index）来操作元素 索引指由0开始的整数 数组的操作： 创建数组 var arr = new Array(); var arr = []; 向数组中添加元素 语法：数组对象[索引] = 值; 例子 arr[0] = 123456; arr[1] = "hello"; 创建数组时直接添加元素 例子： var arr = [123
es6数组、对象的基本用法
qq_39039128的博客
01-16 271
ecma基本语法还是得了解的 // 数组可接收两个参数，1为回调函数，2为this的指向 //类似于for循环 arr.forEach(function(val,inde,arr){ //this 就是 arr }.bind(this)) arr.forEach(function(val,inde,arr){...
ES6常用的数组对象操作
u014651093的专栏
01-28 1485
1. forEach forEach方法中的function回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身。 var sum = 0; [1, 2, 3, 4].forEach(function (item, index, array) { console.log(array[index] == item); // true sum += item; }); alert(sum); // 10 2. map [].map(); let expand.
ES6对象、数组
HelloLOL的博客
04-24 949
前言 今天给大家介绍ES6中的对象、数组、函数（方法）新增的一些特性。废话不多说，进入正题！ 1.对象 属性和函数的简洁表示法 //属性简洁表示 let name = "liusiyuan"; let age = 20; const user = {name,age}; console.log(user);//{name:"liusiyuan",age:20} //等同于 const user ...
ES6字符串 数组 对象新方法
qq_48321086的博客
07-12 330
ES6之前判断字符串是否包含子串,用indexOf方法, ES6新增了子串的识别方法 includes():返回布尔值,判断是否找到参数字符串。 startsWith() :返回布尔值,判断参数字符串是否在原字符串的头部。 endsWith() :返回布尔值, 判断参数字符串是否在原字符串的尾部。 repeat()返回新字符串 将新字符串重复指定次数返回 padStart() padEnd()返回新字符串 表示用参数字符串从头到尾{或从尾到头}补全原字符串
Es6内置对象-数组
qq_57560022的博客
02-19 227
【代码】Es6内置对象-数组。
JS进阶-ES6+
weixin_43957758的博客
03-19 610
JS进阶-ES6+
ES6 对象数组查找某一个对象
weixin_30413739的博客
07-06 1200
查找数组特定元素需要用到的方法就是findIndex()。 用法与定义 findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置 findIndex() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用 执行函数。 如果没有符...
js es6遍历数组中每个对象，取到每个key和value,Object方法
qq_21138747的博客
08-08 5763
for(let [key,val] of arr.entries()){ console.log(key,val) }
ES6中数组的循环方法都有哪些?
10-30
ES6引入了一些新的数组循环方法，它们比传统的for循环更简洁易读。以下是几种常用的数组循环方法： 1. **forEach**: 这是最简单的遍历数组的方式，对每个元素执行一次提供的回调函数。例子： ```javascript const arr = [1, 2, 3]; arr.forEach(item => console.log(item)); ``` 2. **map**: 对数组中的每个元素应用一个函数，并返回一个新的数组，新数组包含原始元素经过操作后的结果。例子： ```javascript const newArr = arr.map(num => num * 2); // 新数组为 [2, 4, 6] ``` 3. **filter**: 创建一个新数组，只包含通过指定测试的所有元素。例子： ```javascript const filteredArr = arr.filter(num => num % 2 === 0); // 新数组只包含偶数 ``` 4. **reduce**: 将数组缩减成单个值，通过累加、合并或其他函数对每个元素应用一个操作。例子： ```javascript const sum = arr.reduce((total, num) => total + num, 0); // 计算数组所有元素之和 ``` 5. **some**: 判断数组是否有满足条件的元素，如果有则返回true，否则返回false。例子： ```javascript const hasEven = arr.some(num => num % 2 === 0); ``` 6. **every**: 检查数组中的所有元素是否都满足某个条件，如果有任何一个不满足，则返回false。例子： ```javascript const areAllPositive = arr.every(num => num > 0); ``` 7. **find**: 找到数组中满足指定条件的第一个元素，若无符合条件的元素则返回undefined。例子： ```javascript const firstPositive = arr.find(num => num > 0); ``` 8. **findIndex**: 类似于find，但它返回的是符合条件的第一个元素的索引。例子： ```javascript const indexOfFirstPositive = arr.findIndex(num => num > 0); ``` 9. **Array.from() 和 Array.of()**: 可以用于将其他可迭代对象转换成数组。比如： ```javascript const iterableObj = {0: 'a', 1: 'b'}; const newArray = Array.from(iterableObject); ``` 以上就是ES6中常用的数组循环方法，它们提高了代码的可读性和性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值