运行 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"

常用函数

文档

  • 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(){
},

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

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(); // 即可调用

关于 importexport 更多的方法还可参考文章

异步

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

阅读过的链接: