跳至主要內容
字符串

1. 获取字符串长度

JavaScript 中的字符串有一个 length 属性，该属性可以用来获取字符串的长度：

const str = 'hello'
str.length // 输出结果：5
罗天旭Javascript字符串大约 16 分钟
操作符

一、一元操作符

操作符可以根据他们期待的操作符个数来分类，多数的 JavaScript 操作符都是二元操作符，二元操作符可以将两个表达式合成一个更复杂的表达式。JavaScript 也支持一元操作符，这些操作符可以将一个表达式转化为另一个更复杂的表达式。同时，JavaScript 中也有一个三元操作符，就是条件操作符（?:），它用于将三个表达式组成一个表达式。下面就先来看看一元操作符。

一元操作符具有以下特点：

  • 最简单的操作符，用来操作一个表达式；
  • 具有高优先级和右结合性；
  • 在必要时将操作数自动转化为数值。
罗天旭Javascript操作符大约 25 分钟
数组

一、数组基础

1. 数组概述

数组是我们最常用的数据类型之一，ECMAScript 数组跟其他语言的数组一样，都是一组有序的数据，但跟其他语言不同的是，数组中每个槽位可以存储任意类型的数据。除此之外，ECMAScript 数组的长度也是动态的，会随着数据的增删而改变。

数组是被等分为许多小块的连续内存段，每个小块都和一个整数关联，可以通过这个整数快速访问对应的小块。除此之外，数组拥有一个 length 属性，该属性表示的并不是数组元素的数量，而是指数组元素的最高序号加 1。

let a = [1, 2, 3]
a.length === 3 // true
罗天旭Javascript数组大约 38 分钟
类型转换

1. 什么是类型转换？

Javascript 是一种弱类型语言，这意味着变量是没有明确类型的，而是由 JavaScript 引擎在编译时隐式完成。类型转换是将一种数据类型转换为另一种数据类型，例如：

20 + "twenty" // => "20twenty"
"10" * "10" // => 100 
2 - "x"
罗天旭Javascript类型转换大约 15 分钟
跨域

为什么跨域

为什么会出现跨域问题呢？那就不得不讲浏览器的同源策略了，它规定了协议号-域名-端口号这三者必须都相同才符合同源策略

如有有一个不相同，就会出现跨域问题，不符合同源策略导致的后果有

  • LocalStorge、SessionStorge、Cookie 等浏览器内存无法跨域访问
  • DOM 节点无法跨域操作
  • Ajax 请求无法跨域请求
罗天旭Javascript跨域大约 8 分钟
遍历循环

一、数组遍历方法

1. forEach()

forEach 方法用于调用数组的每个元素，并将元素传递给回调函数。数组中的每个值都会调用回调函数。其语法如下：

array.forEach(function(currentValue, index, arr), thisValue)
罗天旭Javascript遍历大约 13 分钟
DOM事件机制

DOM 事件级别

DOM 级别一共可以分为四个级别：DOM0 级、DOM1 级、DOM2 级和 DOM3 级。而 DOM 事件分为 3 个级别：DOM 0 级事件处理，DOM 2 级事件处理和 DOM 3 级事件处理。由于 DOM 1 级中没有事件的相关内容，所以没有 DOM 1 级事件。

DOM 0 级事件

el.onclick=function(){}

// 例1
var btn = document.getElementById('btn')
btn.onclick = function () {
    alert(this.innerHTML)
}
罗天旭Javascript事件机制大约 7 分钟
Web API

在 Web API 中，有非常有用的对象、属性和函数可用于执行小到访问 DOM 这样的小任务，大到处理音频、视频这样的复杂任务。常见的 API 有 Canvas、Web Worker、History、Fetch 等。下面就来看一些不常见但很实用的 Web API！

1. Web Audio API

Audio API 允许我们在 Web 上操作音频流，它可以用于 Web 上的音频源添加效果和过滤器。音频源可以来自<audio>、视频/音频源文件或音频网络流。

下面来看一个例子：

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">
        <div class="web-api-card">
            <div class="web-api-card-head">
                Demo - Audio
            </div>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div>
                    <audio controls src="./audio.mp3" id="audio"></audio>
                </div>
                <div>
                    <button onclick="audioFromAudioFile.init()">Init</button>
                    <button onclick="audioFromAudioFile.play()">Play</button>
                    <button onclick="audioFromAudioFile.pause()">Pause</button>
                    <button onclick="audioFromAudioFile.stop()">Stop</button>
                </div>
                <div>
                    <span>Vol: <input onchange="audioFromAudioFile.changeVolume()" type="range" id="vol" min="1" max="2" step="0.01" value="1" /></span>
                    <span>Pan: <input onchange="audioFromAudioFile.changePan()" type="range" id="panner" min="-1" max="1" step="0.01" value="0" /></span>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    const l = console.log
    let audioFromAudioFile = (function() {
        var audioContext
        var volNode
        var pannerNode
        var mediaSource

        function init() {
            l("Init")
        try {
                audioContext = new AudioContext()
                mediaSource = audioContext.createMediaElementSource(audio)
                volNode = audioContext.createGain()
                volNode.gain.value = 1
                pannerNode = new StereoPannerNode(audioContext, { pan:0 })

                mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)
            }
            catch(e) {
                error.innerHTML = "此设备不支持 Web Audio API"
                error.classList.remove("close")
            }
        }

        function play() {
            audio.play()
        }

        function pause() {
            audio.pause()
        }

        function stop() {
            audio.stop()
        }

        function changeVolume() {
            volNode.gain.value = this.value
            l("Vol Range:",this.value)
        }

        function changePan() {
            pannerNode.gain.value = this.value
            l("Pan Range:",this.value)
        }

        return {
            init,
            play,
            pause,
            stop,
            changePan,
            changeVolume
        }
    })()
</script>
罗天旭JavascriptWeb API大约 10 分钟
事件循环

1. 异步执行原理

（1）单线程的JavaScript

我们知道，JavaScript是一种单线程语言，它主要用来与用户互动，以及操作DOM。

JavaScript 有同步和异步的概念，这就解决了代码阻塞的问题：

  • 同步：如果在一个函数返回的时候，调用者就能够得到预期结果，那么这个函数就是同步的；
  • 异步：如果在函数返回的时候，调用者还不能够得到预期结果，而是需要在将来通过一定的手段得到，那么这个函数就是异步的。

那单线程有什么好处呢？

  • 在 JS 运行的时候可能会阻止 UI 渲染，这说明了两个线程是互斥的。这是因为 JS 可以修改 DOM，如果在 JS 执行的时候 UI 线程还在工作，就可能导致不能安全的渲染 UI。
  • 得益于 JS 是单线程运行的，可以达到节省内存，节约上下文切换时间的好处。
罗天旭Javascript事件循环大约 14 分钟
内存泄漏

SPA（单页应用程序）的兴起，促使我们更加关注与内存相关的 JavaScript 编码实践。如果应用使用的内存越来越多，就会严重影响性能，甚至导致浏览器的崩溃。下面就来看看 JavaScript 中常见的内存泄漏以及如何避免内存泄漏。

一、什么是内存泄漏？

JavaScript 就是所谓的垃圾回收语言之一，垃圾回收语言通过定期检查哪些先前分配的内存仍然可以从应用程序的其他部分“访问”来帮助开发人员管理内存。垃圾回收语言中泄漏的主要原因是不需要的引用。如果你的 JavaScript 应用程序经常发生崩溃、高延迟和性能差，那么一个潜在的原因可能是内存泄漏。

罗天旭Javascript内存泄漏大约 11 分钟
Copyright © <罗天旭>