ES6语法
ES6语法 ES6版本的JavaScript语法,是一个非常重要的版本 对于JavaScript的功能上有一个极大的丰富 让JavaScript从弱类型语言,提升到了 半强类型语言
从 速腾 提升到了 保时捷 但是 跟 帕加尼 还是有差距的
// ES6语法新增的变量的定义
// let const 关键词定义变量
// let 定义变量
// 特点:
// let 定义的变量,不会进行预解析
// let 定义的变量,与 forEach() 中的变量类似
// 每次执行都会定义出一个新的,相互之间不影响的变量
// 尤其是在循环中,for,forEach,for...in,都最好使用let定义变量
// let 不能重复定义变量名称,一个变量名称只能定义一次
// let 定义的变量,如果是定义在 { } 中,只能在 { } 中被执行被调用
// 在 { } 之外,是不能被调用执行的
// { } 包括 if switch for forEach for...in while function
// let 在不同 { } 中,是不同作用域中定义let 变量
// 此时,变量的名称与 其他 { } 中的变量名称,或者{ }之外的变量名称,是可以重复
// const 定义变量
// 在JavaScript中往往,管const定义的变量,称为常量
// const定义的变量,不能被重复赋值,数据已经定义,不能更改
// const定义的变量名称,也不能重复
// const定义在{}中,不能在{}外调用
// 一般使用 const 定义 对象,数组,函数,引用数据类型
// const中存储的是引用数据类型的地址,只要地址不改变,可以改变数组,对象中的单元存储的数据
// console.log(int1); // var 关键词定义的变量,可以预解析,结果 undefined
// console.log(int2); // let 关键词定义的变量,不能徐解析,结果 报错
// var int1 = 100;
// let int2 = 100;
// 点击不同的li,输出不同的内容
var oLis = document.querySelectorAll('li');
// var 定义的是一个变量,后赋值会覆盖之前的数据
// 最终i的数值是一个数值,是最终循环结束时,i的数值
// for(var i = 0 ; i <= oLis.length-1 ; i++){
// oLis[i].onclick = function(){
// console.log(i+1);
// }
// }
// 与forEach 是 相同的赋值方式
// 每次循环都建立一个独立的,相互不影响的 i 变量, 存储对应的数值
// 每一次点击,不同的标签,调用的是不同的 i变量,输出的是不同的 存储数值
for(let i = 0 ; i <= oLis.length-1 ; i++){
oLis[i].onclick = function(){
console.log(i+1);
}
}
// 使用 var 关键词 来定义变量
// 变量名称可以重复
var int = 100;
var int = 200;
console.log(int);
// 使用 let 关键词 来定义变量
// 变量名称不能重复
// 只要是已经定义的,不管是var 还是 let 定义的,都不能重复
// let int = 300;
let int1 = 100;
// let int1 = 200;
// 在{} 中,let定义变量
// 在for循环中,使用var 定义的循环变量
for(var i = 0 ; i<= 10 ; i++){}
// 在循环外可以调用循环变量
console.log(i);
// 在for循环中,使用let 定义的循环变量
for(let j = 0 ; j<= 10 ; j++){}
// 在循环外不能调用循环变量,会报错
// console.log(j);
// if判断中,使用var 定义 变量
if(true){
var abc = 'abc';
}
// 在if外,只要执行了,就可以调用
console.log(abc);
// if判断中,使用let 定义 变量
if(true){
let def = 'def';
}
// 在if外,即使执行了,也不能调用
// console.log(def);
// 在不同函数中,定义的let
function fun1(){
let str = '北京';
return str;
}
console.log(fun1());
function fun2(){
let str = '上海';
return str;
}
console.log(fun2());
if(true){
let int = 100;
console.log(int);
}
if(true){
let int = 200;
console.log(int);
}
// const定义的变量,一旦赋值,不能改变
const strstr = 100;
// 对const定义的变量,重复赋值,会报错
// strstr = 200;
// 定义变量的名称,不能重复
// const strstr = ''
if(true){
const sss = 'sss';
console.log(sss);
}
// console.log(sss);
const arr = [1,2,3,4,5,6];
// 给数组中第1个单元,修改存储的数据
// const arr 中存储的数组的地址是不改变的,可以执行的
arr[0] = '北京';
console.log(arr);
// 修改对象中,单元存储的数据,不是修改 obj中存储的内存地址,是可以执行的
const obj = {name:'张三'};
obj.name = '李四';
console.log(obj);
// 总结:
// let 多用于定义 基本数据类型 以及 循环中
// const 多用于定义 引用数据类型
// 特点:定义的变量名称不能重复
// 在 { } 和 循环中定义,只能在 { } 和 循环中使用
// let会建立独立的,存储不同的,相互不冲突数据的变量
// const定义的变量,不能重复赋值,不能修改存储的数据
// 所谓的箭头函数
// 是函数的另一种语法形式
// const fun = function(){} 普通函数
// const fun = ()=>{} 箭头函数
// 将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式
// 如果函数只有一个参数,可以不写()
// const fun = function(e){} 普通函数
// const fun = e => {} 箭头函数
// 如果执行体中只有一行代码,可以不写{}
// const fun = e=>{console.log(e)} 普通箭头函数
// const fun = e=> console.log(e) 不写{}箭头函数
const oDiv = document.querySelector('div');
// 普通函数
// oDiv.addEventListener('click' , function(){
// console.log('我是div标签')
// })
// 箭头函数
// oDiv.addEventListener('click' , ()=>{
// console.log('我是div标签');
// })
// 只有一个参数，可以不写(),直接定义一个参数
// oDiv.addEventListener('click' , e=>{
// console.log(e);
// })
// 只有一行代码,不写{}
oDiv.addEventListener('click' , e=>console.log(e) )
//
箭头函数中的this指向
// 为什么要有箭头函数?
// 是为了配合明天要讲的面向对象和构造函数
// 在箭头函数中,this指向有特殊的意义,专门可以用来配合构造函数和面向对象编程思想
// 在箭头函数中,this指向,父级程序的this指向
// 如果父级程序有this指向,那么箭头函数指向的就是父级程序的this
// 如果父级程序没有this指向,那么指向的就是window
// 复习this指向
// 普通函数的this指向
// 声明式,赋值式/匿名函数,对象中函数,绑定的事件处理函数
// this都是指向的调用函数时,之前定义的内容
// 1,声明式 --- 指向的是window
// function fun1(){
// console.log(this);
// }
// fun1();
// 2,匿名函数/赋值式 --- 指向的是window
// const fun2 = function(){
// console.log(this);
// }
// fun2();
// 3,定义在对象中的函数 --- 指向的是对象
// const obj = {
// fun3 : function(){
// console.log(this);
// }
// }
// obj.fun3();
// 4,绑定的事件处理函数 --- 指向的是绑定事件处理函数的标签
const oDiv = document.querySelector('div');
// oDiv.onclick = function(){
// console.log(this);
// }
oDiv.addEventListener('click' , function(){
console.log(this);
})
// 箭头函数的tihs指向
// 与普通函数的this指向是有区别的
// 箭头函数中,this的指向是父级程序的this指向
// 当前的程序,箭头函数的父级程序,没有
// this指向的就是window
oDiv.addEventListener('click' , ()=>{
console.log(this);
})
// 对li进行操作
const oLis = document.querySelectorAll('li');
oLis.forEach(function(item,key){
// console.log(this); // 输出的是forEach的函数的this指向
// 箭头函数的this,是父级程序,forEach()的this,是window
item.addEventListener('click' , ()=>{
// console.log(key,this);
})
})
// forEach()中 函数的this指向,就是window
// const arr = [1,2,3,4,5,6];
// arr.forEach(function(){
// console.log(this);
// })
const obj = {
// 普通函数,this指向对象
fun1 : function(){console.log(this)},
// 箭头函数this指向是,父级程序
// 父级程序是对象
// 只有函数有this,obj对象没有this
// 父级程序没有this,指向的是window
fun2 : ()=>{console.log(this)},
// fun3是一个普通函数,this指向的是obj对象
fun3 : function(){
// fun4,是一个箭头函数,this指向的是父级程序的this指向
// 父级程序是fun3,fun3的this是对象,fun4箭头函数的this也是对象
const fun4 = ()=>{console.log(this)};
fun4();
}
}
obj.fun1();
obj.fun2();
obj.fun3();
// 关于this的总结
// 1,普通的function函数
// 声明式 --- window
// 赋值式 --- window
// forEach循环 --- window
// 定时器,延时器 --- window
// 对象中的函数 --- 对象本身
// 事件绑定事件处理函数 --- 绑定事件的标签
//
// 2,箭头函数的this指向
// 父级程序的this指向
// 如果父级程序有this指向(父级程序也是函数),this指向的就是父级程序的this指向
// 如果父级程序没有this指向(数组,对象....),this指向的是window
/
/ 改变this指向的方法
<script>
// 重点:箭头函数,不能改变this指向,只有普通function函数,能改变this指向
// 1, call()方法
// 语法: 函数.call(参数1,其他参数....可以是多个或者没有 )
// 作用: 调用并且执行函数,同时,将函数的this指向,定义为指定的内容(参数1)
// 参数1,是改变的this的指向
// 其他参数,是原始函数的实参,原始函数有几个形参,此时就要对应的输入几个实参,没有形参,就没有实参
// 2, apply()方法
// 语法: 函数.apply(参数1,参数2) 只有两个参数
// 参数1:改变的this的指向内容
// 参数2:原始函数的实参,必须是一个数组的形式,将实参定义成数组的单元
// 其他用法和作用于 .call是相同的
// 总结: call方法与apply方法,作用,效果,都是完全一致的
// 只是对于原始函数的参数赋值方法,不同
// call方法是通过其他多个参数来实现
// apply方法是通过一个数组参数,来实现
// 两个方法没有本质的区别,爱用哪个用那个
// 3, bind()方法
// 语法: const 变量 = 函数.bind(参数1);
// 不是立即执行函数
// 生成一个新的函数,这个新的函数是改变this指向之后的新的函数
// 参数1,定义的要改变的的this指向
// 其他参数,一般不定义,是使用函数原有的形参
// 总结:
// call apply 都是立即执行函数
// 参数1,都是改变的this指向
// 其他参数,是原始函数的形参(可以有,也可以没有)
// bind 不是立即执行函数,是生成一个新的函数
// 参数1,是改变的this指向
// 就使用原始函数的形参
const obj1 = {
name:'张三',
age:18,
sex:'男',
}
const obj2 = {
name:'李四',
fun2 : function(){
console.log(this);
}
}
// 对象中的函数,this指向的是这个对象,obj2
// obj2.fun2();
// 改变this指向,指向的是obj1这个对象
// 代用,并且执行fun2这个函数,同时将fun2的this指向,从原始的obj2,改变为obj1
// obj2.fun2.call(obj1);
// 带有参数的函数,this指向的改变
// 定义的带有参数的普通函数
function fun3(name,age,sex){
console.log(name,age,sex,this);
}
// 执行时,输出实参,此时this指向是window
fun3('张三',18,'男');
// 改变this指向 , call方法
fun3.call(obj1,'李四',20,'女');
// 改变this指向 , apply方法
fun3.apply(obj1 , [ '王五' , 20 , '不知道' ])
// bind方法,不是立即执行函数,而是定义生成一个新的函数
// 新生成的函数,this指向是参数1
// 新生成的函数,形参是原始函数fun3的形参
const fun4 = fun3.bind(obj1);
fun4('王二麻子' , 100 , '不详');
</script>
//
立即执行函数
<script>
// 立即执行函数
// 在定义函数的同时,立即执行这个函数
// 语法:
// (封装的函数)()
// !封装的函数()
// ~封装的函数()
// 这三种语法没有区别,爱用哪个用那个
// 立即执行定义的函数,不是真正的在定义声明函数
// 立即执行之后,无法再次被正常的调用
// 具体使用方法,要到闭包的时候使用
// 定义函数
function fun(){console.log(123)}
// 调用函数
fun();
// 立即执行,在定义的同时,立即执行函数
( function fun1(){console.log(123)} )()
// 立即执行函数,并没有真正的定义真个函数
// 没有办法正常的再次调用这个函数
// fun1();
!function fun1(){console.log(123)}()
~function fun1(){console.log(123)}()
</script>
数组的解构
<script>
// 数组的解构语法
// 就是数组的另一种使用调用方法
// 可以不通过 []语法,不通过索引下标,来调用使用数组中的数据
// 用于将数组中的数据,一一对应的赋值给变量
const arr = ['北京','上海','广州','重庆','天津'];
// 之前使用数组的数据,必须通过[]语法和索引下标
// let str1 = arr[0];
// let str2 = arr[1];
// let str3 = arr[2];
// let str4 = arr[3];
// let str5 = arr[4];
// 将 arr 中的数据,调用出来,给 左侧内容进行一一对应的赋值
let [str1,str2,str3,str4,str5] = arr;
console.log(str1,str2,str3,str4,str5);
// 结构多层的数组
// 二维数组
const arr2 = ['北京','上海',['a','b','c']];
// s1对应北京,s2,对应上海,s3,对应['a','b','c']
// let [s1,s2,s3] = arr2
// 接续把 s3 对应的数组 ['a','b','c'] 解析
// s1对应北京,s2对应上海,[]对应['a','b','c']
// s3对应a s4对应b s5对应c
let [s1,s2,[s3,s4,s5]] = arr2
console.log(s1,s2,s3,s4,s5);
</script>
对象的解构
<script>
// 对象的解构
// 之前对象数据的调用,通过.语法或者[]语法,配合属性来调用操作数据
// 现在可以使用解构语法来调用操作数据
const obj = {
name:'张三',
age:18,
sex:'男',
addr:'北京',
phone:123456,
}
// 之前调用数据
// let str1 = obj.name;
// 解构语法
// 将对象中,属性是name的属性值,调用,赋值给name变量名称
// {}中定义的属性,一定是对象中具有的属性
// 变量名称,就是name也就是属性名称
// let {name} = obj;
// console.log(name);
// 解构语法之定义其他名称
// 在对象obj中,找name属性,将对应的数值数据,赋值给变量别名userName
// 通过userName来调用使用数据
// 只能一次解构一个数据,不能一次性的做一一对应的赋值
// let {phone:userName} = obj;
// console.log(userName);
// 多级对象的解构
const obj2 = {
name1:{
name2:'张三'
}
}
// let {name1 : {name2}} = obj2;
let {name1 : {name2:userName}} = obj2;
console.log(userName);
// 只有name2解构对应张三,name1没有内容
// console.log(name1);
// 如果只是 let {name1} = obj2
// name1存储的是 对象 {name2:'张三'}
</script>
展开运算符
<script>
// 展开运算符
// ...数组
// 将数组中的数据,展开来使用
// 在函数的实参中使用
// 有多个形参
function fun(num1,num2,num3,num4,num5){
console.log(num1,num2,num3,num4,num5)
}
// 执行时就要输入多个实参
fun(100,200,300,400,500);
// 现在有一个数组,存储多个数据
const arr = [1,2,3,4,5];
fun(arr[0],arr[1],arr[2],arr[3],arr[4]);
// 展开运算符,将数组中的数据展开使用
// 将arr中的数据,展开,对形参进行一一对应的赋值
// 通过数组,给多个形参赋值更简单
fun(...arr);
</script>
合并运算符
<script>
// 合并运算符
// ...
// 在函数的形参中使用
// 作用:将赋值的所有的实参,都是以数组的形式,存储在形参中
// 只有一个形参,形参只能存储一个实参
function fun(arr){
console.log(arr);
}
// 即时输入多个参数,只有一个形参,也只能存储第一个实参
fun('a','b','c','d');
// 合并运算符
// 不管实参有几个,都以数组的形式,存储在形参中
function fun1(...arr){
console.log(arr);
// 调用存储在形参arr中的实参,必须用过[]语法,索引下标
// 或者 循环遍历 获取
}
// 输入的所有的实参,都会以数组的数据的形式,存储在形参arr中
fun1('a','b','c','d','e',1,2,3,4,5);
// 在 普通函数中,JavaScript定义了一个专门的变量,叫 arguments
// 如果你没有定义形参,所有的实参都会以数组的形式存储在这个变量中
// 作用于合并运算符相同
// 但是 箭头函数中 没有 arguments 这个变量
// 必须使用 ...形参 合并运算符的形式 来存储实参
// 没有形参,JavaScript自动在arguments中,以数组的形式存储实参
function fun3(){
console.log(arguments);
}
fun3(1,2,3,4,5,6,7);
// 箭头函数没有arguments,会报错
// 只能使用 合并运算符 ...形参
// const fun4 = ()=>{
// console.log(arguments);
// }
// fun4(1,2,3,4,5);
const fun5 = (...arr)=>{
console.log(arr);
}
fun5(1,2,3,4,5);
</script>
