JS 对象Object

对象的基本介绍

对象 — 也是数据的集合
对象与数组的区别
数组是 索引值 —> 数据
对象是 键值对形式 键名 —> 数据 键名 = 数值 的形式
对象的 属性/键名 功能 就类似于 数组的 索引下标

对象的声明方式

1. 字面量方式声明
   对象当中的数据,必须是键值对形式 / 属性 属性值
   必须自己定义 数据的键名 和 数据的数值
   键名 : 数据
   键名的命名规范 : 推荐使用英文字母,数字形式,不能以数字开头
   键名不用写引号
   键名/属性 是name,存储的数据/属性值是张三
   如果是多个对象,使用逗号间隔
   控制台显示时,有时会按照属性的首字母来显示内容
   但是不是改变程序中,属性的顺序,不用去管,不影响程序执行

    var obj = { name:'张三' , age:18 , sex:'男'};
    console.log(obj);	//Object { name: "张三", age: 18, sex: "男" } 
    // 数组中,直接定义数据,索引是JavaScript程序自动添加的
    var arr = [1,2,3,4,5];
    console.log(arr);	//Array(5) [ 1, 2, 3, 4, 5 ]
   

2. 内置构造函数方法
   var obj2 = new Object();

对象的基本操作

对象的基本操作方法,与数组的基本操作方法,很相似;语法形式也差不多,有一点要特别注意
;建立一个空对象
var obj = { };
给对象新增单元

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

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

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

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

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

    obj.sex = '男';

方式3 键名是变量的形式

对象新增单元的键名,是存储在变量中的
此时只能使用 [ ] 形式来给对象新增单元
并且此时的 变量名称 不要添加引号
如果使用 [ ] 语法, str变量会被解析为 age 数据内容
如果使用 . 语法, str变量不会被解析,会被直接操作为 str 键名
就类似 ‘变量’ 不解析变量,变量名称就是字符串
${变量} 模板字符串,解析变量的
var str = ‘age’ ;
// []语法,解析变量,添加单元键名是 age
obj[str] = 180;
console.log(obj);

总结
如果是变量,存储键名,必须使用[]语法
如果是正常添加,推荐使用 .点语法
调用操作 对象.键名 或者 对象[键名]
点语法不能解析变量,
数组和对象是相同的,调用不存在的键名和索引,执行结果都是undefined

    console.log(obj.name); 
    console.log(obj.sex); 
    console.log(obj['sex']);	
    console.log(obj.str);   // 不会解析str为age,只会直接执行obj.str,执行结果是
    console.log(obj[str]);  // 变量必须使用[]语法来执行
    // 修改对象存储的数据
    // 对已经存在的键名,进行赋值,是修改之前的数据

    obj.name = '韩梅梅';
    obj['sex'] = '女';
    // 变量,只能使用[]语法,不要加引号
    obj[str] = 18;

对象中的函数

数组中的数据,可以是任意JavaScript支持的数据类型
对象中的数据,也就是对象的属性值,也可以是JavaScript支持的任意数据类型

    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();

    var woshibeichuangjiandedisangeduixiang3 = {
        name : '李四',
        age : 28,
        fun : function(){
            // 调用对象的属性,理论上应该是 对象名称.属性
            // 函数中有一个专有属性,叫this,可以起到指代的作用
            // 所谓的指代,也就代替,替换
            // 替换的内容,是调用函数之前,也就是 . 点之前的内容
            // 此时 this 指代的 就是这个对象
            console.log( this.name , this.age );
            console.log(this);
        }
    }
    // 此处在调用函数,点之前的内容是对象
    woshibeichuangjiandedisangeduixiang3.fun();

普通函数中的this指向问题

