函数:
1.常用函数sort的使用:
arr.sort(function(a,b){return a-b})//升序
arr.sort(function(a,b){return b-a})//降序
2.函数的一般声明方式:
方法1:
function 函数名 (参数/空)
{
函数体
}
方法2(匿名函数,使用方法和一般函数相同):
let people=new function{"参数","函数体"}
方法3:
let e =function(参数){函数体}
方法4(立即执行函数):
定义后需要加一些操作,才会在定义的位置生效,且只生效一次
//方式1:(建议匿名函数在时,任何函数调用后加上”;“否则匿名函数会不生效)
(function () { document.write('hi') }());
//方式2:
(function (){
//function body
})();
方法5(构造函数):
构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写,构造函数和普通函数的还有一个区别就是调用方式的不同,普通函数是直接调用,而构造函数需要使用new关键字来调用,且调用构造函数后生成的是对象。
1.调用构造函数,它会立刻创建一个新的对象
2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
具体代码及实现方式见:对象的工厂化创建
对象:
this的用法:
当以函数的形式调用时,this是window
当以方法的形式调用时,谁调用方法this就是谁
当以构造函数的形式调用时,this就是新创建的那个对象
1.对象的定义:
方法1(注意符号是冒号):
let ob = {
uname: '爸爸',
sayHi: function () {
alert(`${uname}好`)
}
}
方法2:
let op = new Object()//声明op是个对象
op.name = 'ah'
op.age = 4000
op.sayName = function () {
console.log(this.name);
}
op.sayName()
console.log(op);
2.对象的修改:
let ob = {
uname: '爸爸',
}
console.log(ob);
//查
console.log(ob.uname);// console.log(ob['uname']);
//改
ob.uname = '哈哈'
console.log(ob.uname);
// 增
ob.age = 18
console.log(ob);
console.log(ob.age);//实时更新
//删
delete ob.uname
3.工厂化创建对象:
1.定义一个构造函数
2.调用函数并传入相关参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//-----------------用工厂方法创建对象---------------
//1.定义函数
function createPerson(name, age) {
let ob = new Object()
ob.name = name
ob.age = age
ob.sayName = function () {
document.write(this.name)
}
return ob
}
//2.调用函数并传入相关参数
let person1 = createPerson("啊哈", 400)
let person2 = createPerson("岚", 400)
let person3 = createPerson("药师", 400)
console.log(person1);
console.log(person2);
console.log(person3);
//------------用工厂方法创建对象+循环-----------
for (let i = 4; i <= 10; i++) {
var person = createPerson("person" + i, 18);
console.log(person);
}
</script>
</body>
</html>
4.工厂化创建对象优化:
每new一次,函数就会再定义一次,因此我们把函数提出来,节省空间
1.定义全局函数
2.创建工厂
3.调用工厂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.定义全局函数
function sayName() {
console.log(this.name);
}
//2.工厂
function Person(name, age) {
this.name = name
this.age = age
this.sayName = sayName
}
//3.调用
person_1 = new Person("巡猎", 100)
person_1.sayName()
</script>
</body>
</html>
5.对象吧的遍历:
使用for in 循环(不用for of :Object对象本身没有内置的遍历器,并没有实现这个接口,使得它无法被for…of遍历,而 for of遍历依靠的是遍历器Iterator。
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let person = {
name: "ah",
age: 18,
say: function () {
console.log(this.name);
}
}
person.say()
for (let x in person) {
document.write(`${x}:${person[x]}<br>`)
}
</script>
</body>
</html>
6.内置对象Math的使用:
内置对象:Math
1.使用:
var x = Math.PI; // 返回 PI
var y = Math.sqrt(16); // 返回 16 的平方根
2.常用:
abs(x) //返回 x 的绝对值。
floor(x) //返回 x,向下舍入为最接近的整数。
max(x, y, z, ..., n) //返回值最高的数字。
min(x, y, z, ..., n) //返回值最小的数字。
pow(x, y) //返回 x 的 y 次幂值。
random() //返回 0 到 1 之间的随机数。
round(x) // 将 x 舍入为最接近的整数。
示例:生成随机颜色:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 200px;height: 200px;"></div>
<script>
let getRandomColor = function (flag = true) {
if (flag) {
let x = '#'
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f',]
for (let i = 0; i < 6; i++) {
let random = Math.floor(Math.random() * arr.length)
x += arr[random]
}
return x
}
else {
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
return `rgb(${r},${g},${b})`
}
}
const div = document.querySelector('div')
div.style.backgroundColor = getRandomColor()
</script>
</body>
</html>
检查一个对象是否是一个类的实例:instanceof
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.全局函数
function say() {
console.log(this.name);//谁调用方法this就是谁
}
//2.工厂
function Person(name, age) {
this.name = name
this.age = age
this.say = say
}
p1 = new Person("hh", 18)
//instanceof的使用
console.log(p1 instanceof Person)//运算符检查一个对象是否是一个类的实例,它返回true或false
</script>
</body>
</html>