小白学习笔记（ES6）

ES6的变量和模板字符串：

//let和var的区别
//1.let不能重复声明
let j = 10;
let j = "zhangsan";//这样就报错


//2.let有块级作用域，非函数的花括号遇见let会有块级作用域，也就是只能在花括号里访问
{
    let j = 10;
}
console.log(j);//这个就会报错，打印不出来，因为 j 是let在花括号里定义的，只能在花括号里输出


//3.let不会预解析进行变量提升（就是必须先定义再使用）
console.log(j);
let j = 10;//这样就会报错


//4.let定义的全局变量不会作为window的属性
var a = 10;
console.log(window.a);//用var定义这样是可以的

let b = 10;
console.log(window.b);//用let定义后就不能这样子打印



//6.const就是不可修饰的let   有点类似final修饰的变量
let a = 10;
a = 20;//这样是不报错的


const d = 10;
d = 20;//这样子就会报错

模板字符串``:

//模板字符串主要用于解决 字符串换行 和 字符串拼接 的问题
//传统的js用"" ''处理字符串是不支持多行的
//如果要处理多行字符串的问题就可以直接用``(mysql里的着重号)
let city = "北京";
let str =  `<uL>
<li></li>
<li></li>
<li>${city}</li>
<li></li>
<li></li>
</uL>`

解构表达式：

数组的赋值是按顺序来赋值的

获取对象的值是根据名字来的

//使用解构表达式获取对象的属性值
let person = {
    name : "zhangsan",
    age : 10
}
let {age,name} = person//获取对象的属性值的时候，不是根据顺序来的，而是根据名字来的
console.log(name,age)

//解构表达式应用在方法的参数列表
let arr = [11,22,33];
showArr(arr);
function showArr([a,b,c]){
    console.log(a,b,c)//11,22,33
}

es6的箭头函数：

<script>
          let fun1 =function(){};//普通函数声明
          let fun2 = () => {};//箭头函数声明    基本上就是lambda表达式
          let fun3 = (x) =>{return x+1}
          let fun4 = x =>{return x+1}  //如果列表中只有一个参数，（）就可以省略不写
          let fun5 = x => x+1;//方法体中，有且只有一行代码，且这行代码是return返回结果的代码，name{}和return都可以省略不写


        


          //箭头函数没有自己的this
          //箭头函数中的this是外层上下文环境中的this
          let person = {
            name :'张三',
            showName:function(){
                console.log(this.name)
            },
            viewName:() =>{
                console.log(this.name)//这里的this.name不是person对象的name属性，而是person外层window的name属性，但是windows没有name这个属性，所以打印出来的是空的
            }
          }
    </script>

rest和spread：

一、先搞懂核心概念：rest 和 spread 是什么？

rest 和 spread 都使用 ... 语法，但作用完全相反：

• rest（剩余）参数 ：把多个独立的参数 收集成一个数组（"收拢"）。
• spread（展开）运算符 ：把数组 / 对象 / 可迭代对象 拆解成独立的元素（"打散"）。

二、Rest 参数（剩余参数）

1. 基本定义

rest 参数用于函数形参 ，语法是 ...变量名，它会把函数调用时传入的 "剩余" 参数收集到一个数组中。

2. 核心用法

javascript

运行

// 基础示例：收集剩余参数
function sum(...numbers) {
  // numbers 是一个数组，包含所有传入的参数
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2)); // 3（numbers = [1,2]）
console.log(sum(1, 2, 3, 4)); // 10（numbers = [1,2,3,4]）

// 结合普通参数使用（rest 必须是最后一个参数）
function printUser(name, age, ...hobbies) {
  console.log(`姓名：${name}，年龄：${age}`);
  console.log(`爱好：${hobbies.join('、')}`);
}

printUser('张三', 20, '篮球', '游戏', '看书');
// 输出：
// 姓名：张三，年龄：20
// 爱好：篮球、游戏、看书

3. 关键注意事项

• rest 参数必须是函数形参的最后一个 ，否则会报错（function fn(...a, b) {} 非法）。
• rest 参数只能用于函数形参，不能用于其他场景（比如赋值、对象等）。
• 替代了 ES5 的 arguments 对象：arguments 是类数组，而 rest 参数是纯数组，可直接使用 map/reduce 等数组方法。

三、Spread 展开运算符

1. 基本定义

spread 运算符同样用 ...，但作用是 "打散" 可迭代对象（数组、字符串、对象、Set/Map 等），将其元素拆分为独立值。

2. 核心应用场景

场景 1：数组操作（最常用）

javascript

运行

// 1. 数组拼接（替代 concat）
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2]; // [1,2,3,4,5,6]

// 2. 数组拷贝（浅拷贝，替代 slice(0)）
const original = [1, 2, 3];
const copy = [...original]; // [1,2,3]
copy.push(4);
console.log(original); // [1,2,3]（原数组不受影响）

// 3. 向数组中插入元素
const base = [2, 3];
const result = [1, ...base, 4]; // [1,2,3,4]

// 4. 函数调用时传参（替代 apply）
function add(a, b) {
  return a + b;
}
const nums = [10, 20];
console.log(add(...nums)); // 30（等价于 add(10,20)）

场景 2：对象操作（ES2018 扩展）

javascript

运行

