JS基础要点

css

Grid布局 二维布局：可在水平垂直两个方向上同时布局

1.栅格布局

1.1. 容器

1. display: grid/inline-grid: 容器类型（块状或者行内）
   1.1: 属性
   grid: 块状
   grid-inline-grid: 行内

2. grid-template-row/columns: 创建显式网格（列/行）
   2.1: 属性
   repeat:重复
   grid-template-columns: repeat(1fr 1fr)
grid-template-row: repeat(1fr 1fr)

3. grid-auto-row/columns: 创建隐式网格
4. grid-auto-flow: 项目排列方向
5. gap: 行列间隙
6. place-content: 项目在容器中的排列方式
7. place-items: 项目在单元格中的排列方式

2.项目

1. grid-row/colums: 某项占据的网格区域
2. grid-area: 是grid-row/column的语法糖
3. place-self: 某项在单元格中的排列方式

更多：https://developer.mozilla.org/zh-CN/docs/web/CSS/CSS_Grid_Layout

2.媒体查询 @media (min-width: 大于) (max-width: 小于) (min-width: 小于) and (max-width: 大于)

2.移动端rem vw

公式: font-size: calc(100vw / 3.75); //100px;

javascript

1. 代码成员

1. 数据:
   变量 let，储存数据和表示数据的标识符，可以在程序中被改变
   常量 const，一旦赋值就不能被改变了。

2. 命名规则
   驼峰命名（大，小） UserName (大) userName(小)
   蛇形命名（大，小）user_name(小) APP_PHP(大)

2. 函数

1. 函数

    function(){
    //...
    }

2. 匿名函数

let item = function(){
...
}

3. 箭头函数

(参数)，没有参数可以留空
let item = () => {
    //...
}

4. 立即执行函数

;(function(){
    //..
    })();
//或者
;(()=>{
//语法糖
})();

3. 引用类型

基本类型: number string boolean null undefined

引用类型：object array function

1. 数组

let arr = ['1','2','3','4']
console.log(arr)

2. 对象

let arr = {
'name':'小明',
'age':'15'
}
console.log(arr)

3. 多维数组，对象数组，“类”数组

