文章目录
前端–JavaScript常用对象
1. JSON对象
- JSON 文件的文件类型是
".json"- JSON 文本的 MIME 类型是
"application/json"
1.1 JSON简介
JSON(JavaScript Object Notation, JS 对象简谱)是一种轻量级的数据交换格式。它基于 ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。- JSON 是存储和传输数据的格式。
- JSON 经常在数据从服务器发送到网页时使用。
- JSON 独立于语言 *
- JSON 是“自描述的”且易于理解。
- * JSON 的语法是来自 JavaScript 对象符号的语法，
但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。
1.2 JSON语法
{key:value,key:value,key3:value3}// 通过字面量创建对象 var zhangsan1={name:"张三",age:19,sex:"男"} // json数据格式 var zhangsan2={"name":"张三","age":19,"sex":"男"} for (let i in zhangsan2){ //如果一个对象中的key是一个变量， console.log(i); // 那么获取key对应的值使用:对象名[key] 这种方式获取value; console.log(zhangsan[i]); console.log(zhangsan.i);//undefined }
JSON 值可以是：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
数组（在方括号中）- 对象（在花括号中）
- null
"employees":[ {"firstName":"Bill", "lastName":"Gates"}, {"firstName":"Steve", "lastName":"Jobs"}, {"firstName":"Alan", "lastName":"Turing"} ]
对象 "employees" 是一个数组。它包含了三个对象。
JSON 字符串转换为 JavaScript 对象
首先，创建包含 JSON 语法的 JavaScript 字符串：
var text = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';
然后，使用 JavaScript 的
内建函数 JSON.parse()来把这个字符串转换为 JavaScript 对象：
var obj = JSON.parse(text);
最后，请在您的页面中使用这个新的 JavaScript 对象：
<script>
document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
JavaScript 对象转成 JSON 字符串
JSON.stringify();
var zhangsan1={name:"张三",age:19,sex:"男"}
var str=JSON.stringify(zhangsan1);
console.log(typeof str);//string
1.3 JSON vs XML
JSON 和 XML 均可用于从 web 服务器接收数据。下面的 JSON 和 XML 实例都定义了雇员对象，包含了由 3 个雇员构成的数组：
JSON
{"employees":[ { "firstName":"Bill", "lastName":"Gates" }, { "firstName":"Steve", "lastName":"Jobs" }, { "firstName":"Elon", "lastName":"Musk" } ]}XML
<employees> <employee> <firstName>Bill</firstName> <lastName>Gates</lastName> </employee> <employee> <firstName>Steve</firstName> <lastName>Jobs</lastName> </employee> <employee> <firstName>Elon</firstName> <lastName>Musk</lastName> </employee> </employees>JSON 类似 XML，因为:
- JSON 和 XML 都是“自描述的”（人类可读的）
- JSON 和 XML 都是分级的（值中有值）
- JSON 和 XML 都能被大量编程语言解析和使用
- JSON 和 XML 都能被 XMLHttpRequest 读取
JSON 与 XML 的差异在于：
- JSON 不使用标签
- JSON 更短
- JSON 的读写速度更快
- JSON 可使用数组
- 最大的不同在于：
XML 必须使用 XML 解析器进行解析。而 JSON 可通过标准的 JavaScript 函数进行解析。为什么 JSON 比 XML 更好？
- XML 比 JSON 更难解析。
- JSON 被解析为可供使用的 JavaScript 对象。
- 对于 AJAX 应用程序，JSON 比 XML 更快更易用：
- 使用 XML
- 读取 XML 文档
- 使用 XML DOM 遍历文档
- 提取变量中存储的值
- 使用 JSON
- 读取 JSON 字符串
- JSON.Parse JSON 字符串
2. Date日期对象
<script>
/**
* Date(日期)对象
*/
var date = new Date();
// Mon Nov 02 2020 21:21:35 GMT+0800 (中国标准时间）
console.log(date);
console.log("----------获得年月日-------------");
console.log(date.getFullYear() + "年");//获得当前系统年份
console.log(date.getMonth() + 1 + "月");//月份是从0 开始的。所以正常月份需要+1；
console.log(date.getDate() + "日");//日期。指的是天。
console.log("----------获得时分秒-------------");
console.log(date.getHours() + "点");//小时
console.log(date.getMinutes() + "分");//分
console.log(date.getSeconds() + "秒");//秒
console.log(date.getMilliseconds() + "毫秒");//毫秒
console.log("----------获得星期 -------------");
console.log("周" + date.getDay());//周日是0; 获取星期。
// console.log(date.getTime());
// 这个方法获取的是当前时间与1970年1月1日的毫秒差值。
// 1970年1月1日 计算机元年。unix 倒计时，
console.log(date.getTime());
console.log(date.valueOf());//也是获取的是当前时间与1970年1月1日的毫秒差值。
console.log("----------获得日期 -------------");
console.log(date.toLocaleDateString());//获取到当前的日期，不包含时间
console.log(date.toLocaleTimeString());//获取当前时间，不包含日期。
// 小练习：2020年11月2日 星期一 21:31:44 806
console.log("---------- 小练习 -------------");
var da = new Date();
var year = da.getFullYear();//年
var month = da.getMonth() + 1;//月
var ri = da.getDate();//日
var week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六",];
var xingqi = da.getDay();//星期
var hour = da.getHours();//小时
var min = da.getMinutes();//分
var seconds = da.getSeconds();//秒
var mills = da.getMilliseconds();//毫秒
console.log(year + "年" + month + "月" + ri + "日" +
" " + week[xingqi] + " " + parseNum(hour) + ":" + parseNum(min) + ":" + parseNum(seconds) + " " + mills);
function parseNum(num) {
if (num >= 10) {
return num;
} else {
return "0" + num;
}
}
</script>
3. Math数学对象
- Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。使用 Math 的属性和方法的语法：
- 属性：
var pi_value=Math.PI;- 方法：
var sqrt_value=Math.sqrt(15);开平方。
<script>
console.log("----------------绝对值，向上/下取整，四舍五入-----------------");
console.log(Math.PI);//π
console.log(Math.abs(-5));//绝对值函数
console.log(Math.ceil(3.14));//向上取整 4
console.log(Math.ceil(3.0));//向上取整 3
console.log(Math.floor(3.98));//向下取整 3
console.log(Math.round(9.5));//四舍五入 10
console.log(Math.round(9.4));//四舍五入 9
console.log("----------------最大/小值，幂次方-----------------");
var a = 9;
var b = 8;
var c = 22;
var d = 521;
console.log(Math.max(a, b));//比较a,b的最大值
console.log(Math.max(c, Math.max(a, b)));//比较c与 a,b的最大值
console.log(Math.max(a, b, c, d));//直接比较a,b,c,d的最大值。
console.log(Math.min(a, b, c, d));//求abcd的最小值。
console.log(Math.pow(2, 3));//2的3次幂
console.log("----------------随机数random()，包前不包后-----------------");
var number = Math.random();//取值范围0-1 [0,1) 包含0 ，不包含1;
console.log(number);
console.log(parseInt(Math.random() * 5));//取值范围[0-5)
console.log("----------------问题1：取0到4之间的整数-----------------");
console.log(parseInt(Math.random() * 5));//0-4的随机数
console.log(Math.floor(Math.random() * 5));//0-4的随机数
console.log("----------------问题2：取1-5-----------------");
console.log(parseInt(Math.random() * 5) + 1);
console.log("----------------问题3:取 9-28之间的整数-----------------");
console.log(parseInt(Math.random() * 20) + 9);
// 0-19 +9
// （尾部-头部+1）*Math.random()+头部
</script>
3.1 随机点名案例
<script>
var studentArr = ["小明", "小段", "小伟", "小欢", "大壮", "小苗", "喵喵"];
var max = studentArr.length;
var random1 = parseInt(Math.random() * max);
// 百分之五十概率点中小苗，即我们控制概率
var dz = parseInt(Math.random() * 2);//0-2
if (dz == 0) {
// 小苗的下标
random1 = 5;
console.log("请" + studentArr[random1] + "回答问题");
} else {
console.log("请" + studentArr[random1] + "回答问题");
}
</script>
4. JS基本包装类型
- 基本数据类型：number ,string ,boolean。
包装类型：Number,String,Boolean 对象。
- 当值类型的数据要进行方法调用的时候，会先将自己转换成基本包装类型，会在堆内存中创建一个的对象，象的方法，当方法调用结束，会自动再转回值类型，此时堆内存的对象已经没有再被指向，会自动清理掉。
4.1 Number和Boolean
<script>
console.log("-----------------Number--------------------");
var num1 = 10;
console.log(num1);
console.log(num1.toString);
var num2 = new Number(10);
console.log(num2);
var num3 = new Number(10);
console.log(num2 == num3);//false 因为两个对象，内存地址不同。所以为false
console.log(num2 == 10);//true num2对象会隐式转换成基本数据类型，然后执行加法操作。
console.log(num2 + num3);//20 包装类型对象执行加法操作的时候，两个对象会转换成基本数据类型，然后在执行相加的操作。
console.log(num2 + "");//10
console.log("-----------------Boolean--------------------");
var bool = new Boolean(true);
console.log(bool);
var bool2 = new Boolean(true);
console.log(bool2);
console.log(bool == bool2);//false
console.log(bool == true);//true
</script>
4.2 字符串String
字符串的不可变性
- 数组：是一个有序的数据的集合。
- 字符串：一组字符的结合，字符串是一个一个的字符拼接成的。
变量.length 获取字符串的长度。- 遍历字符串：每个元素可以通过字符串[下标]获取当前元素；
- 字符串中的每个元素不可修改：字符串的不可变性。符串一旦形成，字符串中的每个字母（元素），都是不可以修改的。
str = "hello jack";修改的str这个变量的指向。实际上Hello Justweb依然是没有被修改的。
<script>
var str="Hello Justweb";
console.log(str.length);//13
console.log(str[0]);// H
str[1]="h";
console.log(str[1]);//e
console.log("------------遍历Hello Justweb字符串-----------------");
for (let i = 0; i < str.length; i++) {
console.log(str[i]);
}
str="hello jack";
console.log(str);// hello jack
</script>
字符串常用的方法
<script>
console.log("----------------str---------------------");
var str = "a今天的a内容好简单啊，就是记不住。";
console.log(str.charAt(3));//返回在指定位置的字符。
console.log(str.charCodeAt(0));//97 返回在指定的位置的字符的 Unicode 编码。
console.log(str.concat("我也觉得", "12345"));//连接字符串; 正常不用concat 用+来拼接字符串。
// 4
console.log(str.indexOf("a", 1));//检索字符串。第二个参数是检索开始的位置。从前往后开始检索。
// 4
console.log(str.lastIndexOf("a", 10));//检索字符串。第二个参数是检索开始的位置。从后往前开始检索。
console.log(str.indexOf("张三"));//如果检索不到结果，这时候返回值为-1；
console.log(str.replace("a", "")); // 将字符串中的a字符替换成空字符；但是只能够替换一个
console.log(str.replace(/a/g, ""));//正则表达式全局替换
console.log("----------------str1---------------------");
var str1 = "";
for (let i = 0; i < str.length; i++) {
if (str[i] != "a") {
str1 = str1 + str[i];
}
}
console.log(str1);
console.log("----------------str2---------------------");
var str2 = "今天天气很好，很适合放风筝";
// slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
// 第一个参数，索引开始的位置，第二个参数索引结束的位置。
// 如果start为负数，那么start = start + length;如果end为负数，end = end + length;则从字符串的结尾开始计数。
console.log(str2.slice(-12, -10));
// 第一个参数指的是开始的位置，第二个参数指的是切的个数。
// 从第三个位置开始，切3个字。开始位置可以是负数。第二个参数不能为负数。
console.log(str2.substr(3, 3));
console.log(str2.substring(1));// 可以只写一个参数，这个时候，从下标为1的位置开始，到最后。
console.log("----------------str3---------------------");
var str3 = "刘德华,张学友,小小,施文涛";
console.log(str3.split(","));//根据字符串中的分隔符进行切割，切割成数组中的多个元素。
console.log("----------------str4---------------------");
var str4 = " aKKb ";
console.log(str4.toLocaleLowerCase());//将字符串中所有的字母转成小写。
console.log(str4.toLocaleUpperCase());//将字符串中所有的字母转成大写
console.log(str4.trim()); //清除字符串两边的空格
</script>
5. 数组常用方法
<script>
console.log("---------------往数组尾部加数据----------------");
var arr = [1, 2, 3, 4, 5, 6];
// arr[arr.length]=7;
// arr[arr.length]=8;
// arr[arr.length]=9;
console.log(arr);
arr.push(7);//压桟。在数组的尾部添加数据。
arr.push(8);
arr.push(9);
console.log(arr);
arr[arr.length - 1] = undefined;
console.log(arr.length);// 修改数组最后一个数据的值，但是数组长度不变
console.log(arr);
console.log("---------------在数组尾部删除数据----------------");
arr.pop();
arr.pop();//弹桟 ，在数组尾部删除数据
console.log(arr.length);//弹桟 ，在数组尾部删除数据。
console.log(arr);
console.log("---------------往数组头部添加数据----------------");
arr.unshift(0);
arr.unshift(100);//往数组头部添加数据。
console.log(arr.length);//往数组头部添加数据。
console.log(arr);
console.log("---------------从数组头部删除数据----------------");
arr.shift();
arr.shift();
arr.shift();// 从数组头部删除数据。
console.log(arr.length);// 从数组头部删除数据。
console.log(arr);
console.log("---------------反转数组----------------");
arr.reverse();
console.log(arr);
console.log("---------------数组的拼接----------------");
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8];
// for (let i = 0; i < arr2.length; i++) {
// arr1[arr1.length]=arr2[i]
// }
// console.log(arr1); 1----8
console.log(arr1);
var arr3 = arr1.concat(arr2);
console.log(arr3);//concat不会修改原本的数组。
// concat方法有返回值，会将拼接好的新数组返回，不会影响原本的数组。
console.log(arr1.concat(7, 9, 0, 1));
var arrn = arr1.concat([arr2]);
console.log(arrn[5][2]);// 8
console.log(arrn);
console.log("---------------数组的切割----------------");
console.log(arr1);//不会影响原数组。切割数组，生成一个新的数组。
console.log(arr1.slice(0, 2));
console.log("---------------数组splice----------------");
console.log(arr1);
var a = arr1.splice(1, 3, "呵呵");
console.log(a); //影响了原来的数组。，这个是删去部分
console.log(arr1);//[1, "呵呵", 5]
console.log("---------------数组的排序----------------");
var arr = [1, 32, 25, 7, 9, 2, 4, 6, 8, 0];
arr.sort(compare);//按第一个字符进行排序的
// 第一种方法，升序
function compare(a, b) {
return a - b;//优化结果
}
console.log(arr);//按第一个字符进行排序的
arr.sort(compareN);
// 第二种方法，降序
function compareN(a, b) {
return b - a;
}
console.log(arr);
</script>
补充：函数是可以作为参数传递的。
- 匿名函数：也可以作为参数传递。
<script>
/**
* 函数是可以作为参数传递的。
* 匿名函数：也可以作为参数传递。
*/
function sum(hanshu) {
hanshu();
}
// 命名函数
function fn() {
console.log("当成参数传递的函数执行了")
}
sum(fn);
// 匿名函数
// var a= function(){
// console.log("当成参数传递的函数执行了")
// }
sum(function () {
console.log("当成参数传递的函数执行了")
});
</script>
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
