JavaScript学习笔记 - 语法篇 - 一句废话没有版

写在前面：

• 绝不废话！放心食用
• JavaScript语法很简单，可以直接在控制台调试理解

目录

• 1、变量和常量
• 2、数据类型
• 3、字符串
  • 3.1 模板字符串
  • 3.2 字符串的部分常用函数
• 4、数组
• 5、对象
• 6、对象数组 && JSON
• 7、if 条件 && 三目运算
  • 7.1 if 条件
  • 7.2 三目运算
• 8、switch
• 9、循环
  • 9.0 准备工作
  • 9.1 for 循环
    • 9.1.1 for
    • 9.1.2 forin 遍历对象属性
    • 9.1.3 forof 遍历数组
    • 9.1.4 foreach - 引子
  • 9.2 while 循环
  • 9.3 do-while 循环
• 10、函数
  • 10.1 函数调用
  • 10.2 参数传递
    • 10.2.1 单个参数
    • 10.2.2 多个参数
    • 10.2.3 arguments
  • 10.3 函数返回
  • 10.4 箭头函数
• 11、迭代器
  • 11.1 foreach
  • 11.2 map
  • 11.3 filter
  • 11.4 map + filter

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);