//多维数组
let arr = [['1',2,'你好'],['1',2,'小明']]
console.log(arr[0][1] //2);
//对象数组
let arr = [
{
'name':'小明',
'age': '15',
'sex':'男'
},
{
'name':'小明红',
'age': '15',
'sex':'女'
}]
console.log(arr[0].name //小明);
//“类”数组
let item = {
'name':'小明红',
'age': '15',
'sex':'女'
}
//对象使用 Array.from() 转换成数组
arr = Array.form(item)
consloe.log(arr)//数组
//对象使用forEach()遍历输出数据
arr.forEach(item => console.log(item))
consloe.log(arr)//对象

4. 作用域

1. 作用域（用来查询变量）

2. 作用域链(由内向外查找)

3. 类型：块作用域，函数作用域，全局作用域

//块作用域
{
    let name = '小明';
    console.log(name)
}
//函数作用域
let site = '墨子';
const arr = function(){
    site = '鲁班大师'
    console.log(site) //'鲁班大师'
}
console.log(arr) //'鲁班大师'
//全局作用域
let site = '墨子'; // 在全局中生成变量

5.对象成员的简化语法

    //键值和属性一样可以简写
   let name = '墨子';
   let age = 18;
    const obj = {
        name,
        age
    }
    conosle.log(obj)

6.流程控制语句

1.分支

    if(true){
    //... 
    console.log('hello')
    }

2.双分支

    if(true){
    console.log('hello')
    }else{
    console.log('你好')
    }

3.多分支

let name = '墨子';
    if(name = '墨子'){
    console.log('hello')
    }else if(name = '鲁班大师'){
    console.log('你好')
    }else{
    console.log('嘿嘿')
    }

4.双分支语法糖（简化抒写）

三元运算符

//条件？true : false
let name = true;
console.log(name ? ‘墨子’: ‘鲁班大师’)

5.多分支语法糖（简化抒写）

等值判断

let name = '墨子';
switch(name){
    case '鲁班大师':
        console.log('1');
        break;
    case '墨子':
        console.log('2');
        break;
    default:
        console.log('甄姬')
}

范围判断

传入true才可以执行
switch(true)

let name = 80;
switch(true){
    case name>70 && name < 100:
        console.log('80');
        break;
    case  name>60 && name < 80:
        console.log('70');
        break;
    default:
        console.log('60')
}

6.循环

while

consot arr = [1,2,3];
let index = 0;
while(index < arr.length){
console.log(arr[index])
}

for

consot arr = [1,2,3];
for(let index = 0; index < arr.length; i++){
console.log(arr[i])
}

for-of (数组循环)

consot arr = [1,2,3];
for(value of arr){
    console.log(value) //1,2,3
}

for-in (对象循环)

consot arr = {name: '小马', age:'18', sex: '男'};
for(index in arr){
    console.log(arr[index]) //小马,18,男
}

forEach/map

forEach() 没有返回值

const arr = ['小马', 18,'男'];
arr.forEach(function(item,index,arr){
    console.log(item)
});
//简化
arr.forEach(item => console.log(item))

map() 有返回值

const arr = ['小马', 18,'男'];
const res = arr.map(item => console.log(item));
const res = arr.map((item,index,arr) => 
 `<span> ${index}: ${item} </span>\n`
).join('');
const bos = document.querySelector('body');
bos.innerHTML+=res
console.log(res);

函数参数与返回值

参数

参数不足：默认参数

//参数不足的时候
let fn = function(a,b = 0){
    return a+b
}
console.log(fn(1))

参数过多：剩余参数

fn = (a,b,...arr){
//展开函数
//第一种
//创建一个数组
let tmp = [a,b,...arr];
let res = 0; //初始值
tmp.forEach(item =>{
res += item
return res;
})
}
//第一个函数参数输出
fn(1,2,3,4) //10
fn = (a,b,...arr){
//展开函数
//第二种
//解析解构：将集合中的每一个成员，赋值给一个个独立的变量
let [c,d,e] = arr;
let data = [a,b,c,d,e];
//数组的reduce方法进行求和
return = data.reduce((prev,curr) => prev+curr,0)
}
//第一个函数参数输出
fn(1,2,3,4) //10

返回值

单值：return

多值: 数组，对象

//查询一个数组对象数据
const items = [
        {id: 1,name: '西瓜', price: 20},
        {id: 2,name: '苹果', price: 30},
        {id: 3,name: '橘子', price: 40},
        {id: 4,name: '香蕉', price: 50},
    ];
const getFruits = ((item, ...num) => {
    //先建一个返回数组
    let res = [];
    //循环num的个数
    for(let i = 0; i < num.length; i++){
        //循环出items的数据
        items.forEach(item => {
            //判断id和num的值是否相同，相同的话追加在res数组中
            if(item.id === num[i]){
                res.push(item)
            }
        })
    }
    return res
})
let result = getFruits(items,3,4) //{id: 3,name: '橘子', price: 40},{id: 4,name: '香蕉', price: 50}

模板字面量

多行字符串

const arr = ['小明','男','18']
let res = `
    <ul>
        <li>姓名：${arr[0]}</li>
        <li>性别：${arr[1]}</li>
        <li>年龄：${arr[2]}</li>
    </ul>    
`
console.log(res)

解析字符串模板中的变量或表达式

解构赋值

数组解构

let arr = [100,200];
//左侧为模板 数组用[...] 对象用{...}
//右侧为值
//创建
let [a,b] = arr;
//更新值
;[a,b] = [300,500];
console.log(a,b) //更新值 300,500
//如果变量>值：使用默认值
;[a,b,c = 600] = [300,500];
console.log(a,b,c) //300,500,600
//变量<值:使用剩余参数 ...res
;[a,b,...arr] = [300,500,400,500];
let [c,d] = arr;
console.log(a,b,...arr) //300,500,400,500

对象解构

//属性名有冲突的时候可以使用 uname(旧值): name(新值)
let {uname: name,age} = {uname: '小明',age: 18, sex: '男'};
console.log(uname,age)

应用场景1.对象克隆

let user = {uname: '小明',age: 18, sex: '男'};
let {...obj} = user;
//克隆以后和之前的对象并不相等
console.log(obj)

应用场景2. 简化传参

let user = {uname: '小明',age: 18, sex: '男'};
//原始传参
let show = (user => {
    return `名字：${user.uname}，年龄：${user.age}`
})
console.log(show(user)) // 名字：小明，年龄：18
//简化对象传参
let show = (({uname,age})=>{
    return `名字：${uname}，年龄：${age}`
});
console.log(show(user))

访问器属性

let res = {
    data: {
        age: 18
    },
    //getter: 读取 getAge => 语法糖 get age
    get age(){
        return this.data.age;
    },
    //setter: 设置 setAge => 语法糖 set age
    set age(age){
     //通过加一些条件判断 能否访问属性
     if(age < 18){
         console.log('没有成年')
        return false;
     }
     this.data.age = age; //通过判断进行处理
    }
}
//修改属性值
res.age = 15
//执行
console.log(res.age) //没有成年

字符串常用方法

1. str.length ：字符串长度

2. str.search('查找的值') : 字符串索引 从0开始

3. str.replace('原值','替换的值') : 字符串替换

4. str.slice(开始,结束) ： 起始索引，结束索引

5. str.substr() : 起始值和获取的数量,不需要知道到哪结束

6. str.split() : 字符串 => 数组

7. str.join() : 数组 => 字符串

7. toLowerCase() /toUpperCase(): 转换字母大写/小写

数组的常用方法

1. push/pop :尾部添加/删除

let arr = [];
arr.push('a') //在尾部添加返回数组的数量并不返回具体的值
arr.pop() //从尾部开始删除并且返回删除的值

2. unshift/shift :头部添加/删除

let arr = [];
arr.unshift('a') //在尾部添加返回数组的数量并不返回具体的值
arr.shift() //从尾部开始删除并且返回删除的值

3. delete :删除任意数组，删除后还会有空白占位符，需要使用filter()过滤方法

let arr = [1,2,3];
delete arr[1]

4. filter() : 过数组方法

let arr = [1,2,3];
delete arr[1]
arr.filter(item => item);
console.log(arr) //[1,3]

键 值 键值对

keys()键值对方法
console.log(arr.keys())
返回一个迭代对象，使用for-of 遍历对象

let arr = ['小明','男','18'];
//获取键 arr.keys()
for(item of arr.keys()){
    console.log(item);
}
//获取值 value
for(item of arr.values()){
    console.log(item);
}
//键值对 [key,value]
for(item of arr.entries()){
    console.log(item);
}

获取子元素splice

数组的增删改
splice(‘起始位置’,’删除数量’,’附加元素(可选)’);

let arr = ['小明','男','18'];
//删除
console.log(arr.splice(0,2)); // ['男'] 被删除后返回组成的数组
//添加
console.log(arr.splice(1,0,'111'));//数量为0 表示不删除，在当前索引后添加新元素
//更新
console.log(arr.splice(1,1,'五班'));//数量为1 表示在索引1删除1个值后再添加'五班'

排序

sort()
排序模板: a-b 从小到大, b-a从大到小
arr.sort(function(a,b){
retrun a-b
});

let arr = [1,25,163,154,12]
arr.sort((a,b) => a-b) // 从小到大排序
arr.sort((a,b) => b-a) //从大到小排序

数组拼接

let a =[1,1,1,1,]
let b = [2,2,2,2,2]
let c = [3,3,3,3,3]
let d = […a,…b,…c]

数组回调方法

回调函数

//同步回调函数
function add(a,b){
    return a + b
}
function sum(a,b,callback){
return callback(a,b)
}
let res = sum(10,50,function(a,b){
return add(a,b)
});
console.log(res)

遍历 forEach / map

let arr = ['小明','18','三班','五年级'];
arr.forEach(item=>item)//没有返回值
arr.map(item=>item) //有返回值

断言 every / some

every(callback) //返回值是布尔值 所有值都满足条件才会返回true
some(callback) // 只要满足一个条件就可以返回true

let arr = [15,8,59,66,3];
arr.every(item => item > 10) //false
arr.some(item => item > 10) //true

过滤 filter / find…

let arr = [15,8,59,66,3];
//filter(callback) //过滤符合的值，并且返回新的数组
arr.filter(item => item > 10) //[15,59,66]
//find(callback) // 返回新数组的第一个值
arr.find(item => item > 10) //15
//findLast(callback) //返回新数组最后一个值
arr.findLast(item => item > 10) //66
//findIndex(callback) //返回新数组第一个索引值
arr.findIndex(item => item > 10) //0
//findeLastOf(callback) //返回新数组最后一个索引值
//lastIndexOf获取最后一个索引值,分两步
//1. 先过滤获取最后一个值
let res = arr.findLast(item => item > 10) //66
//2. 获取当前索引值
arr.lastIndexOf(res) //3

累加 reduce

语法：
reduce(function(前一个值,当前值),{
…
最终的累加结果，由前一个值返回
}起始值)

//reduce(callback,init)
arr.reduce((prev,curr)=>prev+curr)
//解析
let res = arr.reduce(fucntion(prev,curr){
    return prev + curr;
    // prev = 1, curr = 2, prev = 3
    // prev = 3, curr = 3, prev = 6
    // prev = 6, curr = 4, ...
})
console.log(res)

构造函数与类

类

声明

class

属性

constructor()

方法

method(){} 简写

访问器

get method() / set method()

静态成员

static 关键字

继承

extends / super

//构建函数
class User{
//属性
constructor(name){
    this.name = name
}
//方法
say(){
    return `${this.name}`
}
//静态
static age = '15'
}
let res = new User('小马')
console.log(res.say())
//继承
class Child extends User{
    constructor(name,email){
        super(name)
        this.email = email
    }
    speak(){
    return `${this.name}:${this.email}`
    }
}
let resChild = new Child('小刘','123@qq.com')
console.log(resChild.speak())//小刘 123@qq.com

DOM操作

获取DOM元素

<div class="box"> <1> </div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>

一组 querySelectorAll()

let item = document.querySelectorAll('.box');
console.log(item)

一个 querySelector()

let item = document.querySelector('.box');
console.log(item)

表单元素获取

关键字forms

关键字 forms 使用name值和id值都可以获取到

<form action="" id="form">
    <input type="email" value="123@qq.com" name="email" /><br />
    <input type="text" value="小刘" name="uname" /><br />
    <input type="password" name="password" value="20230926" />
</form>

const form = document.forms.form;
const email = form.email.value
const password = form.password.value
console.log(password)

let forms = document.forms.ID(表单的ID)
获取表单组件方法forms.email

数据封装

let data = {
    uname,age
}
data = JSON.stringify(data,null,4)
console.log(data)

DOM节点转为数组

遍历DOM

1. children: 元素类型子节点
2. firstElementChild: 第一个子元素
3. lastElementChild: 最后一个子元素
4. nextElementSibling: 下一个兄弟元素
5. previousElementSibling: 前一个兄弟元素
6. parentElement: 父元素
7. contains(): 判断是否是后代元素返回 true/false

<ul class="box">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

// 获取元素
let list = document.querySelector('.box');
//获取元素下的子元素
let item = list.children
//获取第一个子元素
item = item.firstElementChild
//获取最后一个子元素
item = item.lastElementChild
//获取下一个兄弟元素
item = item.nextElementSibling
//获取前一个兄弟元素
item = item.previousElementSibling
//获取子元素的父元素
list = item.parentElement
//判断是否是父元素的后代 返回true/false
list.contains(item)

DOM增删改

创建元素

createElement()

追加元素

append()

创建片断

createDocumentFragment()

后面添加

after()

前面添加

before()

克隆节点

coneNode(true): true深度克隆的到内部所有的后代元素

替换子元素

replaceChild(新节点,旧节点)

删除元素

remove()

//创建元素
let ul = document.createElement('ul');
//追加在body中
document.body.append(ul)
//追加元素
ul.append('<li>追加元素</li>');
//创建文档片段(可以理解为把所有新建的元素统一追加在片段中后，再由片段追加在容器中)
let list = document.createDocumentFragment();
     //创建新元素
     let p1 = document.createElement('p')
     //新元素赋值
     p1.textContent = 'Paragraph 1'
     //将创建的新元素添加到文档片段中
     list.append(p1);
     //把文档片段插入容器中
     ul.appendChild(list);
//在元素后追加
let box = document.querySelector('.box');
     box.after('在box后面追加');
//在元素前面追加
box.before('在box前面追加');
//克隆节点cloneNode(true)为true时候深入克隆所有的后代元素
let cone = ul.cloneNode(true);
//替换元素（元素必须是节点才可以替换）
let newText = box.lastElementChild
let boxFri = box.firstElementChild
box.replaceChild(newText, boxFri)
//删除
newText.nextElementSibling.remove();

元素内容

1. textContent: 全部内容(js,css,隐藏内容)
2. innerText: 返回已经渲染(可见)内容
3. innerHTML: 返回子元素的HTML内容(html)
4. outerHTML: 返回整个元素以及所有的子元素的HTML标记（html）

let box = document.querySelector('.box');
//显示全部内容包含样式与已经隐藏了内容 并且可以更改
box.textContent
//返回已经解析后的(可见)内容 并且可以更改
box.innerText
//返回元素里的子元素HTML内容 并且可以更改
box.innerHTML
//返回整个元素以及所有子元素的HTML 并且可以更改
box.outerHTML

指定位置添加元素

插入位置配合着API方法使用

1. beforebegin: 元素自身的前面
2. afterbegin: 插入元素内部的第一个子节点之前
3. beforeend: 插入元素内部的最后一个子节点之后
4. afterend: 元素自身的后面

API方法

1. insertAdjacentElement(): 指定位置插入元素
2. insertAdjacentText(): 指定位置插入文本节点
3. insertAdjacentHTML: 指定位置插入元素节点

//指定位置插入
    // let box = document.querySelector('.box');
    //指定位置插入必须是元素节点
    // box.insertAdjacentElement('beforebegin','111')
    //指定位置插入是HTML元素节点
    // box.insertAdjacentHTML('beforebegin','111')
    //指定位置插入是文本
    // box.insertAdjacentText('beforebegin','111')
    //创建节点
    let h3 = document.createElement('h3');
    // 元素自身的前面
    h3.append('111');
    // 在元素自身的前面插入元素
    // box.insertAdjacentElement('beforebegin',h3)
    // 在元素自身的后面插入元素
    // box.insertAdjacentElement('beforeend',h3)
    // 在元素内部第一个子节点插入元素
    // box.insertAdjacentElement('afterbegin',h3)
    // 在元素内部最后一个子节点插入元素
    // box.insertAdjacentElement('afterend',h3)
    let h2 = `<h2>标题</h2>`
    //方法同上
    box.insertAdjacentHTML('beforebegin',h2)
    box.insertAdjacentHTML('beforeend',h2)
    box.insertAdjacentHTML('afterbegin',h2)
    box.insertAdjacentHTML('afterend',h2)
    let text = '文本'
    box.insertAdjacentText('beforebegin',text)
    box.insertAdjacentText('beforeend',text)
    box.insertAdjacentText('afterbegin',text)
    box.insertAdjacentText('afterend',text)

小案例留言

<input
    type="text"
    style="height: 25px"
    autofocus
    onkeydown="submit(this)"
    placeholder="输入留言"
    />
<ul class="list"></ul>

function submit(eve){
    //值不能为空
    if(eve.value.length === 0){
        alert('不能为空!')
        return false;
    }else{
    //获取容器
    const ul = document.querySelector(".list");
//先把值传到新建的节点<li>中，然后插入在ul容器中afterbegin容器的第一个元素，并且添加删除按钮与事件
ul.insertAdjacentHTML("afterbegin",`<li>${eve.value}<button onclick="del(this.parentElement)">删除</button></li>`);
    }
    //删除事件
    function del(eve) {
        return confirm('是否直接删除') ? eve.remove(): false;
      }
}

dataset对象

dataset: 读取自定义属性 data-自定义属性前缀

<div class="divbox" data-name-user="小刘">
    20231009
</div>

 let divbox = document.querySelector('.divbox');
     divbox.dataset.nameUser = '小明1'
     console.log(divbox.dataset.nameUser) //小明

getComputedStyle计算样式

<style>
.divbox{
    width: 100px;
    height: 100px;
    background-color: darkcyan;
    color: #fff;
}
</style>
<div class="divbox" data-name-user="小刘">
    20231009
</div>

//获取元素
let divbox = document.querySelector('.divbox');
//获取width的值，返回字符串
let width = window.getComputedStyle(divbox).width
//设置行内样式
width = parseInt(width) + 100+'px'
divbox.style.width = width

classList对象

classList: 对元素上的class进行增删改查

1. classList.add(): 添加 可以连续添加(‘a’,’b’)
   如果有数组形式的添加，可使用…arr方式展开数组
2. classList.contains(): 判断是否包含类名 返回true/false
3. classList.replace(): 替换（旧值,新值）
4. classList.remove(): 移除
5. classList.toggle(): 如果类名存在就删除，如果不存在就添加

事件的添加与删除

事件属性

事件方法中如果使用到了 this 千万不要使用箭头函数（因为它没有自己的this）
它的this是上下文的（执行环境）

onclick: 点击事件

//点击事件
btn.onclick = function(){
    console.log(this)
}
//删除点击事件
btn.onclick = null

事件侦听器

addEventListener()

//addEventListener('事件名称',方法)
//可以添加多个同名的事件方法，会按照顺序执行多个事件
btn.addEventListener('click',function(){
 console.log('第一个事件')
});
btn.addEventListener('click',function(){
 console.log('第二个事件')
});
...

事件添加，删除，派发实战

addEventListener('click',functuion): 事件添加

removeEventListener('click',function): 删除事件的时候，方法要单独写

dispatchEvent(): 事件派发，把事件委托到别处并且自动执行

...
//添加事件
box.addEventListener('click',function(){
console.log('1')
})
//事件删除，如果有方法的话，把方法封装后再进行添加和删除如下:
const show = function(){
    console.log(1)
}
//先添加事件
box.addEventListenner('click',show);
//删除事件
box.removeEventListener('click',show);
//事件派发
//创建事件对象固定语法 new Event('事件')
const res = new Event('click');
box.dispatchEvent(res)//

定时器

setTimeout(function,time): 一次性执行，只执行一次
setInterval(function,time): 间接式执行
clearTimerout(): 删除一次性执行的定时器
clearInterval(): 删除间接式定时器

//一次性执行
let i = 0;
let out = setTimeout(function(){
    i++;
    console.log(i)//1
},1000);
//删除一次性执行
clearTimerout(out);
//每间隔1s执行一次
let val = setInterval(function(){
    i++;
    console.log(i) //每隔一秒将会执行一次 
    //停止间隔执行
    //一般会有一个条件判断，执行停止 用在倒计时上面比较多
    clearInterval(val);
},1000);

阻止事件继续冒泡到父元素

eve.stopPropagation(): 事件由内向外，逐级向上传递一直到根元素

eve.preventDefault(): 禁止默认行为，点击后没有任何反应

box.addEventListenner('click',function(){
 console.log('父元素')
});
item.addEventListenner('click',function(eve){
console.log('子元素');
eve.stopPropagation(); //点击子元素将不会执行
})

事件代理

ev.currentTarg: 绑定主体
ev.target: 事件触发主体

 box.addEventListener('click',function(eve){
     console.log(eve.currentTarget) //事件绑定的主体
     console.log(eve.target.textContent) //事件触发主体
 });

常用表单事件

onchange: 当表单的值发生改变时触发
onsubmit: 提交表单时候触发
onfocus: 获取表单元素焦点时候触发
onblur: 表单失去焦点时候触发
onkeydown: 当按下键盘触发
onkeyup: 当键盘弹起时触发
onkeypress: 当按住键盘触发
onclick: 点击表单元素后触发

模块的声明与导入

使当前的script支持模块功能

<script type="module">
….
</script>

export 导出关键字
import moduleName from './module.js': 导入固定语法

普通导入\导出

//模块A导出
export function multiply(a,b){
return a*b
};
export const PI = 3.14159;
//模块B导入
import {multiply,PI} from './moduleA'
console.log(multiply(2,3))
console.log(PI)

批量导入 * as \ 批量导出

//模块A 导出
function square(x){
    return x*x
}
function cube(x){
    return x*x*x;
}
export {square,cube}
//模块B 导入 * as
import * as math from './moduleA';
console.log(math.square(3)) //输出 9
console.log(math.cube(3)) //输出 27

别名导入 防止命名冲突 {旧 as 新} \别名导出

//模块A 导出
function square(x){
    return x*x
}
function cube(x){
    return x*x*x;
}
//别名导出
export {square, cube as cubes}
//模块B 别名导入
import {square as squarer, cubes} from './moduleA'
console.log(squarer(3)) //输出 9

打包导出

比较常用使用类来打包

//模块A
export class User{
    constructor(uname){
        this.uname = uname
    }
    greet(){
        return `欢迎您${this.uname}`
    }
}
//模块B
import {User} from './moduleA';
const user = new User('小刘');
console.log(user.greet())

默认导出（匿名导出）

default 默认导出 关键字

一个模块中只有一个默认导出
``javascript //模块A export default class{ constructor(uname){ this.uname = uname } greet(){ return你好${this.uname}`
}
}

//模块B
//默认导入就不需要使用{} user1 任意命名
import user1 from ‘./moduleA’;
const user = new user1(‘小刘’);
console.log(user.uname) //你好小刘

#### 混合导出
> 默认的不要加{}, add, {a,b} 
```javascript
// 模块A
//默认导出
export default function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}
export function multiply(a, b) {
  return a * b;
}
//模块B
import add,{ subtract, multiply } from './moduleA';
console.log(add(2, 3)); // 输出：5
console.log(subtract(5, 2)); // 输出：3
console.log(multiply(2, 3)); // 输出：6

JSON

类型

number ,string ,boolean ,null ,array ,object