文章目录
一、字面量对象
什么是字面量对象？数据最原始的表示方式，如引号包含的字符串、数值、布尔类型等等具体数据，都可以是字面量对象
// name:变量，只是一个存储数据的容器，存储数据可以随时更换 // "tom"：字面量对象，一旦创建不能修改 var name = "tom"字面量对象，基础语法中大部分都是基础类型的数据
// 基础类型的字面量对象，一旦创建不能修改 // 程序中为了编码方便，将字面量对象存储到变量中进行操作 console.log("jerry") console.log(55) console.log(true) console.log(null)
1、认识json对象
JSON对象：存储复杂数据的字面量对象
① 基本语法：
// 使用大括号包裹的一段 key:value的键值对数据 // 键：属性名称 // 值：属性的数据 // 描述一个动物：使用json对象描述一个事物 var tom = { name: "汤姆", nickname: "tom", age: 65, gender: "公"}② 查询数据
// 直接查看json对象 console.log(tom) // 查看某个属性：查看对象的姓名 // 对象.属性名称 console.log(tom.name)③ 修改数据
// 根据 对象.属性 = 新数据 完成指定属性的修改 tom.gender = "male" console.log(tom) // {name: "汤姆", nickname: "tom", age: 65, gender: "male"}④ 思考：如何删除一个属性？
注意事项：以后的开发中，json对象的使用非常频繁；尤其是和数组结合到一起使用的方式，一个数组中可以包含多个json对象表示的数据
// 商品数组: 包含了3个商品
var goodses = [
{
id: 1, name: "华硕 冰刃", price: 12999, cnt: 80},
{
id: 2, name: "外星人x14", price: 17999, cnt: 20},
{
id: 3, name: "暗影精灵", price: 8999, cnt: 50}
]
2、json对象类型转换
json对象的类型转换，只要是和字符串之间的转换操作，js语法中提供了两个函数：
JSON.parse(json格式字符串)：将一个满足格式的字符串，转换成json对象JSON.stringify(json对象)：将一个json对象转换成字符串类型数据- 注意：
JSON(全部大写)的函数是固定操作语法
// 创建json对象
var tom = {
name: "汤姆", age: 65}
// json对象，可以直接访问属性，使用方便【特点】
console.log(tom.name) // 汤姆
// json对象 转换成 json格式的字符串类型数据
// 字符串数据：方便存储和渲染展示【特点】
var tom2 = JSON.stringify(tom)
// json.stringify(tom) // 错误，语法错误(SyntaxError)
console.log(tom2, typeof(tom2)) // '{name: "汤姆", age: 65}' string
console.log(tom2.name) // undefined，字符串没有name属性
// 字符串数据 转换成 json对象
// 在使用数据时，需要将json字符串数据转换成json对象直接使用
var tom3 = JSON.parse(tom2) // {name: "汤姆", age: 65}
console.log(tom3.name) // 汤姆
二、try-catch
关于代码中的错误：代码编写和运行过程中，会出现各种错误，大部分情况下出现错误都会导致程序直接结束！
- 语法错误：错误的拼写、错误的关键词等都会造成语法错误，程序是无法运行
- 解决方案：哪里出错改哪里！
- 运行错误：
- 并不是语法报错，只有在特定场景中才会出现错误
- 哪里出现错误，包容错误：容错开发，
try-catch
1、基本语法
运行时错误：异常Exception，表示代码执行过程中不正常的执行问题
try-catch：异常捕获语句，专门处理代码运行过程中出现的问题
try {
// 尝试执行可能出现错误的代码
// ...
} catch(e) {
// 一旦上面的代码执行出现问题，就执行catch中的代码进行友好提示
// 但是保障出现了错误不影响程序的运行，程序可以继续向下执行
}
2、 案例：观察代码的执行情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1、没有try-catch
// 模拟条件：true查询了今天的星期数据
// 模拟条件：false没有查询了今天的星期数据
// if(false) {
// var weekDay = [0,1,2,3,4,5,6] // 0-周日
// }
// if(weekDay[2]) {
// console.log("检查是否限行")
// }
// console.log("程序继续执行，正常出行")
// 2、使用try-catch 异常捕获，容错开发
// 模拟条件：true查询了今天的星期数据
// 模拟条件：false没有查询了今天的星期数据
if(false) {
var weekDay = [0,1,2,3,4,5,6] // 0-周日
}
try{
if(weekDay[2]) {
console.log("检查是否限行")
}
} catch(e) {
console.log("检查限行失败，切换手工检查")
}
// 即使34行代码出现了问题，不影响程序的正常运行：保障程序的可用性，容错开发
console.log("程序继续执行，正常出行")
</script>
</body>
</html>
三、代码调试
项目代码运行过程中，可能出现了和预期不一致的结果，直接观察源代码（需要丰富的编码经验才能快速定位问题），对于大部分开发人员来说~需要借助代码调试工具的支持
1、认识调试工具
JavaScript代码的调试工具，使用浏览器自带的控制台【源代码】
2、代码调试方式
可以在源代码中的行号上，使用鼠标进行点击标记（标记 点：断点）
- 断点：程序代码运行过程中，暂停到断点位置，由开发人员控制代码逐行执行
程序执行的控制台：开发人员控制代码逐行执行的过程
- 编号①：表示恢复代码执行，直接让代码执行到下一个断点或者执行完成
- 编号②：表示代码逐行执行，但是遇到函数直接获取函数返回值，不进入函数内容
- 编号③：表示代码逐行执行，但是遇到函数时进入函数内部逐行执行
- 编号④：表示代码在函数中正在逐行执行，直接跳出函数到函数调用的地方
3、代码的执行调试
① 不带函数的执行过程
var num1 = 12
var num2 = 23
var total = num1 * num2
console.log('total',total)
标记断点，刷新网页。
② 带函数的执行过程
// 2、附带函数
function mul(n1, n2) {
var s = n1 * n2
return s
}
var num1 = 12
var num2 = 55
var total = mul(num1, num2)
console.log(total, 'total')
四、本地存储
网络应用开发过程中，为了提高用户体验经常会记录用户的操作信息，如记录用户选择的网站主题、记住密码3天、记录用户播放视频进度
前端开发技术中记录用户的技术手段主要通过浏览器缓存实现，浏览器缓存实现技术主要包含如下几种：
HTTP缓存，一般用来缓存在线的css/js/font静态文件，也称为下游缓存（了解）cookie，一般用于服务器给计算机客户端缓存一些文本数据webstorage属于HTTP缓存的一部分，包含两种类型缓存sessionStorage，会话级缓存localStorage，本地缓存【使用最多】
1、cookie
① 什么是cookie
cookie是网站应用开发中，服务器给浏览器客户端记录文本数据的一个对象；记录数据的时候有如下特点：
- 数据格式：
key=value，保存的数据只能是文本数据 - 有过期时间：
expires=xxxx- 不设置过期时间，称为临时
cookie，会话结束数据删除 - 设置过期时间，称为永久
cookie，过期时间一到立即删除
- 不设置过期时间，称为临时
- 可以包含路径，给不同的路径保存不同的
cookie - 一个网站，大部分浏览器限制最多保存50个
key=value键值对 - 一个网站，大部分浏览器限制最多保存
4K数据
思考：如果面试的时候被问到，什么是
cookie&#
最低0.47元/天 解锁文章
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
