企业官网建设流程全解析

1、bebal的安装使用

bebal就是把es6转换为es5，有些浏览器不支持es6需要用babel转换一下

第一步安装

npm i --save-dev @babel/core

第二步

babel的配置文件是.babelrc 存放在根目录下，使用babel的第一步就是配置这个文件

文件的格式如下

{

"presets":[],

"plugins":[]

}

第三步：

npm i --save-dev @babel/preset-env

第四步

{

"presets":[

"@babel/env"],

"plugins":[]

}

babel的命令行转码

安装

npm i --save-dev @babel/cli

使用

npx babel example.js

2、let

var是函数级的作用yu，

let:

let是块级别作用yu

// 函数是最高的，var在外部访问不到，在{} 外面可以访问的到，

//let

// 1、let是块级作用yu let在函数外面访问不到，在{}外面访问不到

// 2、let不存在变量提升

// 3、不允许重复声明

function aaa() {

var i = 10

}

console.log(i) //undefined

{

var ia = 10

}

console.log(ia)//10

function bbb() {

let rr = 10

}

console.log(rr) //undefined

if (true) {

let ss = 1

}

console.log(ss)//undefined

var a = []

for (var i = 0; i < 10; i++) {

a[i] = () => {

console.log(i)

}

}

a[6]() //10

// for 循环var i的值是同一个，等for循环结束之后i的值是10

// for 循环let i的值是不是同一个，是新的，等for循环结束之后i的值是还是i

var a = []

for (let i = 0; i < 10; i++) {

a[i] = () => {

console.log(i)

}

}

a[6]() //6

console.log(ii)//存在变量提升 不会报错，但是是undefined

var ii=10

console.log(ii)//不存在变量提升 会报错

let ii=10

let a=10

var a=11//不允许重复声明

3、常量

声明之后不能改变，声明的时候直接初始化，

{

const n1=33

}

console.log(n1) //块级作用yu，也不存在变量提升，不可重复声明，和let很像，只不过const 是常量，let是变量

4、解构赋值

// 对象的结构赋值

// 字符串和数组也可以进行结构赋值

var user={

name:"rzy",

age:22

}

console.log(user.name)//rzy

console.log(user.age)//22

const {name,age}=user//解构赋值

console.log(name,age) //rzy 22

解构的时候字段必须是同名，如果改名就不存在了

还可以这样

var user={

name:"rzy",

age:22

}

const {name,age}=user//解构赋值

const {log}=console

// log(name)//rzy

const {abs,ceil,floor,random}=Math

log(random())

5、字符串

// 字符串的遍历循环

var str="hello"

for(var i of str)

{

console.log(i)//h e l l o

}

for (var i in str)

{

console.log(i)//0 1,2,3,4

}

// 模板字符串

console.log(`fjsfjfslfj${str}`)

6、字符串的方法

// includes startWith endsWith indexOf

var str2="hello"

console.log(str2.indexOf("e"))//1

console.log(str2.includes("llo"))//true

console.log(str2.startsWith("e"))//false

console.log(str2.startsWith("e",1))//true 第二个参事从哪开始比较

console.log(str2.startsWith("he"))//true

console.log(str2.endsWith("he"))//false

console.log(str2.endsWith("lo"))//true

// repeat 重复

var x="x"

console.log(x.repeat(3)) //xxx

console.log(x.repeat(0)) //空

// 补全 padStart()

console.log(x.padStart(6,"ab"))//ababax 第一个参数是总长度，第二个参数是补全的字符串

console.log(x.padEnd(6,"ab"))//ababax 第一个参数是总长度，第二个参数是补全的字符串

console.log(x.padEnd(6))//ababax 第一个参数是总长度，第二个参数是补全的字符串，没有写的话就是空格补全

// trim去除空格

const it=" item itee. "

console.log(it.trimEnd())

console.log(it.trimStart())

console.log(it.trim())

// 结果

/* item itee.

item itee.

item itee. */

// at 返回指定位置的元素

const myit="ithesfljs"

console.log(myit.at(2))//第三个

console.log(myit.at(14))//undefined。如果没有就是undefined

console.log(myit.at(-1))//倒数第一

7、扩展运算符

// 扩展运算符

var arr=[1,2,3]

var arr2=[4,5,6]

console.log(4,5,6,...arr)

// 求数组中的最大值

console.log(Math.max(...arr))

// 合并数组,这两个是一样的

console.log(arr.concat(arr2))

console.log([...arr,...arr2])

8、类数组的转换

在讲扩展运算符的实战用法之前，先补充一个非常常见的场景：类数组的转换。理解了类数组，才能明白为什么扩展运算符不只是"展开数组"这么简单。

先说什么是类数组。

类数组，就是长得像数组、能用下标访问、有length属性，但它不是真正的数组，没有数组原型上那些方法的对象。换句话说，它只是"形似"，并不具备数组的能力。

从上面的例子可以看出，类数组虽然能像数组一样用下标取值、能读到长度，但一旦调用forEach、map、push这些数组方法就会直接报错，因为它的原型链上并没有Array.prototype。

