面向Pythoneer的JS教程

"Pythoneer" 是由 "Python" 和后缀 "-eer"（表示从事某种活动的人）组合而成的词，用来指代熟练掌握并从事 Python 编程的人。这个词通常用来描述对 Python 有深入了解并在其领域内有一定经验的开发者或爱好者。

条件语句

if 条件语句

if (condition) {
    statement1
    statement2
    ...
} else {
    statement1
    statement2
    ...
}

if (condition) {
    statement
    ...
} else if{
    statement
    ...
}
else if{
    statement
    ...
}
else{
		statement
    ...
}

switch…case

switch (expression) {
  case value1:
    expression
    break;
  case value2:
    expression
    break;
  default:
    expression
}

三元表达式

// Python 的三元表达式语法
x = true_value if condition else false_value
// js的三元表达式语法
x = condition ? trueValue : falseValue

循环和迭代

For循环

for (start clause; stop clause; step clause) {
    statement1
    statement2
    ...
}
// 栗子
for (let i = 0; i < 10; i++ ) {
    writeln(i);
}

//字符串String
let str="Hello";
for (let e of str){
    console.log(e)
}
// H e l l o

//数组Array
let arr=["a","b","c"];
for (let e of arr){
    console.log(e)
}
// a b c

//集合Set
let set=new Set([1,2,3,3,4]);//Set(4) {1, 2, 3, 4}
for (let e of set){
    console.log(e)
}
// 1 2 3 4

//字符串
let str="Hello"
for (let i in str){
    console.log(i)
}
// 0 1 2 3 4

//数组
let arr=["a","b","c"]
for (let i in arr){
    console.log(i)
}
// 0 1 2

//普通对象
let obj={a:1,b:2,c:3}
for (let i in obj){
    console.log(i)
}
// a b c

ArrayObject.forEach(callback(currentValue, index, arr), thisValue))

• ArrayObject：指定要调用 forEach 方法的数组对象。

• forEach：数组对象的方法，用于遍历数组中的每个元素并对其执行指定的操作。

• callback：回调函数，用于指定在数组中的每个元素上要执行的操作。回调函数可以接受三个参数：
• currentValue：当前元素的值。
• index：当前元素的索引。
• arr：数组本身。

• thisValue：可选参数，用于在执行回调函数时指定 this 的值。

// 示例1
let arr = [1, 2, 3, 4, 5];
arr.forEach(function(element) {
  consol在·e.log(element);
});

// 示例2
let obj={a:1};
let arr=[1,2,3];
arr.forEach(function(currentValue,index,arr){
    console.log(currentValue+this.a);
    console.log(index);
    console.log(arr);
},obj)
//2 0 [1,2,3]
//3 1 [1,2,3]
//4 2 [1,2,3]

While循环

while (condition) {
    statement1
    statement2
    ...
}

do {
    statement1
    statement2
    ...
} while (condition);

函数

函数基础

main();

function main() {
  alert("Hello World!");
  writeln("Hello World!");
}

var main = function () {
  alert("Hello World!");
  writeln("Hello World!");
};

main();

// Py匿名函数定义
anon = lambda a, b: a * b

// JS 匿名函数方式一
var anon = function(a, b){return a + b}
// JS 匿名函数方式二
var anon = (a, b) => a + b;

• 使用对象（推荐）：将多个值封装在一个对象中，然后从函数中返回这个对象。在接受返回值时，利用对象解构特性，可更直观地获取函数返回的多个值，使代码更加清晰易读。

function getMultipleValues() {
  return {
    value1: 'some value',
    value2: 'another value'
  };
}

const { value1, value2 } = getMultipleValues();
console.log(result.value1); // 输出 'some value'
console.log(result.value2); // 输出 'another value'

• 使用数组：将多个值存储在一个数组中，然后从函数中返回这个数组。这样可以让函数返回多个值，并且通过数组的索引来访问这些值。

function getMultipleValues() {
  return ['some value', 'another value'];
}

const [value1, value2] = getMultipleValues();
console.log(value1); // 输出 'some value'
console.log(value2); // 输出 'another value'

闭包

闭包就是延伸了作用域的函数，包括函数（姑且叫 f 吧）主体中 引用的非全局变量和局部变量。这些变量必须来自包含 f 的外部函数的 局部作用域。《流畅的Python》

