跳至主要內容

前端语言

TAIweb前端javascriptES6typescript约 2578 字大约 9 分钟

(1)JavaScript

入门案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入门案例</title>
    <style>
        .change {
            width: 100px;
            line-height: 100px;
            background-color: tomato;
            color: ##fff;
            text-align: center;
            transition: all 1s;
        }
    </style>
</head>
<body>
    <div id="box">
        内容
    </div>
    <script>
        box.onclick = function() {
            this.textContent = '点击了';
            this.className = 'change';
        }
    </script>
</body>
</html>

变量数据类型运算符


    <script>

        // 变量
        var num = 10 // 普通命名
        var myAge= 20 // 驼峰命名

        // 数据类型
        var myNum = 10 // number 数值
        var myStr = '赵哥' // string 字符串
        var myBool = true // boolean 布尔
        var myNull = null // null 空
        var myUndefined = undefined // undefined 默认

        // 运算符
        var sum = 1 - 2 * 3 % 4
        console.log(sum)

        var str = 'a' + 'b' + 'c'
        console.log(str)

        console.log(3 >= 2)
        console.log(3 == '3')
        console.log(3 === '3')

    </script>

分支循环


    <script>

        // if分支

        if (true) {
            console.log(1)
        }

        if (false) {
            console.log(2)
        } else {
            console.log(3)
        }

        if (false) {
            console.log(4)
        } else if (true) {
            console.log(5)
        } else {
            console.log(6)
        }

        // for循环
        var sum = 0
        for (var i = 0; i < 10; i++) {
            if (i % 2 == 0) {
                sum += i
            }
        }
        console.log(sum)

        // 循环对象
        var obj = {
            name: '赵哥',
            age: 20,
            sex: '男'
        }

        console.log(obj)
        console.log(obj.name)
        console.log(obj['name'])

        for (var key in obj) {
            console.log(key, obj[key])
        }

    </script>

函数


<script>

    function sum(a, b) {
        var c = 0
        for (var i = a; i < b; i++) {
            c += i
        }
        console.log(c)
    }
    sum(1, 10)

    function sum2(x, y) {
        var z = 0
        for (var j = x; j < y; j++) {
            z += j
        }
        return z
    }
    var result = sum2(1, 10)
    console.log(result)

</script>

函数调用函数

 
<script>

        function m(a, b, f) {
            var c = 0
            for (var i = a; i < b; i++) {
                if (f(i)) {
                    c += i
                }
            }
            return c
        }

        var result = m(1, 10, function(x) {
            return x % 2 == 0
        })

        console.log(result)

    </script>

数组


<script>

        // 数组
        var arr = [1, 2, 3, 4, 5]
        console.log(arr)
        console.log(arr[0])
        console.log(arr.length)

        arr.push(6)
        arr.unshift(7)
        console.log(arr)

        var sum = 0
        for (var i = 0; i < arr.length; i++) {
            sum += arr[i]
        }
        console.log(sum)

        arr.forEach(function(item, index) {
            console.log(index, item)
        })

    </script>

DOM


    <div id="app">
        默认内容
    </div>

    <p>默认内容</p>
    <p>默认内容</p>
    <p>默认内容</p>

    <script>
        
        var app = document.getElementById('app')
        console.log(app)
        app.textContent = '修改内容'

        var arr = document.getElementsByTagName('p')
        var brr = ['张三', '李四', '王五']
        for(var i = 0; i < arr.length; i++){
            arr[i].textContent = brr[i]
        }

    </script>

选择器


    <div id="app">
        默认内容1
    </div>

    <div id="app2">
        默认内容2
    </div>

    <p>默认内容</p>
    <p class="x">默认内容</p>
    <p>默认内容</p>

    <script>

        // 选择器
        var x = document.querySelector('.x')
        x.textContent = '修改内容'
        x.previousElementSibling.textContent = '上一个内容'
        x.nextElementSibling.textContent = '下一个内容'
        
        // 父节点
        var f = x.parentElement
        console.log(f)

        // 子节点
        var c = f.children
        console.log(c)

        // 样式处理
        app.style.color = 'red'
        app.style.backgroundColor = 'green'

        // 超文本
        app2.innerHTML = '<b>超文本</b>'

    </script>

事件处理



        <button id="button1" onclick="alert('点击事件1')">按钮1</button>

        <button id="button2">按钮2</button>

        <button id="button3">按钮3</button>
    
<script>

button2.onclick = function(){
    alert('点击事件2')
}

// 注意：此方法添加事件，只能绑定一个事件、如果再次绑定，会覆盖之前的事件
button2.onclick = function(){
    alert('点击事件222')
}

// 建议：不会覆盖之前的事件，而是添加事件
// addEventListener()方法添加事件
button3.addEventListener('click', function(){
    alert('点击事件3')
})

button3.addEventListener('click', function(){
    alert('点击事件333')
})

</script>