// 1. 对象合并（替代 Object.assign）
const userBase = { name: '李四', age: 25 };
const userDetail = { gender: '男', hobby: '跑步' };
const fullUser = { ...userBase, ...userDetail };
// { name: '李四', age: 25, gender: '男', hobby: '跑步' }

// 2. 对象拷贝（浅拷贝）
const obj = { a: 1, b: 2 };
const objCopy = { ...obj }; // {a:1, b:2}

// 3. 覆盖对象属性（后写的属性会覆盖前面的）
const user = { name: '王五', age: 30 };
const updatedUser = { ...user, age: 31 };
// { name: '王五', age: 31 }

场景 3：字符串 / 可迭代对象展开

javascript

运行

// 字符串拆分为字符数组
const str = 'hello';
const chars = [...str]; // ['h','e','l','l','o']

// Set 展开为数组
const s = new Set([1, 2, 2, 3]);
const arrFromSet = [...s]; // [1,2,3]（自动去重）

3. 关键注意事项

• 展开对象时，只展开自身的可枚举属性，不会展开原型链上的属性。
• 数组 / 对象展开都是浅拷贝：如果嵌套了对象 / 数组，内层数据仍会共享引用。

四、rest 和 spread 的核心区别

表格

|--------|-------------|----------------|
| 特性 | rest 参数 | spread 运算符 |
| 作用 | 收拢多个参数为数组 | 打散数组 / 对象为独立元素 |
| 使用位置 | 函数形参位置 | 函数实参、数组、对象等 |
| 语法本质 | 收集参数 | 展开元素 |

es6对象创建的语法糖:

<script>
         class Person{
            //属性
            #n;//#就相当于Java中的private
            age;
            //getter setter方法

            get name(){
                return this.#n;  //#n是一体的，是这个变量名的完整名字，而不是n
            }

            set name(n){
                this.#n = n;
            }

            //实例方法
            eat(food){
                console.log(`${this.age}岁的${this.#n}正在吃${food}`);
            }
            //静态方法
            static sum(a,b){
                return a+b;
            }

            //构造器
            constructor(name,age){
                this.age = age;
                this.#n = name;
            }
            


         }

            //访问私有属性
            let person = new Person("小明",18);
            console.log(person.name);



         //继承
         class Student extends Person{
            score 
            constructor(name,age,score){
                super(name,age);
                this.score = score;
            }
            study(){
                console.log(`${this.age}岁的${this.name}正在学习,获得了${this.score}分`);
            }
            
         }

         let student = new Student(`小明`,18,`88`)
         student.study();




    </script>

深拷贝和浅拷贝：

<script>
    
    //浅拷贝，意思类似于Java中两个对象的地址指向了同一个地址
        let arr=[1,2,3];
        let arr2 = arr;
        arr[0] = 100;
        console.log(arr2);//改变了arr中的数据，arr2也会受到影响。



        //深拷贝，意思就类似于在内存中创造了两个对象，只不过这两个对象的内容相同，但是地址是不一样的，所以不是同一个
        let arr3=[...arr]
        arr3[1] = 100;
        console.log(arr3);
        console.log(arr);
    </script>

模块化处理：

类似于Java的工具类：

分别导入的举例：

moudle.js: 在每个对象前面加一个export

//变量
export const PI = 3.14;  //只有写了export的变量别的文件才能导入这个数据

//方法
export function sum(a,b){
return a+b;
}

//类
export class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    sayHello(){
        console.log(`hello ,我是${this.name},我的年龄是${this.age}`);
    }

}

app.js:

//导入module.js文件
//无论使用何种方式导入，导入的内容都会被当成对象来处理，必须要使用对象来接收

import * as m1 from './moudle.js'

console.log(m1.PI)
console.log(m1.sum(10,20))

index.html:(只有创建index.html才能执行上面的代码)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入app.js文件-->
    <script src="./app.js" type="module"></script>

</head>

统一导出：export后面加个大括号大括号里写要导出的对象

//统一导出
export{PI,sum,Person}

app.js

//导入module.js文件
//无论使用何种方式导入，导入的内容都会被当成对象来处理，必须要使用对象来接收

import * as m1 from './moudle.js'

console.log(m1.PI)
console.log(m1.sum(10,20))





//统一导出除了分别导出的导入方式，还有另外一种导入方式
import {PI,sum,Person} from './moudle.js'
console.log(PI)
console.log(sum(10,20))
let person = new Person("张三",20)
console.log(person.name)
person.sayHello();

index.html:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入app.js文件-->
    <script src="./app.js" type="module"></script>

</head>

默认导出：

moudle.js

//变量
 const PI = 3.14;  //只有写了export的变量别的文件才能导入这个数据

//方法
 function sum(a,b){
return a+b;
}

//类
 class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    sayHello(){
        console.log(`hello ,我是${this.name},我的年龄是${this.age}`);
    }

}



//默认导出在js中只能有一个
export default sum
//如果此时再加一个export default PI 就会报错

app.js:

//import * as m1 from  './moudle.js'
//console.log(m1.default(10,20))


//或者这种
import {default as add}  from './moudle.js'  //在大括号里起个别名
console.log(add(10,30))

index.html:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入app.js文件-->
    <script src="./app.js" type="module"></script>

</head>

npm常见命令：