前端-ES6与JSON
前端-ES6与JSON
文章目录
- 前端-ES6与JSON
- 一、ES6
-
- 1.ES6的变量
- 2.ES6的类
- 3.ES6的继承
- 4.ES6模板字符串
- 5.箭头函数
- 二、JSON
- 三、变量的复制
-
- 1.变量的复制
- 2.深拷贝
- 五、前端的存储方法
- 六、this与class
一、ES6
简介： ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
1.ES6的变量
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>Documenttitle>
head>
<body>
body>
<script>
// 声明变量的关键字：var let const
// 1.let存在块级作用域，在代码块外调用，会输出未定义
// if(true){
// var a = 10
// let b = 20
// console.log(b)
// }
// console.log(a)
// console.log(b)
// 2.变量提升，var输出undefined是因为var声明的变量会自动进行变量提升，而let不会
// var tmp = new Date()
// function fun() {
// console.log(tmp)
// if(false){
// // var tmp = 'hello world' //undefined
// let tmp = 'hello world' //输出时间
// }
// }
// fun()
// 3.变量提升，foo使用var声明，会发生变量提升，即脚本开始运行时，变量foo就已经存在了，只是没有值，所以输出undenfined
// bar使用let声明，不会发生变量提升，表示在声明之前，变量bar是不存在的，所以直接输出会报错
// let的块级作用域规范了变量使用场景，极大的消除了潜在的bug
// console.log(foo) //undefined
// var foo = 2
// console.log(bar) //报错
// let bar = 10
// 4.let在声明变量前赋值会报错
// var str = '123'
// if (true) {
// str = 'abc'
// let str
// }
// const声明一个只读的常量,并且一旦声明，常量的值就不能发生改变
const pi = 3.14
console.log(pi)
script>
html>
2.ES6的类
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>Documenttitle>
head>
<body>
body>
<script>
// ES6提供了更接近面向对象的语法，引入了class（类）的概念，作为对象的模板，通过class定义类
class Point {
// constructor构造方法
constructor(x, y) {
this.x = x
this.y = y
}
// 这是定义方法的区域，前面不要加符号，也不要加function
toString() {
return this.x + ',' + this.y
}
}
// 生成类的实例对象，要用new关键字
var point = new Point(1,2)
console.log(point)
// 调用toString方法
console.log(point.toString())
class Time {
// constructor方法是类的默认方法，通过new关键字生成实例对象时，自动调用该方法
constructor(){
// 默认返回实例对象（this），但也可以返回别的对象
return new Date()
}
}
var time = new Time()
console.log(time)
script>
html>
3.ES6的继承
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>Documenttitle>
head>
<body>
body>
<script>
// 继承：extends
// 创建一个父类
class People {
constructor(name, age) {
this.name = name
this.age = age
}
eat(food) {
console.log(this.name + '正在吃' + food)
}
}
People.prototype.play = '打扑克'
let p = new People('小明', 18)
p.eat('面包')
console.log(p)
// 创建一个子类，继承People
class Man extends People {
constructor(name, age, sex) {
// super相当于自动执行父类里的构造函数
super(name, age)
this.sex = sex
}
// 封装一个自定义方法
playMj() {
console.log(this.name + '正在打麻将')
}
}
// 实例子类的对象，参数要和构造方法里的数量一致
let man = new Man('张三', 20, '男')
console.log(man)
// 调用父类的方法
man.eat('水果')
// 调用子类的方法
man.playMj()
// 存放在父类原型中的属性或方法也能被子类继承并调用
console.log(man.play)
script>
html>
4.ES6模板字符串
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>Documenttitle>
head>
<body>
<p>
p>
<div>div>
body>
<script>
let person = {
name: '小明',
age: 18,
sex: '男',
like: '打篮球',
score: 80
}
// ES5的字符串拼接语法，适用于少量拼接
var p = document.querySelector('p')
p.innerHTML = person.name + '考试打了' + person.score + '分，他今年' + person.age + '岁，是位' + person.sex +
'同学，热爱' + person.like
// ES6的模板字符串 ``
var div = document.querySelector('div')
div.innerHTML = `${person.name}考试打了${person.score}分，他今年${person.age}岁，
他是位${person.sex}同学，热爱${person.like} `
script>
html>
5.箭头函数
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>Documenttitle>
head>
<body>
body>
<script>
// ES5的 普通函数的写法
// let fun = function(){
// return 5
// }
// ES6的箭头函数，参数部分用圆括号
// let fun = () => 5
// 多个参数
// let fun = function(num1,num2){
// return num1 + num2
// }
// let fun = (num1,num2) => {
// return num1 + num2
// }
// console.log(fun(2,3))
// 一个参数时，圆括号可以省略
// let fun = str => {
// console.log(str)
// }
// fun('hello world')
// 箭头函数体内只有一句代码时，大括号可以省略
// let fun = str => console.log(str)
// fun('hello')
// 如果箭头函数内只有一个return，那么return关键词必须省略，否则会报错
// let fun = (num1,num2) => return num1 + num2 //会报错
// let fun = (num1,num2) => num1 + num2 //正确的写法
// 箭头函数返回对象，必须在对象外面加上圆括号
// let getItem = id => ({ id : id , name : 'zhangsan' })
let arr = [2, 5, 8]
// ES5的回调函数，当一个函数作为参数出现的时候，这个函数就被称为回调函数
// let result = arr.sort(function(a,b){
// return b - a
// })
// console.log(result)
// 箭头函数简化回调函数的写法
let result = arr.sort((a, b) => b - a)
console.log(result)
script>
html>
二、JSON
js的对象
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>Documenttitle>
head>
<body>
body>
<script>
// 构造函数创建对象
var obj = new Object()
obj.name = '张三'
obj.speak = function(){
console.log('锄禾日当午')
}
obj.speak()
console.log(obj)
// 字面量创建对象，类似于JSON数据的写法
var obj1 = {
name : '李四',
age : 18,
speak : function(){
console.log('hello')
}
}
console.log(obj1)
// 在JS里，对象和JSON是可以相互转化的
// 把对象转化为JSON数据
var a = JSON.stringify(obj1)
// key-value，JSON数据常见的格式，键值对
console.log(a)
// 把JSON数据转化成对象
console.log(JSON.parse(a))
// JSON：JavaScript Object Notation 中文名：JavaScript对象表示法
// 是轻量级的文本数据交换格式，JSON使用JS语法来描述数据对象，但是JSON独立于语言和平台
// JSON解析器和JSON库支持很多不同语言，android， java
// JSON和对象的区别：对象是可以写方法的，JSON不能
// 自定义构造函数
// People函数是一个构造函数，相当于面向对象的类，通过这个构造函数就可以实例出相应的对象
function People(name,age){
this.name = name
this.age = age
this.speak = function(){
// 在构造函数里，this指向正在创建的对象
console.log(this.name + '说：汗滴禾下土')
}
}
var obj2 = new People('小明',18)
var obj3 = new People('小红',20)
console.log(obj2)
console.log(obj3)
obj2.speak()
obj3.speak()
// 使用上面的方法创建对象，把对象的所有静态属性和方法都在构造函数里，会造成每一个实例出的对象都会保留一份静态属性和方法
// 而且这些方法是一模一样的，这样就会造成内存的浪费，所以对于这些相同的属性或方法放在一个公共的区域内，这个区域可以共享
// 这些属性或方法，这个公共区域就是原型(prototype)
function person(name,age){
this.name = name
this.age = age
}
// 向原型中添加属性或方法
person.prototype.job = '学生'
var person1 = new person('小白',18)
var person2 = new person('小黑',16)
console.log(person1)
console.log(person2)
console.log(person1.job)
script>
html>
三、变量的复制
1.变量的复制
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>Documenttitle>
head>
<body>
body>
<script>
// 基本数据类型复制，基本数据类型存在栈里，复制是对值的复制
var a = 10
var b = a
console.log(b) // 10
var b = 20
console.log(b) // 20
console.log(a) // 10
var str1 = 'www'
var str2 = str1
console.log(str2) //www
var str2 = 'yyy'
console.log(str2) //yyy
console.log(str1) //www
// 引用数据类型复制，引用数据存在堆里，复制的是内存地址
var obj1 = {
name: '小明'
}
var obj2 = obj1
console.log(obj2) //对象，小明
obj2.name = '小红'
console.log(obj2) //对象，小红
console.log(obj1) //对象，小红
// 更改变量2的某个属性，变量1中的属性也会发生变化
// 对于基本数据类型，复制是对值的传递，改变2,不会影响1的值
// 对于引用数据类型，复制是对内存地址的传递。改变2,1就会发生改变
script>
html>
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>Documenttitle>
head>
<body>
body>
<script>
var a = {
name : '小明',
age : 18
}
console.log(a)
// 深拷贝的方法
function copy(obj){
// 创建一个空的对象，由于创建对象相当于在堆内存中开辟出一个新的空间，所以我们先创建一个对象，指向一个内存地址
var newObj = {}
// 遍历需要处理的对象
for (value in obj) {
// 把传进来的对象的所有的属性和值全部赋给刚才创建的空对象
newObj[value] = obj[value]
}
// 再把新的对象返回
return newObj
}
// 复制
var b = copy(a)
console.log(b) // 小明
// 更改属性
b.name = '小红'
console.log(b) // 小红
console.log(a) // 小明 更改b的属性，没有影响a的值
script>
html>
五、前端的存储方法
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>Documenttitle>
head>
<body>
body>
<script>
// sessionStorage：会话存储
// 存储时间为当前页面关闭之前，页面关闭，存储数据消失
// 存储大小约为5M
// 设置一个存储信息
// sessionStorage.setItem('name','zhangsan')
// sessionStorage.setItem('password','666666')
// console.log(sessionStorage.getItem('name'))
// console.log(sessionStorage.getItem('password'))
// 遍历sessionStorage
// for (const key in sessionStorage) {
// console.log('姓名:' + sessionStorage[key] + '密码:' + sessionStorage[key])
// }
// sessionStorage,localStorage在存储引用数据类型的数据时，会显示[Object,Object]，不会显示原始数据
// 所以我们存数据时把对象转化成JSON数据，取的时候转回对象
sessionStorage.setItem('person', JSON.stringify({ a: 10, b: 20 }))
console.log(JSON.parse(sessionStorage.getItem('person')))
// 创建一个函数，解决浏览器存储对象的问题
// localStorage：本地存储
// 存储时间是永久的，除非手动删除
// localStorage.setItem('name','xiaoming')
// localStorage.setItem('age','18')
// // 移除本地存储中的某条数据
// localStorage.removeItem('name')
// localStorage.removeItem('age')
// // 移除本地存储中的所有数据
// localStorage.clear()
// cookie存储
// 可以手动设置存储时间，以毫秒为单位，转化为天数需要自己计算
// 存储大小约为4KB
script>
html>
六、this与class
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>Documenttitle>
head>
<body>
body>
<script>
// 1.属性或方法添加到this上
class People{
constructor(){
}
}
let peo1 = new People()
console.log(peo1)
peo1.userName = '张三'
console.log(peo1.userName) //输出张三
// 在上面的代码中，People类定义后，给peo1添加了一个userName属性
// 这种方式仅仅是给当前对象添加的属性，也就是this，这种方式就叫属性或方法添加到this上
let peo2 = new People()
console.log(peo2.userName) //undefined
// 2.属性或方法添加到类上
class Person{
constructor(){
}
}
Person.prototype.job = '打工人'
let per1 = new Person()
let per2 = new Person()
console.log(per1)
console.log(per2)
// 使用prototype，给类添加属性，这样的话，这个类的所有实例化对象就都有了job属性
// 在JS中，每一个类都有prototype，就是类的原型，类的所有实例化对象都共享一个原型，如果要访问这个原型，可以使用__proto__指针
class Point{
constructor(){
}
}
let p1 = new Point()
console.log(p1)
console.log(p1.__proto__)
let p2 = new Point()
console.log(p1.__proto__ === p2.__proto__) // true 证明类的所有实例化对象都共享一个原型
// 类的静态成员
class User{
constructor(){
}
}
// 直接使用User.userName，这种方式只是给类添加了一个静态属性，访问时不能通过实例化对象，只能使用类名调用
User.userName = '小明'
let user = new User()
console.log(user.userName) //undefined
console.log(User.userName) //小明
script>
html>