运行 JavaScript

在 Chrome 按 F12 打开“开发者模式”，即可在 Console 中输入 js 代码并运行。

运行 js 代码
运行 js 代码

JavaScript 语法基础

  • 行尾需要 ;
  • 注释为 //
  • 字符串和 Python 相同，可用单/双引号，可使用 \n \\ 等扩展
  • 函数名推荐使用驼峰法来命名 camelCase

打印输出

使用 console.log()。注意，在命令行执行的命令会被自动套上 console.log()，因此才会有输出。

1
2
console.log("童鞋，欢迎开始JavaScript的学习~\nJavaScript是一门非常流行的编程语言，只要是有浏览器的地方就少不了JavaScript；\n网页、小程序、甚至App、桌面应用等都少不了JavaScript；\nJavaScript玩得溜的人我们可以称其为前端开发工程师；\n前端开发工程师是需求量极大的岗位\n");
console.log('123%c456%c789', 'color: red', 'color: blue');

注意，%c 配合后面的参数可以用于修改颜色。

修改输出颜色
修改输出颜色

数据

数学运算

1
2
3
136+384; //加法
(110/0.5+537-100)*2; //加减乘除
2**5; //指数运算符

声明 let

let 用于声明变量。在脚本中，变量不能被声明第二次（调试窗口是可以的）。

1
2
3
4
5
let a;     // 声明
a = 1;     // 赋值
let b = 2; // 声明并赋值
let a;     // 重复声明，报错
b = "123"; // 重新赋值为新的类型，允许

常量 const

和 C/C++ 相同。只是少了变量类型。

1
2
const window_weight = 3840;
const window_height = 2160;

字符串

字符串的函数真是太多啦！我们字符串真是太好啦！

字符串文档

数组

和 Python 类似，形式如同 [1, 2]，下标从 1 开始，并且不要求数组内元素同类型：

1
2
movielist=["肖申克的救赎","霸王别姬","这个杀手不太冷","阿甘正传","美丽人生"];
Console.log(movielist[2]); // "这个杀手不太冷"

流程控制

for

有和 C++ 类似的 for，以及遍历数组的 forEach 成员函数。

1
2
3
4
5
6
7
8
let str = '';

for (let i = 0; i < 9; i++) {
  str = str + i;
}

console.log(str);
// expected output: "012345678"
1
2
3
4
5
6
7
const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

还有 for-of 和 for-in。for-of 和 forEach 都是遍历元素（for-of 好像完爆 forEach？），而 for-in 是遍历下标。对于 Object，for-in 还能遍历 key。

1
2
3
4
5
6
7
8
9
10
11
12
13
a = [9,8,7];

for (let i of a)
  console.log(i)
// 9
// 8
// 7

for (let i in a)
  console.log(i)
// 0
// 1
// 2
1
2
3
4
5
6
7
8
9
10
b = {c:1, d:2};

for (let i of b)
  console.log(i)
// Uncaught TypeError: b is not iterable

for (let i in b)
  console.log(i)
// c
// d

常用函数

文档

  • join() 将数组按指定分隔符拼接为字符串；
  • push() 在数组末尾追加元素（返回值为新数组的长度）；
  • pop() 返回并移除最后一个元素；

除此之外还有：

  • concat() 返回由当前数组和其他数组/元素组合而成的新数组；
  • reverse()
  • shift() 返回并移除第一个元素；
  • slice() 抽取当前数组中的一段元素组合成一个新数组，即 Python 的切片；
  • sort() 原地排序数组；
  • splice()
  • unshift() 在数组开头追加元素（返回值为新数组长）；

用时再查阅文档。

对象

对象赋值：

1
2
3
4
5
movie={
    name: "霸王别姬",
    img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",
    desc: "风华绝代。"
}

读取对象：

1
2
3
//两种方法都行
console.log(move.name);
console.log(movie["name"]);

修改对象：

1
2
3
movie.englishname = "Farewell My Concubine"; // 添加属性
delete movie.img;                            // 删除属性
movie.desc = "人生如戏。";                    // 修改属性

函数与调用函数

函数定义有非常多的形式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function square(number) {
  return number * number;
};
square(5);

// 匿名函数
let square = function(number) {
  return number * number
};
square(5)

// 箭头函数（Arrow Function）
const multiply = (x, y) => {
  return x * y;
}
const sum= (x, y) => x + y;// 连{}和return语句都可以省掉
console.log(multiply(20, 4));
console.log(sum(20, 4));

// JavaScript 函数
scrollToPosition() {
},
yellowTap:function(){
},

需要注意的是，箭头函数中的 this 是 Window 而不会再是这个类。如果需要使用类，最好还是写匿名函数：

1
2
3
4
5
6
7
8
9
10
11
// 匿名函数（定义在 Vue 中的 methods）
// 输出 Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
add: function () {
    console.warn(this)
}

// 箭头函数（定义在 Vue 中的 methods）
// 输出 Window {window: Window, self: Window, document: document, name: "", location: Location, …}
add: () => {
    console.warn(this)
}

调用其他文件的函数

如需要调用 /utils/date.js 中的 getDate() 函数。

在 date.js 中这样写道：

1
2
3
4
// date.js
export function getDate() {
  // function body
}

在需要调用的地方写：

1
2
3
import {getDate} from '/utils/date.js';

getDate(); // 即可调用

此外，如果在 date.js 中只有一个 export 函数，还可以默认引用：

1
2
3
4
// date.js
export default function () {
  // function body
}

在需要调用的地方写：

1
2
3
import getDate23333 from '/utils/date.js'; // 可自定义函数名

getDate23333(); // 即可调用

关于 import 和 export 更多的方法还可参考文章。

异步

因为刚开始学习异步，再加上没有系统性的学习 Promise、await、async，仅作为开发工具，学了自己需要的部分，这里就不发表自己的拙见了。丢几个看过的文章链接：

阅读过的链接：