JavaScript 对象的操作方法，常用的数组去重方法以及严格模式的了解

电玩女神 2023-07-18 03:22 9阅读 0赞

对象 — 也是数据的集合。

# 对象与数组的异同 #

**数组：** 索引值 —> 数据 有 length 属性  
　　　必须自己定义 数据的键名 和 数据的数值。  
**对象：** 键值对形式：键名 —> 数据、键名 = 数值 的形式 没有 length 属性  
　　　数组中,直接定义数据,索引是JavaScript程序自动添加的。

对象的 属性/键名 功能就类似于数组的 索引下标。  
**数组中的数据，可以是任意JavaScript支持的数据类型。  
对象中的数据，也就是对象的属性值，也可以是JavaScript支持的任意数据类型。**

# 对象的声明方式 #

### 1. 字面量方式声明 ###

对象当中的数据，必须是**键值对形式 / 属性 属性值。**  
必须自己定义 数据的键名 和 数据的数值。

##### 语法规则 #####

**键名：数据**

var obj = {  键名1：数据1,键名2：数据2,键名3：数据3 }
    // 在 {} 中,定义多个对象,中间使用逗号间隔

键名的命名规范：推荐使用英文字母,数字形式,不能以数字开头
    			  键名不用写引号
    			  如果是多个对象，使用逗号间隔

**注：控制台显示时，有时会按照属性的首字母来显示内容，但是不是改变程序中 属性的顺序，不用去管，不影响程序执行。**

##### 实例 #####

var obj = {  name:'张三' , age:18 , sex:'男'};
    
    console.log(obj);

### 2. 内置构造函数方法 ###

类似于数组的构造函数定义方式，很少用。

##### 语法 #####

var 变量 = new Object();

##### 实例 #####

var obj2 = new Object();
    obj2.name = '李四';
    obj2.age = '28';
    console.log(obj2);

# 对象的基本操作方法 #

对象的基本操作方法，与数组的基本操作方法很相似，语法形式也差不多。

### 给对象新增单元 ###

// 建立一个空对象
    var obj = { };

##### 方式1 对象变量名称\[‘键名’\] = 数值 #####

如果键名是不存在的键名，就是新增对象单元操作。
    使用 [ ] 语法，键名必须要添加引号。

###### 实例 ######

obj['name'] = '张三';

##### 方式2 对象变量名称.键名 = 数值 #####

使用 .语法 ,键名不要加引号。

###### 实例 ######

obj.sex = '男';

##### 方式3 键名是变量的形式 #####

对象新增单元的键名，是存储在变量中的。
    此时只能使用 [ ] 形式来给对象新增单元。
    并且此时的 变量名称 不要添加引号。

###### 实例 ######

// 如果使用 [] 语法, str变量会被解析为 age 数据内容
    // 如果使用 . 语法, str变量不会被解析,会被直接操作为 str 键名
    
    // 就类似 '变量' 不解析变量,变量名称就是字符串
    // `${变量}` 模板字符串,解析变量的
    
    var str = 'age' ; 
    
    // []语法,解析变量,添加单元键名是 age
    obj[str] = 180;
    
    
    console.log(obj);

##### 总结 #####

**如果是变量，存储键名，必须使用\[ \]语法  
如果是正常添加，推荐使用 .点语法**

### 调用操作 ###

使用 对象.键名  或者  对象[键名] 语法。
    点语法不能解析变量。
    而当调用不存在的键名和索引时，执行结果都是 undefined ，这一点数组和对象是相同的。

##### 实例 #####

var obj = { };
    obj['name'] = '张三';
    obj.sex = '男';
    var str = 'age' ; 
    obj[str] = 180;
    console.log(obj);
    
    console.log(obj.name);
    console.log(obj.sex);
    console.log(obj['sex']);
    console.log(obj.str);   // 不会解析str为age,只会直接执行obj.str,执行结果是
    console.log(obj[str]);  // 变量必须使用[]语法来执行

### 修改对象存储的数据 ###

对已经存在的键名进行赋值，是修改之前的数据。

##### 实例 #####

var obj = { };
    obj['name'] = '张三';
    obj.sex = '男';
    var str = 'age' ; 
    obj[str] = 180;
    
    obj.name = '韩梅梅';
    console.log(obj.name);
    
    obj['sex'] = '女';
    console.log(obj['sex']);
    
    // 变量,只能使用[]语法,不要加引号
    obj[str] = 18;
    console.log(obj[str]);

