首页 > 其他分享 >前端入门一之JS对象、字符串对象、数组对象、Data()对象等

前端入门一之JS对象、字符串对象、数组对象、Data()对象等

时间：2024-11-08 20:51:32浏览次数：3  
标签：console log 对象 一之 JS 数组 var new

前言

  • JS是前端三件套之一，也是核心，本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点，这篇是JS常用的内置对象;
  • 这篇文章是本人大一学习前端的笔记；
  • 欢迎点赞 + 收藏 + 关注，本人将会持续更新。

文章目录

目录总览

在这里插入图片描述

1、对象

  • 对象简单来说，是指一个具体事物，也是一个数据类型（object）
  • 对象由属性和方法组成
    • 属性：事务的特征，常用名词（变量）
    • 方法：事物的行为，常用动词（封装函数）
1.1、创建对象（object）
  • 字面量创建对象
  • new Object创建对象
  • 构造函数
利用字面量创建对象
  • 键：相当于属性名
  • 值：相当于属性值，可以说任意类型（数字类型、字符串类型、布尔类型、函数类型等）
var star = {
    name: 'pink',
    age: 18,
    sex: 'man'
    sayHi: function() {
        alert("hello world");
    }
}
对象的调用
  • 对象.属性名
  • 对象[‘属性名’]
  • 方法的调用：对象.方法名()
变量、属性、函数、方法总结
  • 变量：单独声明赋值，单独存在
  • 属性：对象里面的变量称为属性，不需要声明
  • 函数：单独存在，通过==“函数名（）”==的方式应用
  • 方法：运用：对象.方法名（）
利用new Object创建对象
  • var 对象名 = new Object( );
  • 使用：对象.属性=值；
var obj = new Object();
obj.name = 'mark';
obj.age = 18;
obj.skill = function() {
    console.log("独创太极拳");
    //console.log(obj['sex']);
    //console.log(obj.skill());
}
利用构建函数方法创建对象

注意两点：

  • 构造函数用于创建某一类对象，其首字母要大写
  • 构建函数要和new一起使用才有意义
//构建函数语法
function 构建函数名() {
    this.属性 = 值;
    this.方法 = function() {           //注意方法的写法
        
    }
}
new 构造函数名();
//两个构造函数名一样
//new 构造函数名()，返回一个对象

//1、构造函数不需要写return
//2.必须加this
function Star(name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
        
    }
}
var ldh = new Star('ldh',18,'man');
ldh.sing(sang);
关键字new做的四件事情
  1. 在内存中创建一个新的空对象。
  2. 让this指向这个新的对象
  3. 指向构造函数里面的代码，给这个新对象添加属性方法
  4. 返回这个新对象（所以构造函数里面不需要return）
1.2、遍历对象的属性
  • for……in
for(var k in obj) {
    console.log(k);       //这里的k是属性名
    console.log(obj[k]);  //这里的obj[k]是属性值
}

2、内置都对象

  • js中对象分三种：自定义对象、内置对象、浏览器对象
  • js提供了多个内置对象：Math、Data、Array、String等
2.1、查文档
Math对象
  • 注意：Math不是一个构造函数，所以不需要new
Math.PI						//圆周率
Math.floor()				//向下取整
Math.ceil()					//向上取整
Math.round()				//四舍五入，就近取整，   但是要注意                     -3.5     看结果是    -3(往大的取)
Math.abs()					//绝对值
Math.max()/Math.min() 		//求最大值和最小值

注意：上面的方法必须代括号

console.log(Math.PI);
console.log(Math.max(1,5,3));

练习：封装一个属于自己的数学对象（有PI 、最大值、最小值）：

var myMath = {
    PI: 2.131592653,
    max: function() {
        var max = arguments[0];
        for(var i = 1;i < arfuments.length; i++) {
            if(argumets[i] > max) {
                max = arguments[i];
            }
        }
    }
    return max;
},
    min: function() {
        var min = arguments[0];
        for(var i = 1;i < arfuments.length; i++) {
            if(argumets[i] < min) {
                min = arguments[i];
            }
        }
        return min;
    }
}
Math取整方法

注意点：

  • Math.round(), 如果是 .5 时，是往大了取
