ECMAScript1.4 对象 | 简单数据类型与复杂数据类型 | 内置对象 | 基本包装类型 | String

对象

函数和对象的区别:

函数:封装代码

对象:封装属性和方法

创建对象的方法:

1,对象字面量{}

// 模拟创建一只dog

var dog = {
    // 属性
    name: 'puppy',
    age: 3,
    type: '牧羊犬',
    color: 'yello',
    // 方法
    bark: function () {
        console.log(this.name + ':汪汪');
    },
    eat: function () {
        console.log(this.name + ':在啃饲料');
    }
}
View Code

2,new Object()

Object是一个构造函数,首字母大写,不是普通函数。

用new的方式来调用构造函数,调用构造函数必须通过new来调用!

// 创建一个空的对象
var hero = new Object();

// 添加属性
hero.name = 'kay';
hero.age = 18;

// 添加方法
hero.attck = function () {
    console.log(this.name + ':要打人了');
}
View Code

属于对象的函数叫方法,独立存在的叫函数。

对象字面量是这种方式的缩写,对象字面量整体的运行过程相当于以上代码一样。

new调用构造函数,会在内存中创建一个对象!

而我们调用一个普通函数是不会创建对象的!

new Object完后创建了一个对象,通过hero变量来接收这个对象。

可以随时增加属性和方法,这是javascript的动态特性。

 3,工厂函数

function createHero(name, age) {
    // 生成一个空对象
    var hero = new Object();
    hero.name = name;
    hero.age = age;
    hero.attck = function () {
        console.log(this.name + ':打人了');
    }
    // 返回这个对象
    return hero;
}

// 接收这个对象
var hero = createHero('kay', 18);

// 访问方法
hero.attck();
View Code

4,自定义构造函数:创建一个自己的构造函数

// 构造函数名首字母大写
function Hero(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        console.log(this.name + ':跑了');
    }
}
// 生成对象
var hero1 = new Hero('kay', 18);
var hero2 = new Hero('andy', 18);

// 访问属性
console.log(hero1.name);

// 访问方法
hero2.run();
View Code

访问属性与方法:

// 访问属性的两种方法
console.log(hero.name);
console.log(hero['name']);

// 访问方法
hero.attck();
View Code

new关键字的执行过程:

1,在内存中创建了一个空的对象。

2,让构造函数中的this指向刚刚创建的对象。

3,执行构造函数,在构造函数中设置属性和方法。

4,返回了当前对象

this出现在以下位置,分别代表什么:

// 1在函数中 ---- 指向window
function test() {
    console.log(this);
} 
test();    // window

// 2 在方法中 ----- 指向这个方法所属的对象
var hero = {
    name: 'kay',
    age: 18,
    attck: function () {
        console.log(this.name + ':打人了');
    }
}
hero.attck();    //  kay:打人了

// 3 在构造函数中 ----- 指向构造函数创建的对象
function Hero(name) {
    this.name = name;
    this.attck = function () {
        console.log(this.name + ':打人了');
    }
}
var hero1 = new Hero('kay');
hero1.attck();    // kay:打人了
View Code

遍历对象和删除对象的属性:

// 创建对象
var hero = {
    name: 'kay',
    age: 18,
    sex: 'boy'
}
// 遍历对象
for (var key in hero) {
    console.log(hero[key]);
}
遍历对象
var hero = {
    name: 'kay',
    age: 18,
    sex: 'boy',
    attck: function () {
        console.log(this.name + ':跑了');
    }
}

delete hero.name;
删除属性|方法
var params = {};
// 动态增加属性
for (var i = 1; i <= 10; i++) {
    params['num' + i] = i;
}
console.log(params);
动态的给对象增加属性

 简单数据类型与复杂数据类型:

简单数据类型(基本数据类型)如以下:

Number String Boolean Undefined Null

复杂数据类型(引用类型):

Object 数组(Array)

数据在内存中的存储:

 简单数据类型存储在栈上

var n1 = 666;

var n2 = n1;

在栈上开辟一块空间,存储666(666转换成十六进制存放在这块空间)并把变量n1指向这块区域,当我们修改n1的值是不会影响n2的值的,这就是简单数据类型。

复杂数据类型存储在堆上

数组可以当做是对象

var arr1 = [12, 24, 66, 88];

var arr2 = arr1;

在堆上开辟一块空间存储arr1这个对象,并且还在栈上开辟一块空间存储这个对象堆上的内存地址,再把变量arr1指向栈上新开辟的这块空间。

接着再新开辟一块空间,然后把arr1指向堆上的内存地址复制一份赋给了arr2,此时arr1和arr2的堆上地址都是指向同一个对象,当修改arr1的数组,arr2也会跟着改变!

