用通俗易懂的例子让你来学习ES6常用的知识点[必看]

一路向北xwq
274 阅读6分钟

用通俗易懂的例子让你来学习ES6常用的知识点[必看]

1.let、const

  • var关键字声明的变量都会在window对象上
  • 使用let和const关键字声明的变量、常量只局限在当前作用域内使用，且没有作用域提升
  • let 代替 var，声明变量
  • const 声明常量。

什么是变量，什么是常量？

var、let声明的就是变量，变量一旦初始化之后，还可以重新赋值

const 声明的就是常量，常量一旦初始化，就不能重新赋值了，否则就会报错比如下图

image-20231027145906570

const 声明的常量虽然不可变，但是对象的值可变 如下图

image-20231027150348884

2.模板字符串

ES6之前拼接字符串

const name = "aaa"
const age = 18

console.log("my name is "+name+".I'm "+age+" years old")//

需要添加多个+（加号），非常麻烦。

在ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接。用``符号编写的字符串，称为模板字符串。

在模板字符串中，我们可以通过反引号``内编写${变量}的形式将字符串和动态的变量拼接到一起。

const name = "aaa"
const age = 18
 
console.log(`my name is ${name}.I'm ${age} years old`) //my name is aaa.I'm 18 years old

模板字符串${}中可以放入任意js表达式、进行运算、引入对象属性以及调用函数

    let a = 1;
    let b = 2;
    let obj={
        name:'jxy',
        id:'666'
    };
    let fn= function(){
        console.log('函数调用了') //函数调用了
        return 'fn函数'
    }
    let str =`表达式：${a}+${b}=${a+b},对象引用：${obj.name}${obj.id},函数调用${fn()}`
    console.log(str) //表达式：1+2=3,对象引用：jxy666,函数调用fn函数

3.解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了，也方便了复杂对象中数据字段获取。

例子1

let person = { name: "zhangsan", age: 20, sex: "男" };
let { name, age, sex } = person;
console.log("name :" + name);//name :zhangsan
console.log("age :" + age);//age :20
console.log("sex :" + sex);//sex :男

例子2

let a2,b2;
[a2, b2] = [11, 22];
console.log(a2,b2)	// 11 22

let arr = ['jack','rose'];
let [a3,b3] = arr;
console.log(a3,b3)	// jack rose

4.函数的默认参数

在ES6中，我们可以给函数的参数定义一个默认值，当这个参数没有被传入时则使用这个默认参数。

function test(a='1',b='2'){
    console.log(a);
    console.log(b);
}
test();//1 2
test('ccc','ddd')// ccc ddd

5. ES6函数的剩余参数

我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数

这个新的对象和arguments不一样，它是程序员自定义的一个普通标识符，只是需要在前面加上三个点：...

例子1

function func(a, ...rest) {
  console.log(a)
  console.log(rest)
}
func(1)
func(1, 2, 3, 4)

image-20231028093448224

可以看到第一次调用时，rest为一个空数组，第二次为[2, 3, 4]。

又比如，在前面定义2个参数

function func(a, b, ...rest) { console.log(a, b) console.log(rest) } func(1, 2) func(1, 2, 3, 4)

image-20231028093643275

arguments和剩余参数的区别

  • 剩余次数只包含没有对应实参，而arguments对象包含了传给函数的所有实参
  • rest参数是一个数组，而argument对象是伪数组
  • 剩余参数必须放在最后面
  • arguments和剩余参数不能一起使用
  • arguments是一个伪数组（Array-like）
  • 剩余参数是一个真正数组（Array），具有Array.prototype上的所有方法
  • arguments上有callee，callee上有[caller]

6.箭头函数

// ES5
function foo(m, n) {
  console.log(m + n);
}
// ES6
const foo = (m, n) => {
  console.log(m + n);
};

1.箭头函数简写

例子

//没有参数，写空括号
const fn = () => {
    console.log('hello');
};
//只有一个参数，可以省去参数括号
const foo = name => {
    console.log(`hello ${name}!`)
};

//返回某个简单变量val
const fn = val => val;
// 等同于
const fn = function (val) { return val };

//返回一个简单的js表达式num1+num2
const sum = (num1, num2) => num1 + num2;
// 等同于
const sum = function(num1, num2) {
  return num1 + num2;
};

//如果箭头函数的函数体只有一条语句且不需要返回值（最常用于回调函数），加上void关键字
const fn = () => void doesNotReturn();

2.箭头函数的this指向规则

箭头函数没有原型prototype，因此箭头函数没有this指向

例子

let fn = () => {
    console.log('Hello World !')
};
console.log(fn.prototype); // undefined

看个例子 普通函数

function Person() {
        this.age = 18
        this.ageAdd = function (val){
            this.age = val
            console.log(this.age); // 19
            setTimeout(function () {
                console.log(this.age); // undefined
            }, 1000);
        }
    }
    let Person1 = new Person();//new一个新的Person方法
    Person1.ageAdd(19)//调用Person1的ageAdd方法并传入19

image-20231028102204579

上面打印的值第一个19 ，在setTimeout函数内部打印的是undefined由此可以看什么问题?

在 JavaScript 中，一个新的普通函数函数定义了它自己的 this 值，setTimeout() 函数就是一个新的匿名函数它就重新定义了自己的this值 所以它的this下面是没有age这个参数的 所有就是undefined

解决办法 定义一个 const _that = this;

function Person() {
    this.age = 18
    this.ageAdd = function (val){
        this.age = val
        const _that = this;
        console.log(this.age); // 19
        setTimeout(function () {
            console.log(_that.age); // 19
        }, 1000);
    }
}
let Person1 = new Person();//new一个新的Person方法
Person1.ageAdd(19)//调用Person1的ageAdd方法并传入19

image-20231028103018441

那么在箭头函数中呢？

箭头函数捕获封闭上下文的 this 值，而不是创建自己的 this 上下文。以下代码应按预期工作

function Person() {
    this.age = 18
    this.ageAdd = function (val){
        this.age = val
        console.log(this.age); // 19
        setTimeout(
            () => console.log(this.age),
        1000);
    }
}
let Person1 = new Person();//new一个新的Person方法
Person1.ageAdd(19)//调用Person1的ageAdd方法并传入19

image-20231028103336758

上面的例子并没有用 const _that = this; 在箭头函数中打印得到的也是19

3.call() 或 apply() 方法调用一个箭头函数

例子

var person = {
    value:18,
    money:1000,
    addAge:function(val){
        var f = (v) => v + this.value; //val==v,18+1
        return f(val);
    },
    addMoney:function(money){
        var f = (v) => v + this.money; //此this指向person.money
        var b = {value:2000};
        return f.call(b,money); //f函数并非指向b,只是传入了money参数而已

    }
}

console.log(person.addAge(1));    //19
console.log(person.addMoney(3000));    //4000

image-20231028110431858

上面例子可以看出call() 或 apply() 方法调用, 传入了参数而已，对 this 并没有什么影响

其他

  • 箭头函数没有自己的this指向，它会捕获自己定义所处的外层执行环境，并且继承这个this值。箭头函数的this指向在被定义的时候就确定了，之后永远都不会改变。（！永远）
  • 箭头函数不能作为构造函数使用
  • 箭头函数没有原型
  • 箭头函数内没有arguments
  • 通过 call() 或 apply() 方法调用一个箭头函数时，只是传入了参数而已，对 this 并没有什么影响：
  • 箭头函数不能换行
avatar
文章
阅读
粉丝