定时器


    <script>

        // setTimeout(function(){
        //     console.log('定时器')
        // }, 2000)

        // setInterval(function(){
        //     console.log('每间隔2s执行1次')
        // }, 2000)

        var timer = setInterval(function(){
            console.log('每间隔2s执行1次')
        }, 2000)

        setTimeout(function(){
            clearInterval(timer)
        }, 5000)

    </script>

(2)ES6核心语法

变量和常量


    <script>
        {
            let a = 1
            a = 2
            console.log(a)

            const b = 3
            // b = 4
            console.log(b)
        }
    </script>

模板字符串

    
   <script>
    {
        const name = '张三'
        const age = 18
        const info = `姓名：${name}，年龄：${age}`
        console.log(info)
    }
    </script>

对象解构赋值


    <script>

    {
        const user = {
            name: '张三',
            age: 18
        }

        const { name, age } = user
        console.log(name, age)
    }

    </script>

数组解构赋值


    <script>

        {
            const arr = [1, 2, 3]
            const [a, b, c] = arr
            console.log(a, b, c)
        }

    </script>

...用法


    <script>

        const arr = [1,2,3]
        const brr = [4,5,6]
        const crr = [7,...arr,8,...brr,9]
        console.log(crr)

        const obj1 = {
        name: 'tom'
        }

        const obj2 = {
        age: 18
        }

        const obj3 = {
        ...obj1,
        ...obj2
        }
        console.log(obj3)

    </script>

函数参数


    <script>

        function myFn() {
            console.log(arguments)
            Array.from(arguments).forEach(item => {
            console.log(item)
            })
        }

        myFn(1,2,3)
        
    </script>

浅拷贝


    <script>

        const obj = {
        name: 'ES6'
        }

        const obj2 = {
        age: 10
        }

        const obj3 = Object.assign({}, obj, obj2)
        console.log(obj3)
        obj3.name = '张三'
        console.log(obj, obj2, obj3)
        
    </script>

箭头函数


    <script>

        const m1 = n => n + 3
        const m2 = (n, m) => n + m
        const m3 = (n, m) => {
        return n + m
        }
        const m4 = (n,m,...x) => console.log(n,m,x)
        
    </script>

异步promise、async、await


Promise、async和await是JavaScript中处理异步操作的三个重要概念。

Promise 是一种用于异步计算的对象。它代表了一个可能现在还没有结果，但将来某个时间点会有结果的值。一个 Promise 对象有三种状态：
Pending（进行中）：初始状态，既不是成功，也不是失败的状态。
Fulfilled（已成功）：操作成功完成。
Rejected（已失败）：操作失败。
Promise 提供了 .then() 和 .catch() 方法来处理异步操作的结果。

async 是一个关键字，用于声明一个函数是异步的。这意味着函数内部的代码会在一个 Promise 的执行上下文中运行，允许你使用 await 关键字。
使用 async 声明的函数会返回一个 Promise 对象。如果函数正常执行完毕，返回的 Promise 会被 fulfilled 并返回函数的返回值。如果函数中抛出错误，返回的 Promise 会被 rejected。

await 是一个关键字，只能在 async 函数内部使用。它用于等待一个 Promise 的解决（fulfillment）或拒绝（rejection）。当 await 一个 Promise 时，JavaScript 执行会被暂停，直到 Promise 完成，然后才会继续执行 await 后面的代码。

它们之间的关系和区别
Promise 是一种异步操作的封装，它可以在异步操作完成或失败后提供反馈。
async 是一个声明异步函数的关键字，它使得函数返回一个 Promise，并且允许在函数体内使用 await。
await 是一个只能在 async 函数内部使用的关键字，它用于暂停函数的执行，直到一个 Promise 解决。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步函数</title>
</head>
<body>
    
<script>

// 使用 Promise
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('后台服务器返回的数据');
  }, 5000);
});

promise.then((value) => {
  console.log(value);
}).catch((error) => {
  console.error(error);
});

// 使用 async 和 await
async function asyncFunction() {
  try {
    const result = await promise; // 等待 promise 解决
    console.log('处理成功');
  } catch (error) {
    console.error(error);
  }
}

asyncFunction();

</script>
    
</body>
</html>

模块modual


JS文件
// EMS和CommonJS(Node.js)

export const myData = '数据'

export function myMethod() {
    console.log('方法')
}

export default {
    name:'D模块'
}

Vue文件

<script setup>

import modualD from './d.js'
import {myData, myMethod} from './d.js'

console.log(modualD.name)

console.log(myData)

myMethod()

</script>

(3)TypeScript核心语法

类型推断


根据初始值推断类型
let a = 'abc'
a = 10

任意类型
let a: any = 2
a = '你好'
a = true

类型注解


定义变量指定类型
let b: string
b = '字符串'

类型断言


调用函数的返回值指定类型才能参与数字的计算
let c = [1,2,3]
const d = c.find(item => item > 2) as number
console.log(d * 5)

基础类型和联合类型


