您现在的位置是:首页 > 正文

ES6学习——set map数据结构 、 DOM classlist属性、创建对象 、Symbol应用

2024-02-01 03:30:07阅读 2

目录

一、set map数据结构 

1、set数据结构

2、map数据结构

二、DOM classlist 属性

1、add(class1,class2)

2、 contains(class)

3、 item(index)

4、 remove(class1,class2)

5、 toggle(*class,* true\|false)

三、创建对象

1、ES6 创建对象

2、 Key值构建

3、自定义对象方法

4、 Object.assign( )合并对象

四、Symbol应用

1、Symbol 创建

2、Symbol内置值

3、Symbol使用场景


一、set map数据结构 

1、set数据结构

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

           // 1 set定义与初始化数据
			const set = new Set([1,2,3,4,4]);
			set.add(5).add(6);//set加一个值
			set.delete(6);//删除指定的值
			console.log(set.has(6));//has判断有没有指定的值,有返回true 反之为false
			set.clear();//清除所有的值
			console.log(set);

            //数据遍历:forEach方法,用于对每个成员执行某种操作,没有返回值。      
			//set遍历
			set.forEach(item=>console.log(item));

2、map数据结构

     JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制,map的键不限于字符串,对象也可以称为键。

        // 2:map数据结构
		    const Info = {height:190,major:"计算机"};
			const map = new Map([["sex",1],["weight",180]]);

		  //设置map的值 key->value
			map.set("realname","张三");
			map.set("age",18);
			map.set(Info,"个人详细信息");
			
          //get得到map的值 参数:key
			console.log(map.get("realname"));
		  
          //删除map的值 参数:key
			map.delete("age");
		    
          //获取map的长度
			console.log(map.size);
			console.log("age是否存在:" + map.has("age"));
			
          //获取map的所有的key
			// const keys = map.keys();
			map.clear();    

          //遍历
			for(let v of person){
				console.log(v);
			}

二、DOM classlist 属性

1、add(class1,class2)

添加一个类,如果类不存在则不添加。

document.getElementById("mydiv").classList.add("demodiv","demodiv1");

2、 contains(class)

判断元素中是否存在某个类。存在返回true,反之返回false。

let x = document.getElementById("mydiv").classList.contains("demodiv");

console.log(x);

3、 item(index)

返回元素中索引值对应的类名。索引值从 0 开始。  如果索引值在区间范围外则返回 *null*

document.getElementById("mydiv").classList.item(0);

4、 remove(class1,class2)

移除元素中一个或多个类名移除不存在的类名,不会报错。

let mydom = document.getElementById("mydiv");
mydom.classList.add("demodiv");
console.log(mydom.classList.contains("demodiv")); // true

mydom.classList.remove("demodiv");
console.log(mydom.classList.contains("demodiv"));//false

5、 toggle(*class,* true\|false)

在元素中切换类名。  第一个参数为要在元素中移除的类名,并返回 false。  如果该类名不存在则会在元素中添加类名,并返回 true。   第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。

let mydom = document.getElementById("mydiv");
mydom.classList.toggle("demodiv");
console.log(mydom.classList.contains("demodiv"));
mydom.classList.toggle("demodiv");
console.log(mydom.classList.contains("demodiv"))

例子:

<body>

	<div id="demo">我是一个容器</div>
	<button id="btn1">控制颜色</button>
	<button id="btn2">控制字体大小</button>
	<button id="btn3">判断是否有颜色样式</button>
	<button id="btn4">判断索引1的类名</button><br />
	<button id="btn5">删除颜色样式</button>
	<button id="btn6">控制字体toggle方式</button>

	<script>

		let Demo = document.getElementById("demo");
		let btn1 = document.getElementById("btn1");
		let btn2 = document.getElementById("btn2");
		let btn3 = document.getElementById("btn3");

		btn1.addEventListener('click', () => {
			//classlist 添加多个样式
			Demo.classList.add("class1", "class2");
		});
		btn2.addEventListener('click', () => {
			Demo.classList.add("class3")
		});

		// classList.contains 判断是否存在某个样式
		btn3.addEventListener('click', () => {
			console.log(Demo.classList.contains("class1") ? "存在class1的样式" : "不存在class1的样式");
		});

		// classList.item 判断指定下标的类名
		btn4.addEventListener('click', () => {
			console.log(Demo.classList.item(1));
		});

		// classList.remove 删除样式
		btn5.addEventListener('click', () => {
			Demo.classList.remove("class1", "class2");
		});

		btn6.addEventListener('click', () => {
			Demo.classList.toggle("class3");
			//第二个参数 不管样式存在与否 true就强制加上  false就强制移除
			Demo.classList.toggle("class3", false);
		});

	</script>

