字符串、数组、对象、set 、map Es5~Es13内置方法总结一：字符串 let Str1="我是中国人民解放军特种

一：字符串

let Str1="我是中国人民解放军特种部队战狼特战队"

-----------------es5方法--------------------

charAt() 指定索引位置的字符 0开头

  
  console.log('charAt',Str1.charAt(3)) //国

indexOf 第一次出现的位置 -1就是没有找到

    console.log('indexOf',Str1.indexOf('解')) //6  
  console.log('indexOf',Str1.indexOf('队')) //12

lastIndexOf 最后一次出现的位置

console.log('lastIndexOf',Str1.lastIndexOf('队'))//17

findLast、findLastIndex【es14】

findLastIndex()：从数组的最后一个元素开始，查找满足条件的元素，并返回第一个匹配的元素的索引。

findLast()：从数组的最后一个元素开始，查找满足条件的元素，并返回第一个匹配的元素。


const arr = [1, 2, 3, 4, 5];
const lastEven = arr.findLast((value) => value % 2 === 0);
console.log(lastEven); // 4

const lastEvenIndex = arr.findLastIndex((value) => value % 2 === 0);

search 检索与正则

console.log('search',Str1.search(/队/)) // 返回 第一次出现的位置

match // 返回一个json对象有index

console.log('match',Str1.match('解放')) // 返回一个json对象  有index

repalce 替换与正则表达式匹配（替换首次出现的）

console.log('replace',Str1.replace('战狼','雪豹')) //我是中国人民解放军特种部队雪豹特战队
 console.log('replace',Str1.replace('队','连')) //我是中国人民解放军特种部连战狼特战队

replaceAll 替换与正则表达式匹配（替换所有出现的）Es6

console.log('replaceAll',Str1.replaceAll('队','连')) //我是中国人民解放军特种部连战狼特战连

----slice和substr和substring区别-----------------------------

slice 参数：【起始下标，截止下标】 /串返回被提取的部分。【数组也有slice方法】

  console.log('slice',Str1.slice(3)) //国人民解放军特种部队战狼特战队   //从起始位置一致截取到末尾
  console.log('slice',Str1.slice(-3)) //特战队 【从尾部 开始】

  console.log('slice',Str1.slice(1,3)) //是中  【两个字符下班字符串片段】
  console.log('slice',Str1.slice(2,-1)) //中国人民解放军特种部队战狼特战

substr 参数：【起始下标，截取字符串长度】

 console.log('substr',Str1.substr(3)) //国人民解放军特种部队战狼特战队 //从起始位置一致截取到末尾
  console.log('substr',Str1.substr(-3)) //特战队
  console.log('substr',Str1.substr(1,3)) //是中国 【从第一个位置开始截取3个字符】
  console.log('substr',Str1.substr(-3,2)) //特战  【从倒数第三个开始，截取2个字符】

subString()【起始下标,截止下标】起始下标:不接受负的参数

    console.log('subString',Str1.substring(3)) //国人民解放军特种部队战狼特战队 【从起始位置一致截取到末尾】
   console.log('substring',Str1.substring(0,6)) //我是中国人民  【两个字符下标字符串片段】

concat 字符串的了连接

    let str2=" 哈哈哈 "
  console.log('concat',Str1.concat(str2)) //我是中国人民解放军特种部队战狼特战队哈哈哈

trim 去除首尾空格 es6的 trimStart 和trimEnd

console.log('trim',str2.trim())

--------------Es6方法------------------------------

includes() 判断字符是否存在某个字符和Es5 indexOf类似

console.log('Es6 includes',Str1.includes('我是')) // true

startsWith ，表示参数字符串是否在原字符串的头部

console.log('startsWith',Str1.startsWith('我'))// true

endsWith 表示参数字符串是否在原字符串的尾部

console.log('endsWith',Str1.endsWith('队')) // true

padStart 用于头部补全参数：【字符串长度，替补字符串】

let time="1月"

console.log('padStart',time.padStart(3,0)) // 01月
console.log('padStart',time.padStart(6,0)) //00001月

padEnd()用于尾部补全

console.log('padEnd',time.padEnd(5,'01日')) // 1月01日
console.log('padEnd',time.padEnd(18,'不够重复补够知道字符串长度')) // 1月不够重复补够知道字符串长度不够重

repeat() repeat方法返回一个新字符串，表示将原字符串重复n次。

let la="啦啦"
console.log('repeat',la.repeat(3)) //啦啦啦啦啦啦

trimStart()去掉前面空格 trimEnd() 去掉后面空格和Es5 trim去掉前后

let trimStr=" 哈喽，你好啊 "

console.log('trimEnd',trimStr.trimEnd())
console.log('trimStart',trimStr.trimStart())

replaceAll 替换与正则表达式匹配（替换所有出现的）Es6

console.log('replaceAll',Str1.replaceAll('队','连')) //我是中国人民解放军特种部连战狼特战连

用扩展运算符把字符串转数组

console.log([...'123'])
//['1', '2', '3']

