JavaScript 学习笔记-(壹)

前端知识体系

想要成为真正的“互联网 Java 全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。

  • HTML（结构）：决定网页的结构和内容

  • CSS（表现）：设定网页的表现样式。

  • JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为.

css 预处理器

  • SASS：基于 Ruby ，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。

  • LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用 LESS。

JavaScript 框架

  • JQuery:大家熟知的 JavaScript 库，优点就是简化了 DOM 操作，缺点就是 DOM 操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容 IE6，7，8

  • Angular:Google 收购的前端框架，由一群 Java 程序员开发，其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了 TypeScript 语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如 1 代–>2 代，除了名字，基本就是两个东西

  • React:Facebook 出品，一款高性能的 JS 前端框架；特点是提出了新概念 【虚拟 DOM】用于减少真实 DOM 操作，在内存中模拟 DOM 操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；

  • Vue:一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和 React(虚拟 DOM) 的优点；

  • Axios:前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用 jQuery 提供的 AJAX 通信功能

UI 框架

  • Ant-Design：阿里巴巴出品，基于 React 的 UI 框架

  • ElementUI、iview、ice：饿了么出品，基于 Vue 的 UI 框架

  • BootStrap：Teitter 推出的一个用于前端开发的开源工具包

  • AmazeUI：又叫“妹子 UI”，一款 HTML5 跨屏前端框架

JavaScript 构建工具

  • Babel：JS 编译工具，主要用于浏览器不支持的 ES 新特性，比如用于编译 TypeScript

  • WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载

三端统一

  • 混合开发（Hybrid App）
    • 云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
    • 本地打包： Cordova（前身是 PhoneGap）
  • 微信小程序:微信小程序 UI 开发的框架：WeUI

Hello-World

内部开撸

  • 放在 head 或者 body 里面都可以,一般放在 head 中.
    • 需要注意如果 js 对 DOM 进行操作,标签位置会影响加载顺序以导致对 DOM 的操作可能无效.
    • 比如要对 body 里的内容进行修改,js 放在 head 里就会无效(因为先加载的 js 后加载的 body),这种情况就需要 js 放在 body 的末尾.
    1
    2
    3
    <script>
      alert("HelloWorld");
    </script>

外部引入

1
<script src="js/1.js"></script>

注意 script 不是单标签,<script src="js/1.js" />这样写会出错.

type

1
2
<!--不用显示定义type，也默认就是javaScript-->
  <script type="text/javascript"></script>

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>

    <!--! JavaScript严格区分大小写-->
    <script>
      // 1. 定义变量   变量类型 变量名 = 变量值
      var score = 1;
      //alert(num);

      // 2. 条件控制
      // if (score > 60 && score < 70) {
      //   alert("60~70");
      // } else if (score > 70 && score < 80) {
      //   alert("70~80");
      // } else {
      //   alert("other");
      // }
    </script>
  </head>
  <body></body>
</html>

浏览器调试

20201220232055
  • 调试 HTML 和 css 一般在 Element
  • console 控制台一般用来调试 JavaScript.
  • 检查文件和网络连接分别用 Source 和 Network
  • 最后的 Application 用来存储网络数据.

摸摸就会了,不同特意学习.

数据类型

变量

1
2
3
4
5
6
123       //整数123
123.1     //浮点数123.1
1.123e3   //科学计数法
-99       //负数
NaN	      //not a number
Infinity  // 表示无限大

字符串

‘abc’ “abc”

布尔值

true，false

逻辑运算

  • && 两个都为真，结果为真

  • || 一个为真，结果为真

  • ! 真即假，假即真

比较运算符

  • = 赋值

  • == 等于（类型不一样，值一样比如:1 与"1"，也会判断为 true）

    这是一个 JS 的缺陷，坚持不要使用 == 比较

  • === 绝对等于（类型一样，值一样，结果为 true）

  • NaN === NaN

    • // false
    • 只能通过 isNaN（NaN）来判断这个数是否是 NaN

浮点数

  • 跟 C 语言一样,某些浮点数运算存在一定的精度损失.

    • 尽量避免使用浮点数运算.
    1
    console.log(1 / 3 === 1 - 2 / 3);

  • 函数调用类似 Java

    1
    Math.abs(1 / 3 - (1 - 2 / 3)) < 0.00000001;

null && undefined

  • null 定义了但是事空的
  • undefined 未定义的

数组

  • 定义,跟 Java 异曲同工.

    1
    2
    3
    4
    //保证代码的可读性，尽量使用[]
    var arr = [1, 2, 3, 4, 5, "hello", null, true];
    //第二种定义方法
    var arr = new Array(1, 2, 3, 4, 5, "hello");

  • 差别

    • JavaScript 的数组内可以存放不同类型的数据.
    • 数组越界报错 undefined

