Introduction

I believe many people, like me, started their journey in front-end development through short-term training programs that last for four or five months. As a result, our grasp of the fundamentals of JavaScript (JS) is quite weak. Although we managed to find jobs, we often encounter problems in our daily work that we don’t know how to solve or understand due to our shaky foundation. Therefore, I want to review and organize the basic parts of front-end JS, record them, and hopefully, this will help deepen my understanding and memory through writing. I also hope this can help those who need it.

I am organizing this while watching videos, and I will continue to improve and complete it over time. If there is anything incomplete or incorrect, please feel free to point it out for discussion. Thank you!

1. Ways to Declare Variables

A variable is a container that stores a specific value, which can change over time.

  1. var name = 'name'; - Declares a variable
  2. let name = 'name'; - Declares a variable
  3. const name = 'name'; - Declares a constant
  4. function () {}; - Declares a function
  5. import and export - Handle module imports and exports
  6. class - Declares a class
    (I don’t fully understand import for declaring variables, but it seems to introduce a name to store the information of the imported module.)

2. Data Types

Primitive Data Types:
number (number, NaN is a number type but not a number)
string
boolean
null
undefined

Reference Data Types:
Object

function

Symbol (a new primitive data type in ES6) - Unique values
(I haven’t used it much, but it’s a separate data type that provides unique values, similar to an ID.)

3. Number Types

Type Conversion

Type conversion can be done through the Number() method
Primitive type conversion

  1. Number([string) - If the string contains any non-numeric characters, the result is NaN.
  2. Number([bool]) - true becomes 1; false becomes 0.
  3. Number([null]) = 0.
  4. Number([undefined]) = NaN.

Reference type conversion
First, convert the reference type value to a string using toString(), then convert the string to a number using Number().

  1. Object.toString() => [Object, Object] => NaN
  2. Array[1, 2].toString() => '1, 2' => NaN
  3. Array[1].toString() => '1' => 1
  4. Array[].toString() => '' => 0

Parsing String Numbers

Start from the leftmost character of the string, find valid numbers, and convert them to valid numeric characters, stopping when a non-numeric character is encountered;
parseInt: Extracts the integer part of the string parseInt('1.5px') => 1
parseFloat: Extracts the decimal part of the string parseFloat('1.5px') => 1.5

Comparing NaN

NaN is not equal to anything, including itself; if (NaN == NaN) => false;

4. Boolean Type

There are only two values: true and false; true equals 1, false equals 0.
In JS, only 0, null, undefined, NaN, and empty strings are considered false; everything else is true.

5. null && undefined

null represents a null object pointer.
undefined represents something that is not defined.

6. Array Common Methods

1. push - Adds new content to the end of an array. The return value is the new length of the array.
2. pop - Removes the last item from an array. The return value is the removed item.
3. shift - Removes the first item from an array. The return value is the removed item.
4. unshift - Adds new content to the beginning of an array. The return value is the new length of the array.
5. splice

  • Delete arr.splice(n, m)
    Starting from index n, delete m items. The return value is an array of the removed items. If m is not provided, delete from n to the end of the array.
  • Add arr.splice(n, 0, m)
    Starting from index n, delete 0 items and add m items in front of index n. The return value is an empty array.
  • Modify arr.splice(n , m , x)
    Starting from index n, delete m items and insert x items in front of n. The return value is the removed array.
    6. slice
    slice(n, m) - Starts from index n and goes up to index m, excluding m. Returns a new array.
    7. concat
    Concatenates arrays, can concatenate values or arrays. The return value is a new concatenated array.
1
2
3
4
5
let arr1 = [1, 2, 3], arr2 = [11, 22, 33];
console.log(arr1.concat(arr2)) = [1, 2, 3, 11, 22, 33];
arr1.concat('hello', arr2) = [1, 2, 3, "hello", 11, 22, 33];
[].concat(arr1, arr2) = [1, 2, 3, 11, 22, 33];
Empty arrays can be placeholders, and the order of what follows can be arranged as desired.

8. toString && join

toString converts an array to a string separated by commas.
join converts an array to a string separated by a specified character. 

1
2
3
let arr = [1, 2, 3, 4];
arr.toString() = "1,2,3,4"; // Note: The original text had an error, it should not include "5,11".
arr.join('、') = "1、2、3、4";

9. reverse && sort

Sorting
reverse reverses the array, returns a new array, and the original array is changed.
sort sorts in ascending or descending order, returns a new array, and the original array is changed.

1
2
3
4
5
6
7
8
9
let arr = [1, 3, 6, 77, 11, 45, 71]; 
arr.sort(function(a, b) {return a-b}) 
console.log(arr) = [1, 3, 6, 11, 45, 71, 77];
a-b for ascending order, b-a for descending order.

arr = [22, 11, 4, 5,111, 55,68, 13];
arr.reverse()
console.log(arr) = [13, 68, 55, 111, 5, 4, 11, 22] 
Reverses the array

10. indexOf && lastIndexOf
Checks if an item is in the array, if so, returns the corresponding index, if not, returns -1;

7. String Common Methods

1. charAt && charCodeAt

charAt finds the character at a given index in a string and returns it.
charCodeAt finds the Unicode code at a given index in a character and returns it. fromCharCode() can convert Unicode codes back to their corresponding characters. Haven’t used it specifically.

1
2
3
let str = 'hello word'
str.charAt(1)
"e"

2. indexOf && lastIndexOf

Like arrays, it finds the corresponding character, returns the corresponding index if found, returns -1 if not found.

1
2
3
let str = 'hello word'
str.indexOf("d")
9

3. slice && substring && substr

str.slice(n, m) starts from index n and goes up to index m, excluding m. Returns a new string; supports negative indices.
str.substring(n, m) starts from index n and goes up to index m, excluding m. Returns a new string; does not