ES6基础知识

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

1. let 定义变量的语法: let 变量名 = 值;
2. 和var定义变量的区别
  1. 是否支持同一个作用域变量同名 var支持,let不支持

  2. 是否支持预解析 var支持,let不支持

  3. 是否会挂载在window对象上 var会,let不会

  4. 是否存在暂时性死区(在定义这个变量之前的区域是这个变量的死区,不能在这个死区中进行操作变量 --- 输出,赋值,等) let有 var没有

  5. 是否存在块级作用域 let存在,var不存在

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

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

4. const和let的共同点
  1. 不支持同一个作用域常量/变量同名

  2. 不支持预解析

  3. 不会挂载在window对象上

  4. 存在暂时性死区

  5. 存在块级作用域

5. const和let的不同点
  1. let定义的变量值,值能被修改。 const定义的常量值,值不能被修改

  2. let定义变量时,可以先声明后赋值 const定义常量时,不能先声明后赋值,需要声明即赋值

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

基本数据类型:Number。String。Boolean。Null,Undefined

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

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

不同点:

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

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

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

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

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

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

知识点2. this指向问题?

  1. 事件处理函数中的this this===== 绑定事件的事件源

  2. 全局函数中 this this=====window

  3. 回调函数中 this this=====window

  4. 对象中方法 this this==== 对象本身

知识点3. 改变this指向?

  1. 函数名.call(this的指向改变成谁,函数的参数列表) 立即调用函数,没有返回值

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

  3. 函数名.bind(this的指向改变成谁,函数的参数列表)

二、 函数: 箭头函数

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

  1. 当箭头函数的参数只有一个参数时,()可以省去

  2. 当箭头函数的函数体内只有一行代码时,{}可以省

  3. 当箭头函数的函数体内只有一行代码,并且带return,需要{}和return同时省去

  4. 箭头函数中没有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!
相关推荐
爱吃奶酪的松鼠丶1 分钟前
net mvc中使用vue自定义组件遇到的坑
前端·vue.js·mvc
小威编程16 分钟前
uni-app应用级生命周期和页面级生命周期
前端·vue.js·uni-app
喝旺仔la27 分钟前
Django知识进阶
前端·html
啊QQQQQ35 分钟前
linux:回车换行+进度条+git理解与使用以及如何解决免密码push问题
开发语言·javascript·ecmascript
CL_IN39 分钟前
高效集成:聚水潭奇门至金蝶云星空的数据流自动化
java·前端·自动化
Ylucius42 分钟前
14天速成前端 ------学习日志(已完结)------ 后端程序员学习了解前端
java·开发语言·前端·vue.js·学习·状态模式·1024程序员节
真是6的不行1 小时前
Hbuilder html5+沉浸式状态栏
前端·html·html5·hbuilder
熊的猫1 小时前
如何封装一个可取消的 HTTP 请求?
前端·javascript·vue.js·网络协议·http·webpack·node.js
超雄代码狂2 小时前
AJAX入门
前端·ajax
csdn小瓯2 小时前
前端八股文第一篇
前端·原型模式