split 字符串转数组

    let str1="哈,喽,你,好"
    console.log('split',str1.split(',')) //['哈', '喽', '你', '好']

Array.of

const arr1 = Array.of(1, 2, 3);
console.log(arr1); // 输出: [1, 2, 3]

const arr2 = Array.of("apple", "banana", "orange");
console.log(arr2); // 输出: ["apple", "banana", "orange"]

二：数组

  let array=[1,2]

--------------------- Es5方法 ----------------------------------

----添加push、unshift---------------

push 后面添加元素，添加一个或者多个，返回长度

console.log('push:',array.push(3,4,5,'添加')) // 6  返回长度
console.log(array)//[1, 2, 3, 4, 5, '添加']

unshift() 前面添加元素（一个或者多个），返回长度

console.log('unshift:',array.unshift(-3,-2,-1,0))// 10
console.log(array) //[-3, -2, -1, 0, 1, 2, 3, 4, 5,'添加']

-----删除 pop、splice 、slice---------------

pop() 删除最后一个元素返回删除的元素

console.log('pop删除最后一个元素:',array.pop()) //添加
console.log(array) //[-3, -2, -1, 0, 1, 2, 3, 4, 5]

删除第一个元素，只能删除一个返回删除元素

console.log('shift删除第一个元素:',array.shift()) // -3
console.log(array) // [ -2, -1, 0, 1, 2, 3, 4, 5]

splice(index,num ,addItem) 删除从index(索引值)开始之后，num:多少个元素返回删除的元素数组 ,添加的元素

console.log('splice删除指定元素:',array.splice(1,2)) //[-1, 0]
console.log(array) //[-2, 1, 2, 3, 4, 5]

删除指定下标的元素，并添加

console.log('splice删除指定下标的元素，并添加：',array.splice(0,1,'前面添加')) // [-2]
console.log(array) // ['前面添加', 1, 2, 3, 4, 5]

slice(start,end) strart是下标 end是下标可选返回选定的数组中的元素，不改变原有的数组和字符串的类似

    // -----注意1:是如果一个正参数 ，是截取意思，返回对截取后的数组----
    // -----注意2:是如果一个负数参数 ，返回后面3个数组元素----

console.log('slice获取指定数组的下标元素：',array.slice(1,3)) // [1,2]
console.log(array) //['前面添加', 1, 2, 3, 4, 5]  原有的数组不改变

console.log('slice一个负在参数：',array.slice(-3)) //[3, 4, 5]   返回后面3个
console.log(array) //['前面添加', 1, 2, 3, 4, 5]  原有的数组不改变


console.log('slice一个正参数：',array.slice(2)) // [2, 3, 4, 5]  返回前两个  ------注意是如果一个正参数 ，是截取意思，返回对截取后的数组----
console.log(array) //['前面添加', 1, 2, 3, 4, 5]  原有的数组不改变

console.log('slice  截取倒数第三个（包含）到倒数第一个（不包含）：',array.slice(-3,-1)) // [3, 4]  截取倒数第三个（包含）到倒数第一个（不包含）的两个元素
console.log(array) //['前面添加', 1, 2, 3, 4, 5]  原有的数组不改变

--数组与字符串转换 split、join、toString---------------

join 把数组中的所有元素放入一个字符串，separate表示分隔符，可省略，默认是逗号

    console.log('join',[1,3,5].join(','))

toString 将数组转换为字符串并返回。数组中的元素之间用逗号分隔。

    let arr18 = ["Banana", "Orange", "Apple", "Mango"]
    console.log(arr18.toString())  // Banana,Orange,Apple,Mango

---其他 concat、sort、reverse、forEach、map---------------

concat 数组的的合并、和字符串的连接一致和es6 扩展运算符

    console.log('concat',array.concat(['1','2']))  //['前面添加', 1, 2, 3, 4, 5, '1', '2']  
    console.log('Es6扩展运算符',[...array,...['3','4']])  // ['前面添加', 1, 2, 3, 4, 5, '3', '4']

sort 组进行排序，返回值是排好的数组，

    console.log('sort',[2,3,1,5].sort())//[1, 2, 3, 5]


```
    // 数组排序（升和降）sort()
      let aray=[2,4,1,6,8,9,20,21,18]
      function riseNumber(a,b){ // 升序
        return a-b;
      }
      function dropNumber(a,b){
        return b-a
      }
      console.log(aray.sort(riseNumber))//[1, 2, 4, 6, 8, 9, 18, 20, 21]
      console.log(aray.sort(dropNumber))  //[21, 20, 18, 9, 8, 6, 4, 2, 1]
```

冒泡排序

      let aray=[2,4,1,6,8,9,20,21,18]
      for(var i=0;i<aray.length-1;i++){
        let isSort=true;
        for(var j=0;j<aray.length-1-i;j++){
          if(aray[j]>aray[j+1]){
            isSort=false;
            let tmp=aray[j]
            aray[j]=aray[j+1]
            aray[j+1]=tmp
          }
        }
        if(isSort) break;
      }

