Javascript中的对象实验小结

对象 — 也是数据的集合。

对象与数组的异同

数组： 索引值 —> 数据 有 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 obj = {
    name:'张三',
    age:18,
    marry:true,
    o:{a:100,b:200},
    arr:['北京','上海','广州'],
    fun:function(){
        console.log('我是对象中的函数')
    }
};

console.log(obj);

// obj.name ---> 张三
// obj.arr  ---> ['北京','上海','广州']
// obj.0    ---> {a:100,b:200}

obj.fun();  // 调用并且执行存储在对象中的函数/方法

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

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

实例

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 循环去重

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

实例

var arr1 = [1,1,1,1,2,2,2,3,3,3,4,4,4,4,5,5,5];
console.log(arr1);

// 获取第一个单元的数值1,作为对象的键名,建立一个单元
// var obj1 = { 1:'随便' };
// 获取第二个单元的数值,还是1,还作为对象的键名
// 此时1键名已经存在,会执行覆盖操作,不会新增一个单元
// obj1 = { 1:'随便' };
// console.log(obj1);

var obj1 = {};
var newArr = [];

arr1.forEach(function(val){
    obj1[val] = '老婆,我爱你~~~';
})

console.log(obj1);

// for...in循环对象,自定义变量中存储的是对象单元的属性
for(var attr in obj1 ){
    // 将属性attr存储的数据写入新数组中
    newArr.push(attr);
}
    
console.log(newArr);

总结思路

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

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

JavaScript 严格模式

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

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

实例

// 'use strict'    定义严格模式
//                 这个定义 必须写在JavaScript程序的最起始部分

'use strict';   // 就是开启了严格模式

int = 100;      // 正常情况下,不写关键词var
                // 是一个赋值语句,没有int变量,会将赋值语句,升级为定义变量
                // 而且定义的是一个全局变量
                // 如果开启严格模式,就必须要有var声明变量

console.log(int);

总结

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