首页 > 其他分享 >Day 26 26.1 JS进阶之JS对象

Day 26 26.1 JS进阶之JS对象

时间：2023-04-20 17:22:42浏览次数：47  
标签：26 console log 函数 arr ret JS var 进阶

JS进阶之JS对象

【一】、字符串对象

字符串创建(两种方式)

  • 变量 = “字符串”
  • 字串对象名称 = new String (字符串)
var str1="hello world"; //推荐
var str1= new String("hello word");

// 字符串对象的操作
var str = "hello"; // 这就是字符串对象
console.log(str);

// 字符串对象内置属性
// length 计算字符串的长度
console.log( str.length );

// 字符串对象内置方法
// toUpperCase();  字母大写转换
// toLowerCase();  字母小写转换

console.log( str.toUpperCase() );
console.log( str.toLowerCase() );

// indexOf 获取指定字符在字符串中第一次出现的索引位置
// 字符串也有下标,也可以使用中括号来提取字符串的指定字符
console.log(str[1]); // e
console.log( str.indexOf("e") ); // 1

// match  正则匹配
// js中也存在正则,正则的使用符号和python里面是一样的
//语法：/正则表达式主体/修饰符(可选)
//修饰符：
	//i:执行对大小写不敏感的匹配。
	//g:执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

var str = "我的电话是: 13312345678,你的电话: 13512345678";
var ret = str.match(/\d{11}/g); // 匹配,提取数据
console.log(ret);

// replace  正则替换
var str = "我的电话是: 13512345678";
var ret = str.replace(/(\d{3})\d{4}(\d{4})/,"$1****$2"); // 正则 的 捕获模式  $1$2表示的正则中第一个和第二个小括号捕获的内容
console.log(ret);
// search  正则查找,如果查找不到,则返回-1
var str = "hello";
var ret = str.search(/l/);
console.log(ret);

// 切片,当前方法支持使用负数代表倒数下标
// slice(开始下标)   从开始位置切到最后
// slice(开始下标,结束下标)  从开始下标切到指定位置之前
var str = "helloworld";
var ret = str.slice(3,6); // 开区间,不包含结束下标的内容
console.log(ret); // low
var ret = str.slice(5);
console.log(ret); // world
var ret = str.slice(2,-1);
console.log(ret); // lloworl


// split   正则分割,经常用于把字符串转换成数组
var str = "广东-深圳-南山";
var ret = str.split("-");
console.log( ret );

// substr  截取
var str = "hello world";
var ret = str.substr(0,3);
console.log(ret); // hel

// trim    移除字符串首尾空白
var password = "    ge llo   ";
var ret = password.trim();
console.log(password.length); // 13
console.log(ret.length);  // 6

【二】、数组对象

  • 创建数组
创建方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);
  • 数组方法
var arr = ["A","B","C","D"];
// 内置属性
console.log( arr.length );
// 获取指定下标的成员
console.log( arr[3] ); // D
console.log( arr[arr.length-1] ); // 最后一个成员

// (1) pop()  出栈,删除最后一个成员作为返回值
var arr = [1,2,3,4,5];
var ret = arr.pop();
console.log(arr); // [1, 2, 3, 4]
console.log(ret); // 5


// (2) push() 入栈,给数组后面追加成员
var arr = [1,2,3,4,5];
arr.push("a");
console.log(arr); // [1, 2, 3, 4, 5, "a"]


// (3) shift是将数组的第一个元素删除
var arr = [1,2,3,4,5];
arr.shift()
console.log(arr); // [2, 3, 4, 5]

// (4) unshift是将value值插入到数组的开始
var arr = [1,2,3,4,5];
arr.unshift("yuan")
console.log(arr); // ["yuan",1,2, 3, 4, 5]


// (5) reverse() 反转排列
var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

// (6) slice(开始下标,结束下标)  切片,开区间
var arr = [1,2,3,4,5];
console.log(arr.slice(1,3));


