js总结（阿西吧）

布满荆棘的人生 2022-10-23 12:43 129阅读 0赞

## **一、forEach()** 方法对数组的每个元素执行一次提供的函数。 ##

<code>var array = ['a', 'b', 'c'];
 
 array.forEach(function(element) {
 console.log(element);
 });
 </code>

输出为：  
a;  
b;  
c;

forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined；

<code> var arr = [1,2,3,4];
 
 arr.forEach(alert); 
 
 // 等价于：
 
 var arr = [1, 2, 3, 4];
 
 for (var k = 0, length = arr.length; k < length; k++) {
 
 alert(array[k]);
 
 } 
 </code>

forEach方法中的function回调有三个参数：  
第一个参数是遍历的数组内容，  
第二个参数是对应的数组索引，  
第三个参数是数组本身

**foreach 语法：**

\[ \].forEach(function(value,index,array)\{  
　  
　　　　//code something  
　　　　  
　　\});

<code>var arr = [1,2,3,4];
 var sum =0;
 arr.forEach(function(value,index,array){
 
 array[index] == value; //结果为true
 
 sum+=value; 
 
 });
 
 console.log(sum); //结果为 10</code>

### 二、Array的flat实现方式 ###

*  [ES10 新增Array.flat()和Array.flatMap()][ES10 _Array.flat_Array.flatMap]
 *   *  [扁平化多维数组：Array.flat()][Array.flat]
     *  [Array.flatMap()][Array.flatMap]
     *  [Array.flat实现][Array.flat 1]
     *   *  [实现方式1递归][1]
         *  [实现方式2递归][2]

# ES10 新增Array.flat()和Array.flatMap() #

## 扁平化多维数组：Array.flat() ##

// An highlighted block
    let arr= [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
    arr.flat() == arr.flat(1);               // [1,2,3,4,5,6,Array(4)]
    arr.flat().flat() == arr.flat(2);        // [1,2,3,4,5,6,7,8,9,Array(3)]
    arr.flat().flat().flat() == arr.flat(3); // [1,2,3,4,5,6,7,8,9,10,11,12]
    arr.flat(Infinity);       // [1,2,3,4,5,6,7,8,9,10,11,12]

## Array.flatMap() ##

let array = [1, 2, 3, 4, 5]
    array.map(x => [x, x * 2])
    //转换
    [Array(2), Array(2), Array(2)]
    0: (2)[1, 2]
    1: (2)[2, 4]
    2: (2)[3, 6]
    3: (2)[4, 8]
    4: (2)[5, 10]
    //继续
    array.flatMap(v => [v, v * 2]) == array.flat(1) //1维flatMap效率高一点
    [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

## Array.flat实现 ##

### 实现方式1递归 ###

Array.prototype.flat = function(){
          var arr = [];
          this.forEach((item)=>{
    	        if(Array.isArray(item)){
    	         	  arr=arr.concat(item.flat());//如果是数组的话继续循环
    	        }else{
    	        	  arr.push(item)
    	        }
          })
          return arr
        }

### 实现方式2递归 ###

Array.prototype.flat = function() {
    	return this.toString()		//"1,2,3,4"
    			.split(",")   		//["1", "2", "3", "4"]
    			.map(item => +item);//[1, 2, 3, 4]
    };
    console.log([1,[2,[3,4]]].flat())//[1, 2, 3, 4]

# 三、concat #

**将传入的数组或非数组值与原数组合并**

**思想：可以用于数组合并，并且不改变原数组，返回一个新数组，**

push效果的另类用法

1. `var a = [1,2,3];`
2. `document.write(a.concat(4,5));`
3. `var b= [4,5];`
4. `document.write(" ");`
5. `document.write(a.concat(b));`

输出结果：

![70][]

### 数组reduce函数 ###

let arr=[12,-1,10,5];
        let result = arr.reduce((a, b)=>{
            console.log("上一次处理后的返回值"+a);
            console.log("当前正在处理的元素"+b);
            return a+b
        });
        console.log(result);
        /*
        上一次处理后的返回值12
        当前正在处理的元素-1
        上一次处理后的返回值11
        当前正在处理的元素10
        上一次处理后的返回值21
        当前正在处理的元素5
        26
         */

# set总结 #

set翻译为集合，是一个内部自动有序且不含重复元素的容器  
如需使用需要添加头文件

#include<set>
 using namespace std;

1.set的定义 
`set<typename>name` 
实例如：

set<int>name;
 set<double>name;
 set<char>name;
 set<node>name;//node是结构体类型
 set<int>a[100];//数组类型

2.set容器内元素的访问  
与vector不同，set只能通过迭代器(iterator)访问,并用\*it来访问其中的元素例如：

set<int>::iterator it;
 set<char>::iterator it;

由于除开vector和string之外的STL容器都不支持\*(it +i)的访问方式，因此只能按如下方式枚举：

set<int>st;
 for(set<int>::iterator it = st.begin();it != st.end();it++)
 	printf("%d",*it);

3.set常用函数实例解析

# js Set类型 #

类似与 Map ，区别是不存value  只是存储 key key的集合

常用的函数:

add

delete

Set.size 元素的个数

has

keys

备注:

可以放进去多个相同的key，但是只会有一个key起作用

var list_key = new Set([1,2,3]);
    console.log(list_key);
    list_key.add(3);
    list_key.add(3);
    list_key.add('wang');
    list_key.add('3');
    list_key.delete('3');
    
    console.log(list_key.size);
    console.log(list_key);

var what = list_key.keys();
    for (let item of list_key.keys()) {
        console.log(item);
    }

# js中ES6的Set的基本用法 #

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

const s = new Set();
    
    s.add(1).add(2).add(2);
    
    console.log(s.size);
    
    console.log(s.has(1));
    console.log(s.has(2));
    console.log(s.has(3));
    
    s.delete(2);
    console.log(s.has(2));
    
    // set转数组
    const items = new Set([1,2,3,4,5]);
    const array = Array.from(items);
    console.log(array);
    
    // 去除数组重复成员
    function dedupe(array) {
      return console.log(Array.from(new Set(array)));
    }
    
    dedupe([1,1,2,3]);

[ES10 _Array.flat_Array.flatMap]: https://blog.csdn.net/weixin_45136832/article/details/90609239?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161492565316780255286784%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161492565316780255286784&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-90609239.first_rank_v2_pc_rank_v29_10&utm_term=flat#ES10_ArrayflatArrayflatMap_2
[Array.flat]: https://blog.csdn.net/weixin_45136832/article/details/90609239?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161492565316780255286784%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161492565316780255286784&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-90609239.first_rank_v2_pc_rank_v29_10&utm_term=flat#Arrayflat_3
[Array.flatMap]: https://blog.csdn.net/weixin_45136832/article/details/90609239?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161492565316780255286784%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161492565316780255286784&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-90609239.first_rank_v2_pc_rank_v29_10&utm_term=flat#ArrayflatMap_12
[Array.flat 1]: https://blog.csdn.net/weixin_45136832/article/details/90609239?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161492565316780255286784%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161492565316780255286784&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-90609239.first_rank_v2_pc_rank_v29_10&utm_term=flat#Arrayflat_27
[1]: https://blog.csdn.net/weixin_45136832/article/details/90609239?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161492565316780255286784%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161492565316780255286784&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-90609239.first_rank_v2_pc_rank_v29_10&utm_term=flat#1_28
[2]: https://blog.csdn.net/weixin_45136832/article/details/90609239?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161492565316780255286784%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161492565316780255286784&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-90609239.first_rank_v2_pc_rank_v29_10&utm_term=flat#2_42
[70]: /images/20221023/cd0bf6b582f34a2283c313dc63b78b45.png