基础类型
let v1: string = 'abc'
let v2: number = 10
let v3: boolean = true
let v4: null = null
let v5: undefined = undefined

联合类型
let a: string|number|boolean
a = 'a'
a = 100
a = true

let b: 2|4|6
b = 2
b = 4
b = 5

类型别名


数自定义类型
type MyType = string | number
let a: string|number = 10
let b: MyType = 'abc'

数组、元组、枚举


数组
let arr: number[] = [1,2,3,'4']
let brr: Array<string> = ['a','b',10]

元组是一种用于表示已知元素数量和类型的数组
let crr: [number, string, number?] = [1, 'a', 2]
crr[0] = 3
crr[0] = 'b'

枚举
enum Color {
  Red = 1,
  Green = 2,
  Blue = 4
}

let c: Color = Color.Blue;
console.log(c); // 输出: 4

函数


有返回值的函数返回类型必须和return一样
?表示可选属性、只能是最后一个参数
function m1(a: number, b: number, c?: number): number {
    return a + b
}
console.log(m1(1,2,3))

没有返回值的函数有return会报错
...变长参数必须是数组类型
function m2(a: number, b: number, ...c: number[]): void {
    console.log(a + b)
    console.log(c)
}
m2(1,2,3,4,5)

匿名函数


参数 s 没有类型注释，TypeScript 还是使用 forEach 函数的类型以及推断的数组类型来确定 s 将具有的类型。这个过程称为上下文类型，因为函数发生的上下文告知它应该具有什么类型。
const names = ["Alice", "Bob", "Eve"]
 
names.forEach((s) => {
  console.log(s.toUpperCase())
})

对象类型


对象类型
function m(pt: { x: number; y: number }) {
  console.log(pt.x);
  console.log(pt.y);
}

m({ x: 3, y: 7 });

(4)TypeScript面向对象

接口


用于定义对象的结构
interface Person {
  firstName: string;
  lastName: string;
  age?: number; // 可选属性，用问号表示
}

const person: Person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};

接口中的属性可以用 ? 标记为可选，表示它们不是必需的
可以使用 readonly 关键字来定义只读属性
interface Point {
  readonly x: number;
  readonly y: number;
  z?: number;
}

const p: Point = {
    x:1,
    y:2,
    z:3
}
p.x = 4
p.z = 4
console.log(p)

泛型


不使用泛型
function m1(a: number, b: number): number[] {
    return [a, b]
}

使用泛型
function m2<T>(a: T, b: T): T[] {
    return [a, b]
}

let x = m2<number>(1,2)
let y = m2<string>('a','b')

函数重载


function m(value : string | number): void {
    if (typeof value === 'string') {
      console.log('字符串')
    } else if (typeof value === 'number') {
      console.log('数字')
    } else {
      console.log('其它类型')
    }
}

m(100)
m('100')

接口继承


interface Father {
  name: string
}

interface Child extends Father {
  age: number
}

const person: Child = {
  name:'张三',
  age:30
}

类和对象


class Person {

  name: string
  age: number

  constructor(name:string, age:number){
    this.name = name
    this.age = age
  }

}

const a:Person = new Person('张三', 30)
console.log(a)

const b:Person = new Person('李四', 40)
console.log(b)

strict和strictNullCheck


tsconfig.json配置文件
“strict” = true
strictNullCheck

类的修饰符和类的继承


可选属性、默认公共、受保护属性、私有属性、静态成员、继承


class Person {

  public name: string
  protected age: number
  private gender?: string
  static PI:number = 3.14

  constructor(name:string, age:number){
    this.name = name
    this.age = age
  }

}

console.log(Person.PI)
const person:Person = new Person('王五',50)
console.log(person.name)

class Member extends Person {
  constructor(name:string, age:number) {
    super(name, age)
    console.log(this.age)
  }
  
}

存取器


class Person {
  private _age: number;

  constructor(age: number) {
    this._age = age;
  }

  // Getter（获取器）
  // Getter 是一种没有参数、没有返回值类型声明、并且总是返回某个值的函数。
  // Getter 用于获取对象的属性值，可以用来读取私有变量的值。
  get age(): number {
    return this._age;
  }

  // Setter（设置器）
  set age(value: number) {
    if (value < 0) {
      console.error("年龄不能小于0");
    } else {
      this._age = value;
    }
  }

}

const p:Person = new Person(18)
console.log(p.age)
p.age = 20
console.log(p.age)

抽象类


abstract class Car {
  // 抽象属性
  abstract name: string
  // 抽象函数
  abstract driver(): void
  // 实现函数
  r():void {
    console.log('倒挡')
  }
}

class Audi extends Car {
  name: string = '奥迪'
  driver():void {
    console.log('实现驾驶')
  }
}

类实现接口


interface Car {
  name: string
  d(): void
  s(): void
}

class Benz implements Car {
  name: string = '奔驰'
  d() {
    console.log('实现驾驶')
  }
  s() {
    console.log('实现运动')
  }
}