# 对象中的函数 #

在对象中定义函，类似于匿名函数。  
函数是没有函数名称的。  
函数的内存地址，存储在对象的属性中。  
对象.属性() 就类似于 匿名函数 变量名称() ，此时是在调用函数，并且执行函数 。

### 实例 ###

### 对象中的函数中调用对象的属性和属性值 ###

听起来似乎有些拗口，其实就是在对象中定义一个函数，然后在函数中再调用这个对象。

##### 实例 #####

var obj2 = { 
        name : '张三',
        age : 18,
        fun : function(){ 
            // 在对象内部的函数中,调用对象的属性和属性值
            console.log( obj2.name , obj2.age )
        }
    };
    
    obj2.fun();

##### 对象中的 this 关键词 #####

调用对象的属性，理论上应该是 对象名称.属性 。  
但是当对象名称特别长时，此时在对象中的函数中调用对象属性就变得很麻烦。  
函数中有一个专有属性，叫 this 可以起到指代的作用。  
所谓的指代，也就是 代替/替换 ，替换的内容，是调用函数之前，也就是 . 点之前的内容。

###### 实例 ######

var woshibeichuangjiandedisangeduixiang3 = { 
        name : '李四',
        age : 28,
        fun : function(){ 
            // 此时 this 指代的 就是这个对象
            console.log( this.name , this.age );
    
            console.log(this);
        }
    };
    // 此处在调用函数,点之前的内容是对象
    woshibeichuangjiandedisangeduixiang3.fun();

这里为了以后能更熟练的使用 this 关键词，我们把它单独拿出来说一下：

# 普通函数中的 this 关键词 #

所谓的普通函数，指的是 声明式函数、赋值式/匿名函数、对象中的函数。  
普通函数的 this ，指的都是调用函数时， . 点 之前，写的内容。

### 对象中的函数 ###

. 点之前是这个对象，此时 this 指向的就是这个对象。

##### 实例 #####

var obj = { 
        name:'张三',
        age:18,
        // 此时 函数的this 指向的就是 obj 这个对象
        fun:function(){ console.log(this)},
    };
    
    obj.fun();

### 声明式函数 匿名函数/赋值式函数 ###

this 的指向是 window 对象。

window对象，是JavaScript定义的，一个顶级对象(最大的)。
    JavaScript在其中定义了很多很多内容，我们可以直接调用和使用。
    window 本也是一个对象， window.属性 可以调用属性值
     			 		  window.函数   可以调用函数方法
    常用的方法： alert 警告窗
    因为 window 是顶级对象，如果调用 window 中的方法，可以不写window对象名称。

##### 实例 #####

// 调用 window 中的方法/函数 window可写可不写
    alert('我是弹窗内容---第一个');
    window.alert('我是弹窗内容---第二个');

声明式 赋值式/匿名函数 都是定义在 window 对象中的方法函数。
    调用 声明式  赋值式 函数时，理论上应该写成：
     		window.函数名()   window.变量名()
    但是 window 可写可不写
    调用函数时， . 点之前，实际上是window。
    this的指向，就是window这个顶级对象。

##### 实例 #####

function fun1(){ 
        console.log(this);
    }
    
    fun1();
    window.fun1();
    
    var fun2 = function(){ 
        console.log(this);
    };
    
    fun2();
    window.fun2();

······································································································································

# 数组去重 #

### 1. indexOf 方法去重 ###

这个方法上个涉及数组去重的帖子中提到过，就不详细说了，直接来看demo：

##### 实例 #####

// indexOf()
    // 将原始数组中的数据,写入到新的数组中
    // 如果新数组中,没有这个数据,我们再进行写入操作
    // indexOf() 结果是 -1 
    
    var arr = [1,1,1,2,2,2,3,3,3,4,4,4,5,5,5,6,6,6];
    
    // 参数是需要执行去除重复数据的数组
    function setNewArr(arr){ 
        var newArr = [];
        arr.forEach(function(val){ 
            if( newArr.indexOf(val) === -1 ){ 
                newArr.push(val);
            }
        });
        return newArr;
    }
    var arr2 = setNewArr(arr);
    console.log(arr2);

### 2. 使用双层 for 循环去重 ###

##### 实例 #####