所谓的普通函数,指的是 声明式 赋值式/匿名函数 对象中的函数
普通函数的 this ,指的都是 调用函数时, 点 之前,写的内容
对象中的函数 点之前是这个对象 此时 this 指向的就是这个对象
此时 函数的this 指向的就是 obj 这个对象

    var obj = {
        name:'张三',
        age:18,
        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();

严格模式

所谓JavaScript中的严格模式
JavaScript是一个弱类型的计算机语言
对于语法格式的要求不是很严谨
执行语法时,会有各种不符合规范的定义方式
所谓的严格模式,就是强调了一些语法规范,你必须遵守
实际开发中,不要使用严格模式
只有在 封装 时 : 例如 封装插件 , 打包代码(gulp打包代码) 才会使用严格模式

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

总结:

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

ECMAScript 的 简单历史

1995年 ECMAScript第一个版本 ECMA1.1
1996年 ECMAScript第二个版本 ECMA2
1997年 ECMAScript第三个版本 ECMA3
2000年 ECMAScript第四个版本 ECMA4
ECMA4 中 新增了大量的新的语法内容
例如,新增了函数功能等
2011年 ECMAScript第五个版本 ECMA5
是现在最常用,兼容性最好的版本
2015年 ECMAScript第六个版本 ECMA6
ECMA6 中 新增了大量的新的语法内容
例如, class构造函数 , 箭头函数 , 新的数据类型等
对 JavaScript语言功能的提升,起到至关重要的作用
让我们从 弱类型语言,转化为 半强类型语言
通俗的理解 ECMA1-5 是 帕萨特 汽车
ECMA6 是 宝马Z4 小跑车
之后有新的版本 ECMAScript 对语言的功能也有提升
2016年 ECMAScript第七个版本 ECMA7
2017年 ECMAScript第八个版本 ECMA8
2018年 ECMAScript第九个版本 ECMA9
2019年 ECMAScript第十个版本 ECMA10
目前已经提升到了 阿斯顿·阿丁 级别
与 java 等还是有差距的
现在有了 node.js 对JavaScript功能又有了极大的完善
早晚有一天,我们的前端,可以 统治世界

ECMAScript中数组的操作语法

有几个特殊的数组的操作方式,是 ESMA5 新增的方法

1. indexOf()

2. forEach()

3. map() 方法 映射方法

语法 :
数组.map(function( value , key , arr ){需要执行的操作})
参数1:存储数组单元的数据
参数2:存储数组单元的索引
参数3:存储原始数组
映射的基本概念:

所谓的映射,就是将当前数组的内容
一一对应,生成一个新的数组
数据组中,数据单元的个数,与之前数组的单元个数一样
数值的数值,与之前的数值,可以不一样

      var arr = [1,2,3,4,5,6];
      var res = arr.map(function(v){
     // return 的是 新数组中的数值,与原始数组中的数值的映射关系
     // 当前设定的是 乘2的关系
        return v *= 2;
        })
       console.log(res);

4. filter() 过滤数组

将符合条件的数据作为返回值
语法:
数组.filter(function(value,key,array){操作的程序})

      var arr = [1,2,3,4,5,6];
      var res = arr.filter(function(v){
          if(v >= 3){
             return v;
          }
      })
      console.log(res);

5. some() 数组中是否有一个满足条件的数据

有一个就行
语法: 数组.some(function(value,key.arr){})

    var arr = [1,2,3,4,5,6];
        var res1 = arr.some(function(v){
        return v >= 6;
    })
    console.log(res1);

6. every() 数值中所有的数据,是否都满足条件

必须所有
语法: 数组.every(function(value,key.arr){})

    var res2 = arr.every(function(v){
        return v >= 6;
    })
    console.log(res2);   

Math方法

<style>
        span{
            color: red;
        }
    </style>
</head>
<body>

    <span id="s">我要执行随机字体颜色</span>

    <div id="d">我要改变背景颜色</div>

    <script>
        // Math方法,是JavaScript提供的方法,可以直接使用

        // 1, 随机数  Math.random()
        // 随机生成一个 0 - 1 的小数,可以是0,不会是 1
        // 生成 a - b 范围的数值 a 小 b 大
        // 公式  parseInt(Math.random()* (b+1-a) + a );

        // 应用:设定随机颜色等
        // 因为 Math.random() 只能是随机数值
        // 因此使用 rgb()语法来设定 颜色数值
        // 数值范围是 0-255 ; 
        // rgb(数值1,数值2,数值3)
        // 需要3个随机数值,范围是 0-255

        // 也可以定义随机的大小单位
        // 随机数值 拼接 px 单位
        
        // 定义3个随机数,数值范围是0-255
        // var c1 = parseInt(Math.random()*256);
        // var c2 = parseInt(Math.random()*256);
        // var c3 = parseInt(Math.random()*256);

        // JavaScript中DOM操作,操作标签样式的固定语法
        // 标签.style.属性 = 属性值
        // s.style.color = `rgb(${c1},${c2},${c3})`;

        // 生成随机颜色的程序,写成函数的形式
        // 这个函数的返回值是 rgb(随机颜色) 字符串
        // 颜色的数值范围是固定的 0 - 255
        function setColor(){
            var c1 = parseInt(Math.random()*256);
            var c2 = parseInt(Math.random()*256);
            var c3 = parseInt(Math.random()*256);
            // 将随机颜色,定义为rgb字符串,作为返回值
            // 作为设定颜色的属性值
            return `rgb(${c1},${c2},${c3})`;
        }

        // 定义随机大小函数
        // 定义两个参数,a是较小值,b是较大值
        // 通过参数,设定随机数值范围
        function setNum(a,b){
            // 做容错处理,确保 a < b
            if(a>b){
                var m = 0;
                m = a;
                a = b; 
                b = m;
            }
            // 随机数值要拼接px单位
            return parseInt(Math.random()*(b+1-a) + a) + 'px';
        }

        // 定时器不用掌握,让你们瞅瞅的内容
        // 每间隔一个设定事件,自动执行随机改变颜色
        // 定时器,后面会讲,现在先让你瞅瞅

        // 语法:
        // setInterval( function(){要执行的程序} , 时间 )
        // 要执行的程序,必须是函数形式
        // 设定的时间 单位是毫秒 1秒 = 1000毫秒

        // 如果是不同的事件间隔,必须设定两个定时器,设定的间隔时间不同

        setInterval( function(){
            // 改变id是s,也就是span标签的字体颜色
            s.style.color = setColor() ;
            // 字体大小,JavaScript中,不支持 减号 font-size
            // font-size 必须写成 fontSize 驼峰命名法
            // 所有带有 -减号的属性值,都要写成小驼峰命名法
            s.style.fontSize = setNum(50,100);
            // 改变id是d,也就是div标签的背景颜色
            d.style.background = setColor() ;
            // 定义div标签的宽度高度,并且设定范围
            d.style.width = setNum(200,300);
            d.style.height = setNum(200,300);
        } , 1000)
 </script>