// (7) concat() 把2个或者多个数组合并
var arr1 = [1,2,3];
var arr2 = [4,5,7];
var ret = arr1.concat(arr2);
console.log( ret );


// (8) join()  把数组的每一个成员按照指定的符号进行拼接成字符串
var str = "广东-深圳-南山";
var arr = str.split("-");
console.log( arr ); // ["广东", "深圳", "南山"];

var arr1 = ["广东", "深圳", "南山"];
var str1 = arr1.join("-");
console.log( str1 ); // 广东-深圳-南山
  • 遍历数组
 var arr = [12,23,34]
 for (var i in arr){
       console.log(i,arr[i])
 }

【三】、 object对象

【1】object对象的基本操作

Object 的实例不具备多少功能，但对于在应用程序中存储和传输数据而言，它们确实是非常理想的选择。
创建 Object 实例的方式有两种。

var person = new Object();
person.name = "alvin";
person.age = 18;

另一种方式是使用对象字面量表示法。对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。下面这个例子就使用了对象字面量语法定义了与前面那个例子中相同的person 对象：

var person = {
                name : "alvin",
                age : 18,
  							say: function(){
                      alert(123);
                  }
             };
  • object可以通过. 和 []来访问。
console.log(person["age"]);
console.log(person.age)
  • object可以通过for循环遍历
 for (var attr in person){
           console.log(attr,person[attr]);
      }

  • 或者：

  • function People(name, age){
    this.name = name;
    this.age = age;
    this.chi = function(){
        console.log(this.name, "在吃东西")
    }
}
p1 = new People("alex", 18);
p2 = new People("wusir", 20);
p1.chi();
p2.chi();

【2】、json序列化和反序列化

JSON：JavaScript 对象表示法，是一种轻量级的数据交换格式。易于人阅读和编写。

// json是一种数据格式, 语法一般是{}或者[]包含起来
// 内部成员以英文逗号隔开,最后一个成员不能使用逗号!
// 可以是键值对,也可以是列表成员
// json中的成员如果是键值对,则键名必须是字符串.而json中的字符串必须使用双引号圈起来
// json数据也可以保存到文件中,一般以".json"结尾.


{
   "name": "xiaoming",
	 "age":12
}

[1,2,3,4]

{
   "name": "xiaoming",
	 "age":22,
   "sex": true,
   "son": {
      "name":"xiaohuihui",
      "age": 2
   },
   "lve": ["篮球","唱","跳"]
}

js中也支持序列化和反序列化的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // js对象,因为这种声明的对象格式很像json,所以也叫json对象
    var data = {
        name: "xiaoming",
        age: 22,
        say: function(){
            alert(123);
        }
    };

    // 把对象转换成json字符串
    var ret = JSON.stringify(data);
    console.log(ret ); // {"name":"xiaoming","age":22}

    // 把json字符串转换成json对象
    var str = `{"name":"xiaoming","age":22}`;
    var ret = JSON.parse(str);
    console.log(ret);
</script>
</body>
</html>

【四】、Date对象

  • 创建Date对象
//方法1：不指定参数
var nowd1=new Date(); //获取当前时间
console.log(nowd1);
console.log(nowd1.toLocaleString( ));
//方法2：参数为日期字符串
var d2=new Date("2004/3/20 11:12");
console.log(d2.toLocaleString( ));
var d3=new Date("04/03/20 11:12");
console.log(d3.toLocaleString( ));
  • 获取时间信息
获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒

【五】、Math对象

 //  Number对象的内置方法
 //  toFixed(x) 保留小数位
 var num = 100.3;
 var ret = num.toFixed(2);
 console.log(num);  // 100.3
 console.log(ret);  // 100.30

// Math对象的内置方法
// abs(x)  返回数值的绝对值
// var num = -10;
console.log( Math.abs(num) ); // 10

