ES6基础知识

一、定义变量的关键字let和const

1. let 定义变量的语法： let 变量名 = 值;

2. 和var定义变量的区别

是否支持同一个作用域变量同名 var支持，let不支持
是否支持预解析 var支持，let不支持
是否会挂载在window对象上 var会，let不会
是否存在暂时性死区(在定义这个变量之前的区域是这个变量的死区，不能在这个死区中进行操作变量 --- 输出，赋值，等) let有 var没有
是否存在块级作用域 let存在，var不存在

3.定义常量的语法： const 常量名 = 值;

常量：定义完毕之后不能再被更改

4. const和let的共同点

不支持同一个作用域常量/变量同名
不支持预解析
不会挂载在window对象上
存在暂时性死区
存在块级作用域

5. const和let的不同点

let定义的变量值，值能被修改。 const定义的常量值，值不能被修改
let定义变量时，可以先声明后赋值 const定义常量时，不能先声明后赋值，需要声明即赋值

知识点1. 基本数据类型和引用数据类型的区别？

基本数据类型：Number。String。Boolean。Null，Undefined

引用数据类型： function Object、Array、Math、Date等

相同点：变量名字都在栈内存存储

不同点：

基本数据类型的变量存储的就是一个值

引用数据类型的变量存储的是一个地址值，这个地址值在堆内存中是有一个对应的地址

基本数据类型的变量存储的值在栈内存中存储

引用数据类型的变量存储的值在堆内存中存储

基本数据类型的值和值之间相互不影响

引用数据类型和引用数据类型在公用同一个地址的情况下，其中一个的值发生变化，另外一个也跟着变

知识点2. this指向问题？

事件处理函数中的this this===== 绑定事件的事件源
全局函数中 this this=====window
回调函数中 this this=====window
对象中方法 this this==== 对象本身

知识点3. 改变this指向？

函数名.call(this的指向改变成谁，函数的参数列表) 立即调用函数,没有返回值
函数名.apply(this的指向改变成谁，[函数的参数列表]) 把参数放到数组中立即调用函数,没有返回值
函数名.bind(this的指向改变成谁，函数的参数列表)

二、函数：箭头函数

箭头函数：是对匿名函数的一些改造

当箭头函数的参数只有一个参数时，()可以省去
当箭头函数的函数体内只有一行代码时，{}可以省
当箭头函数的函数体内只有一行代码，并且带return，需要{}和return同时省去
箭头函数中没有this，它的this指向的是该箭头函数的上一级作用域中的this

javascript 复制代码

    //4. 箭头函数中没有this，它的this指向的是该箭头函数上一级作用域中的this
    console.log(this); // this===window
        document.onclick = function() {
        console.log(this); // #document
    }

    console.log(this); // this===window
    document.onclick = () => {
        console.log(this); //window
    }

三、字符串：模版字符串

字符串：模版字符串， includes ， repeat ，startsWith，endsWith

javascript 复制代码

    var user = 'zs'
    var str = `hello  ${user}`

    str.includes('world'): 判断str中是否包含world，返回true或者false
    str.startsWith('world'): 判断str中是否以world开始，返回true或者false
    str.endsWith('hello'): 判断str中是否以hello结束，返回true或者false
    str.endsWith('hello'): 判断str中是否以hello结束，返回true或者false
    str.repeat(3):        让str重复3次，返回重复后的字符串

四、数组和对象：解构赋值

解构赋值：将数组中的值快速从数组的元素中解构出来