reverse 数组反转，

    console.log('reverse',[2,3,1,5].reverse())  //[5, 1, 3, 2]  数组反转，

forEach 遍历数组无返回值

map 遍历数组(对原数组的值进行操作)，返回一个新数组

    let newarry=[1,2,3].map((item)=>{
      return item*2
    })
    console.log('map',newarry) //[2, 4, 6]

filter 过滤数组，返回一个满足要求的数组

    let array3=[1,2,3].filter((value, index) => value >2) 
    console.log('filter',array3)  // [3]

every 遍历数组中的元素，是否都满足，若都满足则返回true，反之返回false

    let array4=[1,2,3].every((value, index) => value >2) 
    console.log('every',array4) // false

some 根据判断条件，遍历数组中的元素，是否存在至少有一个满足，若存在则返回true，反之返回false

    let array5=[1,2,3].some((value, index) => value >2) 
    console.log('some',array5) // true

indexOf 从前往后查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，返回 -1。和Es6 includes一致

  console.log('indexOf',[1,3,8].indexOf(6)) // -1

lastIndexOf 从后往前查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，返回 -1。和Es6 includes 一致

  console.log('lastIndexOf',[1,3,8].lastIndexOf(6)) // -1

isArray 判断一个值是否为数组的方法，若为数组，返回true，反之返回false

  let str2='1,4,5';
  console.log('isArray',Array.isArray(array))//true
  console.log('isArray',Array.isArray(str2)) //false

-----------------Es6 --------------------------------

扩展运算符

克隆

let arry=[1,2,3]
let arry2=[...array]
let [...arry3]=array

数组的合并

let arry14=[...array,...arry10]
console.log('扩展运算符',arry14)

与解构赋值结合

  let [one,...two]=[2,3,5,6,7]
  console.log('扩展运算符',one,two)//2 ,[3, 5, 6, 7]

转字符串

console.log('扩展运算符',[...'hello'])// [ "h", "e", "l", "l", "o" ]

find 找到第一个符合条件的数组成员 ,并返回这个成员

  let arr2 = [1,2,3,4,5,2,4].find((value, index, array) => value > 4) 
  console.log('find',arr2)   // 3

findIndex 找到第一个符合条件的数组成员的索引值

  let arr3 = [1,2,3,4,5,2,4] .findIndex((value, index, array) => value > 4) 
  console.log('findIndex',arr3)   // 4

includes 判断数组中是否包含特定的值

  console.log('includes',[1,3,4,5,9].includes(6))// false

Array.from() 将伪数组变成数组，只要有length的就可以转成数组和Es5的 split区别

    let str = '12345'
    console.log('Array.from',Array.from(str))    // ["1", "2", "3", "4", "5"]

    let obj = {0:'a',1:'b',length:2}
    console.log('Array.from',Array.from(obj))   // ["a", "b"]

Array.of() 将一组值转换成数组，类似于声明数组

    let str3 = '11'
    console.log('Array.of',Array.of(str3))   // ['11']

    // 等价于 
    console.log(new Array('11'))   // ['11']

arr.fill(target, start, end) 参数： target – 待填充的元素； start – 开始填充的位置 - 索引； end – 终止填充的位置 - 索引（不包括该位置)

    console.log('fill',[2,3,5,6].fill(6)) //[6, 6, 6, 6]
    console.log('fill',[2,3].fill(6)) //[6, 6]

    console.log('fill',[2,3,5,6].fill(6,2)) //[2, 3, 6, 6]
    console.log('fill',[2,3,5,6,7,8,9].fill(7,2)) //[2, 3, 7, 7, 7, 7, 7]

keys 遍历数组的键名

    let arr5 = [1, 2, 3, 4, 5] 
    let arr4 = arr5.keys() 
    let arr6 = arr5.values() 
    let arr7 = arr5.entries() 

    for (let key of arr4) { 
        console.log(key)   // 0,1,2,3,4
    }

arr.values() 遍历数组键值

    for (let value of arr6) { 
        console.log(value)   // 0,1,2,3,4
    }

entries 遍历数组的键名和键值 entries() 方法返回迭代数组。

   for (let item of arr7) { 
        console.log(item)   //  [0, 1] [1,2] [2,3][3,4] [4,5]
    }

copyWithin(target,start,end) 参数：target 开始替换的位置，start:开始复制下标（包括） end:结束复制下标（不包括）

    let arr8 = [1,2,3,4,5,6,7]

    let arr9 = arr8.copyWithin(1)
    console.log('copyWithin',arr9)   // [1, 1, 2, 3, 4, 5, 6]

    let arr10 = arr8.copyWithin(1,2)
    console.log('copyWithin',arr10)   // [1, 3, 4, 5, 6, 7, 7]

    let arr11 = arr8.copyWithin(1,2,4) 
    console.log('copyWithin',arr11)   // [1, 3, 4, 4, 5, 6, 7]

