day 08 8.1 前端基础之JavaScript基础【二】
前端基础之JavaScript基础【二】
【1】、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>
【2】、Function 对象
函数在程序中代表的就是一段具有功能性的代码，可以让我们的程序编程更加具有结构性和提升程序的复用性,也能让代码变得更加灵活强大
【2.1】、声明函数
/*
// 函数的定义方式1
function 函数名 (参数){
函数体;
return 返回值;
}
功能说明：
可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return
// 函数的定义方式2
用 Function 类直接创建函数的语法如下：
var 函数名 = new Function("参数1","参数n","function_body");
虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型*/
【2.2】、函数调用
//f(); --->OK
function f(){
console.log("hello")
}
f() //----->OK
不同于python，js代码在运行时，会分为两大部分———检查装载 和 执行阶段。
- 检查装载阶段：会先检测代码的语法错误，进行变量、函数的声明
- 执行阶段：变量的赋值、函数的调用等，都属于执行阶段。
【2.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")
【2.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、函数的参数没有限制，但是返回值只能是一个；如果要输出多个值，可以通过数组或对象进行设计。
【2.5】、函数作用域
作用域是JavaScript最重要的概念之一。
JavaScript中，变量的作用域有全局作用域和局部作用域两种。
// 局部变量,是在函数内部声明,它的生命周期在当前函数被调用的时候, 当函数调用完毕以后,则内存中自动销毁当前变量
// 全局变量,是在函数外部声明,它的生命周期在当前文件中被声明以后就保存在内存中,直到当前文件执行完毕以后,才会被内存销毁掉
首先熟悉下var
var name = "yuan"; // 声明一个全局变量 name并赋值”yuan“
name = "张三"; // 对已经存在的变量name重新赋值 ”张三“
console.log(name);
var gender = "male"
var gender = "female" // 原内存释放与新内存开辟，指针指向新开辟的内存
console.log(gender)
作用域案例：
var num = 10; // 在函数外部声明的变量, 全局变量
function func(){
//千万不要再函数内部存在和全局变量同名的变量
num = 20; // 函数内部直接使用变量,则默认调用了全局的变量,
}
func();
console.log("全局num：",num);
【2.6】、匿名函数
匿名函数，即没有变量名的函数。在实际开发中使用的频率非常高！也是学好JS的重点。
// 匿名函数赋值变量
var foo = function () {
console.log("这是一个匿名函数！")
};
foo() //调用匿名函数
// 匿名函数的自执行
(function (x,y) {
console.log(x+y);
})(2,3)
// 匿名函数作为一个高阶函数使用
function bar() {
return function () {
console.log("inner函数！")
}
}
bar()()
【3】、DOM对象(了解)
DOM document Object Model 文档对象模型
// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对象
【3.1】、查找标签
- 直接查找标签
document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")
//返回dom对象，就是标签对象或者数组
- CSS选择器查找
document.querySelector("css选择器") //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">DIV1</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="outer">
<div class="c1">item</div>
</div>
<div class="c2">
<div class="c3">
<ul class="c4">
<li class="c5" id="i2">111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</div>
<script>
// 直接查找
var ele = document.getElementById("i1"); // ele就是一个dom对象
console.log(ele);
var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...]
console.log(eles);
var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...]
console.log(eles2);
//定位outer下的c1对应的标签
var outer = document.getElementsByClassName("outer")[0];
var te = outer.getElementsByClassName("c1");
console.log(te);
// css选择器
//层级定位(空格可以表示一个或多个层级)
var dom = document.querySelector(".c2 .c3 .c5");
console.log(":::",dom);
//层级定位
var doms = document.querySelectorAll("ul li");
console.log(":::",doms);
</script>
</body>
</html>
// （1）变量声明赋值
var x = 10; // 如果不写var则是全局变量
// （2）数据类型
var age = 10
var name = "yuan"
var isMarried = false
var names = ["rain","eric","yuan"]
var info = {name:"yuan",age:18,isMarried:false}
var info2 = {
"name": "yuan",
"age":22,
"sex": true,
"son": {
"name":"alex",
"age": 38
},
"hobby": ["篮球","唱","跳"]
}
// （3）运算符
+ - * / ++
+=
> < <=. >=. ===. !==
&& || !
// （4）流程控制语句
// 分支语句
if(条件){
// 条件为true时,执行的代码
}else{
// 条件为false时,执行的代码
}
switch(条件){
case 结果1:
// 满足条件执行的结果是结果1时,执行这里的代码..
break;
case 结果2:
// 满足条件执行的结果是结果2时,执行这里的代码..
break;
...
default:
// 条件和上述所有结果都不相等时,则执行这里的代码
}
// 循环语句
while(循环的条件){
// 循环条件为true的时候,会执行这里的代码
}
// 循环三要素
for(1.声明循环的开始; 2.条件; 4. 循环的计数){
// 3. 循环条件为true的时候,会执行这里的代码
}
// （5）函数
function add(x,y){
return x + y
}
add()
1
本文来自博客园，作者：Chimengmeng，转载请注明原文链接：https://www.cnblogs.com/dream-ze/p/17337544.html