Math取绝对值
  • Math.abs( ) 绝对值
    • 会有一个隐形转换，把字符串型转化为数字型
随机数方法random()
  • 取值范围： [0,1)
//等到两个数之间的随机数，并且包含这两个整数
function getRandom(min,max) {
    return Math.floor(Math.randon()*(max - min +1) + min);
}
console.log(getRandom(10,20));

练习：随机点名

var arr = ['张三' , '李四' , '王五'];
console.log(arr[getRandom(0,arr.length-1)]);

4、Date()日期对象

  • 注意：Data和Math对象不一样，他是一个构造函数，需要new后才能使用
  • Data 实例主要来处理日期和时间
4.1、Data()方法的使用
4.1.1、获取当前时间
var now = new Date();        //这一步必须写
console.log(now);
  • 如果Data( )不写参数，就返回当前时间
  • 如果Data( )里面写参数，就返回括号里面输入的时间
//常用写法，数字型 2019，10，1   字符串型 '2023-1-19 14：17：50'
//如果Data() 里面写参数，就返回括号里面输入的时间
var data = new Date('2023-1-19')     //这一步必须写
console.log(date);
4.2、日期格式化

目的：获取 2019-8-8 8:8:8 格式的日期

//首先
var data = new Date();
/*
方法名	说明	代码
getFullYear()	获取当年				
getMonth()	获取当月(0-11)			
getDate()	获取当天日期					
getDay()	获取星期几(周日0到周六6)		
getHours()	获取当前小时	
getMinutes()	获取当前小时	
getSeconds()	获取当前秒钟
*/
//data.getFullYear();

//写一个2023年1月19日
function getDate() {
    var data = new Date();
    var year = data.getFullYear();
    var month = data.getMonth();
    var Data = data.getData();
    return year + '年' + month + '月' + data + '日';
}

//写一个返回时分秒的函数 格式 08：08：08
function getTime() {
    var data = new Date();
    var h = data.getHours();
    h < 10 ? '0' + h : h;
    var m = data.getMinutes();
    m < 10 ? '0' + m : m;
    var s = data.getSeconds();
    s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
4.3、获取日期的总的毫秒形式
  • data.valudeOf( ) : 得到现在距离1970.1.1总的毫秒数
  • data.getTime( ): 得到现在距离1970.1.1总的毫秒数
var data = new Date();

//1.
console.log(date.valudeOf());
console.log(date.getTime());

//2.
var date1 = +new Date();   //+new Data() 返回的就是总的毫秒数
console.log(date1);

//3.H5
console.log(Date.now());

制作一个倒计时函数

function countDown(time) {
    var nowTime = +new Date();
    var inputTime = +new Date(time);
    var times = (inputTime - nowTime) / 1000;  //times是剩余时间的秒数
    
    var d = parseInt(times / 60 / 60 / 24); //天数
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 %24); //小时
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60);  //分
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times%60);  //秒
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒'；
}

数组对象

5.1、数组对象的创建

创建数组对象的两种方式

  • 字面量创建
  • new Array()
5.2、检测是否为数组
  • instanceof 运算符，可以判断一个对象是否属于某种类型
  • Array.isArray( ) 用于判断一个对象是否为数组，是H5提供的方法
var arr = [1,2];
var obj = {};
console.log(arr instanceof Array);
console.log(Array.isArray(obj));
5.3、添加删除数组元素
//只有头插和头删，尾删和尾插
/*
push(参数1…)	末尾添加一个或多个元素，注意修改原数组	；并返回新的长度
pop()	删除数组最后一个元素	；返回它删除的元素的值
unshift(参数1…)	向数组的开头添加一个或更多元素，注意修改原数组	；并返回新的长度
shift()	删除数组的第一个元素，数组长度减1，无参数，修改原数组	；并返回第一个元素
*/


//1.push
var arr = [1,2,3];
arr.push(4);
//返回的是新数组

//2.unshift
arr.unshift('red');

//3.pop
arr.pop();  //不加参数

