JS-函数、对象

巷子里有条狗

已于 2023-03-31 10:09:10 修改

阅读量238

点赞数

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

于 2023-03-31 10:00:18 首次发布

本文链接：https://blog.csdn.net/qq_40561863/article/details/129872970

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

函数

概念

函数对任何编程语言来讲都是核心组件、因为它可以封装语句，在任何地方都可以调用。

作用：

当代码量庞大，且复杂的时候，我们可以将代码拆分成独立的小功能，
当一段代码需要在不同的地方使用时，我们可以通过函数将代码包裹起来，在需要使用的时候直接调用函数就行了

函数的声明

方式1：函数声明

function 函数名(){
    //函数封装的代码
}

方式2：函数表达式

var 变量名 = function(){
    //函数封装的代码
}

区别：
- 函数声明: 函数声明提升、代表在声明函数之前可以直接调用该函数
  - 会给函数一个属性，叫做name属性，就是指定的函数名
- 函数表达式：没有函数声明提升、在函数声明之前调用会报错，

调用函数

函数名();  //直接调用该函数

注意：函数声明之后不会立即执行函数内部的代码，我们需要调用函数，才能执行函数包裹的代码

同一个函数可以被调用多次

函数的参数

数据的传递：外部数据可以通过函数调用的时候，传入函数内部

作用：当创建一个函数后，如果希望函数内部的数据是一个可以变化的数据时，我们就可以用到函数的参数

function 函数名(形式参数1，形式参数2，...){}

函数名(实际参数1，实际参数2，...)  //形参和实参顺序 一一对应，

注意：
- 形参和实参的顺序应该，11对应
- 从语法上来讲，我们的参数数量可以不一致
- 参数可以是任意类型的参数

定义一个函数，输入 两个数字，  1，100，，，输出 这两个数字之间所有数的和（包含这个两个数字）   5，80

如果 只输入一个数字，则输出  0 到 该数字之间所有数字的和。。

拓展：arguments

js跟其他语言的函数有一些区别，js函数不关心你传入参数的个数，也不关心这些参数的数据类型，
js解释器对这种函数的处理，不会报错，
你可传入多个参数，但是可以不设置形参，
- 之所以这样，函数的参数在函数内部表现为类似数组的一个东西，这个东西就是 arguments

function func(){
    console.log(arguments) //在函数内部可以直接调用这个 arguments对象

    for(var i = 0;i<arguments.length;i++){
        console.log(arguments[i])
    }
}

func(1,2,3,4,5)

函数的返回值

函数中，可以通过return将函数内部的数据，传递到函数外部

function a(){
    return 'hello'
    //return    //外部接收为undefined
}

 var str = a()
 console.log(str)  //hello

注意:

return会终止函数内部代码的继续执行
return最多只能返回一个值
如果return没有返回任何数据，外部接受的为undefined

作用域：

作用域，就是指变量活动的范围

当一个函数创建成功的时候，会将函数内部形成一个独立的作用域，把作用域划分为了 2个部分，1个部分就是函数内部的作用域，还有一个部分是函数外部的全局作用域

全局作用域：

可以看做是一个公共的区域，那公共区域里的变量可以再任意区域活动，包括下面的局部作用于

var a = 1;
function b(){
    console.log(a) //1
}

局部作用域(函数作用域)

可以看做一个私有的区域，那私有区域的变量只能在私有区域里活动，外部的作用于是拿不到里面的变量的

function b(){
    var a = 1
    console.log(a) //1
}

console.log(a) //报错 a is not defind

箭头函数

箭头函数是ES6新增的书写函数的方式

普通函数：

