全栈开发从入门到放弃:1.b-JavaScript基础

本系列介绍:《全栈开发从入门到放弃》是本人学习如何使用JavaScript开发现代Web应用程序的过程记录。课程的重点是使用ReactJS构建单页面应用程序(SPA)。

本系列记录了本人学习过程中的要点,不成体系。如果你想深入学习,建议寻找官方教程 😃


JavaScript标准的正式名称是ECMAScript。由于浏览器不能支持所有JavaScript的最新特性,所以我们需要转译到一个更旧更兼容的版本。使用create-react-app创建的应用已配置为使用Babel自动转译。

Node.js是基于谷歌的 chrome V8 引擎的JavaScript运行时环境。代码文件以 .js结尾,通过 node filename.js 命令运行文件。

变量(Variables)

在JavaScript中有以下几种定义变量的方法:

const x = 1
let y = 5

console.log(x, y)
y += 10
console.log(x, y)
y = 'sometext'
console.log(x, y)
x = 4  // cause an error

const 实际是定义了一个常量, let定义了一个普通变量。推荐使用let而不是var

数组(Arrays)

使用数组的示例如下:

const t = [1, -1, 3]
t.push(5)
console.log(t.length)
console.log(t[1])
t.forEach(value => {
  console.log(value)
})

即使使用const定义,也可以修改数组中的内容。因为数组是一个对象,数组变量指向这同一个对象。

遍历元素的一种方法是使用 forEach ,如示例所示, forEach 接收一个函数作为入参。forEach 为数组中的每个元素调用这个函数,并将单个项作为参数传递。

使用push方法可以添加元素。但推荐使用函数式编程的技巧。函数编程范型的一个特点就是使用不可变的数据结构。在React代码中,最好使用 concat 方法。它不向数组中添加元素,而是创建一个新数组,新数组中包含旧数组和新元素。

const t = [1, -1, 3]
const t2 = t.concat(5)
console.log(t2)

map方法可创建新数组。

const t = [1, 2, 3]
const m1 = t.map(value => value *2)
console.log(m1)

此外,还可转换为不同的内容。

const m2 = t.map(value => '<li>' + value + '</li>')
console.log(m2)

还可使用解构赋值方式将数组中的单个元素赋值给变量。

const t = [1, 2, 3, 4, 5]
const [first, second, ...rest] = 5
console.log(first, second)
console.log(rest)

例子中剩余的整数被“收集”到另一个数组中,分配给rest。

对象(Objects)

一个使用对象的例子:

const object1 = {
  name: 'Arto Hellas',
  age: 35,
  education: 'PhD',
}

const object2 = {
  name: 'Full Stack web application development',
  level: 'intermediate studies',
  size: 5,
}

const object3 = {
  name: {
    first: 'Dan',
    last: 'Abramov',
  },
  grades: [2, 3, 5, 3],
  department: 'Stanford University',
}

// 对象元素的访问可通过.或[]进行
console.log(object1.name)         // Arto Hellas is printed
const fieldName = 'age' 
console.log(object1[fieldName])    // 35 is printed

// 可以动态添加对象属性
object1.address = 'Helsinki'
object1['secret number'] = 12341

函数(Functions)

函数定义的几种方式:

const sum = (p1, p2) => {
  console.log(p1)
  console.log(p2)
  return p1 + p2
}
const result = sum(1, 5)
console.log(result)

// 只有一个参数时可省略括号
const square = p => {
  console.log(p)
  return p * p
}

// 只有一个表达式时可省略大括号
const square = p => p * p
// 该方法适合操作数组
const t = [1, 2, 3]
const tSquared = t.map(p => p * p)

// 或可使用function关键字定义
function product(a, b) {
  return a * b
}

const result = product(2, 6)

// 或使用函数表达式
const average = function(a, b) {
  return (a + b) / 2
}

const result = average(2, 5)

本课程推荐使用箭头语法。

对象方法和”this”关键字

尽量避免使用this关键字以防止问题。 使用 setTimeOut方法,避免问题的方法:

const arto = {
  name: 'Arto Hellas',
  greet: function() {
    console.log('hello, my name is ' + this.name)
  },
}

setTimeout(arto.greet, 1000)
// 使用bind来保留原始的this
setTimeout(arto.greet.bind(arto), 1000)

类(Classes)

Javascript中的类非常像Java中的类,但其实质上仍然是Object。课程建议使用hooks特性,所以不具体使用类语法。

Robin King

Robin King
在电气学院学习光学的精密机械专业的毕业生是一名软件爱好者,现在在从事电路设计工作

全栈开发从入门到放弃:1.a-React基础

本系列介绍:《全栈开发从入门到放弃》是本人学习如何使用JavaScript开发现代Web应用程序的过程记录。课程的重点是使用ReactJS构建单页面应用程序(SPA)。 本系列记录了本人学习过程中的要点,不成体系。如果你想深入学习,建议寻找官方教程 😃新建React应...… Continue reading