赞
踩
目录
一.let,var,const区别
二,解构
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
let[a,...c] = [1,2,3];//合并运算符可以展开数组也可合并数组
console.log(c);//[2, 3]
console.log(...c);//2 3
let [x,y='2'] = ['a',undefined];
console.log(y);//如果没有定义,可以用默认值
说明:ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。
根据key解构
let person = {name:"小帅",age:18};
let {name,age,height} = person;
console.log(name);//小帅
console.log(age);//18
console.log(height);//undefined
说明:对象的解构与数组有一个重要的不同。数组的元素是按顺序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值,否则解构失败就是undefined。
let { realname: myname,height=173 } = { realname: '张三', age: 18};
console.log(Myname);//张三
console.log(Myage)//18
console.log(realname)//realname is not defined
console.log(height)//当属性没有的时候支持默认值
说明:对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
.3 字符串解构
let [a,b,c] = "hello";
console.log(a);//h
console.log(b);//e
console.log(c);//l
三,箭头函数
//原js写法
function myFun(k,v){
return k + v;
}
//es6 写法
const myFun1 = (k,v) => {
return k+v;
}
如果形参或者代码块只有一句可以简写:
Const myFun = (k) => {return k+1;} 简写:
Const myFun = k => k +1;
如果函数作为对象的方法调用,this指向的是这个上级对象,即调用方法的对象。
const person = {
name:"张三",
age:18,
say:function(){
console.log(this.name);// 张三 这时候的this是person的对象
}
}
person.say();
myfun1();//对象是Windows
myfun1.call(person1);//对象改变为person1
说明:两者的区别,myfun.call(person,18,29); myfun.apply(person,[18,29]);
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this。
箭头函数中的this指向是它所定义(声明)的位置,可以简单理解成,定义箭头函数中的作用域的this指向谁,它就指向谁。
const obj = { name: '张三'}
function fn () {
console.log(this);//this 指向 是obj对象
return () => {
console.log(this);//this 指向 的是箭头函数定义的位置,那么这个箭头函数定义在fn里面,而这个fn指向是的obj对象,所以这个this也指向是obj对象
}
}
const resFn = fn.call(obj); //{ name: '张三'}
resFn();//{ name: '张三'}
- 一:全局作用域下this指向
- 1:普通函数
- function global(){
- console.log(this);//window
- }
- global();
- 2:箭头函数
- const global = ()=>{
- console.log(this);//window
- }
- global();
-
-
- 二:对象里面的this指向
- 1:普通函数
- const Person = {realname:"张三",age:19,
- say:function(){
- console.log(this.realname);//当前的对象 "张三"
- }
- }
- Person.say();
-
- 2:箭头函数
- const Person = {realname:"张三",age:19,
- say:()=>{
- console.log(this);//window
- }
- }
- Person.say();
-
- 三:构造函数的this指向
- 1:普通函数
-
- function Person(realname,age){
- this.realname = realname;
- this.age = age;
- this.say = function(){
- console.log(this);
- }
- }
- const P1 = new Person("张三",19);
- P1.say();
-
- const P2 = new Person("李四",19);
- P2.say.call(P1);//原来李四,现在是张三 call和apply改变this指向,区别传输参数的区别
-
-
- 2:箭头函数
-
- function Person(realname,age){
- this.realname = realname;
- this.age = age;
- this.say = ()=>{
- console.log(this);
- }
- }
- const P1 = new Person("张三",19);
- P1.say();
-
- const P2 = new Person("李四",19);
- P2.say.call(P1);//不能改变箭头函数的this指向
-
-
- 总结:普通函数与箭头函数this的区别
- 1:普通的函数this与调用者有关,调用者是谁就是谁;
- 2:箭头函数的this与当时定义的上下文的this有关,this是静态的一旦定义了就无法改变
练习1:单击按钮2s后改变按钮文字:按钮被点击,在单击按钮改变文字:点击被取消。
- <!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>
- <!-- 点击按钮 2s后显示:文字被点击,在点击出现文字:点击被取消。 -->
- <!-- (附加:点击10次后提示“今日点击次数已上限,按钮变成灰色”) -->
-
- <body>
- <button>点击</button>
- <script>
- let bth = document.querySelector("button")
- let flag = false
- let num=0
- bth.addEventListener("click", function () {
- flag = !flag
- num++
- if(num>10){
- this.innerHTML="今日点击次数已上限"
- this.disabled=true
- this.style.backgroundColor="grey"
- return false
- }
- time1=setTimeout(() => {
- if (flag) {
- // console.log(this);
- this.innerHTML="文字被点击"
- }
- else{
- this.innerHTML="点击被取消"
- }
- }, 100);
-
- })
- </script>
- </body>
-
- </html>
四,剩余函数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。
- 1:rest参数
- function demo(...nums){
- console.log(nums);//数组
- console.log(...nums);//解构数组
- }
- demo(1,2,3);
-
- 2:rest参数 对象
- function connect({username,...info}){
- console.log(username);
- console.log(info);
- }
- connect(
- {username:"root",password:"123456",port:"3306"}
- )
-
- 3:输出数组
- const arr = [1,2,3];
- console.log(...arr);
-
- 4:合并两个数组
- const arr1 = [1,2,3];
- const arr2 = [4,5,6];
- console.log([...arr1,...arr2]);
-
-
- 5:将类数组转为数组
- const liNode = document.querySelectorAll("li");
- console.log(typeof [...liNode]);
-
- const arr1 = [1,2,3];
- const arr2 = [...arr1];//复制数组
- arr1[0] = 10;
- console.log(arr2);
-
-
- 6:剩余参数必须放入最后(rest参数) 不然报错
- function demo(a,b,...nums){
- console.log(nums);//数组
- }
- demo(1,2,3,4,5);
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。