js总结(阿西吧)

编程入门 行业动态 更新时间:2024-10-25 08:24:32

js总结(<a href=https://www.elefans.com/category/jswz/34/1689616.html style=阿西吧)"/>

js总结(阿西吧)

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

<span style="color:#000000"><code>var array = ['a', 'b', 'c'];array.forEach(function(element) {console.log(element);
});
</code></span>

输出为:
a;
b;
c;

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

<span style="color:#000000"><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></span>

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

foreach 语法:

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

 

 

<span style="color:#000000"><code>var arr = [1,2,3,4];
var sum =0;
arr.forEach(function(value,index,array){array[index] == value; //结果为truesum+=value; });console.log(sum); //结果为 10</code></span>

二、Array的flat实现方式

  • ES10 新增Array.flat()和Array.flatMap()
    • 扁平化多维数组:Array.flat()
    • Array.flatMap()
    • Array.flat实现
      • 实现方式1递归
      • 实现方式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("<br>");

  5. document.write(a.concat(b));

输出结果:

 

 

 

 

数组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当前正在处理的元素526*/

 

 

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();[2,3,5,4,5,2,2].forEach(x => s.add(x));
// Set结构不会添加重复的值for(let i of s) {console.log(i);
}// ## 初始化
// 例一 可以接受一个数组作为参数
const set = new Set([1,2,3,4,4,]);// ...将一个数组转为用逗号分隔的参数序列
console.log([...set]);// 例二
const items = new Set([1,2,3,4,5,5,5,5,]);
console.log(items.size);// 例三 可以接受具有iterable接口的其他数据结构作为参数
const set2 = new Set(document.querySelectorAll('div'));
console.log(set.size);// 类似于
const set2 = new Set();
document.querySelectorAll('div').forEach(div => set.add(div));
console.log(set.size);// set中NaN等于自身,其余比较相当于 ===
let set3 = new Set();
let a = NaN;
let b = NaN;
set3.add(a);
set3.add(b);
console.log(set3)// 两个对象总是不相等的
let set4 = new Set();
set4.add({});  // 1
console.log(set4.size);set4.add({});  // 2
console.log(set4.size);
  •  
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]);
let set = new Set(['red', 'green', 'blue']);// 返回键名
for(let item of set.keys()) {console.log(item);
}// 返回键值
for(let item of set.values()) {console.log(item);
}
// set 键名=键值// 返回键值对
for(let item of set.entries()){console.log(item);
}// 可以直接用 for of遍历Set
// for in 和 for of的区别是:in 是遍历对象,of是遍历值
for (let x of set) {console.log(x);
}// set也有forEach()方法
set.forEach((value, key) => console.log(key + ' : ' + value));
// 此处forEach方法的参数是一个处理函数。// 数组的 map 和 filter 方法也可以间接用于Set
let s = new Set([1,2,3]);// map 将原数组映射成新数组
s = new Set([...s].map(x => x * 2));
console.log(s);// filter返回过滤后的新数组
s = new Set([...s].filter(x => (x % 3) ==0));
console.log(s);// 实现并集、交集、差集
let a = new Set([1,2,3]);
let b = new Set([4,3,2]);let union = new Set([...a, ...b]);
console.log(union);let intersect = new Set([...a].filter(x => b.has(x)));
console.log(intersect);let difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference);// 在遍历操作中,同步改变原来的Set结构的两种变通方法// 1.利用原Set结构映射出一个新的结构,然后赋值给原来的Set结构
let set1 = new Set([1,2,3]);
set1 = new Set([...set1].map(val => val *2));
console.log(set1);// 2.利用Array.from
let set2 = new Set([1,2,3]);
set2 = new Set(Array.from(set2, val => val * 2));
console.log(set2);

 

更多推荐

js总结(阿西吧)

本文发布于:2024-02-12 22:18:04,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1689614.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:阿西   js

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!