JavaScript基础（三）

最新推荐文章于 2023-05-09 19:08:55 发布

OverTheMoon丶

最新推荐文章于 2023-05-09 19:08:55 发布

阅读量135

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Maxxxxx_Moon/article/details/113607621

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等
属性：事物的特征，在对象中用属性来表示
方法：事物的行为，在对象中用方法来表示
创建对象的三种方式：

利用字面量创建对象
利用new Object创建对象
利用构造函数创建对象

利用字面量创建对象

对象字面量：就是花括号{ }里面包含了表达这个具体事物（对象）的属性和方法

var obj = {}; //创建了一个空的对象
var obj = {
            uname: max,
            age: 18,
            sayHi: function () {
                console.log('hi');
            }
        }

属性或方法采用键值对的形式，属性名：属性值
多个属性或者方法中间用逗号隔开
方法冒号后面跟的是一个匿名函数
调用对象的属性：对象名.属性名
调用属性的另一种方式：对象名[‘属性名’]
调用对象的方法：对象名.方法名

利用new Object创建对象

var obj = new Object();//创建了一个空的对象
        obj.uname = 'max';
        obj.age = 18;
        obj.sayHi = function () {
            console.log('hi');
        }

利用构造函数创建对象

为什么需要使用构造函数
因为我们前面的两种创建对象的方式一次只能创建一个对象
构造函数就是把对象里面一些相同的属性和方法抽象出来封装到函数里面
构造函数的语法格式

function 构造函数名（）{
this.属性 = 值；
this.方法 = function（）{}
}
new 构造函数名（）；//调用
var 对象名=new 构造函数名（）；//调用函数返回的是一个对象
对象名.方法（）；

1.构造函数名字首字母要大写
2.构造函数不需要return就可以返回结果
3.调用构造函数必须使用new
4.我们只要new 构造函数名（）调用函数就创建了一个对象
5.属性和方法前面必须添加this

构造函数和对象

通过 new 函数名来实例化对象的函数叫构造函数
构造函数是泛指的某一大类，它类似于类（class）
对象是特指一个具体的事物
利用构造函数创建对象的过程我们也称为对象的实例化

new关键字执行过程

当遇到new关键字时，在内存中创建一个空的对象
构造函数中的this会指向刚才创建的空对象
执行构造函数里面的代码，给这个空对象添加属性和方法
返回这个对象（所以构造函数里面不需要return）

遍历对象

for…in语句用于对数组或者对象的属性进行循环操作（用于对象是最合适的）
语法

for （变量 in 对象）{
}

例子：

for （var k in obj）{
console.log（k）;//k 变量输出得到是属性名
console.log（obj[k]）;//obj[k] 得到的是属性值
}
//我们使用for in语句时，里面的变量我们习惯写成k或者key

小结

对象的本质是一组无序的相关属性和方法的集合

内置对象

JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者是最基本而必要的功能（属性和方法）

Math对象

Math对象不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可
可通过MDN来查询需要使用的对象
console.log(Math.abs(’-1’));// 输出结果1，隐式转换会把字符串型-1转换为数字型
Math.round( ) 四舍五入，其他数字都是四舍五入，但是.5特殊，它往大了取
随机数方法random（）
1.返回一个随机的浮点数 0<= x <1
2.这个方法里面不跟参数
3.代码验证
4.得到两个数之间的随机整数并且包含这两个整数

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}

Date日期对象

日期对象是一个构造函数，必须使用new来调用创建
如果没有参数，返回当前系统的当前时间
参数的常用写法
1.数字型 2019,10,01
注意：月份0-11，所以输出结果是2019,11,01
2.字符串型 ‘2019-10-1 8:8:8’(常用)

日期格式化

获得Date总的毫秒数

不是当前时间的毫秒数(时间戳)，而是距离1970年1月1号过了多少毫秒数
通过valueOf（）或者getTime()
简单写法：（最常用的写法）

var date = +new Date();//若括号内的内容为空，返回的时当前的总毫秒数；若不为空，返回括号内内容的总毫秒数
console.log(date);

H5新增的获得总的毫秒数

console.log(Date.now());

案例：倒计时效果

用时间戳来做，用户输入时间总的毫秒数减去现在时间的总毫秒数，就是剩余时间的总毫秒数
把剩余时间总的毫秒数转换为天、时、分、秒
1秒 = 1000毫秒
补“零”操作：

h = h < 10 ? '0'+d : d;

数组对象的创建

字面量方式
new Array（）

var arr = new Array（）;//创建了一个空的数组
var arr = new Array(2);//创建了一个长度为2的空数组
var arr = new Array(2,3);//创建了一个长度为2的数组，数组元素为2和3

检测是否为数组

instanceof 运算符它可以用来检测是否为数组
Array.isArray(参数) H5新增的方法 ie9以上版本才支持

var arr = [];
var obj = {};
console.log(arr instanceof Array);//true
console.log(obj instanceof Array);//false
console.log(Array.isArray(arr));//true

添加删除数组元素

方法名	说明	返回值
push（参数1…）	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop（）	删除数组最后一个元素，把数组长度减1，无参数，修改原数组	返回它删除的元素的值
unshift（参数1…）	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift（）	删除数组的第一个元素，数组长度减1，无参数，修改原数组	并返回第一个元素的值

var arr = [1,2,3];
console.log(arr.push(4,'pink'));//返回的结果是新数组的长度为5
console.log(arr.unshift('red'));
console.log(arr.pop());//返回删除的元素的值pink

数组排序

