1.ES5回顾
严格模式
严格模式 是为了避免JS中出现的混杂模式 其实就是常规模式
比如说 变量不用声明 等一些混杂模式需要处理
在JS中定义严格模式只需要在代码前面设定一个字符串 ‘use strict’
严格模式和普通模式之间的区别
1.严格模式中 变量必须使用变量修饰符进行声明 var let
2、在严格模式中 八进制必须使用0o开头
3、eval函数 拥有独立的作用域
4、严格模式中 this不能指向window 如果指向 返回undefined
5、不允许删除变量
<script>
// age = 18;
// console.log(age);
// 定义严格模式
'use strict';
// 1、严格模式中 变量必须使用变量修饰符进行声明 var let
// num = 100;
// console.log(num);
// var num = 200;
// console.log(num);
// 测试变量的时候 不能使用name top变量 因为他是BOM中的属性
// name = 'zhangsan';
// console.log(name);
// 2、在严格模式中 八进制必须使用0o开头
// 在JS中 默认是八进制 如果说使用0开头 那么就是输出八进制
// 但是在严格模式中 我们如果使用八进制 必须使用0o开头
// console.log(023);
// console.log(0o23);
// 3、eval函数 拥有独立的作用域
// console.log('2+3');
// console.log(eval('2+3'));
// eval('var num = 200');
// console.log(num);
// 4、this不能指向window
// function fn(){
// return this;
// }
// console.log(fn());
// 5、不允许删除变量
// var num = 200;
// 删除变量 不使用方法 也不是属性 是一个delete命令
// console.log(delete num);
// console.log(num);
var obj = {
name : 'Eric',
age : 18
};
delete obj.age;
console.log(obj);
</script>
JSON
JSON 是一个独立于语言和平台的工具 它主要的作用是作为配置文件和传输数据
为什么传输数据使用JSON 因为速度快 体积小 独立与语言 平台 不会造成数据流式 任何语言几乎都支持JSON
使用
序列化 ： 将JS中的对象转化为JSON
使用JSON对象中的函数 JSON.Stringify 内置一个参数 参数是对象
反序列化 ： 将JSON转化为JS的对象
使用JSON对象中的函数 JSON.parse 内置一个参数 参数是JSON
var obj = {
name : 'Eric',
age : 18,
sex : '男'
};
var arr = [
{
name : 'Eric',age : 18,school : '吉林大学'},
{
name : 'Mary',age : 13,school : '四川大学'},
{
name : 'Tom',age : 3,school : '哈佛大学'},
{
name : 'Jerry',age : 4,school : '麻省理工'},
{
name : 'Jack',age : 25,school : '剑桥大学'},
];
console.log(obj);
// 将对象转化为JSON
var json1 = JSON.stringify(obj);
console.log(json1);
console.log(typeof json1);
var json2 = JSON.stringify(arr);
console.log(json2);
console.log(typeof json2);
// 将JSON转化为对象
var newObj = JSON.parse(json1);
console.log(newObj);
console.log(typeof newObj);
var newArr = JSON.parse(json2)
console.log(newArr);
console.log(typeof newArr);
// 检测数据类型
console.log(Object.prototype.toString.call(newArr));
console.log(Object.prototype.toString.call(newObj));
console.log(Object.prototype.toString.call(json1));
// 手写一个JSON
var json3 = '{"username":"admin","password":"123"}';
console.log(json3);
console.log(typeof json3);
对象的扩展
create ： 以一个对象为原型创建另一个对象 实质上就是实现了一个对象的继承
内置两个参数 第一个参数是原对象 第二个参数是一个描述 描述是一个对象
对象中内置一个属性 属性是新增的对象属性 属性的值还是一个对象
对象中内置四个属性 四个属性都是修饰对象使用的
value ：值
writable ： 是否可写 是否可以修改 默认为fasle
enumurable ： 是否课枚举 就是遍历 默认为fasle
configerable ： 是否可删除 默认为fasle
返回值是一个新的对象
/*
create ： 以一个对象为原型创建另一个对象 实质上就是实现了一个对象的继承
内置两个参数 第一个参数是原对象 第二个参数是一个描述 描述是一个对象
对象中内置一个属性 属性是新增的对象属性 属性的值还是一个对象
对象中内置四个属性 四个属性都是修饰对象使用的
value ：值
writable ： 是否可写 是否可以修改
enumurable ： 是否课枚举 就是遍历
configerable ： 是否可删除
返回值是一个新的对象
*/
// 定义一个原对象
var obj = {
name : 'Eric',
age : 18,
sex : '男'
};
// 使用create方法 以obj为原型对象基础 创建一个新的对象
var newObj = Object.create(obj,{
school : {
value : '吉林大学',
writable : false,
configurable : false,
enumerable : false
},
address : {
value : '吉林长春',
writable : true,
configurable : true,
enumerable : true
},
});
console.log(newObj);
// console.log(newObj.name);
// 修改属性
newObj.address = '北京市朝阳区';
newObj.school = '北京大学';
console.log(newObj);
// 删除属性
// delete newObj.address;
// delete newObj.school;
// console.log(newObj);
// 遍历属性
for (var key in newObj){
console.log(key + '===>>>' + newObj[key]);
}
defineProperties ： 给对象添加一个属性
内置两个参数 第一个参数是原对象 第二个参数是一个描述 描述还是一个对象
对象中内置一个属性 属性是新增的对象属性
属性值还是一个对象 内置两个方法 set get
get方法 ： 当我们调用新增属性的时候 会被自动触发 调用
set方法 ： 当我们设置新增属性的时候 会被自动触发 调用
set参数可以接受一个参数 参数就是我们设置的属性值
var obj = {
firstName : '悟空',
lastName : '孙'
};
Object.defineProperties(obj,{
fillName : {
get : function(){
return this.lastName + this.firstName;
},
set : function(name){
this.lastName = name.slice(0,1);
this.firstName = name.slice(1);
}
}
});
// 当我们使用属性的时候 自动调用get方法
console.log(obj.fillName);
// 当我们修改属性的时候 自动调用set
// set参数可以接受一个参数 参数就是我们设置的属性值
// obj.fillName = '敖广';
obj.fillName = '斯塔夫里阿诺斯';
console.log(obj.fillName);
2、let变量和const常量
let变量
let变量是ES新增语法之一 在我们之前的学习中 一直使用var进行声明变量 但是从ES6开始 我们开始使用let进行声明变量
传统的var变量 逐渐的消失了 因为let变量有几点升级
let 和 var之间的区别
1.let变量不能重复定义 ： 在同一只作用域下 let变量不能重复定义
2.let变量不做变量提升
3.let变量是块作用域 ： 块作用域指的是在大括号{}中定义的let变量 在大括号的外部是无法访问的
块级作用域在什么语句中产生 ： if while do…while for
4.暂时性死区 ： 如果说在块级作用域中 出现了变量提升问题 哪怕在全局作用域中有变量 那么也无法读取 产生暂时性死区
<script>
// let变量不能重新定义
// var num = 100;
// var num = 200;
// console.log(num);
// let num = 200;
// let num = 300; // Identifier 'num' has already been declared
// console.log(num);
// let 变量不做变量提升
// console.log(num);
// var num = 100;
// let num = 300; // Cannot access 'num' before initialization
// let变量是块作用域
// {
// var name = 'Eric';
// var age = 18;
// }
// console.log(name);
// console.log(age);
// let username = "root";
// {
// let username = 'admin';
// let password = '123';
// console.log(username);
// }
// console.log(username);
// if (true){
// let user = 'admin';
// }
// console.log(user);
// 暂时性死区
let username = 'admin';
if (true){
console.log(username);
let username = 'root';
}
</script>
let变量小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<button>按钮7</button>
<button>按钮8</button>
</body>
</html>
<script>
let oBtns = document.querySelectorAll('button');
// for (var i = 0;i < oBtns.length; i++){
// oBtns[i].index = i
// oBtns[i].onclick = function(){
// alert(this.index + 1);
// }
// }
for (let i = 0;i < oBtns.length; i++){
oBtns[i].onclick = function(){
alert(i + 1);
}
}
</script>
const常量
常量 ： 是一个一经定义就不再改变的量 不能修改 不能重新赋值或者重新定义 更不能重复定义
所以说 使用的时候 一般情况下都是用在不用修改的量上面
不能修改指的是不能修改其堆栈空间 不是不能修改其内容
常量也是块级作用域 和let变量不同的是 不能修改
要求 ：常量在定义的时候必须赋值
常量使用const定义
// let num = 300;
// num = 400;
// console.log(num);
// 常量使用const定义
// const num = 300;
// const num = 400; // Identifier 'num' has already been declared
// num = 400; // Assignment to constant variable
// delete num; // 不能删除
// console.log(num);
// 常量是块级作用域
// if (true){
// const num = 300;
// }
// console.log(num); // num is not defined
// 常量不是不能修改 是不能修改其空间内容
// 只是不能修改堆栈空间
const arr = [11,33,55,99];
console.log(arr);
arr.push(88);
console.log(arr);
3、解构赋值
解构赋值就是将对象或者是数组中的元素或者属性都取出来 赋值给一个或者多个变量
在以前我们使用对象中的属性或者是数组中的元素的时候 我们都是按照下标或者是属性的键值一个一个取出来
不能直接将所有的数据取出
在ES6语法中 我们新增的知识点是结构赋值 可以将对象或者是数组中的数据 一次性取出
数组的解构赋值
数组的解构赋值
数组的解构赋值 是使用数组进行解构 也就是说 我们定义多个变量 将数组中的数据取出
那么 我们需要将这些变量定义在一个数组中
然后按照数组的下标顺序 对原数组中的数据进行解构
也就是对抽象的数组中的变量进行一一赋值
数组的完全解构
数组的完全解构就是我们定义的变量和数组中的元素的数量保持一致
将所有的数组元素取出 将所有的变量进行赋值
数组的不完全解构
数组元素的数量大于变量的数量
不会报错 只是不能将数组元素完全取出
变量的数量大于数组元素的数量
也不会报错 但是不能赋值的变量 结果是undefined
默认值解构
为了避免不完全解构中出现undefined 那么我们需要给变量设定默认值
直接在解构赋值之前给变量设定默认值
占位符解构
我可能只是需要数组中的一个元素 没有必要声明太多的变量
那么 我们就可以使用占位符进行解构赋值 在这里 逗号是占位符
<script>
// let arr = [11,33,55,99];
// let one = arr[0];
// let two = arr[1];
// 数组的解构赋值
/*
数组的解构赋值
数组的解构赋值 是使用数组进行解构 也就是说 我们定义多个变量 将数组中的数据取出
那么 我们需要将这些变量定义在一个数组中
然后按照数组的下标顺序 对原数组中的数据进行解构
也就是对抽象的数组中的变量进行一一赋值
数组的完全解构
数组的完全解构就是我们定义的变量和数组中的元素的数量保持一致
将所有的数组元素取出 将所有的变量进行赋值
数组的不完全解构
数组元素的数量大于变量的数量
不会报错 只是不能将数组元素完全取出
变量的数量大于数组元素的数量
也不会报错 但是不能赋值的变量 结果是undefined
默认值解构
为了避免不完全解构中出现undefined 那么我们需要给变量设定默认值
直接在解构赋值之前给变量设定默认值
占位符解构
我可能只是需要数组中的一个元素 没有必要声明太多的变量
那么 我们就可以使用占位符进行解构赋值 在这里 逗号是占位符
*/
// let a,b,c,d = arr;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
// 数组的完全解构
// let [a,b,c,d] = arr;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
// 数组的不完全解构
// let [a,b] = arr;
// console.log(a);
// console.log(b);
// let [a,b,c,d,e] = arr;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
// console.log(e);
// console.log(arr[4]);
// function fun(a = 0,b = 0,c = 0,d = 0,e = 0){
// return a+b+c+d+e;
// }
// console.log(fun(2));
// 解构默认值
// let [a,b,c,d,e = 0] = arr;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
// console.log(e);
// 占位符解构赋值
let arr = [11,33,55,99,66,88,22,44];
let arr = [11,33,55,99,[66,88],22,44];
// let [,,,,num] = arr;
let [,,,,[,num]] = arr;
console.log(num);
</script>
字符串的结构赋值
字符串的解构赋值和数组的一模一样 ，因为字符串也是有下标的 有序的 但是没有键值对
所以说字符串 的解构和数组的完全一致
<script>
// let string = 'benz';
// let [a,b,c,d] = string;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
// let string = 'benz';
// let [a,b,c,d,e] = string;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
// console.log(e);
// let string = 'benz';
// let [a,b] = string;
// console.log(a);
// console.log(b);
// let string = 'benz';
// let [a,b,c,d,e = 'hi'] = string;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);
// console.log(e);
let string = 'benz';
let [,,a] = string;
console.log(a);
</script>
对象的结构赋值
对象的解构赋值 对象的结构赋值使用对象
他和数组不同 数组使用的是中括号[] 对象使用的是大括号{} 对象和数组的结构赋值不同
因为对象是无序的 但是对象有键名
所以说对象的解构和数组不同
对象解构赋值和数组解构赋值的区别
对象是按照键名进行解构的 数组是按照下标进行解构的
数组使用的是中括号[] 对象使用的是大括号{}
解构数组的时候 变量的名字是自定义的 解构对象的时候 解构时键名需要保持一直 但是可以不按顺序解构
对象的完全解构
按照键名将所有的对象属性全部取出
对象的不完全解构
对象的属性的数量多于变量 不完全解构
变量的数量多于对象的属性 出现undefined
默认值解构
<script>
// 定义一个对象
let obj = {
name : 'Eric',
age : 18,
sex : '男'
};
/*
对象的完全解构
按照键名将所有的对象属性全部取出
对象的不完全解构
对象的属性的数量多于变量 不完全解构
变量的数量多于对象的属性 出现undefined
默认值解构
*/
// 对对象进行解构
// let {name : uname,sex : usex,age : uage} = obj;
// console.log(uname);
// console.log(uage);
// console.log(usex);
// 不完全解构
// let {name : uname,sex : usex} = obj;
// console.log(uname);
// console.log(usex);
// let {name : uname,sex : usex,age : uage,school : uschool} = obj;
// console.log(uname);
// console.log(uage);
// console.log(usex);
// console.log(uschool);
// 默认值解构
let {
name : uname,sex : usex,age : uage,school : uschool = '吉林大学'} = obj;
console.log(uname);
console.log(uage);
console.log(usex);
console.log(uschool);
</script>
函数参数的结构赋值
<script>
let arr = [11,33,55,99];
let obj = {
username : 'admin',password : '123'};
function fun([a,b,c,d] = arr){
// console.log(arr);
console.log(a);
console.log(b);
console.log(c);
console.log(d);
}
fun(arr)
function func1({
username : user,password : pass}=obj){
console.log(user);
console.log(pass);
}
func1();
func1(obj);
// 在解构之前 赋值一个默认对象
function func({
username : user,password : pass}={
username : 'root',password : 'qwe'}){
console.log(user);
console.log(pass);
}
func();
func(obj);
</script>
4、对象属性的简写
对象简写方式
对象的属性简写 指的是 在我们使用对象的时候 很多时候 我们对象的值会是一个标识符
如果说对象属性的值是标识符并且和对象的键名保持一致 也就是相同的名字 那么我们可以省略其一
对象如果说内部有方法 我们可以省略function 直接使用方法名
let username = 'admin123';
let password = '123456';
// 传统对象的编辑方式
// let obj = {
// username : username,
// password : password,
// login : function(){
// console.log(this.username + '使用' + this.password + '进行登录');
// }
// };
// ES6中对象的简写方式
let obj = {
username,
password,
login(){
console.log(this.username + '使用' + this.password + '进行登录111');
}
}
console.log(obj);
console.log(obj.username);
console.log(obj.password);
obj.login();
对象简写解构赋值
使用对象的简写方式进行解构赋值
// 因为有了对象的简写形式 所以说 我们可以使用这种格式进行对象的解构赋值
let me = {
name : 'Eric',
age : 18,
sex : '男'
};
// let {name:name,age:age,sex:sex} = me;
// let {name,age,sex} = me;
console.log(name);
console.log(age);
console.log(sex);
追加对象属性
如果说你给对象添加属性的时候 我想使用标识符的值作为属性的名字 那么怎么做
如果说 使用这种方式 需要给标识符在对象中添加一个中括号
或者说在追加给对象的时候 我们还是使用中括号
let uname = '姓名';
let uage = '年龄';
let usex = '性别';
// 我现在想使用name age sex 这几个标识符的属性值 作为对象的键
let obj = {
[uname] : 'Eric',
[uage] : 18,
usex : '男'
}
console.log(obj);
let user = {
username : 'admin',
password : '213'
};
user[uname] = 'Eric';
user[usex] = '男';
user.uage = 18;
console.log(user);
5、模板字符串
模板字符串是ES6新增的字符串定义方式 他可以避免字符串的嵌套和拼接 我们可以直接使用字符串 不再嵌套和拼接
也不再因为引号影响操作 最重要的是 在模板字符串中 还可以识别标识符
模板字符串使用反引号定义 里面可以出现任意字符 如果说出现了标识符 我们使用${标识符}
// 模板字符串
let obj = {
name : 'Eric',
age : 18,
sex : '男',
say : "人生得意须尽欢"
};
// 定义一个字符串
let {
name,age,sex,say} = obj;
let str1 = "我叫" + name + ",今年" + age + "岁,是一个" + sex + "生,昨天我说:'" + say + "'";
console.log(str1);
// 如果说使用模板字符串
let str2 = `我叫${
name},今年${
age}岁,是一个${
sex}生,昨'天"'我"说:'${
say}'`;
console.log(str2);
模板字符串的优点
1.不需要做字符串的拼接
2.可以识别标识符 使用${}
模板字符串的缺点
速度相对来说可能比较吗 需要识别字符串中的标识符
// 模板字符串
let obj = {
name : 'Eric',
age : 18,
sex : '男',
say : "人生得意须尽欢"
};
// 定义一个字符串
let {
name,age,sex,say} = obj;
let str1 = "我叫" + name + ",今年" + age + "岁,是一个" + sex + "生,昨天我说:'" + say + "'";
console.log(str1);
// 如果说使用模板字符串
let str2 = `我叫${
name},今年${
age}岁,是一个${
sex}生,昨'天"'我"说:'${
say}'`;
console.log(str2);
小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
#app{
width: 750px;
height: 220px;
margin: 100px auto;
border: 1px solid;
}
#app .big{
float: left;
}
#app .image{
width: 125px;
height: 180px;
margin-top: 10px;
margin-left: 15px;
}
#app .image img{
width: 100%;
height: 100%;
}
#app .intro{
text-align: center;
width: 125px;
margin-left: 15px;
line-height: 30px;
}
#app .intro span{
color: orange;
}
</style>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script>
let arr = [
{
title : "一秒钟",score : 7.8,src : "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2628373757.jpg"},
{
title : "2020去死",score : 7.3,src : "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2628834126.jpg"},
{
title : "夺冠",score : 7.3,src : "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2620083313.jpg"},
{
title : "信条",score : 7.7,src : "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2618403186.jpg"},
{
title : "菊石",score : 7.1,src : "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2618286922.jpg"},
];
let str = arr.map(function(value){
let {
title,score,src} = value;
return `<div class="big"><div>
<div class="image">
<img src="${
src}" >
</div>
<div class="intro">
${
title} <span>${
score}</span>
</div>
</div></div>`;
}).join('');
app.innerHTML = str;
</script>
6、箭头函数
箭头函数是ES6中对函数的重新的抽象 我们在ES6中使用函数的时候 不需要那么麻烦 不需要使用function
我们定义箭头函数的时候 需要直接使用()=>{} 这个就是箭头函数
箭头函数的特性
箭头和常规函数的区别 也是箭头函数的特性
1.箭头函数只能定义匿名函数
2.箭头函数没有原型对象 不能用作构造函数
3.特殊省略 当箭头函数只有一个参数的时候 可以省略小括号 形参列表括号
4.特殊省略 当箭头函数函数体只有一句话的时候 那么可以省略大括号 如果说这句话还是返回值 省略了大括号后必须省略return
5.如果说箭头函数省略了大括号 那么返回值不能是对象 如果是对象那个 必须使用小括号包裹
6.箭头函数不能使用arguments super new等关键字
7.箭头函数没有自己的this 它使用父级的this
箭头函数的写法
箭头函数直接使用小括号 然后是箭头 大括号 省略函数名和function
/*
常规函数的结构
function [函数名]([形参列表]){
函数体
[return 返回值]
}
[函数名]([与形参列表保持一致])
箭头函数结构
()=>{
}
只有=>是必选
*/
let fun = ()=>{
console.log('今天是阴天');
console.log('今天没下雨');
console.log('今天很冷');
}
fun();
console.log(typeof fun);
console.log(Object.prototype.toString.call(fun));
箭头函数特性检测
箭头函数不能做构造函数
// 箭头函数没有原型对象 不能定义构造函数
function Car(name,color,price) {
this.name = name;
this.color = color;
this.price = price;
}
// 实例化构造方法
let c = new Car('benz','黑色',860000);
console.log(c);
let Cat = (name,color)=>{
this.name = name;
this.color = color;
}
let a = new Cat('小白','黑色');
console.log(a); // 报错 ： Cat is not a constructor
特殊省略 省略小括号
let fun = m=>{
console.log(m + 100);
}
fun(30);
// let func = =>{
// 直接报错
// }
// let func = m,n=>{
// // 直接报错
// }
特殊省略 省略大括号和return
// 省略大括号
// let fun = ()=>console.log('你好 中国');
// fun();
// 如果说省略大括号 但是这句话还是返回值 那么必须省略return
// let fun = ()=>{
// return 123;
// }
// console.log(fun());
// let fun = ()=>return 123; //直接报错
let fun = ()=>'你好 成都';
console.log(fun());
省略大括号 返回值是对象
因为 省略函数体的大括号 但是返回对象的时候 有省略了return 所以说函数和对象分不清大括号是谁的
解决方案 用小括号将对象包裹
// 当省略大括号的时候 返回值是对象
let fun = ()=>({
name:'Eric',age:18});
箭头函数 不能使用arguments super new等关键字
// 箭头函数不能使用arguments
// function name() {
// console.log(arguments.length);
// console.log(arguments);
// }
// name(1,2,3,4,5,6);
let name = ()=>{
console.log(arguments.length);
console.log(arguments);
}
name(1,2,3,4,5,6); // 报错 ： arguments is not defined
箭头函数没有自己的this