华清远见重庆中心-阶段总结/学习心得分享/javascript技术总结

笔记

1.javascript
java:类似java计算机编程语言，script:脚本，类似java计算机编程语言的脚本语言缩写为js
2.java和javascript的区别
java静态编译，js作为脚本动态编译。java是强类型语言，js是弱类型语言。
3. javascript 的作用
提供了一个和htm1进行动态交互的功能
4. javascript安装
js运行只需要一个js运行环境即可，那么最常见的js运行环境是浏览器，所以只需要安装浏览器即可。
5. javascript使用
在浏览器控制台上直接运行js语言片段。在html文件的script标签中。使用.js文件书写js代码，然后再html中通过script标签引入代码。
6.
script 标签写在body后面
若有多个script,那么从上而下依序执行。
在同一个script标签中，js的执行顺序以一句话为单位，基本顺序:从上到下，从左到右，每句话用分号隔开“;”。
若代码中每一行只有一句js,那么句尾的分号可以省略。
7.console.log( ‘hello world’ )
console.log 打印日志到控制台
8.
使用script 标签引入外部js文件。src是文件路径|。
9.let a = 3
赋值运算的顺序:先执行赋值符右侧代码，再赋值给左侧。
let声明变量和使用变量的方法和var没有区别。
10.var b = 5
变量，变量就是存储数据的容器。
变量是一个可以变化的量，数据可以发生变化。
同时声明多个变量并赋子初始值，var c, d = 10, e;
修改变量，变量在存储新值之前将完全弃用原来的值。
还可以使用let来声明变量。
let变量不能重复定义，var变量可以重复定义。
11.const g = 10
常量，恒定不变的值为常量，声明时必须赋初始值且声明后无法修改。
12.debugger
debugger 的作用:可以给代码加断点，程序运行到断点处，会停下来，开发人员可以查看
13.js中预留了一些代表特殊含义的英文单词，这些单词我们称为关键字。
14. 查询一个指定选择器的元素
let box = document.querySelector(‘.box’)
15.查询所有指定选择器的元素
let boxs = document.querySelectorAll(‘.box’
16.通过id查询元素
box = document.getElementById(‘myBox’)
17.通过类名查询元素
boxs = document.getElementsByClassName(‘box’)
18.通过标签名查询元素
boxs = document.getElementsByTagName(‘div’)
19.修改属性值
console.log(box.id);
20.改id
box.id = ‘my-box’
21.改样式
box.style.color = ‘#00f’
22.改class名称
box.className = ‘box myClass’
23.textContent 修改和读取标签体里的文本内容
box.textContent = ‘<div style="background-color: #00f;">ok</div>’
24.innerText 修改和读取标签体里的文本内容
box.innerText = ‘<div style="background-color: #00f;">ok</div>’
25.innerHTML 修改和读取标签体里的html内容
box.innerHTML = ‘<div style="background-color: #00f;">ok</div>’
26.模态弹窗
alert(‘hello alert’)
27.确认对话框
confirm(‘你确定吗?’)
28.弹窗输入框
prompt(‘请输入姓名’)
29.if 语句：用于进行条件判断的语句
if(bool expression) {
code block 代码块
}
作用：当布尔表达式值为真时，执行后面的代码块
30.三元运算符替代 if else
user.score >= 60 ? ‘及格’ : ‘不及格’
if (user.score >= 60) {
console.log(‘及格’);
} else {
console.log(‘不及格’);
}
31.大于
(1 > 2);
小于
(1 < 2);
大于等于 小于等于
(3 >= 3)
(3 <= 3)
32.== 非严格相等判断
非严格相等判断 在运算符左右两边不需要使用相同的数据类型
当数据类型不同时 == 运算符将自动进行隐式转换
(a == b)
=== 严格相等
类型和值都相等才会被认为相等
(x == y)
33.赋值运算符
let a = 1

// += 自增
a += 2 // 等价于 a = a + 2
console.log(a);

// -= 自减
a -= 5 // 等价于 a = a - 5
console.log(a);

// *= 自乘
a *= -1
console.log(a);

// /= 自除
a /= 2
console.log(a);

// %= 自模
a = 5
a %= 3 // 等价于 a = a % 3
console.log(a);

34.// && 与
// 语法：bool expression && bool expression
// 两个表达式都为真，结果返回真；任一一个表达式为假，结果返回假
// 例如：
console.log(true && true);
console.log(false && true);
// || 或
// 语法：bool expression || bool expression
// 两个表达式任一一个为真，结果返回真；否则为假
console.log(true || true);
console.log(false || true);
35.// 什么是多维数组？
// 多维数组：多个维度（rank）组成的数组

let arr = [1, 2, 3]

// 声明二维数组
// 二维数组中每个一维数组的成员都是一个数组
arr = [[1, 2], [3, 4], [5, 6]]

读取数组
// 可以将二维数组视为一个x轴和y轴构成的二维平面，所以任意值都可以由x,y坐标来表示
console.log(arr[0][1]);
console.log(arr[2][0]);

// 声明多维数组
// 多维数组是数组内嵌套多层数组的数组
arr = [[[1, 2, 3], [4, 5, 6]], [[7, 8, 9], [10, 11, 12]]]

// 访问数组
// 可以理解成三维空间中访问一个三维坐标系
console.log(arr[0][1][1]);

36.let a = [1, 2]
let b = ‘hello world’

// Array.isArray 方法检测变量是否为数组
// 是数组的话返回 true 否则为 false

console.log(Array.isArray(a));
console.log(Array.isArray(b));

37.// 数组的操作

let arr = [1, 2, true, { name: 'Amy' }, 2]

// push 追加数据到数组末尾
// 参数：被添加的新数组成员
arr.push('hello world')
console.log(arr);


// pop 从尾部取出一个成员
// 返回值是取出的成员
let r = arr.pop()
console.log(r);
console.log(arr);

// unshift 在头部添加数据
// 参数：被添加的新数组成员
arr.unshift('my best day')
console.log(arr);


// shift 从头部取出一个成员
// 返回值是取出的成员
r = arr.shift()
console.log(r);
console.log(arr);

38.push 和 unshift 可以批量添加成员
arr.push(‘a’, ‘b’, ‘c’)
arr.unshift(‘x’, ‘y’, ‘z’)
console.log(arr);

// splice 删除指定位置的成员，并用新成员替换，或插入新成员到指定成员的前面
// 第一个参数：删除成员的起始位置
// 第二个参数：删除成员的个数
// 第三个参数：用于替换被删除成员的新数据，该参数可以省略
// 删除一个成员：
// r = arr.splice(6, 3)
// splice的返回值 就是被删除的成员数组
// console.log(r);

// 在指定成员前追加新数据
// 若第二个参数为0，则可以实现在指定位置的前面添加成员的功能
arr.splice(6, 0, { name: 'Bob' })
console.log(arr);



// concat 连接数组
// 参数：多个被追加进数组的成员，若成员是数组，该数组中每个成员将被加入原数组
// concat 返回一个新数组
// r = arr.concat(7, 8, 9)
// r = arr.concat([7, 8, 9], [10, 11])
// console.log(r);
// console.log(arr);

39.// concat 的应用场景多用于克隆数组
let arr2 = [].concat(arr)
console.log(arr2);
console.log(arr === arr2);

// join 使数组成员用一个字符连接起来
// join 函数接收一个参数，该参数就是连接数组成员时使用的字符
arr2 = ['abc', 'xyz', '123']
r = arr2.join('-*-')
console.log(r);


// includes 判断是否包含某成员
r = arr.includes('z')
console.log(r);



// indexOf 查询指定数组成员的索引
r = arr.indexOf('b')
console.log(r);
// 可以使用indexOf判断是否包含某个数组成员 若不包含 返回 -1
r = arr.indexOf('g')
console.log(r); // => -1
if (arr.indexOf('g') === -1) {
    console.log('该数组成员不存在');
}

40.循环是什么？
// 循环就是重复执行某一段代码的行为

// for 循环
// 例如按次数进行循环
let count = 5 // 循环次数
// for (let i = 0; i < count; i++) {
//     console.log('hello world');
// }

41.冒泡排序
// 原理：此处以排序出一个从小到大的序列为例
// 令数组长度为 lenght
// 排序过程将进行 length - 1 次
// 每一次排序过程中，将对数组中每个成员从左到右进行两两比较，较大的数字将被挤到后面去
// 每执行完一次循环，将在数组末尾确定一个数字的位置
// 最后直到数组的第一个成员和第二个成员进行排序为止，排序结束
let arr = [5, 2, 1, 3, 7, 0, 9, 4]

for (let i = arr.length - 1; i > 0; i--) {
    for (let j = 0; j < i; j++) {
        // 判断前一个数和后一个数的大小
        if (arr[j] > arr[j + 1]) {
            // 交换
            let temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
        }
    }
}

console.log(arr);

42. // 什么是变量的作用域（Scope）？作用域指的是作用范围，范围内可以访问变量，超出范围则无法访问

    // 为了更好理解作用域，可以结合 debugger 和 浏览器的堆栈信息来查看
    // 方法：
    // 1. 在需要查看变量作用的地方写上 debugger
    // 2. 浏览器上 ctrl + shift + i 或 F12
    // 3. 选择 sources
    // 4. 找到当前代码对应的 Call Stack
    // 5. 查看当前 Call Stack 下的 Scope

    // 作用域一共只有三种
    // Global 全局作用域
    // Block 块级作用域
    // Function 函数作用域

43.let x = 1
let y = { name: ‘张三’, sex: ‘male’ }

function modify(a, b) {
    a++
    b.name = '李四'
    b.sex = 'female'
    console.log('函数内');
    console.log(a);
    console.log(b);
}

// 传入两个参数
// x 是值类型传参
// y 是引用类型传参

// 值类型传参，将x变量中的值 直接赋予了函数内的形参
// boolean number string 都是值传递的

// 引用类型传参，将y中的引用地址，传递给函数内的形参
// object function 都是引用传递的

modify(x, y)

console.log('函数调用完后');
console.log(x);
console.log(y);

44.// 函数

// 什么是函数？
// 站在开发人员的角度讲：函数是对一段程序的封装（封装：包装）
// 站在生活的角度来讲：函数就是帮我们完成某样任务的机器

// 为什么要使用函数？
// 用于包装可以重复使用的代码
// 代码的复用

// 输入input和输出output
// 输入：函数完成任务时必不可少的材料
// 输出：函数执行完后产出的产物

45.防抖
// 函数将在一个固定时间后被调用，若计时未完成又执行该函数，则取消上次计时，重新开始计时
// 用于限制频繁的网络请求，例如：搜索功能，用户停止输入的一段时间后才会执行搜索任务

// 防抖
// 步骤：
// 1. 取消计时
// 2. 重新计时

const fd = (() => {
    // 计时器id
    let timerId
    return () => {
        // 取消计时
        clearTimeout(timerId)
        // 重新计时
        timerId = setTimeout(() => {
            // 计时完成后要执行的代码 写在此处
            console.log('hello world');
        }, 3000)
    }
})()

console.log(fd);

46.// 节流
// 固定时间内只能调用一次的函数，可以使用时间戳或计时器的方式实现
// 作用同样是限制用户频繁的网络请求，例如：发送验证码

// 时间戳
function jlTimespan() {
    // 记录上一次成功运行节流函数的时间
    let lastTime
    // 函数调用cd
    let cd = 3000
    return () => {
        // 一次都没调用过该函数
        if (!lastTime) {

            // 执行节流函数的内容
            console.log('hello 节流')

            lastTime = Date.now()
        } else {
            // 计算上一次调用该函数和本次调用该函数的时间间隔
            // 当前时间
            let now = Date.now()
            // 获取间隔时间
            let timespan = now - lastTime
            // 当间隔时间大于cd，则认为可以再次调用该函数
            if (timespan >= cd) {
                console.log('hello 节流')
                // 记录本次调用的时间
                lastTime = now
            }
        }
    }
}

let fn = jlTimespan()
console.log(fn);

47.// 计时器
// 1. 判断是否可以运行节流代码（cd好没有）
// 2. 执行节流的内容
// 3. 计时
function jlTimer() {
// 计时器id
let timerId
let cd = 3000
return () => {
// 若已经开始计时 则timerId 存在
if (timerId) return

        // 执行被节流的函数内容
        console.log('hello 节流');

        // 开始计时
        timerId = setTimeout(() => {
            // 清空计时器id 允许再次调用
            timerId = undefined
        }, cd)
    }
}

fn = jlTimer()

48.// 内存堆栈？
// 调用函数时，函数中的各种变量将存储在内存中，以堆栈的形式进行保存
// 堆 用于存储对象数据的内存区域
// 栈 指的是一种先进后出的数据格式 用于存储每次函数调用时产生的数据
// 栈中的每一次调用内容，称为一个栈帧
49.// 此处结合 debugger 查看以下 for 循环中 i 的作用域

// for (let i = 0; i < 5; i++) {
//     // setTimeout 将在指定的一段时间后 执行回调函数
//     setTimeout(() => {
//         // debugger
//         console.log(i);
//     })
// }

for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        // debugger
        console.log(i);
    })
}

50.// 预编译是什么？
// 在浏览器执行js脚本前需要进行编译，有些代码在编译前将会率先被翻译执行并存入内存，这个过程称为预编译

// console.log(x + 1)
// 变量无法在声明之前访问它    
// let x = 1

// console.log(sub(2, 1))
// 声明函数在调用之后
function sub(x, y) {
    let a = 1
    return x - y
}

// 上述调用函数不会报错，因为使用了 function 关键字声明的函数，将会被预编译