Diary23-JavaScript学习(中）

2023-12-13 10:33:15

4.函数

4.1定义函数

定义方式一

function abs(x){
 ? ?if(x>=0){
 ?      return x;
 ?  }else{
 ?      return -x;
    }
}

定义方式二

var abs=function(x){
 ? ?if(x>=0){
 ?      return x;
 ?  }else{
 ?      return -x;
    }
}

arguments参数:可以拿到传递进来的所有参数

var abs = function(x){
    
 ? ?console.log("x=>"+x);
?
    for (var i = 0; i<arguments.length; i++){
        console.log(arguments[i]);
    }
?
 ? ?if(x>=0){
 ?      return x;
 ?  }else{
 ?      return -x;
    }
?
}

rest:获取除了已经定义的参数之外的所有参数，rest参数必须放在最后面，用...标识

function aaa(a,b, ... rest) {
 ? ?console.log("a=>"+a);
 ? ?console.log("b=>"+b);
 ? ?console.log(rest);
}

4.2变量的作用域

在JavaScript中，var定义变量实际是有作用域的

  • 假设在函数体中声明，则在函数体外不可以使用

  • 假设在JavaScript中函数查找变量从自身函数开始~,由“内”向“外”查找.假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。

  • 养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

局部作用域:用let去定义局部作用域的变量

function aaa(){
 ? ?for (let i=0;i<100;i++){
 ? ? ? ?comsole.log(i)
 ?  }
 ? ?comsole.log(i+1);
}

全局作用域:JavaScript实际只有一个全局作用域，任何变量(函数页可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错

var x = 'xxx';
?
window.alert(x);
?
var old_alert = window.alert;
?
//old_alert(x);
?
window.alert = function () {
?
};
// 发现 alert()失效了
window.alert(123);
?
//恢复
window.alert = old_alert;
window.alert(456);

常量const

const PI=3.14;
console.log(PI);

4.3方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

var sunshen = {
 ? ?name:'sxc’,
 ? ?bitrh: 2000,
 ? ?//方法
 ? ?age: function () {
 ? ?// 今年 - 出生的年
 ? ?var now = new Date().getFullYear();
 ? ?return now-this.bitrh;
 ?  }
}
?
//属性
sunshen.name
//方法,一定要带()
sunshen.age ()

apply:在JS中可以控制this指向

function getAge() {
// 今年 - 出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
?
}
?
var sunshen = {
name:'sxc',
bitrh: 2000,
age: getAge
?
};
?
// sunshen. age() ok
?
getAge.apply(sunshen,[]);// this,指向了 sunshen,参数为空

5.内部对象

5.1 Date

var now = new Date(); //Sat Jan 04 2020 10:47:06 GMT+0800(中国标准时间)
now.getFullYear();//年
now.getMonth();//月 ? ? 0~11代表月
now.getDate(); // 日
now.getDay();// 星期几
now.getHours();//时
now.getMinutes();// 分
now.getSeconds(); // 秒
?
now.getTime();// 时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
?
console.log(new Date(1578106175991))//时间戳转为时间

转换

now = new Date(1578106175991)
Sat Jan 04 2020 10:49:35 GMT+0800(中国标准时间)
now.toLocalestring //注意,调用是一个方式,不是一个属性!
f toLocalestring() { [native code] }
now. toLocalestring()
"2020/1/4 上午10:49:35"
now. toGMTString()
"Sat, 04 Jan 2020 02:49:35 GMT"

5.2 JSON

在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示;number,string ...

格式:

  • 对象都用{}

  • 数组都用[]

  • 所有的键值对 都是用 key:value

JSON字符串和JS对象的转化

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
<body>
?
<script>
 ?var person={
 ? ?name:"sxc",
 ? ?age:"22",
 ? ?sex:"男"
  }
 ?//对象转化为json字符串  {"name":"sxc","age":"22","sex":"男"}
 ?var jsonperson=JSON.stringify(person);
?
 ?//json字符串转化为对象参数为json字符串
 ?var obj=JSON.parse('{"name":"sxc","age":"22","sex":"男"}');
</script>
?
</body>
</html>

JSON与JS对象的区别

var obj = {a: 'hello',b:'hellob'};
var json = '{"a": "hello","b":"hellob"}'

6.面向对象编程

class继承

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
<body>
?
<script>
 ? ?class Student{
 ? ? ? ?constructor(name) {
 ? ? ? ? ? ?this.name=name;
 ? ? ?  }
?
 ? ? ? ?hello(){
 ? ? ? ? ? ?alert('hello')
 ? ? ?  }
 ?  }
?
 ? ?var sxc=new Student("sxc");
</script>
?
?
</body>
</html>

7.操作BOM对象(重点)

window:代表浏览器窗口

window.alert(1)
undefined
window. innerHeight
258
window. innerwidth
919
window.outerHeight
994
window. outerwidth
919

screen:代表屏幕尺寸

screen.width
1920px
screen.height
1080px

location（重要）：代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() // 刷新网页
// 设置新的地址
location.assign('https://blog. kuangstudy.com/')

document:代表当前页面

document.title
“百度一下,你就知道”

获取具体的文档树节点

<d1 id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</d1>
?
<script>
var dl = document. getElementById('app');
</script>

获取cookie

document.cookie
'_xsrf=2|8c7b1902|458eb5a7fa1c45676be1cfe9e19cb67e|1700048275'

history

history.back() //后退
history.forward()//前进

文章来源:https://blog.csdn.net/sxc010701/article/details/134964601
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。