def parent():
	a = 10
	def double_():
		a = a + a
		print(a)
		
	def square():
		a = a * a
		print(a)
		
	return double_, square


d, s = parent()

d()
s()
d()

function parent() {
  let a = 10;

  let double = function () {
    a = a + a;
    console.log(a);
  };

  let square = function () {
    a = a * a;
    console.log(a);
  };

  return { double, square };
}
let { double, square } = parent();
double();
square();
double();

// 输出 20 400 800

• 全局作用域；

• 函数内作用域；

• 代码块内作用域，块是通过花括号{}来定义的。

function fact(n) {
    let result = 1;
    for(let i = n; i > 0; i--) {
        let y = 'block';
        var z = 'function'
        result = result * i;
    }
    writeln(x)
    //writeln(y, i) 报错，因为此时y和i不在该作用域内
    writeln(z)
    return result;
}

var x = 'global'
writeln(fact(10))

function counter_maker() {
    let x = 0;

    let ctr = function() {
        x = x + 1;
        return x;
    }

    return ctr;
}

let counter1 = counter_maker()
writeln(counter1())
let counter2 = counter_maker()
writeln(counter2())

for(let i = 0; i < 5; i++) {
    writeln(counter1())
    writeln(counter2())
}

变量

基本变量

• number

• string

• boolean

• undefined

• null

• symbol (new)

• null：null 是一个表示“空”、“无”或“值未知”的特殊关键字。当一个变量被赋值为 null 时，它表示该变量的值为空。null 是一个原始值，而不是对象。在比较时，null 只等于它自身或者 undefined，而不等于任何其他值。

• undefined：undefined 表示一个未初始化的变量或一个缺少值的属性。当一个变量被声明但未被赋值时，它的值为 undefined。此外，在访问对象属性时，如果该属性不存在，则返回的值也是 undefined。undefined 也是一个原始值。

变量声明及定义

• var：var 是在 ES5 中引入的声明变量的关键字。它具有函数作用域，这意味着当你在函数内声明一个变量时，它只在该函数内部可见。如果在函数外部声明，它将成为全局变量。var 声明的变量可以被重复声明，而且在声明之前就可以访问到（变量提升的原因，会是 undefined）。

• let：let 是在 ES6 中引入的声明变量的关键字。它具有块级作用域，这意味着当你在一个块（如 {}）内声明一个变量时，它只在该块内部可见。let 声明的变量不可以被重复声明，而且在声明之前是不可访问的。

• const：const 也是在 ES6 中引入的声明变量的关键字。它用于声明常量，一旦被赋值就不能再被修改。const 声明的变量也具有块级作用域，且不可以被重复声明。

字符串

let mlstr = `Hello world
this is a "multi-line."
Isn't it nice.
`
alert(mlstr);

//"Hello world\nthis is a \"multi-line.\"\nIsn't it nice.\nstring.\n"

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!

容器对象

列表

1. start：表示开始修改的位置，即从哪个索引开始进行操作。

2. deleteCount：表示要删除的元素个数。

3. item1, item2, ...：表示要插入到数组的元素。

• arr.splice(2, 1) 表示从索引 2 开始删除 1 个元素，即删除了数组中的第三个元素，arr 将变成 [1, 2, 4, 5]。

• arr.splice(2, 0, 'a', 'b') 表示从索引 2 开始删除 0 个元素，并且插入 'a' 和 'b'，arr 将变成 [1, 2, 'a', 'b', 4, 5]。

• 相似之处：
1. 下标索引：Py和JS数组的索引都是从0开始的，即第一个元素的索引为 0，第二个元素的索引为 1，依此类推。
2. 访问元素：均可以通过使用方括号和索引值来访问数组中的特定元素。

• 不同之处：
1. 负数索引：在 Py中，可以使用负数索引来从数组末尾开始索引元素，例如 -1 表示倒数第一个元素。而在 JavaScript 中，负数索引并不会从末尾开始计数。
2. 范围索引：在 Py中，可以使用切片[start:end:step]来获取数组中的一个范围，例如 arr[1:3] 表示获取索引为 1 和 2 的元素。而在 JS中，没有类似的内置语法，需要使用 slice 方法来实现类似的功能。
3. 越界访问：在 JavaScript 中，如果使用超出数组范围的索引访问元素，会返回 undefined。而在 Python 中，如果使用超出列表范围的索引访问元素，会抛出 IndexError 异常。

let mylist = [1, 2, 3, "foo", "bar"];
mylist.name = "aaaaa";
if ("name" in mylist) {
  console.log("what?");
} else {
  console.log("ha?");
}

// 将会输出 what?

let a = 5;
let b = 10;
[a, b] = [b, a];
console.log(a, b); // 输出 10 5

字典 / 对象

const myDict = {foo: "bar", baz: 22, 33: 'hello'};
// 使用map来获取字典的值
const vals = Object.keys(myDict).map(key => myDict[key])

• my_dict.items()，获取所有键值对。JS没有这样的操作，因为JS没有元组这种数据类型，想要类似的功能，就只能通过for循环来变量字典键。

• my_dict.get(key,"default")，查询键为key的值，如果不存在则给定一个默认值default 。JS没有这样的操作，但是可以有替代解决方案：myDict['nobodyhome'] || 'default'。当字典myDict中没有键'nobodyhome'时，会返回undifined，此时布尔或（||）运算中的下一个值被计算，因此'default'就变成了返回值。

面向对象

class Site {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
  get_url() {
    return this.url;
  }
}

let site = new Site("Bilibili", "https://www.bilibili.com/");
console.log(site.get_url())

文档对象模型

<html>
    <body>
         <h1>Hello World</h1>
         <button>Push Me Pull You</button>
         <script>
         function foo() {
             alert("Hello World")
         }
         </script>
    </body>
</html>

DOM（Document Object Model）是一种用于处理网页内容的编程接口。它将网页文档表示为一个树状结构，其中每个元素都是一个对象，可以通过编程方式访问和操作。DOM允许开发者使用脚本语言（如JS）动态地改变文档的内容、结构和样式。通过DOM，你可以选择特定的元素、添加新的元素、移除现有的元素，以及响应用户的交互事件。

/ 通过id选择元素
let elementById = document.getElementById('myElementId');

// 通过类名选择元素
let elementsByClass = document.getElementsByClassName('myClassName');

// 通过标签名选择元素
let elementsByTag = document.getElementsByTagName('div');

// 通过CSS选择器选择元素
let elementBySelector = document.querySelector('.mySelector');

// 修改元素的文本内容
elementById.textContent = '新的文本内容';

// 修改元素的HTML内容
elementById.innerHTML = '<strong>加粗的文本</strong>';

// 修改元素的样式
elementById.style.color = 'red';

// 创建新元素
let newElement = document.createElement('p');
newElement.textContent = '新的段落';

// 将一个新的子元素添加到父元素的末尾，此处parentElement如果是documnet，那就是追加到末尾
parentElement.appendChild(newElement);

// 在指定位置之前插入新的子元素
parentElement.insertBefore(newElement, referenceElement);

// 在指定位置相对于当前元素插入新元素
element.insertAdjacentElement(position, newElement);

// 移除现有元素
let elementToRemove = document.getElementById('elementToRemove');
elementToRemove.remove();

// 从父元素中移除指定的子元素
parentElement.removeChild(childElement);

<html>
   <head>
   </head>
   <body>
      <h1>Hello World</h1>
      <button onclick="changeThisPageFunc();">我是按钮</button>
      <main>sd
         <h1>Hello Main</h2>
         <p>我是一段话。</p>
      </main>
      <script type="text/javascript">
         changeThisPageFunc = function() {
            let myMain;
            document.body.style.backgroundColor = "lightblue";
            myMain = document.querySelector('main');
            myMain.innerHTML = "<h3>我是点击按钮之后一段话<h3>";
            myMain.style.height = "50px";
            myMain.style.width = "50%";
            myMain.style.backgroundColor = "lightgreen";
         }
      </script>
   </body>
</html>

1. 将整个页面的背景颜色设置为"lightblue"。

2. 选择<main>元素，并将其内容替换为一个新的<h3>标签，显示"我是点击按钮之后一段话"。

3. 将<main>元素的高度设置为"50px"，宽度设置为"50%"，背景颜色设置为"lightgreen"。

小结

• 采用花括号{}来表示代码块，用逗号;来表示语句结束。

• 箭头函数

参考