JavaScript学习笔记 - 语法篇 - 一句废话没有版
写在前面：
- 绝不废话！放心食用
- JavaScript语法很简单，可以直接在控制台调试理解
1、变量和常量
/**
* var : 全局作用域，生命周期问题，容易冲突
* let ：值可以被修改
* const ：不可被修改
*/
let age = 30;
console.log(age);
age = 31;
console.log(age);
const agge = 12;
console.log(agge);
// Error：const不能被修改
// agge = 15;
// Error：必须初始化
// const agggge;
2、数据类型
/**
* Stirng
* Number
* Boolean
* null
* undefined
*/
// String
const username = "Dandelion";
const oldname = 'Dandelion_000';
// Number
const age = 30;
const score = 4.4;
// Boolean
const flag = true;
// null（非undefined，被定义为null）
const my_null = null;
// undefined
let my_undefined;
const my_undefined_1 = undefined;
console.log(typeof score);
console.log(typeof my_null); // null 输出 object
console.log(typeof my_undefined);
3、字符串
3.1 模板字符串
const username = "Dandelion";
const age = 20;
// 连接
console.log("My name is " + username + " and I am " + age);
// 模板字符串
console.log(`My name is ${username} and I am ${age}`);
3.2 字符串的部分常用函数
const s = "Hello World!";
// length属性
console.log(s.length);
// 全大写
console.log(s.toUpperCase());
// 全小写
console.log(s.toLowerCase());
// 获取子串，参数为起始和终止index，从0开始，左闭右开区间
console.log(s.substring(0, 4));
// 字符串分割，分割为字符数组，参数为字符串时以参数进行分割，为空串时，按字符分割
console.log(s.split(""));
console.log(s.split("r"));
console.log(s.split("Wo"));
4、数组
数组属于对象
const narr = new Array(1, 2, 3, 4, 5);
console.log(narr);
const sarr = new Array("A", "b", "3", "DD", "E");
console.log(sarr);
// 也可以使用这种方式定义，与构造函数相同
const barr = [true, false, false, true. null];
console.log(barr);
// 数组各个元素元素类型可不相同
const arr = new Array(1, 2.2, "CC", false, null, undefined);
console.log(arr);
console.log(arr[1]); // 可以使用索引访问元素
arr[2] = "CCC"; // 修改元素
// arr = []; // Error，数组对象本身为const，不能修改数组本身，只能修改元素
arr.push("push_back"); // 尾部追加
arr.unshift("un_shift"); // 头部插入
console.log(arr);
arr.pop(); // 尾部删除
console.log(arr);
console.log(Array.isArray(arr)); // Array静态方法，判断是否是数组
// 获得元素索引，没有该元素时返回 -1
console.log(arr.indexOf("CCC"));
console.log(arr.indexOf("CC"));
// 数组扩容
let bigArr = [1, 2, 3, 4];
console.log(bigArr);
bigArr[10] = 11; // 增加大小并赋值
console.log(bigArr);
// 排序
let sortArr = [5, 2, 1, 6, 8];
sortArr.sort();
console.log(sortArr);
5、对象
const person = {
name: "Dandelion",
age: 20,
hobbies: ["music", "movies", "sports"],
address: {
street: "50 main st",
city:"Boston",
state:"MA",
},
};
console.log(person);
console.log(person.name);
console.log(person.hobbies[1]);
console.log(person.address.city);
person.street = "52 main st" // 修改属性
person.email = "e.dandelion@xx.com" // 添加新的属性
console.log(person);
// 抽取，将多个内容从对象中拷贝出来
const { name, age, address: { city } } = person;
console.log(name);
console.log(age);
// Error ： 本质上抽取的是 city，只是对应关系是再person.address.city
// console.log(address); // Error
// console.log(address.city); // Error
console.log(city);
6、对象数组 && JSON
const todos = [
{
id: 1,
text: "Take out trash",
isCompleted: true,
},
{
id: 2,
text: "Meeting with boss",
isCompleted: true,
},
{
id: 1,
text: "Dentist appt",
isCompleted: false,
},
];
console.log(todos[1].text); // index取值
// 增删改查细节不表，本质都是数组
const todoJSON = JSON.stringify(todos); // 转为JSON
console.log(todoJSON);
7、if 条件 && 三目运算
7.1 if 条件
if-else嵌套之类的和C、Java都没有区别，细节不表
const x = "10";
const y = 11;
const z = 5;
// === 比较值和类型， == 和 > 、 < 仅比较值
if (x === 10) {
console.log("x === 10");
}
if (x !== 10) {
console.log("x !== 10");
}
if (x == 10) {
console.log("x == 10");
}
if (x != 10) {
console.log("x != 10");
}
if (x > 5) {
console.log("x >= 5");
}
// 逻辑或和逻辑与
if (y > 10 || z > 10) {
console.log("y > 10 || z > 10");
}
if (y > 10 && z > 10) {
console.log("y > 10 && z > 10");
}
7.2 三目运算
const flagA = true;
const flagB = false;
const flagC = true;
const flagD = false;
console.log( flagB ? "BBB" : (flagD ? "DDD" : (flagC ? "CCC" : flagA)));
8、switch
JS 中 ，switch参数可以是字符串，字符串也是基础数据类型
const color = "blue";
switch (color) {
case "red":
console.log("red");
break;
case "blue":
case "black":
console.log("blue or black");
break;
case "yellow":
console.log("yellow");
break;
default:
console.log("other");
break;
}
9、循环
9.0 准备工作
const person = {
name: "Dandelion",
age: 20,
hobbies: ["music", "movies", "sports"],
address: {
street: "50 main st",
city:"Boston",
state:"MA",
},
};
const todos = [
{
id: 1,
text: "Take out trash",
isCompleted: true,
},
{
id: 2,
text: "Meeting with boss",
isCompleted: true,
},
{
id: 1,
text: "Dentist appt",
isCompleted: false,
},
];
9.1 for 循环
9.1.1 for
for (let index = 0; index < 10; ++index) {
console.log(`for loop number: ${index}`);
}
9.1.2 forin 遍历对象属性
for (const key in person) {
console.log(`${key}: ${person[key]}`);
}
9.1.3 forof 遍历数组
for (const todo of todos) {
console.log(todo);
}
9.1.4 foreach - 引子
严格来说 foreach 属于迭代器，将在 第11节迭代器 中详细说明
9.2 while 循环
let i = 0;
while (i < 10) {
console.log(`for loop number: ${i++}`);
}
9.3 do-while 循环
let j = 0;
do {
console.log(`for loop number: ${j}`);
} while (j++ < 10);
10、函数
10.1 函数调用
function f() {
console.log('test func');
}
f(); //调用函数
10.2 参数传递
10.2.1 单个参数
function f1(element) { // 形参
console.log(element);
}
f1('test element'); // 实参
10.2.2 多个参数
function f2(a, b, c) {
console.log(a + b);
}
f2(1, 2, 3, 4); // 正常 3 实参 > 形参
f2(1, 2, 3); // 正常 3 实参 === 形参
f2(1, 2); // 正常 3 实参 < 形参，但 c 在函数中未使用
// f2(1); // Error 实参 < 形参，被使用到的形参传递不全
10.2.3 arguments
- arguments 相当于一个数组，里面存储了函数的实参，当出现实参和形参数量不相同，就可以用arguments来获取。
- arguments 这个"数组"的功能并不全，比如没有push，pop等操作，只是单纯的存储工具，但有length的操作。
- 这里的
f3有没有形参都不影响
function f3() {
console.log(arguments);
console.log(arguments[1]);
console.log(arguments.length);
}
f3(1, 2, 3);
10.3 函数返回
可以直接使用return返回内容
function f4(a, b) {
return a + b;
}
console.log(f4(3, 2));
10.4 箭头函数
省去function，采用let var const的定义方式定义函数
let f5 = (a, b, c) => {
return a + b + c;
}
console.log(f5(1, 2, 3));
// 单个参数的箭头函数可以省略括号
let f6 = a => {
return a + 10;
}
console.log(f6(1));
11、迭代器
这里需要进行一些准备工作，详见 9.0准备工作
11.1 foreach
foreach 可以按顺序访问数组中的每一个元素，一般用于遍历
// foreach 迭代器函数形式
todos.forEach(function(todo) {
console.log(todo);
});
console.log("---------------------------------------------------");
// foreach 迭代器箭头形式
todos.forEach(todo => {
console.log(todo);
});
11.2 map
- map 可以获取对象数组中各个的某一种属性，最后使用数组将所有属性以数组的形式进行返回
- map 也可以使用箭头形式，详见 11.4 map + filter
// map迭代器
let taskText = todos.map(function(todo) {
return todo.text;
}); //定义数组taskText来接收map的返回值
console.log(taskText);
console.log("---------------------------------------------------");
// map迭代器的结果可以直接使用index，以获取其中某个个对象的某个属性值
let taskTextByIndex = todos.map(function(todo) {
return todo.text;
}); //定义数组taskTextByIndex来接收map的返回值
console.log(taskTextByIndex[1]);
11.3 filter
- filter 是唯一有筛选效果的迭代器，一般用于获取满足筛选结果的对象的数组
- filter 也可以使用箭头形式，详见 11.4 map + filter
let object = todos.filter(function(todo) {
return todo.isCompleted === true; // 按照筛选条件返回
});
console.log(object);
11.4 map + filter
- filter 和 map 迭代器组合使用，仅取筛选后对象数组的某一个属性，仍得到属性值的数组
- 这里均采用箭头形式
- 本质上是进行了两次迭代，filter 负责筛选出满足条件的对象，map 负责取出所需的属性值，最后返回所需的属性值的数组
let taskTextByFilterAndMapArr = todos.filter(todo => {
return todo.isCompleted === true;
}).map(todo => {
return todo.text;
});
console.log(taskTextByFilterAndMapArr);