js没有栈和堆的概念,通过栈和堆的方式让我们容易理解代码的一些执行方式

function Params(name, age) {
    this.name = name;
    this.age = age;
}
// 创建对象
var p1 = new Params('kay', 18);
// 都是指向同一个对象
var p2 = p1;

p1.name = 'andy';
console.log(p2.name);    // andy
理解示例1
function Person(name, age) {
    this.name = name;
    this.age = age;
}

var p1 = new Person('kay', 18);

function fn (person) {
    person.name = 'jack';
}

fn(p1);

console.log(p1.name);    // jack
理解示例2
// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

var p1 = new Person('kay', 18);

function fn(person) {
    person.name = 'andy';
    // 生成对象
    person = new Person('jack', 18);
    console.log(person.name);    // jack
}

fn(p1);
// 访问属性
console.log(p1.name);    // andy
理解示例3

 

内置对象:学习内置对象,就是学习内置对象所提供的属性和方法

javaScript的组成:ECMAScript BOM DOM

ECMAScript:有变量,数据类型,操作符,流程控制语句(判断和循环),数组,对象,构造函数,内置对象。

javascript中有三种对象:

自定义对象:这个对象的属性和方法我们自己定义。

内置对象:系统自带的,已经提供好了的对象。

浏览器对象:不属于ECMAScript

 Math对象:

Math对象不是构造函数,它具有数学常数和函数的属性和方法。

都是以静态成员的方式提供跟数学相关的运算来找Math中的成员(求绝对值,取整)。

Math.PI                // 圆周率
Math.random()        // 生成随机数
Math.floor()            // 向下取整
Math.ceil()              // 向下取整
Math.round()          // 四舍五入
Math.abs()             // 求绝对值
Math.sin()              // 正弦
Math.cos()             // 余弦
Math.max()            // 求最大值
Math.min()             // 求最小值
Math.pow()            // 求次幂
Math.sqrt()            // 求平方根
属性和方法

 job:求10到20之间的随机数

function random(min, max) {
    // 返回随机数
    return Math.floor(Math.random() * (max - min + 1) + min);
}

console.log(random(10, 20));
job

job:随机生成颜色RGB [0到255]

// 生成随机数
function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min) ;
}
// 颜色拼接
function getRGB(min, max) {
    var color1 = random(min, max),
          color2 = random(min, max),
          color3 = random(min, max);
    return 'RGB:(' + color1 + ',' + color2 + ',' + color3 +')';
}

console.log(getRGB(0, 255));
job

job:模拟实现max()和min()

// 创建对象
var myMath = {
    max: function () {
        // 假设第一个就是最大
        max = arguments[0];
        // 遍历这个伪数组
        for (var i = 1; i < arguments.length; i++) {
            // 比较大小
            if (max < arguments[i]) {
                // 重新赋值
                max = arguments[i];
            }
        }
        return max;
    },
    min: function () {
        // 假设第一个就是最小
        min = arguments[0];
        // 遍历这个伪数组
        for (var i = 1;  i < arguments.length; i++) {
            // 比较大小
            if (min > arguments[i]) {
                // 重新赋值
                min = arguments[i];
            }
        }
        return min;
    }
}
// 找最大值
console.log(myMath.max(12, 67, 88, 22, 99));    // 99
// 找最小值
console.log(myMath.min(12, 2, 45, 1, 78, 88));    // 1
job

 

Date对象

这是一个构造函数,要用new来创建。是实例成员

GMT:格林威治时间,世界标准

GMT + 0800 (中国标准时间):比英国快8个小时

Date构造函数的几种用法:

1,空构造函数

// 返回当前时间
var time = new Date();
console.log(time);    // Mon Apr 08 2019 23:28:11 GMT+0800 (中国标准时间)
test

2,构造函数中传入毫秒值

// 从1970年一月一日08:00:00开始计算
var time = new Date(88888888);

console.log(time);    // Fri Jan 02 1970 08:41:28 GMT+0800 (中国标准时间)
test

3,传入日期形式的字符串

var time = new Date('2019-1-1 8:8:8');

console.log(time);    // Tue Jan 01 2019 08:08:08 GMT+0800 (中国标准时间)
test

4,传入数字

var time = new Date(2019, 2);

console.log(time);    // Fri Mar 01 2019 00:00:00 GMT+0800 (中国标准时间)
test
 获取现在离1970年的毫秒值的几种方法:

1,.valueOf()

var d = new Date();

console.log(d.valueOf());    // 1554738512959
test

2,.getTime()

var d = new Date();