javascript 复制代码

    document.onclick = function (e) {
       console.log(e.clientX，e.clientY)
       // 将对象中需要的键快速从对象中解构出来，后期可以 clientX 代替 e.clientX
       var { clientX, clientY } = e;
       console.log(clientX，clientY);
       let { clientX: x, clientY: y } = e;
       console.log(x, y);
    }


    var arr = [12, 34, 56, 67, 78];
    var [a, b, c, d, e] = arr; // 解构赋值
    console.log(a,b,c,d,e);


    var obj = { username: 'zs', age: 18, sex: '男' }
    var { username, age, sex } = obj;
    console.log(username,age,sex);
    // 还可以给对象的键名重新命名
    var { username: u, age: a, sex: s } = obj;
    console.log(u,a,s); 


    var arr = [{
        "id": "2",
        "product": "OPPO手机",
        "price": 1999,
        "num": 16
    }, {
        "id": "3",
        "product": "APPLE手机",
        "price": 6999,
        "num": 1
    }]
    var res = arr.reduce((sum, item) => { 
        let {  price,  num } = item;
        sum += price * num
        return sum;
    }, 0)
    console.log(res);

五、扩展运算符： ...

作用一：数组元素，对象元素的展开

作用二：合并数组，合并对象

作用三：将伪数组转为数组

作用四：将函数的实参合并成数组

javascript 复制代码

    //作用一：  数组元素，对象元素的展开
        var arr = [21, 45, 617, 78]
        console.log(...arr); // 21  45  67  78
        // 求几个数字的最大值
        console.log(Math.max(21, 45, 56, 78)); // 78
        console.log(Math.max(arr));// NaN
        console.log(Math.max(...arr));// 617

    //作用二：合并数组，合并对象
        // 将arr和arr1合并
        console.log(arr.concat(arr1)); //  [21, 45, 617, 78, 78, 89, 90]
        console.log([...arr, ...arr1]); //  [21, 45, 617, 78, 78, 89, 90]

        // // 合并对象
        var obj1 = { username: "zs" }
        var obj2 = { age: 18 }
        console.log({ ...obj1, ...obj2 });


    //作用三： 将伪数组转为数组
        var oLis = document.querySelectorAll("li")
        console.log(Array.from(oLis));
        console.log([...oLis]);

    //作用四：将函数的实参合并成数组

        function getSum(...args) {
           console.log(args); // [12,35,67]
        }
        getSum(12, 35, 67)
        getSum(12, 35, 67, 78)
        getSum(12, 35, 67, 78, 89)


        function getSum(...args) { // args表示的是一个数组形式的所有实参
            var sum = 0;
            for (var i = 0; i < args.length; i++) {
                sum += args[i]
            }
            return sum;
        }
        console.log(getSum(12, 35, 67));
        console.log(getSum(12, 35, 67, 78));
        console.log(getSum(12, 35, 67, 78, 89));

六、 map集合set集合

set集合：一种类似数组的数据结构，会将元素自动去重

定义的语法： var set = new Set([12,12,34,12,34,56,23])

map集合：一种类似于对象的数据结构，

定义的语法： var map = new Map();

添加：map.set('key',"value")

javascript 复制代码

    var arr = [12, 12, 34, 12, 34, 56, 23]
    var set = new Set(arr)
    console.log(set); // 伪数组
    console.log([...set]); // 数组
    console.log([...new Set(arr)]);


    var map = new Map();
    map.set('key1', "value1")
    map.set('key2', "value2")
    map.set('key3', "value3")
    console.log(map); //{'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3'}

七. for...of

数组： for..of可以遍历(遍历的是数组的元素)，for..in也可以遍历(遍历的是数组的下标)

对象：只能使用 for..in 遍历对象，不能使用for..of

map集合：使用的是for..of来变量，不能使用for..in循环

javascript 复制代码

    var arr = [12, 34, 56, 67]
    for (let item of arr) {
        console.log(item); // 12 34  56  67
    }

    for (let i in arr) {
        console.log(i); // 0 1 2 3
    }


    //只能使用for..in遍历对象,不能使用for..of来遍历对象
    var obj = {
        username: "zs",
        age: 18
    }
    for (var key in obj) {
        console.log(key);
    }

    var map = new Map();
    map.set('key1', "value1")
    map.set('key2', "value2")
    map.set('key3', "value3")
    console.log(map); //{'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3'}
    for (let item of map) { // item: ['key1','value1']
        console.log(item[0]); // 代表所有的键
        console.log(item[1]); // 代表所有的值
    }

