javascript初探（二）------对象及方法

chuck-Gemini

已于 2023-03-13 00:52:43 修改

阅读量201

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

于 2021-03-01 09:03:20 首次发布

本文链接：https://blog.csdn.net/chucksun0426/article/details/114209579

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、函数

1.1 基本概念

js函数：被js封装成Function对象
let 与 var
- let：
  - 作用域：只在 let 命令所在的代码块（即大括号包裹的多行代码）内有效
- var：
  - 作用域：不会超出函数体范围，但在如if、while的大括号范围外仍然有效
  - 全局变量：全局处声明的变量的this指向window，且无法delete删除
let 与 const
- 相同：都是ES6新增，二者都是块级作用域
- 区别：const声明的常量必须初始化，常量不能再赋值、修改、声明

1.2 ES6前写法

代码示例

// 命名函数语句
// 浏览器终端调用test2()，var声明的变量会提到函数顶声明，this指向调用者，
var test2 = function() {
    alert("this is the test2");
    return "OK"
};

// 匿名函数：常用于回调函数中，创建即调用，一次性，可传入变量，(123,456)可选
(function(a,b){
	console.log("a="+a);
	console.log("b="+b);	
})(123,456);

1.3 ES6写法

代码示例

// 定义外部函数
function test1() {
    // 涉及到this，常用此方法定义函数，因为箭头函数默认会将this绑定到外层对象上
}
// 函数体为单语句：无参传入，返回值undefined，调用test3()
const test3 = () => alert("this is the test3");
	
// 函数体为单语句：单参传入，传入res变量，return res.name，调用test4(stu)
const test4 = res => res.name;

// 函数题为多语句：多参传入，调用test5('duke', 18)
const test5 = (name, age) => {
	// 数字加字符串：会先转换成字符串，然后拼接
    alert("age: " + age);
    // ES6可以${}取到变量值，组合进字符串
    return `name is ${name}`
};

// 函数带默认参数：默认参数必须在最后
const test6 = (name, age = 18) => {...};

// 匿名函数:常用于回调函数中，创建的时候即调用，一次性
((params) => console.log(`this is the argvs: ${params}`));

二、对象方法

2.1 对象

js对象：

2.2 写法

代码示例

// 对象内的方法
let stu = {
    name: "duke",
    age: 18,
    detail: () => {
        return "duke detail";
    }
}

// 对象调用方法,输出"duke detail"
console.log(stu.detail())

// 新增属性
stu.height = 176
// 删除新增属性、删除原有属性，多次删除同一个不报错
delete stu.height
delete stu.name
// 返回undefined
console.log(stu.height)

2.3 this关键字

this指针：解析器调用函数时都会向其传递一个隐含参数this，this指向一个对象，this会根据函数调用方式的不同灵活的指向不同的对象

代码解释

const fun = () => console.log(this);
let stu = {
    name: "duke",
    age: 18,
    // 此处不用箭头函数，因为箭头函数默认会将this绑定到外层对象上
    detail: function() {
        console.log(this)
    }
}

// 调用fun()返回
object：window
// 调用stu.detail()返回
object： stu

强制this指向

function fun(a, b) {
    return this;
}
let stu = {
        name: "duke"
    }
// 函数也是对象，有方法
// call方法：第一个参数为强制this指向的，后面为传入的参数
let res = fun.call(stu, 10, 2);
// apply方法：第一个参数为强制this指向的，后面数组为封装的传入参数
// let res = fun.apply(stu, [10, 2])
// 返回：object： stu
console.log(res)
// 返回：object：window
console.log(fun())

三、数组对象

3.1 声明

常规操作

// 创建并初始化数组:可以增删改数组元素，但不可用直接给arr重新赋值
const arr = [];
// 任何类型
const arr = [1, "good", {name: "duke"}, true]
// 以下三者等价
const arr1 = [undefined, null]
const arr1 = [,null]
const arr1 = [,null,]	//尾部逗号length不会增加
// arr2[2]()执行函数
const arr2 = [() => alert("help")]

// 打印数据元素个数
console.log(arr.length)
// 清空数组方法
arr.length = 0;

3.2 解构

解构：解构赋值语法可以将数组中的值或对象的属性取出，赋值给其他变量

写法

// 输出：a=10,b=20
let [a, b] = [10, 20];

// 输出：a=10,b=20, rest=[30,40,50]
let [a, b, ...rest] = [10, 20, 30, 40, 50];

// 输出：a=20,b=40
let [, a, , b] = [10, 20, 30, 40, 50];

// 输出：a='duke', b=18，只要对应即可获取对应值
let [{name:a}, b] = [{name:'duke'}, 18]

3.3 方法

简单方法

方法	描述
shift()	删除数组第一个元素并返回，`arr.shift()` ，修改原数组
pop()	删除数组最后一个元素并返回，修改原数组
unshift()	向数组首位添加>=1个元素，并返回数据长度，修改原数组
push()	向数组末尾添加>=1个元素，并返回数组长度,`arr.push("a","b")` 修改原数组
reverse()	反转数组中元素顺序，修改原数组
slice()	数组切片，前两个`arr.slice(0,2)`，后两个`arr.splice(-2)`
splice()	删元素：`let res = arr.splice(0,2)`，从第0个开始删2个，res为前两个，arr现为删掉前两个的新数组替换元素：`let res = arr.splice(1,1,"牛魔王")` 插入元素：`let res = arr.splice(1,0,“玉帝”,“二郎神”) 以上均修改原数组
concat()	连接两个或更多数组，返回结果`let arr3 = arr.concat(arr2)`
join()	把所有元素放入一个字符串，元素通过指定分隔符分隔，默认为逗号
toString()	把数组转换为字符串，并返回结果
IndexOf()	通过值找索引，`let b = a.indexOf(2)`，返回第一个匹配的索引值，未找到返回-1，`lastIndexOf`返回最后一个匹配的索引值

宏方法(a=[1,2,3])

方法	描述
sort()	对数组元素进行排序，修改原数组，可加回调函数`a.sort((before,after) => {return before - after;})` before为相邻的前一个元素，回调函数返回值大于0交换位置,`a=[1,2,3]`
filter()	`let b = a.filter(item=>item!==1)`原数组不变，符合规则的元素保留成新数组`b=[1]`
map()	`let b = a.map(item=>item*item)`原数组不变，匿名函数处理每一个数组元素生成新数组`b=[1,4,9]`
every()	`let b = a.every(val=>val<=3)`原数组不变，若a数组每个元素均满足匿名函数，则b为true，此处`b=true`
some()	`let b = a.every(val=>val<=1)`原数组不变，若a数组有任一元素满足匿名函数，则b为true,此处`b=true`
reduce()	`let b = a.reduce((before, after)=>{return before+after})`原数组不变，化简数组，前两个元素进匿名函数，结果与第三个元素进匿名函数，以此类推，此处为求和`b=6`

遍历数组

const arr = ["唐僧", "孙悟空", "猪八戒", "沙和尚"];
// 第三个为正在遍历的数组，obj为arr,不常用
// forEach后跟一个回调函数，数组每个子项都会传入回调函数中进行处理
arr.forEach((value, index) => {
    console.log(`序号：${index},值：${value}`)
})

// 遍历数组
for (let index in arr){
	console.log(arr[index])
}

四、字符串对象

4.1 常规操作

字符串：字符串在底层是以字符数组来储存的
写法：let w = "abcdefg;"

常用方法

写法	释义
w.length	返回字符串长度，无括号
w[3]	返回索引所在的字符
w+w	拼接字符串
w.indexOf(“b”)	返回1，返回检索字符第一次出现的索引，未找到返回-1 ，第二个参数指定检索开始位置
w.slice(2,3)	字符串切片，前两个`w.slice(0,2)`，后两个`w.splice(-2)`
w.split()	拆分成数组，括号内可指定分隔符，拆分后丢弃分隔符
w.toUpperCase()	大写格式化
w.toLowerCase()	小写格式化

以上方法都不修改原字符串

4.2 正则表达式

4.2.1 基本写法

写法：let res = new RegExp("正则表达式"， “匹配模式”)

示例

// 定义规则：此处表示开头为字符a,忽略大小写i（找到所有匹配g，多行匹配m）
// 简写：let reg = /a/i
let reg = new RegExp("a", "i");
// 待校验字符串
let str = "abc";
// 校验方法test，成功返回true
console.log(reg.test(str))

4.2.2 规则

正则通配符

格式	描述	格式	描述
^	匹配字符串开头	$	匹配字符串末尾
.	任意字符，除了换行符	a？	0、1个a
a+	1~无穷大个a	a*	0~无穷大个a
[amk]	匹配 ‘a’，‘m’或’k’ ，[0-2]为0、1、2	[^amk]	匹配非 ‘a’，‘m’，’k’的字符
[0-1]{3}	精确匹配n个表达式，000、111	[0-1]{2,3}	匹配00、11、000、111

分组匹配

格式描述
(表达式) 分组匹配，与？、*、+一块用
(表达式1)|(表达式2) 表达式的或语句
([a-z])([a-z])\2\1 匹配：abba、cddc、mnnm这样的，数字代表组序号
扩展正则通配符

格式描述
\d 匹配任意数字，等价[0-9],\D：匹配非\d
\w 匹配包括下划线的任何单词字符，等价：[A-Za-z0-9_]和_，\S：匹配非\w
\s 匹配任意空白字符,\S：匹配非\s

格式	描述
(表达式)	分组匹配，与`？、*、+`一块用
(表达式1)\|(表达式2)	表达式的或语句
([a-z])([a-z])\2\1	匹配：abba、cddc、mnnm这样的，数字代表组序号

格式	描述
\d	匹配任意数字，等价[0-9],`\D`：匹配非\d
\w	匹配包括下划线的任何单词字符，等价：`[A-Za-z0-9_]`和`_`，`\S`：匹配非\w
\s	匹配任意空白字符,`\S`：匹配非\s

4.2.3 常规方法

列表

写法	释义
str.search(/a[bef]c/)	返回第一个与之匹配的子串的起始位置，找不到返回-1
str.math(/[A-z]/g)	将字符串中的字母均提取放到数组返回（g：全部匹配，无此参数返回第一个匹配详细信息）
str.replace(/[A-z]/g, “3”)	将字符串中的字母均替换放到数组返回（g：全部匹配，无此参数仅匹配第一个）
str.split(/[a-z]/i)	以正则为分隔符拆分字符串，返回拆分后字符数组，g匹配模式默认存在

五、类对象

代码示例

class Person {
	// 构造器
    constructor(name, gender, age) {
        this.name = name;
        this.gender = gender;
        this.age = age;
    }
 	// 类方法
    getName() {
        return `name is: ${this.name}`;
    }
}

// 创建实例duke
const duke = new Person("duke", true, 18);
// 返回：name is: duke
console.log(duke.getName());
// 返回：duke
console.log(duke.name);

// 创建实例jane
const jane = new Person("jane", false, 20);
// 返回：name is: jane
console.log(jane.getName());
// 返回：jane
console.log(jane.name)

六、时间、数学、JSON

6.1 时间对象

创建
- 自定义：let d = new Date("02/28/2021 22:38:35");
- 当前时间：let d = new Date();

常用时间对象方法

写法	释义
d.getDate()	返回Date对象日期中的日，1～31
d.getDay()	返回周几，0～6
d.getMonth()	返回月份
d.getFullYear()	类似的，getHours/getMinutes/getSeconds
d.getTime()	时间戳，返回1970-1-1至今毫秒数，`Date.now()`执行时的时间戳

循环器

// 第一个为回调函数，第二个为间隔毫秒
// 计时器的调用者是window，计时器里面用this的话指向是window

// 功能：每隔一段时间就执行一次,首次调用不执行
let timer = setInterval(() => {
	console.log("interval");
}, 3000);
// 清除计时器：注意设置句柄timer，否则会失去控制权
clearInterval(timer)

延时器

// 第一个为回调函数，第二个为间隔毫秒
// 计时器的调用者是window，计时器里面用this的话指向是window
// 功能：间隔一段时间仅执行一次,首次调用不执行
let timer = setTimeout(() => {
	console.log("timeout");
}, 3000);
// 清除计时器：注意设置句柄timer，句柄仅用于中止延时器
clearTimeout(timer)

计时器

// 设置time显示的前缀名
console.time("模块1测试")
// 被测试语句
// 结束上面设置的计时器
console.timeEnd("模块1测试")

输出：模块1测试: 27.656005859375 ms

6.2 数学工具类

调用方法：let res = Math.PI;，res为3.1415926

常用方法

写法	释义
Math.abs(n)	对n取绝对值
Math.ceil(n)	对n向上取整
Math.floor(n)	对n向下取整
Math.round(n)	四舍五入
Math.random()	随机生成0～1随机数，不包含0、1，`Math.round(Math.random()*(y-x)+x)`表示从x~y之间的随机数
Math.max(a,b,c)	返回最大值，min同理
Math.pow(x,y)	返回x的y次幂
Math.sqrt(n)	返回开方

6.3 json对象

json键值对：键必须为字符串（带双引号），值根据数据类型如下

常规写法

// 这是字符串
{ "name":"张三" }							
// 这是整型、也可浮点型
{ "age":30 }							
// 这是布尔类型
{ "log_in":true }						
// 这是空
{ "married":null }						
// 这是数组
{ "detail": [ "张三", 30, true, null ]}

注：以上每行都是一个jsont对象

json对象写法

// json对象复合写法：大括号内看做为一个json对象
{						
	"name":"张三", 
	"age":30, 
	"log_in":true, 
	"married":null
}	
// json对象数组：中括号内为多个json对象
[						
	{					
		"name":"张三", 
		"age":30, 
		"log_in":true, 
		"married":null
	},
	{					
	"name":"张三", 
	"age":30, 
	"log_in":true, 
	"married":null
	}		
]

转换方法
* json字符串----->js对象：let obj = JSON.parse(str);，js读取json对象数组，如obj[0].name
* js对象----->json字符串：let str= JSON.stringify(obj);

上一篇：javascript初探（一）------基本语法
 下一篇：javascript初探（三）------DOM

chuck-Gemini

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript初探（二）------对象及方法

目录一、函数二、对象方法三、数组一、函数函数：封装一组语句块以实现某一批量操作本质：也是一个对象早期写法// ES6前函数写法// 浏览器终端调用test()，非赋值语句，结尾无分号function test1() { alert("this is the test1"); // 调用函数后会有一个返回值，不写返回undefined return "OK"}// 浏览器终端调用test2()，var声明的变量的作用域均为全局，赋值语句结尾有分号var test
复制链接

扫一扫