json
- 前端语言有三个，分别是html、css、JavaScript
- 后端语言有很多很多，java、php、python、go、c、c++、.net、c#、ruby、rust、node.js...
前端和后端需要相互之间传递数据，前端有自己的规范，后端每一种语言都有自己的规范，那么进行数据交互的时候成本会非常高，也非常不利于开发
为了解决数据交互的问题，有人就提出了标准化数据格式，这种数据格式每一种语言都支持，可以解决成本和不便利的问题
json:
- json就是用于前后端数据交互的一种数据格式
- 被绝大多数语言都支持
- 前端开发人员来学习json成本是非常低的，因为json数据格式使用的语法就是js对象
- json要求所有的属性名都使用双引号
- 在js对象的外层还需要加单引号，因此说json是一种特殊的字符串类型
json转换方法
- 把js对象转成json格式 :
JSON.stringify() - 把json格式转成js对象 :
JSON.parse()
var arr = '[{"name" : "张三", "age" : 18, "sex" : "男"}, { "name" : "李思","age" : 20,"sex": "女"}]'
console.log(arr)
console.log(typeof arr) // string
eval():
这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
var str = 'alert("你好啊！")'
eval(str)
如果使用eval()执行的字符串中含有{}, 它会将{}当成代码块执行，如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
var str = 'alert("你好啊！")'
eval(str)
var obj = '{a: 1}'
var res = eval(obj)
console.log(res)
var obj = eval("("+'{a:1, b:2}'+")");
console.log(obj)
xml可扩展标记语言
- 也是一种数据格式，和json的功能是一样的，但是没有json好用，现在基本上都是在使用json
- xml语法和html语法一样的
- xml数据结构采用的是html标记形式，只不过它的标记可以自定义，而html标记不能自定义，是规定好的
xml和json区别
- json是轻量级
- xml使用起来相对比较麻烦
- json处理数据速度更快
ES5严格模式 'use strict'
- 全局严格模式，把进入严格模式的代码放在全局作用域的最顶端
- 局部严格模式，把进入严格模式的代码放在函数里面
-
- 全局变量声明时，必须加关键字(var)
- 函数内不允许出现重名参数
- arguments对象不允许被动态改变
- 不允许使用arguments.callee
- 注意点：arguments.callee()在ES5的版本中被废弃掉了
this对象
- 指的是函数执行上下文对象
- this是函数内部隐含的一个参数，它会根据函数的调用方式不同而指向不同的对象
- 作用：最大的作用就是根据函数调用方式不同，指向的对象不同
- 规则：
- 函数名称加括号调用函数时，this指向的是window。在ES5严格模式下，通过这种方式this是无法执行全局对象window的
- 当通过对象调用函数的时候，里面的this指向的是当前的对象
- 当通过事件调用函数的时候，里面的this指向的是当前事件的调用者
'use strict'
function fn(){
console.log(this) // window
// ES5严格模式下是 undefined
}
fn()
var obj2 = {
name: '王成',
running(){
// console.log(this)
console.log(this.name + '喜欢晚上去公园里面跑步！')// 王成喜欢晚上去公园里面跑步！
}
}
obj2.running()
提示：通过标记名称获取元素，结果是一个伪数组
需求：当点击那个元素的时候改变其背景颜色
注意：在js里面使用css属性，只需要把属性连接的中划线修改为小驼峰命名即可
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
通过标记名称获取元素，结果是一个伪数组
通过遍历伪数组来快速绑定事件
var aBtn = document.getElementsByTagName('button')
/*
问题：在事件处理函数里面获取不到最新的i的值
原因：事件是只有咱们触发了才会去调用事件处理函数，循环是不会等待事件触发后再去执行的，因此出现了，循环先执行完毕，后执行的事件，因此拿到不到i的值
规则：当事件处理函数在循环里面的时候，会先执行完毕循环后，再去执行事件处理函数
*/
// 循环执行完毕了，在外面拿到的肯定是不满足的值
for(var i=0; i<aBtn.length; i++){}
// console.log(i) // 5
for(var i=0; i<aBtn.length; i++){
// console.log("2");
aBtn[i].onclick = function(){
console.log("1");
aBtn[i].style.backgroundColor = 'orange'
// console.log(aBtn[i]) // undefined
// console.log(i) // 5
}
}
/*
排他思想：先清除所有的样式，再给自己设置
*/
for(var i=0; i<aBtn.length; i++){
aBtn[i].onclick = function(){
// for(var j=0; j<aBtn.length; j++){
// // aBtn[j].style.backgroundColor = ''
// }
console.log(this);
this.style.backgroundColor = 'hotpink'
}
}
ES5数组方法
indexOf(data,start)：
- 接收两个参数：要查找的项和（可选的）表示查找起点位置的索引
- 注意：进行查找的时候只能找到这个元素第一次在数组中出现的位置。如果没有找到那么返回
-1
var arr = ['a', 'b', 'c', 'b', 'h', 's', 'b']
var index = arr.indexOf('b', 4)
var index1 = arr.indexOf('l')
console.log(arr[index])
console.log(index)
// lastIndexOf() 从后面往前面进行查找
var arr = ['a', 'b','h', 'b','d', 'h', 's', 'b']
console.log(arr.lastIndexOf('b', 5))
findIndex():
- 查找数组元素的位置的，但是它里面可以写条件
- 参数是一个回调函数
- 回调函数参数
参数1表示的是当前数组的元素参数2表示的是当前数组元素的下标参数3表示的是当前数组
var index = list.findIndex(function(item){
return item.id == 2
})
list[index].cart_num = 1;
console.log(list)
var list = [
{
id: 1,
title: 'Xiaomi 14 Pro',
price: 4999,
cart_num: 0
},
{
id: 2,
title: 'Xiaomi 14',
price: 3999,
cart_num: 0
},
{
id: 3,
title: 'Redmi Note 13 Pro',
price: 1399,
cart_num: 0
}
]
var index = list.findIndex(function(item){
return item.id == 2
})
console.log('index:',index)
list[index].cart_num = 1
console.log(list)
forEach():
- 循环 对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值
- 参数是一个回调函数
- 回调函数参数
参数1表示的是当前数组的元素参数2表示的是当前数组元素的下标参数3表示的是当前数组
- 注意:
forEach是没有返回值的
var arr = [10, 3, 2, 1, 7, 8]
var newArr = []
arr.forEach(function(item){
item *= (1+0.3)
newArr.push(item)
})
console.log(newArr)
map():
- 会遍历当前数组，然后调用参数中的方法，返回当前方法的返回值。
- map可以改变当前循环的值，返回一个新的被改变过值之后的数组（map需return），一般用来处理需要修改某一个数组的值。映射
- 参数是一个回调函数
- 回调函数参数
参数1表示的是当前数组的元素参数2表示的是当前数组元素的下标参数3表示的是当前数组
var data = [
{
id: 1,
name: '成',
age: 18,
phone: 18600614567
},
{
id: 2,
name: '俊骏',
age: 20,
phone: 18300614566
}
]
var res = data.map(function(item){
// return item.phone
// return item.name
return item.name += 'vip'
})
console.log(res)
filter():
- 遍历和过滤。返回符合条件的元素的数组。filter需要在循环的时候判断一下是true还是false，是true才会返回这个元素
- 参数是一个回调函数
- 回调函数参数
参数1表示的是当前数组的元素参数2表示的是当前数组元素的下标参数3表示的是当前数组
var data = [
{
id:1,
name:'泥甘哞',
age:'18'
},
{
id:2,
name:'梅狸猫',
age:'20'
},
{
id:3,
name:'蔡徐坤',
age:'23'
}
]
var res = data.filter(function(item){
return item.age > 18
})
console.log(res)
模糊搜索功能
includes() 字符串方法，查找到字符串里面是否有满足条件的，只有有就返回true
var res = data.filter(function(item){
return item.name.includes('猫')
})
console.log(res)
// includes() 字符串方法，查找到字符串里面是否有满足条件的，只有有就返回true
var str = 'abc'
console.log(str.includes('b'))
实例练习：去重
var arr = ['a', 'a', 'a', 'b', 'b', 'b', 'c', 'c', 'f', 'd', 's', 'd', 's']
// indexOf()只会查找数组元素第一次在数组中出现的位置
var res = arr.filter(function(item, index){
// 'a' 0 == 0
// 'a' 0 == 1 不满足
// 'a' 0 == 2 不满足
// 'b' 3 == 3 满足
// 'b' 3 == 4 不满足
// console.log(index)
// console.log('--------')
// console.log(arr.indexOf(item))
return arr.indexOf(item) == index
})
console.log(res)
find():
- 根据条件返回数组中满足条件的数组元素，但是返回是当前的数组元素，不会放在一个新数组里面
- 参数是一个回调函数
- 回调函数参数
参数1表示的是当前数组的元素参数2表示的是当前数组元素的下标参数3表示的是当前数组
var res1 = data.filter(function(item){
return item.id == 2
})
console.log(res1)
var res = data.find(function(item){
return item.id == 2
})
console.log(res)
字符串创建
字面量
var str = 'hello'
构造函数
var str = new String('hello')
console.log(str)
console.log(typeof str) // object
包装类
var str = String('hello')
console.log(str)
console.log(typeof str) // string
js使用属性和方法规则：
规定基本数据类型是无法使用属性和方法的，只有引用数据类型才能使用属性和方法
包装类类型：
- 基本数据类型无法使用属性和方法的，但是有时候需要让基本数据类型使用属性和方法，但是又不能违法规则，因此提出了包装类
- 当基本数据类型在使用属性和方法的时候，会先把基本数据类型转成引用数据类型，当你使用完毕后再转成基本数据类型(自动）
包装类
- String()
- Number()
- Boolean()