</body>

三、创建对象

1、ES6 创建对象

ES6允许把声明的变量直接赋值给对象。

let name='张三';
let age=19;
let person = {name,age};

console.log(person);

2、 Key值构建

当键值非前台定义好,需要从后台拉取,可以用Key构建。

let key="name";
let obj = {
 [key]:'web'
}

console.log(obj);

3、自定义对象方法

对象方法就是把对象中的属性,用匿名函数的形式编程方法(之前就有)。

var person={
   say:function(a,b){
   return a+b;
   }
}

console.log(person.say(4,5));

4、 Object.assign( )合并对象

let a = {name:"张三"},b = {age:19};
let c = Object.assign(a,b);

console.log(c);


//展开运算符方式
let d = {...a,...b};
console.log(d);

四、Symbol应用

ES6引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型,是一种类似于字符串的数据类型。

1、Symbol 创建

特性1:Symbol 数据类型的特点是唯一性,即使是用同一个变量生成的值也不相等。

let a = Symbol("a");//a为symbol的描述
let b = Symbol("a");

console.log(a===b);//false

第二种创建方式(可以创建唯一的值)

let s3 = Symbol.for('bb');
let s4 = Symbol.for('bb');

console.log(s3===s4) //true`

特性2:Symbol 数据类型不能与其他数据类型运算。

Let c = a+100;//Cannot convert a Symbol value to a number

特性3:Symbol定义的对象属性不能使用for…in循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名。

2、Symbol内置值

ES6除了定义自己使用的Symbol值以外,还提供了11个内置的Symbol值,指向语言内部使用的方法。

1:Symbol.hasInstance

当其他对象使用instanceof运算符,判断是否为该对象的实例时,会调用这个方法。
 

class Person{
    static  [Symbol.hasInstance](param){
                console.log('param----', param)
                console.log('检测类型')
    }
 }

let o = {}
console.log(o instanceof Person)

2:Symbol.isConcatSpreadable

对象的Symbol.isConcatSpreadable属性等于一个bool值,表示该对象用于Array.prototype()时,是否可以展开。

const arr1 = [1,2,3]
const arr2 = [4,5,6]

arr2[Symbol.isConcatSpreadable] = false // arr2不可展开

const arr = arr1.concat(arr2)
console.log(arr) // [1,2,3,[4,5,6]]

3:Symbol.unscopables

该对象指定了使用with关键字时,哪些属性会被with环境排除。

const object1 = {
  property1: 42
};

object1[Symbol.unscopables] = {
  property1: true
};

with (object1) {
  console.log(property1);
  // expected output: Error: property1 is not defined
}

4:Symbol.match

当执行str.match(myObject)时,如果该属性存在,会调用它,返回该方法的返回值

5:Symbol.replace

当该对象被str.replace(myObject)方法调用时,会返回该方法的返回值

6:Symbol.search

当该对象被str.search(myObject)方法调用时,会返回该方法的返回值

7:Symbol.split

当该对象被str.split(myObject)方法调用时,会返回该方法的返回值

8:Symbol.iterator

对象进行for ... of循环时,会调用Symbol.iterator方法,返回该对象的默认遍历器

9:Symbol.toPrimitive

该对象被转为原始类型的值时,会调用这个方法,返回该对象对应的原始类型值

10:Symbol.toStringTag

在该对象上调用toString方法时,返回该方法的返回值

11:Symbol.species

创建衍生对象时,会使用该属性

3、Symbol使用场景

给对象添加方法,不予对象属性冲突。

		let person = {
			name: '张三',
			age: 18
		}

		let methods = {
			say: Symbol(),
			paly: Symbol()
		}

		person[methods.say] = function () {
			console.log("say hi");
		}

		person[methods.paly] = function () {
			console.log("paly game");
		}

		console.log(Object.getOwnPropertySymbols(person)); // 获得所有的[Symbol()]
		console.log(Reflect.ownKeys(person));//返回所有属性key

		// 调用
		person[methods.say]();
		let demo = Object.getOwnPropertySymbols(person);
		person[demo[0]]();