// 使用双层for循环,来完成对数组中数值的比较
    // 如果数值相同,就删除其中一个数值
    
    // 从第一个数值开始循环,第一个数值和其后的所有数据进行比较
    // 如果要是数值相同,就删除之后的数值
    // 循环次数比较多
    var arr123 = [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5];
    
    function setNewArr2(arr){ 
        // 外层循环,从第一个数值开始,循环至最后一个数值
        for(var i = 0 ; i <= arr.length-1 ; i++){ 
            // 内层循环,从当前起始数值的下一个数值开始,循环至最后一个数值
            for(var j = i+1 ; j <= arr.length-1 ; j++){ 
                if(arr[i] === arr[j]){ 
                    // 执行删除数组单元操作,之后的单元,会前移,顶替当前位置的单元
                    // 此时,当前位置就是放置了一个新的单元
                    // 这个位置就必须要重新操作一次,判断数值是否相同
                    arr.splice(j,1);
                    // 先将循环生成的索引--, 在执行循环的++
                    // 等于操作之后,索引值没有变,下次循环,执行的对象,仍然是当前这个单元
                    j--;
                }
            }
        }         
    
        return arr;
    }
    var newArr = setNewArr2(arr123);
    console.log(newArr);

##### 总结 #####

循环操作数组，只要执行了删除数组单元的操作，一定要将循环变量数值执行 -- （减减）操作

### 3. 使用 sort 方法 + for 循环去重 ###

##### 实例 #####

// 先将数组中的数值,按照大小顺序,排列
    // 排序之后,相同的数值,一定是相邻的
    // 此时,只要相邻的两个数值比较,如果相同,删除后一个数据,再执行 i--
    // 使用一层循环就可以了
    // 循环次数就比较少
    
    var arr = [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5];
    
    function setNewArr3(arr){ 
        // 先对数组进行排序操作,相同数据,相邻
        var newArr = arr.sort(function(a,b){ return a-b});
        // 当前数据与下一个数据比较
        // 冒泡排序的优化原理:只要循环到倒数第二个单元
        // 就会通过i+1 与最后一个单元比较
        // 比较到最后一个单元,循环只要执行到,倒数第二个单元
        for(var i = 0 ; i <= newArr.length-1 -1 ; i++){ 
            if(newArr[i] === newArr[i+1]){ 
                // 删除后一个单元
                newArr.splice(i+1 , 1);
                // 防止数组坍塌,造成有单元没有执行操作
                i--;
            }
        }
        return newArr;
    }
    
    var newArr2 = setNewArr3(arr);
    console.log(newArr2);

### 4. 利用对象的属性 + for…in 循环去重 ###

对象的属性特点：一个对象中，相同的键名，只能建立一个。
    						   再对已经存在的键名进行赋值，是修改数据操作。

##### 实例 #####

##### 总结思路 #####

1. 将数组的数值，作为对象的属性/键名。
     		利用对象不能有重复 属性/键名 的特点,去除数组重复数据
     		重复数据,不会生成新的 对象的属性/键名
    2. 将对象的 属性/键名 写成新数组的数据。

**注意：使用对象去重方法有个问题，我们原始数组中是纯数字，但是在中间将数字作为键名定义以及输出的过程中，数字会被转化为字符串。**  
······································································································································

# JavaScript 严格模式 #

JavaScript是一个弱类型的计算机语言，对于语法格式的要求不是很严谨，执行语法时，会有各种不符合规范的定义方式。  
所谓的严格模式，就是强调了一些语法规范，你必须遵守。

实际开发中，不要使用严格模式。  
只有在 封装 时 : 例如 封装插件，打包代码(gulp打包代码) 才会使用严格模式。  
目前我们只要知道了解有这个回事儿，就可以了。

### 实例 ###

// 'use strict' 定义严格模式
    // 这个定义 必须写在JavaScript程序的最起始部分
    
    'use strict';   // 就是开启了严格模式
    
    int = 100;      // 正常情况下,不写关键词var
                    // 是一个赋值语句,没有int变量,会将赋值语句,升级为定义变量
                    // 而且定义的是一个全局变量
                    // 如果开启严格模式,就必须要有var声明变量
    
    console.log(int);

### 总结 ###

1. 'use strict';  必须要写在第一行
    2. 开启严格模式，有些不规范的语法形式要报错
    3. 项目开发中，不会使用，封装插件、打包代码时才会使用