//4.shift
arr.shift();  //不加参数
筛选数组
//有一个包含工资的数组[1500，2000，1200，2100，1800]，要求把数组中超过2000删除，剩下的放在新数组里面
var arr = [1500，2000，1200，2100，1800];
var newArray = [];
for(var i = 0;i < arr.length;i++){
    if(arr[i] < 2000) {
        newArray.push(arr[i]);  //这样就避免了定义数组长度
    }
}
5.4、数组排序
/*
reverse()	颠倒数组中元素的顺序，无参数	；该方法会改变原来的数组，返回新数组
sort()	对数组的元素进行排序；	该方法会改变原来的数组，返回新数组
*/


//1.翻转数组
var arr = ['pink','red','blue'];
arr.reverse();  //一个数组的行为

//2.数组排序  要注意双位数
var arr1 = [1,5,3,6];
arr1.sort(function(a,b)		//记忆：返回值为复数
         {
    return b - a;   //降序排序
    return a - b;   //升序排序
})
5.5、数组索引
/*
indexOf()	数组中查找给定元素的第一个索引	; 如果存在返回索引号，如果不存在，则返回-1
lastIndexOf()	在数组的最后一个索引，从后向前索引 ;	如果存在返回索引号，如果不存在，则返回-1
*/


var arr = ['red','green','blue','pink'];
console.log(arr.indexOf('blue');  //返回为：2
数组去重

在这里插入图片描述

function unique(arr) {
    var newArr = [];
    for(var i = 0;i < arr.length;i++) {
        if(newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
5.6、数组转化为字符串
/*
toString()	把数组转换成字符串，逗号分隔每一项  ;返回一个字符串
join(‘分隔符’)	方法用于把数组中的所有元素转换为一个字符串 ; 返回一个字符串
*/


//1.toString()
var arr = [1,2,3];
console.log(arr.toString());

//2.join('分隔离')
var arr1 = ['green','blue','red'];
console.log(arr1.join());  //默认用逗号
console.log(arr1.join('-')); //green-blue-red
console.log(arr1.join('&')); //green&blue&red
5.7、其他方法
/*
concat()	连接两个或多个数组 不影响原数组 ; 返回一个新的数组(一般用’+‘)
slice()	  数组截取slice(begin,end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始要删除的个数)	; 返回被删除项目的新数组，这个会影响原数组
*/

6、字符串对象

6.1、基本包装类型

  • js中特殊引用类型：String、Number、Boolean

  • 基本包装类型：

    把简单的类型包装成复杂的数据类型，这样就有了浮渣数据类型的属性和方法

var str = 'andy';
console.log(str.length);
6.2、字符串的不可变
var a = 1;
a = 10;
  • 字符串的不可变性：指的是里面的值不可变，虽然看上去改变了内容，但是地址改变了，内存新开辟一个空间。
6.3、根据字符返回位置

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

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


var str = '改革春风吹满地，春天来了'；
console,log(str.indexOf('春'));
console,log(str.indexOf('春',3));  //索引号是从3号开始的
6.3.1、返回字符位置（案例）
//查找字符串 “abcoefoxyozzopp” 中所有o出现的位置以及次数

/*
核心算法：先查找第一个o出现的位置
然后 只要 indexOf返回的结果不是 -1 就继续往后查找
因为 indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
*/

var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
for(int i = 0;i < str.length;i++){
    console.log(index);
    num++;
    index = str.indexOf('o',index + 1);   //一定加一
}
6.4、根据位置返回字符
/*
charAt(index)	返回指定位置的字符(index字符串的索引号)	       使用：str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码(index索引号)	使用：str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML,IE8+支持和charAt()等效
*/

判断一个字符串 “abcoefoxyozzopp” 中出现次数最多的字符，并统计其次数：

/*
核心算法：利用 charAt() 遍历这个字符串
把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
遍历对象，得到最大值和该字符
<script>
    // 有一个对象 来判断是否有该属性 对象['属性名']
    var o = {
        age: 18
    }
    if (o['sex']) {
        console.log('里面有该属性');

    } else {
        console.log('没有该属性');

    }

    //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
    // o.a = 1
    // o.b = 1
    // o.c = 1
    // o.o = 4
    // 核心算法：利用 charAt() 遍历这个字符串
    // 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
    // 遍历对象，得到最大值和该字符
    var str = 'abcoefoxyozzopp';
    var o = {};
    for (var i = 0; i < str.length; i++) {
        var chars = str.charAt(i); // chars 是 字符串的每一个字符
        if (o[chars]) { // o[chars] 得到的是属性值
            o[chars]++;
        } else {
            o[chars] = 1;
        }
    }
    console.log(o);
    // 2. 遍历对象
    var max = 0;
    var ch = '';
    for (var k in o) {
        // k 得到是 属性名
        // o[k] 得到的是属性值
        if (o[k] > max) {
            max = o[k];
            ch = k;
        }
    }
    console.log(max);
    console.log('最多的字符是' + ch);
</script>



var str = 'abcoefoxyozzopp';
var o = {};
for(var i = 0;i < str.length;i++){
    var char = str.charAt(i);
    if(o[char]){
        o[char]++;
    }else {
        o[char] = 1;   //主要这个写法，这是一个重点
    }
}

//遍历对象
var max = 0;
var ch = '';
for(var k in o){
    if(o[k] > max){
        max = o[k]
        ch = k;      //  k   是属性名字
    }
}
6.5、字符串操作方法
/*
concat(str1,str2,str3…)	  concat() 方法用于连接两个或对各字符串。拼接字符串

标签：console,log,对象,一之,JS,数组,var,new	

From： https://blog.csdn.net/weixin_74085818/article/details/143634704

相关文章

  • ssm电脑配件销售系统的设计与实现+jsp
    前言随着科学技术的飞速发展，各行各业都在努力与现代先进技术接轨，通过科技手段提高自身的优势；对于电脑配件销售系统当然也不能排除在外，随着网络技术的不断成熟，带动了电脑配件销售系统，它彻底改变了过去传统的管理方式，不仅使服务管理难度变低了，还提升了管理的灵活性。这种个性......
  • JS数据结构之树和二叉树
    一、树树（Tree）是一种非常常见的数据结构，它模拟了自然界中树的结构，由节点（或称为顶点）组成，并且具有层次化的组织形式。树结构在计算机科学中广泛应用，例如在组织数据、管理信息层次以及算法设计中。1.基本概念节点（Node）根节点（Root）：树的最顶端节点，没有父节点。内部节点（InternalNod......
  • JS之正则表达式
    一、什么是正则表达式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document<......
  • 实验3 类和对象_基础编程2
    实验任务11#pragmaonce23#include<iostream>4#include<string>56usingstd::string;7usingstd::cout;89//按钮类10classButton{11public:12Button(conststring&text);13stringget_label()const;14voi......
  • 【前端知识】JS模块规范
    JS模块规范概述CommonJS规范代码示例AMD规范代码示例ES6Module规范代码示例IIFE规范代码示例全局变量代码示例CommonJS模块和ES6模块有什么区别？1.语法和声明方式2.动态和静态导入3.循环依赖4.默认导出和命名导出5.文件扩展名6.环境和应用7.工具和构......
  • js实现漂亮的注册页面（js动态注册页面）
    代码：<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>注册</title>......
  • C++ 函数对象、函数指针与Lambda表达式
    C++函数对象、函数指针与Lambda表达式函数指针函数指针（FunctionPointer）是指向函数的指针变量。它可以存储函数的地址，并通过该指针变量来调用该函数。函数指针的声明使用指针符号，指向的类型为函数的返回类型和参数列表，如int(funcPtr)(int,int);。函数指针的值可以指向相同......
  • JS实现漂亮的登录页面（氛围感页面）
    代码：<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>登录</title>......
  • JS DOM获取
    一、DOM初相识DOM简介文档对象模型（DocumentObjectModel，简称DOM），它就是一些系列编程接口，有了这些接口，就可以改变页面内容，结构和样式DOM树：  文档：一个页面就是一个文档，DOM中使用document表示元素：页面中所有的标签都是元素，DOM中使用element表示节点：网页中所有内容都是节......
  • JS正则表达式
    一、概念正则表达式（规则表达式）用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，将字符串中符合规则的内容提取出来二、创建正则方式一：构造函数创建var变量=newRegExp("正则表达式","匹配模式");参数一：规则参数二：i忽略大小写g全局匹......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99