网站文章

  • 如何在SQLServer中处理每天四亿三千万记录的(数据库大数据处理)

    项目背景这是给某数据中心做的一个项目,项目难度之大令人发指,这个项目真正的让我感觉到了,商场如战场,而我只是其中的一个小兵,太多的战术,太多的高层之间的较量,太多的内幕了。具体这个项目的情况,我有空再写相关的博文出来。这个项目是要求做环境监控,我们暂且把受监控的设备称为采集设备,采集设备的属性称为监控指标。项目要求:系统支持不少于10w个监控指标,每个监控指标的数据更新不大于20秒,存储延迟...

    2024-02-01 03:30:00
  • 《软件开发的201个原则》

    《软件开发的201个原则》

    作为一名从事软件开发工作的读者,深刻体会到《软件开发原则》书中的系列原则,在我开发过程中处处可见。如果遵循这些原则,那么对你的开发是十分有效的。在项目开发过程格遵守开发流程,让一切异常都有迹可循,有法可解,工作效率显著提示。

    2024-02-01 03:29:28
  • ThreadLocal 详解

    ThreadLocal 详解

    如果key使用强引用:业务代码中使用完ThreadLocal ,ThreadLocal Ref被回收了,因为ThreadLocalMap的Entry强引用了threadLocal,造成threadLo...

    2024-02-01 03:29:20
  • 【unlink】 zctf2016_note2

    【unlink】 zctf2016_note2

    【unlink】 zctf2016_note2 1.ida分析 堆溢出,unsigned int用于判断条件,导致的堆溢出 指针数组 2.思路 创建3个chunk,chunk0、chunk1、chun...

    2024-02-01 03:29:12
  • android Preference之android:dependency

    android Preference之android:dependency

    在开发软件设置界面的时候,我们可以采用android系统提供的PreferenceActivity来实现,下面给出一个简单的例子: 1、Activity 代码如下: public class ConfigActivity extends PreferenceActivity { @Override public void onCreate(Bundle save...

    2024-02-01 03:29:05
  • 衡水科技工程学校计算机房照片,衡水科技工程学校数字化校园建设经验

    衡水科技工程学校计算机房照片,衡水科技工程学校数字化校园建设经验

    S cie n ce&Te hc no l o y Vgis i o n科 技视 P.-科技探索 争鸣衡水科技工学程校字化校数园建设经验广彦杜衡(水科技程工校学。河北衡水 0 5 30 0 0)摘【要】根据校学发的展划和各规业专的特,色通“过四一个”实现了数来字化建校设,一张网:校网、一个平园台:数校园平字、台一个库:教学资源、一库制套度:各网项化络管理制度。建在过设中我校程探索出条...

    2024-02-01 03:28:35
  • 【编程实践】:Java基础+MarkDown文件解析器

    个人博客系统正在开发中。。。欢迎路过的java新手一起交流。。。欢迎大佬指正。。。本文主要描述文章发布过程中MarkDown文件的解析过程。MarkDown文件有以下语法说明语法格式标题标题采用#+#...

    2024-02-01 03:28:26
  • js总结篇之—ajax (看完你就学会整个js)

    1.AJAX技术 *ajax是浏览器提供的一系列api,可供javascript调用,实现代码控制请求与相应,实现网络2编程 2.快速上手 let xhr = new XMLHttpRequest()...

    2024-02-01 03:28:19
  • c#:使用网易邮箱账号发送电子邮件

    c#:使用网易邮箱账号发送电子邮件

    环境: window10 vs2019 16.5.5 .netcore 3.1 .netframework 4.5 控制台程序 一、准备网易邮箱账号 1.1 注册账户 1.2 开启smtp服务 二、编...

    2024-02-01 03:27:49
  • 轻松获得微信openid

    function test() { header("Content-type: text/html; charset=utf-8"); $weixinConfig=parent::getWeixinConfigData(); $APPID=$weixinConfig['appid']; $secret=$weixinCon...

    2024-02-01 03:27:41