JavaScript variable, data type, basic instance details [variable, string, array, object, etc.]

Time:2020-11-22

This article describes the JavaScript variables, data type basis. For your reference, the details are as follows:

In this note, I record the basic knowledge of variables and data types. Because they are related, they are recorded together

How to declare variables

Variable declaration uses the VaR keyword. Here are some examples of variable declaration:


<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
</body>
{{--js--}}
<script>
  var name = "larger";
  var age = 24, desire = "become web developers";
  document.write(name + "<br />" + "age" + ":" + age + "<br />" + "desire" + ":" + desire);
</script>
</html>

2 data type

The data types in JS are as follows:

  1. Nunber: number type.
  2. String: string type.
  3. Boolean: Boolean type.
  4. Array: array.
  5. Object: object.
  6. Null: null value.
  7. Undefined: no value defined.

Let’s declare these types of variables one by one.

2.1 number type

2.1.1 declaration method

<script>
  var number1 = 5;
  var number2 = (5 - 9) * 3;
  var numberSum = number1 + number2;
  document.write(number1 + "<br />" + number2 + "<br />" + numberSum + "<br />");
</script>
<script>
  var Num = 3.88;
  document.write(Num);
</script>
<script>
  Var num = new number (3000); // if declared in this way, it will be an object
  document.write(typeof(num));  // Object
</script>

2.1.2 common methods

Nan is a non numeric type. IsNaN is used to determine whether it is a non numeric type


<script>
  var num1 = new Number(3000);
  var num2 = 123;
  var noNum = NaN;
  document.write(isNaN(num1) + "<br />" + isNaN(num2) + "<br />" + isNaN(noNum))
</script>

When the length of a number reaches the boundary, it becomes a special type: Infinity / negative infinity:

<script>
  var num1 = 2/0;
  if (num1 == Infinity){
    document.write ("number overflowed" + num1);
  }
</script>

Use the toString method to convert to string type:

<script>
  var num1 = 122;
  Var STR1 = num1. Tostring(); // no parameter is passed. The default is decimal.
  Var STR2 = num1. ToString (8); // base 8
  document.write(num1 + "<br />" + str1 + "<br />" + str2 + "<br />" + typeof(str1));
</script>

2.2 string type

2.2.1 declaration method

<script>
  Var STR1 = "something"; // use double quotation marks
  Var STR2 ='something '; // use single quotation marks
  Var str3 = "my name is' k '"; // single quotation marks are displayed in double quotation marks
  Var str4 ='My name is "K"; // double quotation marks are displayed in single quotation marks
  Var str5 ='My name is \'k \ "; // escape single quotation marks in single quotation marks
</script>

2.2.2 common methods

Get characters by index:

<script>
  Var STR1 = "something"; // use double quotation marks
  Var char = STR1 [11]; // char is also a string type. If it is out of bounds, the type of char is undefined
  document.write(char);
</script>

Get the string length through the length method:

<script>
  Var STR = "something"; // use double quotation marks
  var strlen =  str.length ; // the strlen returned is a numeric type.
  document.write(strlen);
</script>

Find the string by indexof:

<script>
  Var STR = "something"; // use double quotation marks
  var index1 =  str.indexOf ("thing"); // returns 4, calculated from zero
  var index2 =  str.indexOf ("same"); // return - 1 to indicate not found
  var str2 = "my name is k my age is 24";
  Var index3 = STR2. Indexof ("is"); // returns 8
  Var index4 = STR2. LastIndexOf ('Is'); // lastIndexOf starts from the back, so it returns 20
</script>

Match the string through Mach:

<script>
  Var STR = "something"; // use double quotation marks
  var substr =  str.match ("Sa"); // if the string to be searched can be found, if not, null will be returned
  document.write(substr);
</script>

Replace a string:

<script>
  var str = "this is laravel";
  str =  str.replace ("laravel", "JavaScript"); // if the replacement is not successful, the original string is returned.
  document.write(str);
</script>

Case conversion:

<script>
  var str = "this is laravel";
  str =  str.toLocaleUpperCase (); // to uppercase.
  str =  str.toLocaleLowerCase (); // converted to lowercase.
</script>

Convert to array:

<script>
  var str = "this is laravel";
  var array =  str.split ("); // separated by spaces.
</script>

2.3 array

2.3.1 declaration method


<script>
  var array1 = new Array();
  array1[0] = "string type";
  array1[1] = 55;
  array1[2] = true;
  var array2 = new Array("alex", "k", 24);
  var array3 = ["alex", "K", 24];
</script>

2.3.2 accessing elements in an array

<script>
  var array3 = ["alex", "K", 24];
  //It can be obtained by index
  for (i = 0; i < array3.length; i++){
    document.write(array3[i] + "<br />");
  }
  //You can also modify the value through the index
  for (i = 0; i < array3.length; i++){
    array3[i] = "value" + i;
  }
  document.write(array3);
</script>

2.4 objects

Objects can contain attributes and methods. In fact, everything in JS is an object, including numbers, strings and arrays.

2.4.1 creation method


<script>
  var object1 = new Object();
  object1.name = "alex";
  object1.skinColor = "white";
  object1.sayHello = function() {
    return "yo bro what's up";
  };
  document.write(object1.name + "<br >" + object1.skinColor + "<br >");
  document.write(object1.sayHello());
</script>

This is the first declaration method in which we use objectName.valueName Access the elements in the object, and objectName.methodName The method in the object was accessed.


<script>
  var object1 = {
    name : "alex",
    skinColor : "white",
    sayHello : function() {
      return "yo bro what's up";
    }
  };
  document.write(object1.name + "<br >" + object1.skinColor + "<br >");
  document.write(object1.sayHello());
</script>

This is the second way to write, more commonly used than the first method is simpler.

<script>
  //Object constructor
  function Person(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.changeName = changeName;
    function changeName(name){
      this.firstName = name;
    }
    this.fullName = fullName;
    function fullName(){
      return this.firstName + this.lastName;
    }
  }
  //Creating an object using an object constructor
  var myWife = new Person("*","haoyan",18);
  myWife.changeName("Yang");
  document.write(myWife.fullName());
</script>

This is the third way to write, the object constructor.

2.4.2 traversing objects

Use for in to traverse the object:

<script>
  //Object constructor
  function Person(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.changeName = changeName;
    function changeName(name){
      this.firstName = name;
    }
    this.fullName = fullName;
    function fullName(){
      return this.firstName + this.lastName;
    }
  }
  //Creating an object using an object constructor
  var myWife = new Person("*","haoyan",18);
  for(variable in myWife){
    document.write(variable + "<br />");
  }
</script>

Interested friends can useOnline HTML / CSS / JavaScript code running tool: http://tools.jb51.net/code/HtmlJsRun Test the above code running effect.

More interested readers about JavaScript related content can view the special topic of this website: summary of JavaScript operation DOM skills, summary of JavaScript page element operation skills, complete collection of JavaScript event related operations and skills, summary of JavaScript search algorithm skills, summary of JavaScript data structure and algorithm skills, and summary of JavaScript traversal algorithms and skills Summary of JavaScript errors and debugging skills

I hope this article will help you with JavaScript programming.