console.log(d.getTime());    // 1554738640686
test

3,Date.now()

var d = Date.now();
console.log(d);    // 1554738724701
test

4,+ new Date()

var d = + new Date();
console.log(d);    // 1554738811789
test
 Date的方法:
.toString()    // 以字符串形式

.toDateString()  // 只有日期

.toTimeString()  // 只有时间

.toLocaleDateString()  // 以本地电脑的日期格式

.toLocaleTimeString()  // 以本地电脑的时间格式

获取日期的指定部分:
.getMilliseconds()  // 获取毫秒值
.getSeconds()    // 获取秒
.getMinutes()    // 获取分钟
.getHours()       // 获取小时
.getDate()        // 获取当月的第几天
.getDay()         // 获取星期几
.getMonth()     // 获取月份  这里的1月份是从0开始!

.getFullYear()    // 获取年份 
方法

 job:格式化日期对象,返回yyyy-MM-dd HH:mm:ss的形式

// 定义函数
function formatDate(date) {
    // 当传入的不是Date对象
    if (!(date instanceof Date)) {
        // 输出错误信息
        console.error('date不是时间对象');
    }
    //
    var year = date.getFullYear(),
        // 月 由于一月份是从0开始的,所有要加一
        month = date.getMonth() + 1,
        // 当月的第几日
        days = date.getDate(),
        // 小时
        hour = date.getHours(),
        // 分钟
        minut = date.getMinutes(),
        //
        secon = date.getSeconds();
            
        // 三元运算:当小于10,在前面加0
        month = month < 10 ? '0' + month : month;
        days = days < 10 ? '0' + days : days;
        hour = hour < 10 ? '0' + hour : hour;
        minut = minut < 10 ? '0' + minut : minut;
        secon = secon < 10 ? '0' + secon : secon;
    // 拼接
    return year + '-' + month + '-' + days + ' ' + hour + ':' + minut + ':' + secon;
}

// 生成对象
var d = new Date();
// 传入并打印接收的
console.log(formatDate(d));

job
job

 job:计算时间差,返回相差的天/时/分/秒

// 定义函数
    function getInterval(start, end) {
        // 两个日期对象相减,因为它们都是调用它们的valueOf方法进行相减
        var interval = end - start;
        // 1秒等于1000毫秒
        interval /= 1000;
        // 声明多个变量
        var days, hour, minut, secon;
        //
        days= Math.floor(interval / 60 / 60 / 24);
        // 小时
        hour= Math.floor(interval / 60 / 60 % 24);
        // 分钟
        minut = Math.floor(interval / 60 % 60);
        //
        secon = Math.floor(interval % 60);
    // 返回多个值
    return {
        days: days,
        hours: hour,
        minutes: minut,
        seconds: secon
    }
}

// 当前日期
var d1 = new Date();
// 指定日期
var d2 = new Date(2019, 8, 1);
// 返回一个对象
console.log(getInterval(d1, d2));
job

 Array(数组)对象: 数组也是对象

创建数组:

1,字面量: [ ]

2,构造函数Array:new Array()

判断是不是数组:返回值(true | false)

1,instanceof

2,Array.isArray()  // 有浏览器兼容性问题

清空数组:

1,arr = []

2,arr.length = 0

3,arr.splice(0, arr.length)

数组的方法:

.toString()        // 转换成字符串,逗号分隔每一项
.valueOf()        // 返回数组本身

// 位置:每找到返回-1,找到就返回位置
.indexOf()        // 元素的位置。参数里的索引必须在前面(索引,'元素')索引可以省略
.lastIndexOf()  // 从后往前找元素的位置

// 栈操作:先进后出
.push()            // 追加元素
.pop()              // 取走最后元素

// 队列操作:先进先出
.shift()            // 取走第一个
.unshift()        // 第一个元素前面插入元素

// 排序
.reverse()        // 翻转数组
.sort()             // 从小到大排序

// 操作
.concat()        // 把参数拼接到当前数组里
.slice()           // 从当前数组中截取一个新数组,不影响原数组。参数start 从0开始,end 从1开始
.splice()        // 替换或删除当前数组的某项。参数start,deleteCount,options(要替换的项目)。

// 迭代方法:迭代意思就是自带遍历。html5支持
every()
filter()
forEach()
map()
some()

// 将数组的所有元素连接成一个字符串
.join()            // 带参数的话,就以这个参数去分割数组中的元素,返回一个字符串
方法

 sort方法:

var arr = [79, 20, 80, 45, 108];
// 括号不写参数,默认以字符编码,从小到大排序
arr.sort();
console.log(arr);    // [108, 20, 45, 79, 80]
用法1
var arr = [79, 108, 23, 2, 32, 28];
arr.sort(function (a, b) {
    // 从小到大排
    //return a - b;
    // 从大到小排
    return b - a;
})

console.log(arr);    // [108, 79, 32, 28, 23, 2]
用法2

job:模拟sort方法内部实现

// 定义sort函数。(冒泡排序)
function sort(arr, fn) {
    // 外层控制趟数,每执行完一趟就排好一个元素
    for (var i = 0; i < arr.length; i++) {
        // 假设已排好序
        var isSort = true;
        // 内层循环控制比较次数
        for (var j = 0; j < arr.length - 1 - i; j++) {
            // 比较
            if (fn(arr[j], arr[j + 1]) > 0) {
                // 还未排好序
                isSort = false;
                // 交换位置
                var tmp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = tmp;
            }
        }
        // 判断是否排好序
        if (isSort) {
            // 终止循环
            break;
        }
    }
}

var arr = [79, 108, 2, 32, 1, 45, 17];
// 传入数组和函数
sort(arr, function(a, b) {
    // 从小到大排
    //return a - b;
    // 从大到小
    return b - a;
});
console.log(arr);

// 建议使用断点形式查看代码执行过程比较容易理解!
job

 filter迭代方法:

// 将大于2000的数放到一个新数组里。但不影响原数组

var numArr = [1200, 2800, 1500, 2000, 2200, 2500];

// filter的传入的参数是一个函数,而这个函数必须跟一个形参
var newArr = numArr.filter(function (item) {
    // 比较
    return item > 2000;
});

console.log(newArr);
test

 

job:将一个字符串数组的元素的顺序进行反转

var strArr = ['A', 'B', 'C', 'D', 'E'];
// 使用reverse翻转
strArr.reverse();
console.log(strArr);
方法1
var strArr = ['A', 'B', 'C', 'D', 'E'];
// 只需要遍历到一半的元素
for (var i = 0; i < Math.floor(strArr.length / 2); i++) {
    // 交换位置
    var tmp = strArr[i];
    strArr[i] = strArr[strArr.length -1 - i];
    strArr[strArr.length - 1 - i] = tmp;
}
console.log(strArr);    // ["E", "D", "C", "B", "A"]
方法2

 job:找到数组中某元素出现的位置

// 找到数组中每一个o出现的位置

var arr = ['b', 'a', 'o', 'g', 'o', 'o', 'u', 'o'];

// 位置
index = -1;
// 先执行一遍循环体再判断条件
do {
    // 在index+1的位置寻找'o'
    index = arr.indexOf('o', index + 1);
    // 判断是否不等于-1
    if (index !== -1) {
        // 打印位置
        console.log(index);
    }
} while (index !== -1);
job

基本包装类型

简单类型:没有属性和方法

对象:才有属性和方法

基本类型包装成复杂类型:

在javascript中有三种基本包装类型:String Number Boolean

基本类型使用方法:

系统会自动转换成基本包装类型

var s1 = 'kay jack andy';
// 基本类型调用length方法
var length = s1.length;
console.log(length);

// 内部执行过程

// 先创建一个临时对象
var s1 = new String('kay jack andy');
// 调用方法。调用完方法之后自动销毁
var length = s1.length;

console.log(length);
String
var n = '888';

var num = Number(n);

console.log(typeof num);    // number
//
var obj = new Number(n);

console.log(typeof obj);    // Object
Number
// 生成对象
var obj = new Boolean(false);
// 之前讲过会转换为false的五种情况(是不包含Object)
var result = obj && true;
//
console.log(result);    // true
Boolean

 String对象

字符串的所有方法都不会修改原字符串,因为字符串的不可变性,而会返回一个新字符串!

.charAt()            // 指定位置处的字符
str[]                  // 指定位置处的字符。html5的
.charCodeAt()    // 指定位置处的ASCII字符编码

// 字符操作
.concat()            // 把参数拼接到当前字符串
.slice()               // 截取。起始位置,结束位置
.substring()        // 截取。起始位置,结束位置
.substr()            // 截取。指定位置,个数

// 位置
.indexOf()            // 某字符所在位置。从前往后
.lastIndexOf()        // 某字符所在位置。从后往前

// 去除空白
.trim()            // 去除两边空白

// 大小写转换
.toUpperCase()        // 转换为大写
.toLowerCase()        // 转换为小写

// 其他
.search()            // 查找字符所在位置。支持正则
.replace()            // 字符替换
.split()                // 切割。以字符进行,返回一个数组
方法

 

posted @ 2019-04-08 14:54  Kay_xs  阅读(276)  评论(0编辑  收藏  举报