JavaScript is a programming language that manipulates(操纵) the content of a web page.
Types
JavaScript has 5 primitive data types:
- Boolean(true, false)
- Number(12, 1.618, -46.7, etc.)
- String(“hello”, “12”, etc.)
- Null
- Undenfined
Operators
+
,-
,*
,/
…===
: triple equals sign!==
: not equals sign
Syntax
1 | const greatestCommonDivisor = (a,b) =>{ |
Defining variables
JavaScript convention is to name variables using camelCase.
1 | let myBoolean = true; |
null
v.s. undefined
: undefined means “declared but not yet assigned a value”, while null means “no value”.
1 | let firstName; // currently, firstName is undefined. |
Output
console.log()
writes to the JavaScript console.
alert()
generates a pop-up notification with the given content.
Arrays
For when you want to store a sequence of(ideally similar) items:
1 | let pets = ["cat", "dog", "guinea pig", "bird"]; // initialize |
Conditionals
We often want to perform different actions in response to different conditions. For whis, we use the conditional operators if
, else
and else if
.
1 | if (hour < 12) { |
While Loops
What if we want to repeat an action as long as some condition is satisfied?
1 | let z = 1; |
For…of…
1 | const pets = ["cat", "dog", "guinea pig", "bird"]; |
Functions
A function is a compartmentalized block of code which can be given input and asked to perform a set of instructions on that input.
1 | const celsiusToFaherheit = tempC =>{ |
Callback Function
In JavaScript, functions can be passed around like any other variable. This means we can give a “callback” function as an argument to another function!
1 | const addTwo = x => { |
Anonymous functions
If your function is simple enough, you can use the following shorthand.
1 | const modifyArray = (array, callback) => { |
Other built-in array functions
If it seems common enough, there’s probably a built-in function for it. For arrays, we’ve seen push
and pop
, which mutate the target array in-place. We also have map
and filter
, which produce a new array based on some instructions(which is going to be a callback function).
map(...)
Creates a new array by applying the callback function to every element of the starting array.
1 | let myArray = [1, 2, 3, 4, 5]; |
filter(...)
Creates a new array by selecting the elements in the starting array which pass the given “test” (i.e. filtering out the ‘bad’ elements and keeping the ‘good’ ones).
1 | let values = [3, -6, 2, 0, -9, 4]; |
Objects
A JavaScript object is a collection of name:value
pairs. We can just treat objects like any other variable, such as map and filiter. But for equality, it doesn’t.
1 | const myCar = { |
There are two ways to access object properties. If you know the property name, then you can call myCar.model
or myCar["color"]
to access it.
Object destructuring(解构) is a shorthand to obtain multiple properties at once.
1 | const { make, model } = myCar; |
Object variables are references, they point to where the data is actually stored. So, ===
checks if the references are equal. Two objects created separately are stored separately, so their references are different! Same goes to arrays, two arrays created sepatately have different references.
One way to copy arrays and objects is to use the spread operator(…) like so:
1 | let arr = [1, 2, 3]; |
Classes
If you want to multiple entities that are guaranteeed to have shared behavior, use classes! Every class has a constructor which tells it how to create a specific instance of that entity.
Classes may also contain methods(functions) which can access and manipulate instance properties. The same methods exist in every instance of the class.
1 | class Rectangle { |
- 本文作者: 夏花
- 本文链接: http://xiahua19.github.io/2022/08/11/weblab-2-JavaScript/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!