flat(pliy) 数组降维参数：pliy表示拉平的层数，默认是1层，想无限拉平可以传入Infinity关键字

    //
    let arr12=[1,3,4,[5,6,7,[8,9]]]
    console.log('flat',arr12.flat(1)) //[1,3,4,5,6,7,[8,9]]
    console.log('flat',arr12.flat(Infinity))// [1,3,4,5,6,7,8,9]

flatMap() 数组降维并处理

    //
    let arr13=[[4],[5],[6]]
    let arr14=arr13.flatMap(item=>[item*2])
    console.log('flatMap',arr14) //[8, 10, 12]

    // let aray=[1,2,3];
    // let result= aray.map(item=> item * 10 ) // 数组每个元素乘以10
    // console.log(result) //[10, 20, 30]
    // let aray2=[[4],[5],[6]];
    // let result2= aray2.flatMap(item=> [item * 10] )
    // console.log(result2) // [40, 50, 60]

数组去重

 let aray=[2,4,1,2,4,6,8,9,1]
  let setArray=new Set(aray)
      aray=[...setArray]
      console.log(aray) // [2, 4, 1, 6, 8, 9]

Array.at()返回指定索引处的元素

Array.at()：返回指定索引处的元素，如果索引为负数，则从数组末尾开始计算。

const arr = [1, 2, 3, 4, 5];
console.log(arr.at(2)); // 3
console.log(arr.at(-1)); // 5

三：对象

----------Es5-------------------

in 运算符判断某属性是否属于该对象的成员

判断某属性是否在该对象的成员：返回的是boolean类型****

var obj={name:'测试'}
console.log(name in obj) // true

一个对象是否属于某个类

instanceof

var obj=new Array();
obj instanceof Array

for in【遍历对象】

---------Es6--------------------

对象解构赋值

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

对象简写法

ES8对象扩展方法 Object.keys、Object.values、Object.entries

    let newobject={
      name:'tao',
      city:['湛江','廉江','深圳'],
      kemu:['前端','后台']
    }
    // 获取对象的所有键
    console.log(Object.keys(newobject)) 
    //["name", "city", "kemu"]
    // 获取对象的所有值
    console.log(Object.values(newobject)) 
    //["tao", :['湛江','廉江','深圳'], ['前端','后台']]

    //  entries
    console.log(Object.entries(newobject)) 
    //[        // ['name','tao'],
        // ['city',['湛江','廉江','深圳']],
        //['kemu',['前端','后台']]
    //]
    
    //创建Map
     const m =new Map(Object.entries(sho)) 
     console.log(m) // [{'name'=>'tao'},'citys'=>['湛江','廉江','深圳']]
     
     Object.getOwnPropertyDescriptors  // 对象属性的描述对象

Es8 Object.getOwnPropertyDescriptors 对象属性的描述对象

es10对象扩展方法 Object.formEntries方法

es10 fromEntries和 es8的Object.entries区别

Object.hasOwn

Object.hasOwn()：用于判断对象自身是否具有指定的属性，而不是从原型链上查找。 -- 建议使用此方法替代 Object.prototype.hasOwnProperty()，因为它适用于使用 Object.create(null) 创建的对象，以及重写了继承的 hasOwnProperty() 方法的对象。

const obj = { a: 1, b: 2 };
console.log(Object.hasOwn(obj, 'a')); // true
console.log(Object.hasOwn(obj, 'c')); // false

const obj2 = Object.create(null);
obj2.a = 1;
console.log(Object.hasOwn(obj2, 'a')); // true
console.log(Object.hasOwn(obj2, 'b')); // false
console.log(obj2.hasOwnProperty('a')); // TypeError: obj2.hasOwnProperty is not a function

es11 可选链 ?.

可选链用于访问深层对象属性或者函数调用，即时引用不存在也不会报错，而是返回undefined。

    const obj = {
      name: '小易',
      age: 18,
      info: {
        gettAge() {
          return this.age;
        },
        gender: '男',
        address: {
          city: '北京',
          street: '长安街',
          country: '中国',
        },
      },
    }

    console.log(obj?.name); // 小易
    console.log(obj?.info?.gender); // 男
    console.log(obj?.info?.address?.city); // 北京
    console.log(obj?.info?.address?.street); // 长安街
    console.log(obj?.info?.address?.country); // 中国
    console.log(obj?.xx?.address?.country); // undefined
    console.log(obj?.info?.getAge?.()); // 18
    console.log(obj?.info?.getAge?.()); // undefined

hasOwnProperty

  var stuObj = {
    name: "cxy"
  }
  console.log(stuObj.hasOwnProperty('name'))

Object.is 判断两个值是否相等

  console.log(Object.is(1,1)) // true
  console.log(Object.is('sdfdsf','sdfdsf')) // true
  console.log(Object.is(NaN,NaN))// true
  console.log(NaN===NaN)// false  Object is 和 === 区别 就是NaN

Object.assign 对象合并

    let Obj={
      name:'Obj',
      age:10,
      jum:function(){
        console.log('跳舞z')
      }
    }
    let Obj1={
      name:'Obj1',
      age:13,
      say:function(){
        console.log('say')
      }
    }

    console.log(Object.assign(Obj,Obj1))
    //{
          name:'Obj1',
          age:13,
          say:function(){
            console.log('say')
          },
          jum:function(){
            console.log('跳舞z')
          }
      }

Object.setPrototypeOf 改变对象原型

    let school={
      name:'sdf'
    }
    let array=['1','2','3']
    Object.setPrototypeOf(school,array)
    Object.setPrototypeOf(school,array)
    console.log(school.__proto__) //["1", "2", "3"]

四：总结用到下标片段方法

slice substring截取下标【不包括】 subStr splice 【第二参数是个数】

let numstr="0123456789十"
console.log('slice(3)',numstr.slice(3))//3456789十  0~3下标的字符串片段；
console.log('slice(3,-1)',numstr.slice(3,-1))//3456789
console.log('substr(3,5)',numstr.substr(3,5))//34567   5是个数
console.log('substring(3,5)',numstr.substring(3,5))//34 

let array1=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log('slice(1,3) 没有改变原数组',array1.slice(1,3),array1)//  返回：[1, 2] 
array1.splice(1,2)



总结：都是截取字符串片段，参数不一样
1：slice 和 substring 区别 slice可以接受负数参数，而 substring不行，
2：subStr 第二个参数是截取的长度
3: slice 和 substring 包括起始下标，参数是截止下标位置前（但是不包括这个下标）

4：slice substring截取下标【不包括】 subStr splice 【第二参数是个数】

arr.fill(target, start, end) 参数： target – 待填充的元素； start – 开始填充的位置 - 索引； end – 终止填充的位置 - 索引（不包括该位置)

    console.log('fill',[2,3,5,6].fill(6)) //[6, 6, 6, 6]
    console.log('fill',[2,3].fill(6)) //[6, 6]

    console.log('fill',[2,3,5,6].fill(6,2)) //[2, 3, 6, 6]
    console.log('fill',[2,3,5,6,7,8,9].fill(7,2)) //[2, 3, 7, 7, 7, 7, 7]

copyWithin(target,start,end) 参数：target 开始替换的位置，start:开始复制下标（包括） end:结束复制下标（不包括）

五：总结获取下标的方法

charAt() 指定索引位置的字符 0开头

indexOf 第一次出现的位置 -1就是没有找到

lastIndexOf 最后一次出现的位置

findLastIndex()：从数组的最后一个元素开始，查找满足条件的元素，并返回第一个匹配的元素的索引。

search 检索与正则返回第一次出行位置

console.log('match',Str1.match('解放')) // 返回一个json对象  有index

match // 返回一个json对象有index

console.log('match',Str1.match('解放')) // 返回一个json对象  有index

findIndex 找到第一个符合条件的数组成员的索引值

  let arr3 = [1,2,3,4,5,2,4] .findIndex((value, index, array) => value > 4) 
  console.log('findIndex',arr3)   // 4

findLastIndex()：从数组的最后一个元素开始，查找满足条件的元素，并返回第一个匹配的元素的索引。

const arr = [1, 2, 3, 4, 5];
const lastEven = arr.findLast((value) => value % 2 === 0);
console.log(lastEven); // 4

const lastEvenIndex = arr.findLastIndex((value) => value % 2 === 0);

六：对象数组遍历方法总结大全

for、forEach、for in、for of、 map、

方法	是否改变原数组	特点
for	否	数组方法，不改变原数组，没有返回值、可以break、continue;
forEach()	否	数组方法，不改变原数组，没有返回值、可以return终止本次循环
map()	否	数组方法，不改变原数组，有返回值， return 终止本次循环，
filter()	否	数组方法，过滤数组， retrun 返回包含符合条件的元素的数
for...in	否	遍历对象，可以遍历数组但是index值不可计算
for...of	否	for...of遍历具有Iterator迭代器的 array、set、map、string、arguments、DOM NodeList对象不能遍历普通的obj对象
every() 和 some()	否	数组方法，some()只要有一个满足，便返回true；而every()所有都满足，便返回true.
find() 和 findIndex()	否	数组方法，find()返回的是第一个符合条件的值；findIndex()返回的是第一个返回条件的值的索引值
reduce() 和 reduceRight()	否	数组方法，reduce()对数组正序操作；reduceRight()对数组逆序操作

for循环

循环体中一旦遇到break ，整个循环都结束了

for (var i = 0; i < 5; i++) {
	if (i > 3) {
		// i=4 的时候，遇到了break，此时循环结束
		break;
	}
	console.log(`本轮循环i的值是：${i}`); //=> 0 1 2 3 
}
console.log(`循环结束后，此时的i已经变为：${i}`); //=>4

循环体中一旦遇到continue ，本轮循环结束

for (var i = 0; i < 5; i++) {
	if (i > 2) {
		i += 1;
		//=>i=3 i++ =>i=4 遇到continue：本轮循环结束（下面输出不执行，但是i++会执行）
		continue; 
	}
	console.log(`本轮循环i的值是：${i}`); //=>0 1 2 
}
console.log(`循环结束后，此时的i已经变为：${i}`); //=>5

forEach

forEach() 对于空数组是不会执行回调函数的。
forEach用continue会报错。
forEach() 可以用 return 跳过循环中的一个迭代，跳过之后会执行下一个迭代。

let newarr=arr.forEach(i=>{
 i+=1;
console.log(i);//2,4,5
})
console.log(arr)//[1,3,4]
console.log(newarr)//undefined


var arry=[1,4,5,6,7,8,9]
arry.forEach(item=>{
 if(item<3) return //仅退出当前迭代
  console.log(item)

})
//4
//5
//6
//7
//8
//9

map

map不改变原数组但是会返回新数组
可以使用return返回到外层函数

var arry=[1,3,4]
let newarr=arr.map(i=>{
return i+=1;
console.log(i);
})
console.log(arr)//1,3,4---不会改变原数组
console.log(newarr)//[2,4,5]---返回新数组

filter

/*
 * 有返回值，返回一个符合func条件的数组的集合
 */
 let newArr = arr.filter((item,index) => {
    return item > 3;
 })
 console.log(newArr);  // [4,5,6,7]

for...in

用于循环遍历数组或对象属性,for in更适合遍历对象，当然也可以遍历数组，但是会存在一些问题 index索引为字符串型数字，不能直接进行几何运算

   let person={name:"小白",age:28,city:"北京"}
   let text=""
   for (let i in person){
      text+=person[i]
   }
   输出结果为：小白28北京
//其次在尝试一些数组
   let arry=[1,2,3,4,5]
   for (let i in arry){
        console.log(arry[i])
    }
//能输出出来，证明也是可以的

var arr = [1,2,3]
    
for (let index in arr) {
  let res = index + 1
  console.log(res)
}
//01 11 21

for of

for...of遍历具有Iterator迭代器的对象的属性，返回的是数组的元素、对象的属性值，不能遍历普通的obj对象，将异步循环变成同步循环

遍历array

let arr3 = [1, 2, 'kobe', true];
for(let i of arr3){
   console.log(i); // 1 2 kobe true
}

遍历String

let str = 'abcd';
for(let item of str){
   console.log(item); // a b c d
}

遍历arguments

function fun() {
    for (let i of arguments) {
       console.log(i) // 1 4 5
    }
}
fun(1, 4, 5)

遍历set

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit

遍历map结构

keys()，values()，entries()

    let obj1={
      name:'wutao',
      age:18,
      say:'我是中国人民解放军'
    }
    let mapStr=new Map(Object.entries(obj1)) // 对象转map
    console.log(mapStr)

    for(let item of mapStr.keys()){
      console.log(item)
    }
    for(let item of mapStr.values()){
      console.log(item)
    }
    for(let item of mapStr.entries()){
      console.log(item)
    }
    for(let [key, value] of mapStr.entries()){
      console.log(key,value)
    }
    for(let [key, value] of mapStr){
      console.log(key,value)
    }

iterator自定义遍历对象供`for...of`进行消费。

      const classes={
        name:'某某一班',
        classMate:[
          'xiaoming',
          'xiaoxing',
          'xiaoning',
          'xiaoyang',
        ],
        [Symbol.iterator](){
          let index=0;
          return{
            next:()=>{
              if(index<this.classMate.length){
                let result={value:this.classMate[index],done:false}
                index ++;
                return result
              }else{
                return {value:undefined,done:true}
              }
            }
          } 
        }
      }

      for(let item of classes){
        console.log(item) //xiaoming //xiaoxing //xiaoning //xiaoyang  一个个遍历打印出来
      }

方案1：直接为对象定义迭代器

const obj = { a: 1, b: 2 };
 
obj[Symbol.iterator] = function* () {
  for (const key of Object.keys(this)) {
    yield [key, this[key]]; // 返回键值对数组 
  }
};
 
// 遍历示例 
for (const [key, value] of obj) {
  console.log(key, value); // 输出：a 1 → b 2 
}

方案2：用生成器封装函数

function* objectEntries(obj) {
  for (const key of Object.keys(obj)) {
    yield { key, value: obj[key] }; // 返回结构化对象 
  }
}
 
const obj = { x: 10, y: 20 };
for (const entry of objectEntries(obj)) {
  console.log(entry); // 输出：{ key: 'x', value: 10 }, { key: 'y', value: 20 }
}

遍历DOM NodeList对象

 let ps = document.querySelectorAll('p');
     let psArray=Array.from(ps)
     for(let item of psArray){
      console.log(item)
     }

some()

/*
 * 返回一个Boolean，判断是否有元素符合func，如果有一个符合条件，就会终止循环，返回true。
 */
    let arr=[1,3,4,7,9,10]
    let sss=arr.some((item,index) => {
        return item > 5;  // true
    })
    console.log(sss) //true

every()

/*
 * 返回一个Boolean，判断每一个元素是否都符合func，如果有一个不符合，就会终止循环，返回false。
 */
    let arr=[1,3,4,7,9,10]
    let sss=arr.every((item,index) => {
        return item > 5; 
    })
    console.log(sss) //false

