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

目录

数组

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() 遍历数组中每一项并依次处理元素  返回一个新数组

例:

写法一:

Js基础 ES6+ 数组、对象的常用方法_第1张图片

  写法二:

Js基础 ES6+ 数组、对象的常用方法_第2张图片

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

2. forEach()

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

Js基础 ES6+ 数组、对象的常用方法_第3张图片

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

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

Js基础 ES6+ 数组、对象的常用方法_第4张图片

Js基础 ES6+ 数组、对象的常用方法_第5张图片

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

Js基础 ES6+ 数组、对象的常用方法_第6张图片

3. filter()

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

例:

Js基础 ES6+ 数组、对象的常用方法_第7张图片

4.find() 

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

:如果有多个满足条件的元素,只返回满足条件的第一个元素

例:

Js基础 ES6+ 数组、对象的常用方法_第8张图片

 5.findIndex() 

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

例:

Js基础 ES6+ 数组、对象的常用方法_第9张图片

 6.some()

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

例:

Js基础 ES6+ 数组、对象的常用方法_第10张图片

 7.every() 

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

例:

Js基础 ES6+ 数组、对象的常用方法_第11张图片

  8. reduce()

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

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

 例:

Js基础 ES6+ 数组、对象的常用方法_第12张图片

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

Js基础 ES6+ 数组、对象的常用方法_第13张图片

 Js基础 ES6+ 数组、对象的常用方法_第14张图片

对象

1.Object.is()

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

例:

Js基础 ES6+ 数组、对象的常用方法_第15张图片

Js基础 ES6+ 数组、对象的常用方法_第16张图片

 2.Object.assign()

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

Js基础 ES6+ 数组、对象的常用方法_第17张图片

3.Object.keys()

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

处理数组 返回索引数组

 处理字符串 返回索引数组

也可以结合forEach()来用

Js基础 ES6+ 数组、对象的常用方法_第18张图片

 4.Object.values()

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

Js基础 ES6+ 数组、对象的常用方法_第19张图片

 5.Object.entries()

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

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

Js基础 ES6+ 数组、对象的常用方法_第20张图片

 拓展

1.Set()

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

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

       

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

      

  •  Set.has(key):查找Set对象中是否存在key,返回一个布尔值 Js基础 ES6+ 数组、对象的常用方法_第21张图片
  •  Set.add(key):往Set对象中添加一个元素  
  •  Set.delete(key):删除元素key  Js基础 ES6+ 数组、对象的常用方法_第22张图片
  •  Set.clear(): 清空Set的全部元素  
  • 遍历Set                                                                                                              Js基础 ES6+ 数组、对象的常用方法_第23张图片
  •  Set转数组                                                                                                

2.Map()

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

  • 通过传入二维数组方式创建                                                                      Js基础 ES6+ 数组、对象的常用方法_第24张图片
  •  Map.size:返回Map对象中键值对数量                                          Js基础 ES6+ 数组、对象的常用方法_第25张图片​ 
  • Map.has(key):查找Map对象中是否存在key,返回一个布尔值           Js基础 ES6+ 数组、对象的常用方法_第26张图片​ 
  •  Map.set(key, value):设置Map对象的键值对(键名,键值),返回当前对象     Js基础 ES6+ 数组、对象的常用方法_第27张图片
  •  Map.get(key):返回key值对应的value,如果key不存在则返回undefined    Js基础 ES6+ 数组、对象的常用方法_第28张图片 
  • Map.delete(key):删除Map对象中键名为key的键值对                        Js基础 ES6+ 数组、对象的常用方法_第29张图片 
  •  Map.clear():移除Map对象中保存的所有键名/键值对

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

积累~

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

Js基础 ES6+ 数组、对象的常用方法_第30张图片 

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

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

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

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

你可能感兴趣的:(es6,数据结构,前端)