八. class类

调用的方式： class类: new 函数名()）
this的指向： class类的this是 new出来的对象(也就是实例化对象)
默认返回值： class类的默认返回是 this
名字： class类的函数名首字母大写，
作用： class类的目的产生对象，通过调用对象身上的方法完成特定的功能
class类体内：可以向this上挂载属性和方法
class类中的方法体内部的this：也是new出来的对象

javascript 复制代码

//使用 class 关键字定义一个类：
class Person {
    constructor(name, age) {
        this.name = name; // 初始化属性
        this.age = age;
    }
    
    greet() { // 类的方法
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

//constructor()：构造函数用于创建和初始化对象实例。当使用 new 关键字创建类的实例时，会自动调用这个构造函数。
const alice = new Person('Alice', 30);
alice.greet(); 


//ES6 允许类之间的继承，通过 extends 关键字实现子类继承父类：
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age); // 调用父类的构造函数
        this.grade = grade; // 初始化子类特有的属性
    }

    study() {
        console.log(`${this.name} is studying for grade ${this.grade}.`);
    }
}

const bob = new Student('Bob', 20, 'A');
bob.greet(); // 输出: Hello, my name is Bob and I am 20 years old.
bob.study();

九、函数: 默认参数

函数的默认参数：忘记传递实参，使用的是默认的参数，传递了实参，使用的是传递的实参

javascript 复制代码

    // 函数的默认参数： 忘记传递实参，使用的是默认的参数，传递了实参，使用的是传递的实参
    function fn(x = 1) {
        console.log(x);
    }
    fn() //1
    function fn(x = 1) {
        console.log(x);
    }
    fn(20) //20

十、数组中：find 和findIndex()

find
语法： arr.find(function(item,index,array){ return 条件判断})
作用：查找元素的,找的是第一个满足条件的元素
返回值：第一个满足条件的元素
参数：function(item,index,array){} item数组的每一个元素，index数组元素对应的下标，array属性本身,一般不写它
findIndex
语法： arr.findIndex(function(item,index,array){ return 条件判断})
作用：查找元素的,找的是第一个满足条件的元素的下标
返回值：第一个满足条件的元素的下标
参数：function(item,index,array){} item数组的每一个元素，index数组元素对应的下标，array属性本身,一般不写它

javascript 复制代码

    var arr = [1, 2, 3, 4, 5, 6, 7];

    var res = arr.find(function (item, index) {
        return item % 2 == 0;
    })
    console.log(res); // 2
    var res = arr.findIndex(function (item, index) {
        return item % 2 == 0;
    })
    console.log(res); // 1

十一、模块化开发

默认导出，导入

javascript 复制代码

// 默认导出一个函数
export default function greet() {
    console.log("Hello, World!");
}


// 导入默认导出的函数
import greet from './module.js';
greet();  // 输出: Hello, World!

按需导出、导入

javascript 复制代码

// 命名导出多个变量和函数
export const name = "Alice";
export const age = 25;
export function greet() {
    console.log("Hello!");
}

// 按需导入命名导出的内容
import { name, age, greet } from './module.js';
console.log(name); // 输出: Alice
console.log(age);  // 输出: 25
greet();           // 输出: Hello!

一、定义变量的关键字let和const

1. let 定义变量的语法： let 变量名 = 值;

2. 和var定义变量的区别

3.定义常量的语法： const 常量名 = 值;

4. const和let的共同点

5. const和let的不同点

知识点1. 基本数据类型和引用数据类型的区别？

知识点2. this指向问题？

知识点3. 改变this指向？

二、 函数： 箭头函数

三、 字符串：模版字符串

四、 数组和对象： 解构赋值

五、扩展运算符： ...

六、 map集合set集合

七. for...of

八. class类

九、函数: 默认参数

十、数组中：find 和findIndex()

十一、 模块化开发

二、函数：箭头函数

三、字符串：模版字符串

四、数组和对象：解构赋值

十一、模块化开发