find

/*
 * 不创建新数组，不改变元素组
 * 在判断中一旦某个元素符合func，立马跳出循环，返回当前符合条件的元素
 */
      let arr = [1, 2, 8,10];
      let res = arr.find((item, index) => {
        return item > 2;
      });
      console.log(res); // 8

findIndex

/*
 * 不创建新数组，不改变元素组
 * 在判断中一旦某个元素符合func，立马跳出循环，返回当前符合条件的元素下标
 */
      let arr = [1, 2, 8,10];
      let res = arr.findIndex((item, index) => {
        return item > 2;
      });
      console.log(res); // 2

reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）

    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

实例解析 initialValue 参数

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

    var arr = [1, 2, 3, 4,5,6];
    var sum = arr.reduce(function(prev, cur, index, arr) {
        console.log('prev',prev);
        console.log('cur',cur);
        console.log('index',index);
        console.log('arr',arr);
        console.log('_________')
    })

返回的打印

求和

      var arr = [1, 2, 3, 4,5,6];
    var sum = arr.reduce(function(prev, cur, index, arr) {
        return prev+cur
      
    })
    console.log(sum) //21

array.from 和aray.of区别

Array.from() 将伪数组变成数组，只要有length的就可以转成数组和Es5的 split区别

    let str = '12345'
    console.log('Array.from',Array.from(str))    // ["1", "2", "3", "4", "5"]

    let obj = {0:'a',1:'b',length:2}
    console.log('Array.from',Array.from(obj))   // ["a", "b"]

Array.of() 将一组值转换成数组，类似于声明数组

    let str3 = '11'
    console.log('Array.of',Array.of(str3))   // ['11']

    // 等价于 
    console.log(new Array('11'))   // ['11']

判读对象是否存在某个属性

in 运算符判断某属性是否属于该对象的成员

判断某属性是否在该对象的成员：返回的是boolean类型****

var obj={name:'测试'}
console.log(name in obj) // true

Object.hasOwn

Object.hasOwn()：用于判断对象自身是否具有指定的属性，而不是从原型链上查找。

const obj = { a: 1, b: 2 };
console.log(Object.hasOwn(obj, 'a')); // true
console.log(Object.hasOwn(obj, 'c')); // false

Object.hasOwn 替换掉 Object.prototype.hasOwnProperty

hasOwnProperty

  var stuObj = {
    name: "cxy"
  }
  console.log(stuObj.hasOwnProperty('name'))、

`Reflect.ownKeys()`

Reflect.ownKeys() 返回对象的所有自身属性，包括可枚举和不可枚举的属性，且会返回符号（Symbol）属性。

const obj = { a: 1, b: 2 };
Object.defineProperty(obj, 'c', { value: 3, enumerable: false });
const sym = Symbol('d');
obj[sym] = 4;

console.log(Reflect.ownKeys(obj)); // 输出: ["a", "b", "c", Symbol(d)]

es11 可选链 ?.

可选链用于访问深层对象属性或者函数调用，即时引用不存在也不会报错，而是返回undefined

    const obj = {
      name: '小易',
      age: 18,
      info: {
        gettAge() {
          return this.age;
        },
        gender: '男',
        address: {
          city: '北京',
          street: '长安街',
          country: '中国',
        },
      },
    }

    console.log(obj?.name); // 小易
    console.log(obj?.info?.gender); // 男
    console.log(obj?.info?.address?.city); // 北京
    console.log(obj?.info?.address?.street); // 长安街
    console.log(obj?.info?.address?.country); // 中国
    console.log(obj?.xx?.address?.country); // undefined
    console.log(obj?.info?.getAge?.()); // 18
    console.log(obj?.info?.getAge?.()); // undefined

字符串、数组、对象、set 、map Es5~Es13内置方法总结

一：字符串

-----------------es5方法--------------------

charAt() 指定索引位置的字符 0开头

indexOf 第一次出现的位置 -1就是没有找到

lastIndexOf 最后一次出现的位置

findLast、findLastIndex【es14】

search 检索与正则

match // 返回一个json对象 有index

repalce 替换与正则表达式匹配（替换首次出现的）

replaceAll 替换与正则表达式匹配（替换所有出现的）Es6

----slice和substr和substring区别-----------------------------

slice 参数：【起始下标，截止下标】 /串返回被提取的部分。 【数组也有slice方法】

substr 参数：【起始下标，截取字符串长度】

subString()【起始下标,截止下标】 起始下标:不接受负的参数

concat 字符串的了连接

trim 去除首尾空格 es6的 trimStart 和trimEnd

--------------Es6方法------------------------------

includes() 判断字符是否存在某个字符 和Es5 indexOf类似

startsWith ，表示参数字符串是否在原字符串的头部

endsWith 表示参数字符串是否在原字符串的尾部

padStart 用于头部补全 参数：【字符串长度，替补字符串】

padEnd()用于尾部补全

repeat() repeat方法返回一个新字符串，表示将原字符串重复n次。