对象

  • 对象是大括号，数组是中括号

  • 每个属性之间使用逗号隔开，最后一个属性不需要逗号

  • 与 Java 相同,变量和对象名完全可以用中文(但是不建议).

  • 定义

    1
    2
    3
    4
    5
    6
    7
    // Person person = new Person(1,2,3,4,5);

    var person = {
      name: "Tom",
      age: 3,
      tags: ["js", "java", "web", "..."],
    };

  • 取值

    1
    2
    3
    4
    5
    person.name
    > "Tom"

    person.age
    > 3

严格检查模式

  • js 里定义变量几种方法:

    1
    2
    3
    4
    5
    6
    // 默认全局变量(严禁这样写)
    i1 = 1;
    // 全局变量(不建议写法,可能引发问题)
    var i2 = 2;
    // 局部变量(建议)
    let i3 = 3;

  • 严格检查

    1
    2
    3
    "use strict";
    //全局变量 (严格检查,会报错)
    i = 1;

字符串

转义字符

  • (基本跟 Java 一样)
1
2
3
4
5
\'
\n
\t
\u4e2d    \u*** Unicode字符
\x41	Ascall字符

多行字符串

1
2
3
4
5
6
//tab上面 esc下面
var msg = `hello
            world
            你好呀
            nihao
            `;

模板字符串

1
2
3
4
let name = "Tom";
let age = 3;
var msg = `你好，${name} + ${age}`;
console.log(msg);

函数调用

1
2
3
4
5
6
7
let str = `123`;
// str.函数名

// 例如
console.log(str.length); //字符串长度 3
console.log(str.indexOf(2)); //2的下标 1
console.log(str[1]); // 2

字符串的可变性

  • 同 Java 的 String 对象,其本身不可变
1
str[1] = 0; // 这样会报错,因为字符串是read-only的.

大小写转换

  • 跟 Java 一样
1
2
str.toUpperCase();
str.toLowerCase();

子串

  • [) 左闭右开区间
1
2
student.substring(1); //从第一个字符串截取到最后一个字符串
student.substring(1, 3); //[1,3)

数组

1
var arr = [1, 2, 3, 4, 5, 6]; //通过下标取值和赋值

长度

  • 支持动态扩容,扩出来的元素位置是 undefined,如果缩小 length 的话,超出部分元素会丢失.
1
2
3
arr.length = 1;
arr.length = 2; // 扩容
arr.length = 0; // 缩小

indexOf()

  • 获取元素位置
  • 1 与 "1" 是不同元素.
1
2
arr.indexOf(1);
arr.indexOf("1");

slice()

  • 等同于 subString()
  • 截取数组并返回子数组
1
2
3
var arr = [1, 2, 3, 4, 5, 6];
arr = arr.slice(1, 5);
console.log(arr); // [ 2, 3, 4, 5 ]

push(),pop(),unshift(),shift()

  • 分别是尾部添加/删除,头部添加/删除.
1
2
3
4
5
6
7
8
9
10
11
12
13
var arr = [1, 2, 3, 4, 5, 6];

arr.push("a");
console.log(arr); // [1, 2, 3, 4, 5, 6, "a"];

arr.pop();
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

arr.unshift("b");
console.log(arr); // [ 'b', 1, 2, 3, 4, 5, 6 ]

arr.shift();
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

reverse(),sort()

1
2
3
4
5
6
7
var arr = [1, 2, 3, 4, 5, 6];

arr.reverse();
console.log(arr); // [ 6, 5, 4, 3, 2, 1 ]

arr.sort();
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

concat()

  • 数组连接
  • 并没有修改原来的数组,只是返回了一个新的数组.
1
2
3
4
var arr1 = ["a", "b", "c"],
  arr2 = [1, 2, 3];

console.log(arr1.concat(arr2)); // [ 'a', 'b', 'c', 1, 2, 3 ]

join()

  • 打印拼接数组，使用特定的字符串连接
1
2
3
var arr = ["a", "b", "c"];
arr.join("-"); // 并无效果
console.log(arr.join("-")); // a-b-c

多维数组

  • 没啥花活.
1
2
3
4
5
6
var arr = [
  ["a", "b", "c"],
  [1, 2, 3],
];

arr; // [ [ 'a', 'b', 'c' ], [ 1, 2, 3 ] ]

fill()

1
2
3
4
var arr = [];
arr.length = 10;
arr.fill(0);
arr; // [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

分割线

借物表

【狂神说 Java】JavaScript 学习笔记