前端开发：如何区分记忆containsincludeshas

一、前端开发:如何区分/记忆contains/includes/has

1、在前端开发中会遇到一些非常类似的api但却有不同的英文名，比如同样表示包含，有contains/includes/has这三种。如何记住哪个是哪个呢？我整理了一些技巧

2、 contains作为包含，出现在Element.classList.contains和Node.contains这两个api上，它们都是DOM API，也就是说在操作DOM时遇到包含那就是contains了

3、 includes作为包含出现在Array.prototype.includes和String.prototype.includes上，即js中我们常用的数组和字符串上会用includes

4、 has作为判断包含的方法出现在Map/Set/WeakMap/WeakSet/Reflect/FormData上。可以发现与上面的includes不同，这些has中传入的都是具有唯一性的key参数，即js中如果包含是具有唯一性的包含的话用has，否则是includes

二、js代码如何封装添加class

1、在JavaScript中，封装一个添加类名的函数是实现代码复用的有效方式。以下是一个简单的函数，它接受两个参数：`element`是你想要添加类的DOM元素，`className`是你想要添加的类名。函数首先检查`element`是否是有效的DOM元素，然后获取当前的类名，并将其与新的类名结合。如果类名已经存在，它将确保不会重复添加。最后，函数将更新后的类名设置回元素。

2、function addClass(element, className){

3、 if(element.nodeType=== Node.ELEMENT_NODE){

4、 let classList= element.classList;

5、 if(!classList.contains(className)){

6、//假设有一个ID为'my-element'的元素

7、const myElement= document.getElementById('my-element');

8、//调用addClass函数向元素添加'my-class'类

9、addClass(myElement,'my-class');

10、确保在调用`addClass`函数之前，DOM已经完全加载。这通常意味着你应该在文档的`DOMContentLoaded`事件触发后或在``标签之前调用该函数。

三、js能够保证object属性的输出顺序吗

我们来看这样一个对象，来输出他的属性名称，也就是key值：

var data={'1':'aaa','2':'bbb','3':'ccc','测试':'000'};

嗯，没啥问题。那调整一下最后一项的位置，再来试试：

var data={'测试':'000','1':'aaa','2':'bbb','3':'ccc'};

奇怪，输出的顺序被调整了，这是为什么呢？我们继续，换一下属性名称，再试一次：

var data={'a':'000','1':'aaa','2':'bbb','3':'ccc'};

依结果来看，貌似有点小规律，我们不妨猜一下。

会不会是按照ASC码的大小顺序来输出的呢？

'1'<'2'<'3'<'测试'

'1'<'2'<'3'<'a'

好像漏掉了一种情况（字母和汉字的属性名称同时存在），我们试一下：

var data={'a':'000','3':'ccc','1':'aaa','测试':'bbb',};

调整属性’a’和’测试’的顺序呢？

var data={'测试':'bbb','3':'ccc','a':'000','1':'aaa'};

好了，到此为止，我们可以得出结论了。

结论：对象的遍历输出并不是按照属性的ASC码升序排序的。

查阅了一些文档后，得出了以下有效结论：

1.An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

2.Chrome Opera的 JavaScript解析引擎遵循的是新版 ECMA-262第五版规范。因此，使用 for-in语句遍历对象属性时遍历书序并非属性构建顺序。而 IE6 IE7 IE8 Firefox Safari的 JavaScript解析引擎遵循的是较老的 ECMA-262第三版规范，属性遍历顺序由属性构建的顺序决定。

Chrome Opera中使用 for-in语句遍历对象属性时会遵循一个规律：

它们会先提取所有 key的 parseFloat值为非负整数的属性，然后根据数字顺序对属性排序首先遍历出来，然后按照对象定义的顺序遍历余下的所有属性。

其它浏览器则完全按照对象定义的顺序遍历属性。

这和我们上面例子中的数据结果是吻合的，嗯，这就是我想要的结果！

如果想顺序遍历一组数据，请使用数组并使用 for语句遍历。

for-in语句无法保证遍历顺序，应尽量避免编写依赖对象属性顺序的代码。如果想按照定义的次序遍历对象属性，请参考这里针对各浏览器编写特殊代码。

由于对象的输出是无序的，但是数组却是有序的，所以为了保证顺序，搞成数组再输出。嗯，就是这样！