trimStart()去掉前面空格 trimEnd() 去掉后面空格 和Es5 trim去掉前后

replaceAll 替换与正则表达式匹配（替换所有出现的）Es6

用扩展运算符把字符串转数组

split 字符串转数组

Array.of

二：数组

--------------------- Es5方法 ----------------------------------

----添加push、unshift---------------

push 后面添加元素，添加一个或者多个 ，返回长度

unshift() 前面添加元素 （一个或者多个），返回长度

-----删除 pop、splice 、slice---------------

pop() 删除最后一个元素 返回删除的元素

删除第一个元素，只能删除一个 返回删除元素

splice(index,num ,addItem) 删除从index(索引值)开始之后，num:多少个元素 返回删除的元素数组 ,添加的元素

删除指定下标的元素，并添加

slice(start,end) strart是下标 end是下标可选 返回选定的数组中的元素 ，不改变原有的数组 和字符串的类似

--数组与字符串转换 split、join、toString---------------

join 把数组中的所有元素放入一个字符串，separate表示分隔符，可省略，默认是逗号

toString 将数组转换为字符串并返回。数组中的元素之间用逗号分隔。

---其他 concat、sort、reverse、forEach、map---------------

concat 数组的的合并、 和字符串的连接一致 和es6 扩展运算符

sort 组进行排序，返回值是排好的数组，

冒泡排序

reverse 数组反转，

forEach 遍历数组 无返回值

map 遍历数组(对原数组的值进行操作)，返回一个新数组

filter 过滤数组，返回一个满足要求的数组

every 遍历数组中的元素，是否都满足，若都满足则返回true，反之返回false

some 根据判断条件，遍历数组中的元素，是否存在至少有一个满足，若存在则返回true，反之返回false

indexOf 从前往后查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，返回 -1。 和Es6 includes一致

lastIndexOf 从后往前查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，返回 -1。 和Es6 includes 一致

isArray 判断一个值是否为数组的方法，若为数组，返回true，反之返回false

-----------------Es6 --------------------------------

扩展运算符

克隆

数组的合并

与解构赋值结合

转字符串

find 找到第一个符合条件的数组成员 ,并返回这个成员

findIndex 找到第一个符合条件的数组成员的索引值

includes 判断数组中是否包含特定的值

Array.from() 将伪数组变成数组，只要有length的就可以转成数组 和Es5的 split区别

Array.of() 将一组值转换成数组，类似于声明数组

arr.fill(target, start, end) 参数： target – 待填充的元素； start – 开始填充的位置 - 索引； end – 终止填充的位置 - 索引（不包括该位置)

keys 遍历数组的键名

arr.values() 遍历数组键值

entries 遍历数组的键名和键值 entries() 方法返回迭代数组。

copyWithin(target,start,end) 参数：target 开始替换的位置，start:开始复制下标（包括） end:结束复制下标（不包括）

flat(pliy) 数组降维 参数：pliy表示拉平的层数，默认是1层，想无限拉平可以传入Infinity关键字

flatMap() 数组降维 并处理

数组去重

Array.at()返回指定索引处的元素

三：对象

----------Es5-------------------

in 运算符 判断某属性是否属于该对象的成员

一个对象是否属于某个类

match // 返回一个json对象有index

slice 参数：【起始下标，截止下标】 /串返回被提取的部分。【数组也有slice方法】

subString()【起始下标,截止下标】起始下标:不接受负的参数

includes() 判断字符是否存在某个字符和Es5 indexOf类似

padStart 用于头部补全参数：【字符串长度，替补字符串】

trimStart()去掉前面空格 trimEnd() 去掉后面空格和Es5 trim去掉前后

push 后面添加元素，添加一个或者多个，返回长度

unshift() 前面添加元素（一个或者多个），返回长度

pop() 删除最后一个元素返回删除的元素

删除第一个元素，只能删除一个返回删除元素

splice(index,num ,addItem) 删除从index(索引值)开始之后，num:多少个元素返回删除的元素数组 ,添加的元素

slice(start,end) strart是下标 end是下标可选返回选定的数组中的元素，不改变原有的数组和字符串的类似

concat 数组的的合并、和字符串的连接一致和es6 扩展运算符

forEach 遍历数组无返回值

indexOf 从前往后查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，返回 -1。和Es6 includes一致

lastIndexOf 从后往前查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，返回 -1。和Es6 includes 一致

Array.from() 将伪数组变成数组，只要有length的就可以转成数组和Es5的 split区别

flat(pliy) 数组降维参数：pliy表示拉平的层数，默认是1层，想无限拉平可以传入Infinity关键字

flatMap() 数组降维并处理

in 运算符判断某属性是否属于该对象的成员

四：总结用到下标片段方法

search 检索与正则返回第一次出行位置

match // 返回一个json对象有index

iterator自定义遍历对象供`for...of`进行消费。

Array.from() 将伪数组变成数组，只要有length的就可以转成数组和Es5的 split区别

in 运算符判断某属性是否属于该对象的成员

`Reflect.ownKeys()`