📌 JS 里常见的类数组

1. arguments：函数内部的参数对象，保存了调用时传入的所有实参。ES6 之后推荐用剩余参数（...args）替代它。

2. DOM 集合：document.querySelectorAll()、getElementsByTagName返回的NodeList / HTMLCollection。

3. 类数组的对象

先看arguments的例子：

function fn() { console.log(arguments[0], arguments.length) console.log(arguments instanceof Array) // false } fn('a', 'b') // a 2

再看 DOM 集合的例子：

const divs = document.querySelectorAll('div') divs[0] divs.length divs instanceof Array // false

类数组的对象

const arrLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 } // 可以下标读取 console.log(arrLike[0]) // 'a' console.log(arrLike.length) // 3 // ❌ 报错！没有数组方法 arrLike.forEach(item => console.log(item))

将类数组转换为数组的方法Array.from()

将一组值转换为数组Array.of(10,20,30)

function add() {

console.log(typeof arguments)//object

console.log(arguments)//

// [Arguments] { '0': 10, '1': 20, '2': 30 }

// 类数组可以用数组的读取方式和length属性，但是不能用方法

console.log(arguments[0])//10

console.log(arguments[1])//20

console.log(arguments[2])//30

console.log(Array.from(arguments))//[ 10, 20, 30 ]

let result = Array.from(arguments)

result.push(40) //转换完成就有数组的方法，如push方法了

console.log(result)//[ 10, 20, 30, 40 ]

}

add(10, 20, 30)

// 将一组值转换为数组

console.log(Array.of(10,20,30))//[ 10, 20, 30 ]

9、对象的解构赋值

// 对象的解构赋值

var z = { a: 10, b: 20 }

// console.log(...z)//报错 不能直接打印

const { a, b } = z

console.log(a, b) //10 20

10、箭头函数的常用用法

/* 箭头函数的常用用法 */

var arr = [10, 20, 30]

arr.map((item, index) => {

console.log(item, index)

})

11、箭头函数的this

var name2 = 'rzy'

var user = {

name2: "userName",

getName() {

setTimeout(function () {

console.log(this.name2)//window.name2

})

}

}

user.getName()//需要在浏览器才能打印window.name2

// setTimeout 的this指向window，箭头函数的this指向外层函数的this

// 这里的getName（）{} this 指向user

var name2 = 'rzy'

var user = {

name2: "userName",

getName() {

setTimeout(() => {

console.log(this.name2)

})

}

}

user.getName()//userName

12、map集合

// set的元素不能有重复的

const s = new Set()

var arr = [10, 20, 30, 40]

arr.forEach(x => s.add(x))

console.log(s)

var s = new Set([10, 20, 30])

console.log(s)//Set(3) { 10, 20, 30 }

// 数组去重复

var arr = [10, 10, 10, 20, 30, 20]

var s = new Set(arr)

console.log(s)//Set(3) { 10, 20, 30 }

console.log([...s])//转换为数组[ 10, 20, 30 ]

// 字符串的去重

console.log(new Set('abbbcccaa'))//Set(3) { 'a', 'b', 'c' }

console.log([...new Set('abbbcccaa')].join(""))//abc

// add方法

console.log(new Set([1,2,4,5]).add("2")) //Set(5) { 1, 2, 4, 5, '2' } 字符串和数字不一样

// size方法

console.log(new Set('abbbcccaa').size)//3

// add delete clear has 方法

var s=new Set()

s.add(100)

s.add(200)

s.add(300)

s.delete(100)

console.log(s)//200,300

console.log(s.has(100))//false

console.log(s.has(200))//true

s.clear()

console.log(s)//空

13、promise

// async就是将异步转为同步，如果后面的数据需要全面的数据等时候就需要await一下，如果不用这个就是需要回调函数，就会造成回调地狱的问题

// 异步操作操作的返回结果没那么快返回，可以先执行后面的函数，然后有返回结果的时候在回来执行

14、class的属性和方法

class Person {

constructor(name, age) {

this.name = name

this.age = age

}

sayhello() {

console.log("hello" + this.name)

}

// 这两个可以同名

sayMorning() {

console.log("morning"+this.age) //undefined

//这里的this是Person

}

static sayMorning() {

console.log("morning"+this.age) //undefined

//这里的this是Person

}

}

const p = new Person("rzy", 22)

p.sayhello()

Person.sayMorning()//static 方法是类的方法，实例没有static方法，调用会报错

p.sayMorning()//调用的是不带static的方法

15、class的继承

class Person {

constructor(name, age) {

this.name = name

this.age = age

}

getName() { console.log(this.name) }

static info() {

console.log("这是一个人类")

}

}

class Student extends Person {

constructor(name, age, schollName) {

super(name, age)

this.schollName = schollName

}

}

var s = new Student("小明", 12,"二中")

console.log(s.name)//小明

Student.info()//这是一个人类

Person.info()//这是一个人类

//子类继承父类，继承父类的属性和方法，静态方法也可以继承，但是也需要用类名调用

console.log(s.schollName)//二中

子类定义新的属性和方法需要在constructor里面重新super()一下，