var a = function(){
    console.log("沙皮狗的春天";
}
a()

箭头函数：

var a = ()=>{
    console.log("皮狗的夏天");
}
	a()

注意：箭头函数只能用函数表达式的方式声明

箭头函数的简写

如果参数只有1个那么可以省去 （）

var a=(data)=>{
    console.log(data);
}
a("沙皮狗的秋天")  //输出  沙皮狗的秋天
简写
var a = data =>{
    //data就是函数的形参
     console.log(data)
}
a("沙皮狗的秋天")  //输出  沙皮狗的秋天

如果函数内部只有一句代码那么可以省去｛｝,并且相当于return了这个代码的值

var a=function(data){
    console.log(data)
}
简写
var a = data => console.log(data)
a("沙皮狗的秋天")  //输出  沙皮狗的秋天

var c=function(b){
   return  b
}
console.log(c(4))  // 输出函数返回值4
简写
var c = b => b

console.log(c(4))  //4

注意：箭头函数中没有 arguments

ES6函数参数的默认值

function func(x = 0,y = 0){
    console.log(x,y) //0 , 0
}
func()

场景：避免参数出现undefined

对象

知识点

概念
对象的创建
对象的数据操作
对象的方法和属性
对象的遍历
对象数组

概念

数组：用于储存有序的数据，只用于储存简单数据， []

对象：和数组一样都是用来储存数据的，但是可以储存复杂数据，而且可以是无序的 ｛｝

数组和对象的区别：

数组储存数据，我们必须记住，每一条数据的位置，数组中的位置就是固定存在的
对象中，数据就是无序的，在对象中每一条数据都对应了一个名—键、属性名、键名，键对应的数据 值、键值，一般我们的键和值都是成对出现的，——键值对，对象中的数据都是以键值对的形式保存的

创建对象

方法1：字面量

var 对象名 = {}

方法2：构造函数法

var 对象名 = new Object()

对象的数据

var 对象名 = {
    键1：值1，
    键2：值2，
    键3：值3，
    ...
}

注意：

键名是字符串类型，但是可以省略引号
对象的键值可以是任意数据类型

案例代码：

var student = {
    'name':'CXQ',
    'age' : 18,
    hobby : ['唱','跳','rap','篮球'],
    isTrue: true,
}
console.log(typeof student.isTrue)

对象数据的操作

查看数据

console.log( student.name )
或者
console.log( student["name"] )

注意：如果没有该键名则输出undefined

修改数据

student.age = 20

注意：如果对象中没有该键，会将该键值对添加到对象中

添加数据

student.gender = '男'

注意：如果对象中已经存在该键值对，达到了修改数据的效果

删除数据

delete student.isTrue
console.log(student.isTrue)  //undefined

操作数据的形式：通过变量去访问数据

var 变量名 = 'name'
console.log(student[变量名]) //'CXQ'
console.log(student['name']) //'CXQ'

对象的属性和方法

因为对象可以保存任意类型的数据，我们的数据类型可以分为两种：

如果数据是一个函数时，我们把这条数据称为对象的方法
如果数据不是一个函数，我们称为 对象的属性

var student = {
    'name':'CXQ',
    'age' : 18,
    hobby : ['唱','跳','rap','篮球'],
    isTrue: true,
    //对象的方法
    study: function(){
        //学习的方法
        console.log('去蜗牛学习')
    },
    eat:function(){
        console.log('去KTV唱歌')
    },

    sleep: (t)=>{
        console.log('回家睡觉' + t)
        return true
    }
}

student.study();
student.eat();

var res = student.sleep('洗澡')
console.log(res) //true

对象的遍历（拓展）

for in

for (var key in student) {
    console.log(student[key])
}

//key 是键名(也是对应的变量名)   student[key]  对象里面通过key取值

Object.keys()

Object.keys(student).forEach(item => console.log(student[item]) )
//res=Object.keys(student) res就是得到获取到的键名所构成的数组

//res.forEach(item => console.log(student[item]) ) 遍历得到数组中对应的数据

数组对象（对象数组）

//工作中数据存储常见的形式
var students = [
    {name:'zs',age:'18',gender:'man',id:1},
    {name:'ls',age:'20',gender:'woman',id:2},
    {name:'ww',age:'21',gender:'man',id:3}
]

拓展：

对象的简写：

ES6针对对象提供了两种简写的形式

1.当我们对象的值是一个变量的时候，键和键名如果是同一个单词，那么可以简写成一个

2.对象里的方法，也可以简写，去掉 `：function`

var names = 'zs';
var age ='25'
var obj = {
    // names:names,
    // age:age,
    names,
    age,
    // sayHi:function(){
    //     console.log('hi')
    // },
    sayHi(){
        console.log('hi')
    }
}

obj.sayHi()

对象中的this

this是存在于函数中的一个动态指针，它设计的目的，就是指函数当前运行的环境；

var student = {
    'name':'CXQ',
    'age' : 18,
    hobby : ['唱','跳','rap','篮球'],
    isTrue: true,
    //对象的方法
    study: function(){
        //学习的方法
        // console.log(this) //这里的this指向这个函数的运行环境，其实就是students本身
        console.log(this.name +'123')
    },
}
student.study()

这个例子中的this。指向的其实就是 students对象本身
如果全局中的函数里有this，那么这个this指向全局——Window

特殊：箭头函数中的this

箭头函数中没有this

如果非要在箭头函数中使用this，那么这个this指向的是箭头函数父级的作用域——window

原生对象

对象的分类

宿主对象 host object：

js的运行环境就决定了js的宿主是谁，比如：浏览器提供的Window、Document…就叫做宿主对象

原生对象：

自定义对象：js运行时创建的对象——就是我们自己编写的对象
内部对象：由js规范所提供的对象，不是宿主，也不需要手动创建
- 本地对象 native object ：需要通过new创建的对象：Array、String、Object、Number、Date、RegExp…
- 内置对象 build-in object：不需要new直接使用：Math、Global（概念）、jSON…

Array对象

var  arr = new Array()

数组对象提供提供了相关的属性和方法用来操作数组

数组属性

属性	描述
length	设置或返回数组元素的个数。

数组方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
every()	检测数值元素的每个元素是否都符合条件。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。

String：字符串对象，提供了字符串相关的属性和函数

String属性

属性	描述
length	字符串的长度

常用方法

方法	描述
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
split()	把字符串分割为字符串数组。
substr()	从起始索引号提取字符串中指定数目的字符。第二个参数指定的是数量
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白。

正则相关字符串方法：

replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
replaceAll()	在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。
search()	查找与正则表达式相匹配的值。

字符串的遍历（了解）

var str = 'Hello world'

for(var i = 0;i<str.length;i++){
   console.log(str[i])
}

for (const item of str) {
    console.log(item)
}

Math：数学对象，提供了数学的一些计算方法

常用属性：

属性	描述
`PI`	圆周率

常用的方法

方法名	说明
`ceil()`	向上取整
`floor()`	向下取整
`round()`	四舍五入
`max()`	找最大值
`min()`	找最小值
`random()`	0-1随机数
`pow(x,y)`	代表 x的y次冥

Date：日期对象，提供的获取日期或时间的方法

方法	描述
getDate()	返回月中的第几天（从 1 到 31）。
getDay()	返回星期几（0-6）。
getFullYear()	返回年份。
getHours()	返回小时（从 0-23）。
getMilliseconds()	返回毫秒（0-999）。
getMinutes()	返回分钟（从 0-59）。
getMonth()	返回月份（从 0-11）。
getSeconds()	返回秒数（从 0-59）。
getTime()	返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。
toLocaleString()	使用区域设置约定将 Date 对象转换为字符串。

获取时间戳：

var d = new Date()
d.getTime()

获取10位数的时间戳

var d = new Date()
parseInt(d.getTime()/1000)

获取到时间并且格式为：2022-6-21 14：42：00

var d = new Date()
d.toLocaleString().replaceAll('/','-')

获取到10位时间戳并且转换格式为：2022-6-21 14：42：00

var day = new Date(时间戳 *1000).toLocaleString().replaceAll('/','-')

RegExp ：正则对象，我们一般称为：正则表达式