// ceil(x)  向上取整
var num = 10.3;
console.log( Math.ceil(num) ); // 11

// floor(x) 向下取整
var num = 10.3;
console.log( Math.floor(num) ); // 10

// max(x,y,z,...,n)
console.log( Math.max(3,56,3) ); // 56
// min(x,y,z,...,n)

// pow(x,y)
console.log(Math.pow(3, 2)); // 相等于 3**2
console.log( 3**2 ); // 使用这个,上面废弃

// random()  生成0-1随机数
console.log(Math.random());

// 生成0-10之间的数值
console.log( Math.random() * 10 );

// round(x) 四舍五入
// 生成0-10之间的整数
console.log( Math.round( Math.random() * 10 ) );

  • 练习：获取1-100的随机整数，包括1和100

    var num=Math.random();
num=num*100;
num=Math.round(num);
console.log(num)

【六】、Function对象

函数在程序中代表的就是一段具有功能性的代码，可以让我们的程序编程更加具有结构性和提升程序的复用性,也能让代码变得更加灵活强大

【1】、声明函数

/*
// 函数的定义方式1
function 函数名 (参数){
    函数体;
    return 返回值;
}
功能说明：
    可以使用变量、常量或表达式作为函数调用的参数
    函数由关键字function定义
    函数名的定义规则与标识符一致，大小写是敏感的
    返回值必须使用return
    
//  函数的定义方式2
    
用 Function 类直接创建函数的语法如下：
var 函数名 = new Function("参数1","参数n","function_body");

虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型*/

【2】、函数调用

    //f(); --->OK
    function f(){
        console.log("hello")

    }
    f() //----->OK

不同于python，js代码在运行时，会分为两大部分———检查装载 和 执行阶段。

  • 检查装载阶段：会先检测代码的语法错误，进行变量、函数的声明
  • 执行阶段：变量的赋值、函数的调用等，都属于执行阶段。

【3】、函数参数

（1） 参数基本使用

// 位置参数
function add(a,b){

    console.log(a);
    console.log(b);
}
add(1,2)
add(1,2,3)
add(1)


// 默认参数
function stu_info(name,gender="male"){
    console.log("姓名："+name+" 性别："+gender)
}

stu_info("yuan")

【4】、函数返回值

在函数体内，使用 return 语句可以设置函数的返回值。一旦执行 return 语句，将停止函数的运行，并运算和返回 return 后面的表达式的值。如果函数不包含 return 语句，则执行完函数体内每条语句后，返回 undefined 值。

function add(x,y) {
          return x,y
      }

var ret = add(2,5);
console.log(ret)

1、在函数体内可以包含多条 return 语句，但是仅能执行一条 return 语句

2、函数的参数没有限制，但是返回值只能是一个；如果要输出多个值，可以通过数组或对象进行设计。

【5】、函数作用域

  • 作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。

  • 任何程序设计语言都有作用域的概念，简单的说，

    • 作用域就是变量与函数的可访问范围，
    • 即作用域控制着变量与函数的可见性和生命周期。
    • 在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

  • 局部变量

    • 是在函数内部声明,它的生命周期在当前函数被调用的时候, 当函数调用完毕以后,则内存中自动销毁当前变量.

  • 全局变量

    • 是在函数外部声明,它的生命周期在当前文件中被声明以后就保存在内存中,直到当前文件执行完毕以后,才会被内存销毁掉。
//  首先熟悉下var

var name = "dream"; // 声明一个全局变量 name并赋值”dream“
name = "张三";  // 对已经存在的变量name重新赋值 ”张三“
console.log(name);

age = 18   // 之前不存在age变量，这里等同于var age = 19 即声明全局变量age并赋值为18

var  gender = "male"
var  gender = "female" // 原内存释放与新内存开辟，指针指向新开辟的内存
console.log(gender)

作用域案例：

var num = 10; // 在函数外部声明的变量, 全局变量
function func(){
    // num = 20; // 函数内部直接使用变量,则默认调用了全局的变量,
    //var num = 20; // 函数内部使用var 或者 let声明的变量则是局部变量
              // 函数内部直接使用变量,则默认调用了全局的变量,
              // 使用变量的时候,解释器会在当前花括号范围值搜索是否有关键字var 或者 let 声明了变量,如果没有,则一层一层往外查找          最近的声明
              // 如果最终查找不到,则直接报错! 变量名 is not define!
    console.log("函数内部num：",num)
}
func();
console.log("全局num：",num);

【6】 匿名函数

匿名函数，即没有变量名的函数。在实际开发中使用的频率非常高！也是学好JS的重点。

// 匿名函数赋值变量
 var foo = function () {
     console.log("这是一个匿名函数！")
 };

// 匿名函数的自执行
(function (x,y) {
     console.log(x+y);
 })(2,3)


// 匿名函数作为一个高阶函数使用
function bar() {

  return function () {
      console.log("inner函数！")
  }
}

bar()()

【7】闭包函数

在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是引用了自由变量（外部非全局）的函数。

简单来说就是一个函数定义中引用了函数外定义的变量，并且该函数可以在其定义环境外被执行。这样的一个函数我们称之为闭包函数。

我们先看一段代码。

<script>

    var key = "123456"

    function foo(){
        console.log(key)
    }

</script>

<script>

    var key = "abcdefg"

    function bar(){
        console.log(key)
    }

</script>

<script src="test01.js"></script>
<script src="test02.js"></script>

这就是全局变量污染

很明显, 虽然各自js在编写时是分开的. 但是在运行时, 是在同一个空间内执行的. 他们拥有相同的作用域. 此时的变量势必是非常非常不安全的. 那么如何来解决呢? 注意, 在js里. 变量是有作用域的. 也就是说一个变量的声明和使用是有范围的. 不是无限的. 这一点, 很容易验证.

function fn(){
    let love = "爱呀"
}
fn()
console.log(love)

直接就报错了. 也就是说. 在js里是有全局和局部的概念的.

直接声明在最外层的变量就是全局变量. 所有函数, 所有代码块都可以共享的. 但是反过来就不是了. 在函数内和代码块内声明的变量. 尤其是函数内. 声明出来的变量它是一个局部变量. 外界是无法进行访问的，即函数是可以开辟独立的作用域环境的。我们就可以利用这一点来给每个功能脚本创建一个局部空间. 就像这样：

<script>

    var f = (function () {
        let key = "123456"

        function foo() {
            return key
        }

        return foo
    })()

</script>

<script>

    var b = (function () {
        let key = "abcdefg"

        function bar() {
            return key
        }

        return bar
    })()

</script>

html里面使用时:

 <script src="test01.js"></script>
 <script src="test02.js"></script>
  <script>
      console.log(f())
      console.log(b())
  </script>

【8】prototype 原型对象

【8.1】、什么是JS原型对象?

  1. prototype(原型对象)就是一个容器.
  2. 存放公共的方法给对象使用.
  3. 对象可以直接访问原型对象中的方法和属性.
  4. 原型对象类似Python的类对象（fn.prototype）

【8.2】、原型对象和函数之间的关系.

  • 每个函数都会有一个prototype属性,指向原型对象.
  • 每个原型对象都会有一个constructor属性,指向函数.
  • 总结:每个函数与原型对象之间的关系是互相引用.

【8.3】、对象和原型对象和函数之间的关系

  • 函数创建对象var o = new Fn();
  • 对象通过__proto__属性,指向原型对象.
  • 对象可以直接调用原型对象中所有的属性和方法.
  • 对象可以通过原型对象中的constructor属性知道构造函数
  • 总结: 原型对象就是一个容器,帮助函数存放公共方法,以及给函数new出来的对象提供公共方法使用.

function Person(first, last, age, eyecolor) {
          this.firstName = first;
          this.lastName = last;
          this.age = age;
          this.eyeColor = eyecolor;
      }

Person.prototype.name = function () {
    return this.firstName + " " + this.lastName;
};

var myFather = new Person("Bill", "Gates", 62, "blue");
var myMother = new Person("Steve", "Jobs", 56, "green");

标签：26,console,log,函数,arr,ret,JS,var,进阶
From： https://www.cnblogs.com/dream-ze/p/17337552.html

相关文章

  • node.js使用Nodemailer发送邮件
    引言--常常看到一些网站有邮箱获取验证码验证注册或者修改密码等，今天也来了解一下在nodejs+express怎么发送电子邮件。使用模块Nodemailer。这里以qq邮箱举例子。安装模块--npminstallNodemailer--save创建一个SMTP客户端配置--//引入模块nodemailerconstnodemai......
  • json字符串格式化工具
    publicclassJsonFormatTool{/***单位缩进字符串。*/privatestaticStringSPACE="";/***返回格式化JSON字符串。**@paramjson未格式化的JSON字符串。*@return格式化的JSON字符串。*/publicstat......
  • 《算法竞赛进阶指南》 第五章 237. 程序自动分析
    地址https://www.acwing.com/problem/content/239/在实现程序自动分析的过程中，常常需要判定一些约束条件是否能被同时满足。考虑一个约束满足问题的简化版本：假设x1,x2,x3,…代表程序中出现的变量，给定n个形如xi=xj或xi≠xj的变量相等/不等的约束条件，请判定是否可以分......
  • JSch - 配置SFTP服务器SSH免密登录
    目录1.什么是SFTP2.什么是Jsch以及它的作用3.sftp服务器认证机制4.publickey和password两种方式登录sftp的API调用需求：做一个通过ssh免密登录的需求，是基于原先密码登录sftp服务器的代码上进行改造1.什么是SFTPSFTP是一个安全文件传送协议，可以为传输文件提供一种安全的加......
  • 03-Ajax传输json和XML
    title:03-Ajax传输json和XMLpublish:trueAjax传输JSONJSON的语法JSON(JavaScriptObjectNotation)：是ECMAScript的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。语法规则：数据在键值对中数据由逗号分隔花括号保存对象方括号......
  • 使用OPENJSON()在ADO使用报错：指定了非不二类型的表达式
    背景：工单管理功能，供应商信息字段是存的JSON字符串(数据库是2008R2版本)，这个功能没有使用ES，现在业务需要增加供应商相关信息的查询实现：利用OPENJSON函数用ADO拼接Sql执行的时候报以上错误，复制sql出来放到DBeaver里面执行又没有问题，同样的sql，至于任务紧张不展开研究了，换成存储过......
  • vscode 格式化统一配置 settings.json
    {"workbench.colorTheme":"DefaultDark+","eslint.autoFixOnSave":true,"editor.codeActionsOnSave":{"source.fixAll.eslint":true},"[javascript]":{ "......
  • JS中定时执行,setTimeout和setInterval的区别,以及l解除方法
    评：setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout运用在延迟一段时间，再进行某项操作。setTimeout("function",time)设置一个超时对象setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.set......
  • vue全家桶进阶之路43：Vue3 Element Plus el-form表单组件
    在ElementPlus中，el-form是一个表单组件，用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法，使表单验证更加容易。使用el-form组件，您可以将表单控件组织在一起，并对表单进行验证，以确保提交的数据符合预期的格式和要求。该组件具有以下特性：支持内置......
  • Spring 3 mvc中返回pdf,json,xml等不同的view
    评：springmvc就是好，特别是rest风格的话，一个org.springframework.web.servlet.view.ContentNegotiatingViewResolver就可以根据不同的场景返回不同的view了，比如返回json,xml,pdf等.马上看代码实现先是一个简单的pojoJava代码收藏代码packagecom.hmkcode.vo;impor......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99