JavaScript 快速入门

JavaScript是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。

var & let & const#

  • var 是修饰全局变量
  • let 是修饰局部变量
  • const 是修饰不可更改的常量
1
2
3
var a = 10;
let b = 20;
const c = 30;

let表示声明变量,而const表示声明常量,两者都为块级作用域;const 声明的变量都会被认为是常量,意思就是它的值被设置完成后就不能再修改了;但是如果const的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址没有变就行.

从安全性讲,在开发中使用: const > let > var 。

String & Number & Boolean & null & undefinde#

1
2
3
4
5
6
7
8
9
10
11
12
const str = "test";
const num = 10;
const floatNum = 20.5;

let nullobj = null;
let testObj;

console.log(typeof str); // string
console.log(typeof num); // number
console.log(typeof floatNum); // number
console.log(typeof nullobj); // object
console.log(typeof testObj); // undefined
  1. 在JS中是没有浮点之类的类型的,数值相关统一只有number。
  2. 在JS中null是对象,所以 console.log(typeof nullobj) 会输出 object。
  3. 没有赋值的变量,会自动识别为 undefined。

String#

字符串拼接#

  • 常见用法:
1
2
let content = 100;
let str = "前缀" + content + "后缀"; // "前缀10后缀"
  • Template String:
1
2
let content = 100;
let str = "前缀${content}后缀"; // "前缀10后缀"

String 的长度#

1
2
let str = "前缀后缀";
let lenght = str.length;

数组#

在JS中,数组也是对象,并且数组可以在一个数组中加入不同类型的元素。

1
2
3
4
5
6
7
8
9
10
11
12
let list = [1, "2", 3, true];
list[0] // 1

list.push(4) // [1, "2", 3, true, 4] ,在末尾添加元素
list.unshift(0) // [0, 1, "2", 3, true, 4], 在头部添加元素

list.pop() // 删除末尾的元素
list.shift() // 删除头部的元素

Array.isArray(list) // 判断是否为数组

list.indexOf("2") // 1

JS中的对象#

和静态语言不一样的是,JS中的对象是以 键值对 的形式表现的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//创建对象 iphone
const iphone = {
name: "iphone X",
system: "iOS 13",
gb: 128,
type: [64, 128, 256],
test: {
name: "test",
year: 2019,
price: 6000
}
}

// 取多个值.
// 例子的意思:
// 在对象iphone中,取出 system 和 name 的值。
const {system, name} = iphone;
console.log(name, system);

// iphone对象中添加新的键值对
iphone.newPrice = 5000;

对象中的键值对使用 “:” 而不是 “=”.

通过这种对象语法,可以很直观的书写很多对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const json = [
{
name: "qsh",
age: 10
},
{
name: "xed",
age: 20
},
{
name: "zsd",
age: 30
}
];

// 将对象转换成JSON字符串
let jsonCode = JSON.stringify(json);
console.log(jsonCode);

JSON 也是使用了类似的对象语法,所以你会发现JSON的写法和对象语法非常的相似。

for & while#

  • for循环
1
2
3
for (let index = 0; index < 10; index++) {
console.log(index);
}
  • while循环
1
2
3
4
5
let index = 10;
while (index > 0) {
console.log(index);
index --;
}
  • for of 循环

类似Swift 中的 for in ,获取数组中的每个元素.

1
2
3
for (const item of list) {
console.log("for of: " + item);
}

forEach & map & filter#

这些便是JS中常见的高阶函数。

  • forEach
1
2
3
4
list.forEach((item)=>{
console.log(item);
});
// forEach中传入一个函数,函数提供数组的每个元素
  • map
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const json = [
{
name: "qsh",
age: 10
},
{
name: "xed",
age: 20
},
{
name: "zsd",
age: 30
}
];

// map会根据函数遍历返回的值来组成一个数组并返回。
const nameList = json.map((item)=>{
return item.name;
});

console.log(nameList); // ["qsh","xed","zsd"]
  • filter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const json = [
{
name: "qsh",
age: 10,
stat: true
},
{
name: "xed",
age: 20,
stat: false
},
{
name: "zsd",
age: 30,
stat: true
}
];

// 根据条件返回对应的数组
const newList = json.filter((item)=>{
return item.stat === true;
});

console.log(newList);
// [ {name: "qsh", age: 10, stat: true}, {name: "zsd", age: 30, stat: true} ]

高阶函数的操作相当的灵活,比如:

1
2
3
4
5
6
7
8
9
> const newList = json.filter((item)=>{
> return item.stat === true;
>}).map((item)=>{
> return item.age;
>});
>
>console.log(newList);
>// [10, 30]
>

if#

条件语句的使用和其他语言类似,但是值得注意的是 ===== 在JS中不同的。

== 虽然也是等于比较,但是这种比较是不考虑类型的,而 === 则会考虑类型.

1
2
3
4
5
let a = 10;
let b = "10";

console.log("a==b: " + (a == b)); // true
console.log("a===b : " + (a === b)); // false

function#

在 JS 中函数同样也是对象。

1
2
3
4
5
6
7
8
9
10
function addNum(num1, num2) {
return num1 + num2;
}

addNum(5,9) // 14

// 同样可以写出匿名函数
const addNum = (num1, num2) => {
return num1 + num2;
}

参考#

JavaScript速成课

如何从 Swift 过度到 TypeScript CocosCreator 编辑器入门

Comentarios

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×