方法名	说明	是否修改原数组
reverse（）	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组返回新数组
sort（）	对数组的元素进行排序，无参数	该方法会改变原来的数组返回新数组

sort（）方法是类似字符串的排序规则进行排序的

var arr = [13, 4, 77, 1, 7];
arr.sort(function(a , b) {
       return a - b;//a - b 是升序；b-a是降序，解决了sort（）只能进行个位数的排序的问题
 });
console.log(arr);//1,4,7,13,77

数组索引方法

方法名	说明	返回值
indexOf（）	数组中查找给定元素，从前往后找	如果存在，返回索引号；否则，返回-1
lastIndexOf（）	数组中查找给定元素，从后面查找	如果存在，返回索引号；否则，返回-1

var arr = [13, 4, 77, 1, 7];
console.log(arr.indexOf(7));//4

如果数组中存在多个给定元素，它只返回第一个满足条件的索引号

数组去重案例

算法：遍历旧数组，用旧数组元素和新数组元素比较，若就数组元素在新数组里没有，则添加；否则，不添加

 function unique(arr) {
           var new_arr = [];
            for (var i = 0; i < arr.length; i++) {
               if (new_arr.indexOf(arr[i]) === -1) {
                        new_arr.push(arr[i]);
                    }
                }// ===表示数据类型和数值都相等
                return new_arr;
            }
var demo = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
 console.log(unique(demo));

数组转换为字符串

方法名	说明	返回值
toString（）	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join（‘分隔符’）	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

 var arr = [1,2,3];
 console.log(arr.toString(arr));//1，2，3
 var arr = ['red','blue','yellow'];
 console.log(arr.join('-'));//red-blue-yellow 括号内不写默认是逗号‘，’

其他

方法名	说明	返回值
concat（）	连接两个或多个数组，不影响原数组	返回一个新的数组
slice（）	数组截取slice（begin，end），包含begin，不包含end	返回被截取项目的新数组
splice（）	数组删除splice（第几个开始，要删除个数）	返回被删除项目的新数组注意，这个会影响原数组

基本包装类型

基本包装类型：就是把简单数据类型包装成为了复杂数据类型，这样基本数据类型就有了属性和方法
三个基本包装类型：String、Number、Boolean

    var str = 'andy';
    console.log(str.length);
    /*
    按照道理，基本数据类型是没有属性和方法的，而对象和复杂数据类型才有属性和方法，
    但上面代码却可以，是因为js会把基本数据类型包装成为复杂数据类型
    1.生成临时变量，把简单数据类型包装为复杂数据类型
    var temp = new String('andy');
    2.复制给我们声明的字符变量
    str = temp;
    3.销毁临时变量
    temp = null；
    */

字符串不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变量，内存中新开辟了一个内存空间
因此，不要大量拼接字符串

根据字符返回位置

字符串的所有方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串

方法名	说明
indexOf(‘要查找的字符’，开始的位置)	返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号
lastindexOf()	从后往前找，只找第一个匹配的

indexOf中的开始的位置可有可没有

根据位置返回字符（重点）

方法名	说明	使用
charAt(index)	返回指定位置的字符（index字符串的索引号）	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码（index索引号）	str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML5，IE8+支持和charAt（）等效

charCodeAt(index) 可以用来判断用户按下了哪个键位

字符串操作方法（重点）—拼接截取字符串

方法名	说明
concat（str1,str2,str3…）	concat（）方法用于连接两个或多个字符串，拼接字符串，等效于+，+更常用
substr(start,length)	从start位置开始（索引号），length取的个数重点！
slice(start,end)	从start位置开始，截取到end位置，end取不到（他们俩都是索引号）
substring(start,end)	从start位置开始，截取到end位置，end取不到基本和slice相同但是不接受负值

替换字符串以及转换为数组

替换字符串 replace （‘被替换的字符’，‘替换的字符’）

var str = 'andy';
console.log(str.replace('n','x'));//axdy

var str = 'andyasxnh';
console.log(str.replace('n','x'));//axdyasxnh 它只会替换第一个字符，一次只能替换一个

将字符转换为数组 split（‘分隔符’）前面学过join把数组转换为字符串

var str = 'red*blue*pink';
console.log(str.split('*'));//(3) ["red", "blue", "pink"]

JavaScript简单数据类型和复杂数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

值类型：简单数据类型/基本数据类型，在存储变量中存储的是值本身，因此叫做值类型，如string、number、boolean、undefined、null
null比较特殊，返回的是一个空的对象 object
引用类型：复杂数据类型，在存储变量中存储的仅仅是地址（引用），因此叫做引用数据类型，通过new关键字创建的对象（系统对象、自定义对象），如object、Array、Date等

堆和栈

堆栈空间分配区别：

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等，其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面
简单数据类型存放到栈里面，在栈里面开辟一个空间，里面存放的是值
堆（操作系统）：存放复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；复杂数据类型存放到堆里面
复杂数据类型，首先在栈里面存放地址（十六进制表示，计算机自动分配），然后这个地址指向堆里面的数据
注意：JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于学习其他语言

简单数据类型传参

函数的形参也可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里面的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量

复杂数据类型传参

函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的时同一个地址，所以操作的是同一个对象

OverTheMoon丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础（三）

JavaScript对象在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等属性：事物的特征，在对象中用属性来表示方法：事物的行为，在对象中用方法来表示创建对象的三种方式：利用字面量创建对象利用new Object创建对象利用构造函数创建对象利用字面量创建对象对象字面量：就是花括号{ }里面包含了表达这个具体事物（对象）的属性和方法var obj = {}; //创建了一个空的对象var obj = {
复制链接

扫一扫