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. 基本数据类型的变量存储的就是一个值

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

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

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

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

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

知识点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

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

三、 字符串：模版字符串

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

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

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

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

    document.onclick = function (e) {console.log(e.clientX，e.clientY)// 将对象中需要的键快速从对象中解构出来，后期可以 clientX 代替 e.clientXvar { 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 * numreturn sum;}, 0)console.log(res);

五、扩展运算符：  ...

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

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

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

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

    //作用一：  数组元素，对象元素的展开var arr = [21, 45, 617, 78]console.log(...arr); // 21  45  67  78// 求几个数字的最大值console.log(Math.max(21, 45, 56, 78)); // 78console.log(Math.max(arr));// NaNconsole.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")

    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循环

    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出来的对象

//使用 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();

九、函数:  默认参数 

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

    // 函数的默认参数： 忘记传递实参，使用的是默认的参数，传递了实参，使用的是传递的实参function fn(x = 1) {console.log(x);}fn() //1function 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属性本身,一般不写它

    var arr = [1, 2, 3, 4, 5, 6, 7];var res = arr.find(function (item, index) {return item % 2 == 0;})console.log(res); // 2var res = arr.findIndex(function (item, index) {return item % 2 == 0;})console.log(res); // 1

十一、 模块化开发

默认导出，导入

// 默认导出一个函数
export default function greet() {console.log("Hello, World!");
}// 导入默认导出的函数
import greet from './module.js';
greet();  // 输出: Hello, World!

按需导出、导入

// 命名导出多个变量和函数
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!