当前位置：网站首页>Use of common built-in classes of JS

First of all, let's think about a question , The basic data type is saved in Stack Medium , What is saved is a value , But why , But you can call methods

    const name = "Hello World"
    const height = 1.8888888
    console.log(name.length)
    console.log(name.split(" "))
    console.log(height.toFixed(2))

JavaScript The original type of Not an object type , So in theory , They are There is no way to get properties or call methods

reason : because JavaScript So that it can get properties and call methods , The corresponding packaging type is encapsulated

By default , When we call a property or method of an original type , Will do the following :

According to the original value , Create a wrapper type object corresponding to the original type
Call the corresponding property or method , Returns a new value
The created wrapper class object is destroyed

Usually JavaScript The engine will be optimized a lot , It can skip the process of creating a wrapper class and directly complete the acquisition of attributes or method calls internally

//  chestnuts 
let name = 'coder'
console.log(name.length)


//  evolution 🧬！！！
let name = 'coder'

// 1.  Change to packaging type , Turn into String object 
name = new String(name)
// 2.  So you can call methods 
console.log(name.length)
// 3.  Once called , When properties or methods are no longer manipulated , The object will be destroyed , Become a basic type again 
name = 'coder'

tip ： null、undefined There's no way , There is no corresponding “ Object wrapper class ”

Two 、Number class Number - JavaScript | MDN

1. Static attribute

01 - Number.MAX_VALUE

//  It means that  JavaScript  The maximum value that can be represented in 
console.log(Number.MAX_VALUE)

02 - Number.MIN_VALUE

//  It means that  JavaScript  The smallest positive value that can be expressed in 
console.log(Number.MIN_VALUE)

03 - Number.MAX_SAFE_INTEGER

//  It means that  JavaScript  The largest safe integer in 
console.log(Number.MAX_SAFE_INTEGER)

04 - Number.MIN_SAFE_INTEGER

//  On behalf of the  JavaScript  The smallest safe  integer  digital 
console.log(Number.MIN_SAFE_INTEGER)

05 - Number.parseInt(string[, radix])

//  Convert to positive integer 
const n = '90.123';
console.log(Number.parseInt('0xF', 16));
console.log(Number.parseInt(n));

//  Because this method is also in window On ,  Is the same ,  So you can call 
parseInt(n)

06 - Number.parseFloat()

//  Convert to decimal 
const num = '123.521';
console.log(Number.parseFloat(num));

//  Because this method is also in window On ,  Is the same ,  So you can call 
parseFloat(num)

2. Object methods

01 - toString(base)

base The range can be from 2 To 36, By default 10
If you operate directly on a number , Need to use .. Operator

let num = 100
console.log(num.toString(2))    //  Binary system    
console.log(num.toString(8))    //  octal 
console.log(num.toString(10))   //  Decimal system 
console.log(num.toString(16))   //  Hexadecimal 

//  If it is digital direct operation      ..     Write two decimal points 
console.log(123..toString(8))

02 - toFixed(digits)

digits The range is 0 To 20（ contain ） Between

Be careful : It returns a string

var numObj = 12345.6789;

numObj.toFixed();         //  return  "12346"： Round it up to the nearest five , Excluding decimal part 
numObj.toFixed(1);        //  return  "12345.7"： Round it up to the nearest five 

numObj.toFixed(6);        //  return  "12345.678900"： use  0  fill

3、 ... and 、Math object Math - JavaScript | MDN

1. Math.PI

console.log(Math.PI) // 3.141592654

2. Math.floor : Rounding down

const num = 3.79

console.log(Math.floor(num)). //  Round off all after the decimal point , Only integer parts are left .  The result is 3

3. Math.ceil : Rounding up

const num = 3.79

console.log(Math.ceil(num)). //  Round off all after the decimal point , Add one to the integer part

4. Math.round : rounding

const num = 3.79

console.log(Math.round(num)). //  Rounding off

5. Math.random : random number

Math.random().  //  Generate 0-1 => [0,1) =>  contain 0, It doesn't contain 1 Of    random number 

// Generate  [a,b)  The random number of intervals 
Math.floor(Math.random() * (b - a)) + a

//  chestnuts , Generate [5,50) The random number 
Math.floor(Math.random() * (45)) + 5

6. Math.pow() : Power operation

Math.pow(2,3) // 2 Of 3 Power  === 8

// ES6 after , There is a simple way to write 
2 ** 4        // 2 Of 4 Power  === 16

Four 、String class String - JavaScript | MDN

1. Access string characters

const message = 'hello world'

console.log( message[1] ) // e
console.log( message.charAt(4) ) // o

2. String traversal

01 - Normal cycle

const message = 'hello world'

for (let i = 0; i < message.length; i++) {
     console.log(message[i])
}

02 - for...of loop

// for..of The traversal  ->  iterator 
//  Currently iteratible objects :  character string / Array 
//  Object is not supported for..of
// String Inside the object is to turn the string into an iteratable object 

for (let char of message) {
  console.log(char)
}

3. Modify string

After the string definition is Cannot be modified Of , So when directly manipulating characters is invalid

let message = "Hello World"

message[2] = "A"
console.log(message) // Hello World.  It won't change

4. toUpperCase : Make all characters uppercase

const message = 'hello'

console.log(message.toUpperCase()) // HELLO , The original string has not changed , Instead, a new string is generated

5. toLowerCase : Change all characters to lowercase

const message = 'HeLLo'

console.log(message.toUpperCase()) // hello, The original string has not changed , Instead, a new string is generated

6. Find string

01 - indexOf ( searchString , fromIndex ) : lookup

Situation 1 : Search for , The index position of the search string
Situation two : No search for , return -1

const message = 'my name is coder'

let index = message.indexOf('name')
if(index !== -1){
    console.log(' eureka ')
}else{
    console.log(' Did not find ')
}

02 - includes( searchString , position ) : lookup

const message = 'my name is coder'

if(message.includes('name')){
    console.log(' eureka ')
}

03 - startsWith : With xxx start

const message = 'my name is coder'

if (message.startsWith("my")) {
   console.log("message With my start ")
}

04 - endsWith : With xxx ending

const message = 'my name is coder'

if (message.endsWith("coder")) {
   console.log("message With my ending ")
}

7. replace : Replace string

Find the corresponding string , And use the new string to replace
You can also pass in a regular expression to find , You can also pass in a function to replace

//  Incoming string 
const message = 'my name is star'
let newMessage = message.replace("star", "kobe")
console.log(newMessage) // my name is kobe

//  Passing in functions 
const newName = "kobe"
let newMessage = message.replace("star", function() {
  return newName.toUpperCase()
})
console.log(newMessage) // my name is KOBE

8. Get substring

const message = "Hello World"

console.log(message.slice(3, 7)) // lo W
console.log(message.slice(3, -1)) // lo Worl
console.log(message.slice(3)) // lo World

console.log(message.substr(3, 7)) // lo Worl

9. String concatenation

01 - +

const str1 = "Hello"
const str2 = "World"
const str3 = "kobe"

const newString = str1 + str2 + str3
console.log(newString)

02 - concat

const str1 = "Hello"
const str2 = "World"
const str3 = "kobe"

//  Chainable call 
const newString2 = str1.concat(str2).concat(str3)
//  Multiple values can be passed in at the same time 
const newString3 = str1.concat(str2, str3, "abc", "cba")

10. trim : Delete the first and last strings

console.log("    star      abc   ".trim()) // star      abc

11. split( swparator,limit ) : String segmentation

separator： What string to split , It can also be a regular expression ;
limit： Limit the number of returned fragments ;

const message = "abc-cba-nba-mba"
//  The cutting character is  => -
const items = message.split("-")
console.log(items) // ['abc','cba','nba','mba']
//  By array join Method , Variable to string   The connecting character is  *
const newMessage = items.join("*")
console.log(newMessage) // abc*cba*nba*mba

//-----------------------------------------------

const message = 'abc-cba-nba-mba';
//  Return length is 2 Array of 
const items = message.split('-', 2);
console.log(items); // ['abc','cba']

5、 ... and 、 object Object - JavaScript | MDN

1. Use of objects

key: String type , But when defining the attribute name of an object , Quotation marks can be omitted in most cases
value : It could be any value

const person = {
  name: 'why',
  age: 18,
  height: 1.88,
  //  This kind of needs to add '' Number 
  'my friend': {
    name: 'kobe',
    age: 30
  },
  run: function () {
    console.log('running');
  },
  eat: function () {
    console.log('eat foods');
  },
};

2. How objects are created

01 - Object literal

//  Directly assign curly braces , Most used 
const obj1 = {
   name: "why"
}

02 - Constructors

//  When a function is new When keyword is called , This function is called a constructor 
const obj = new Object()
obj.name = "star"
obj2.runing = function(){}

03 - Class creation

class Person {
  constructor(name) {
    this.name = name;
  }
}
const stu = new Person('star');

3. Operations on objects

01 - Definition

const info = {
  name: "star",
  age: 18,
  friend: {
    name: "coder",
    age: 30
  },
  running: function() {
    console.log("running~")
  }
}

02 - Access object properties

console.log(info.name)
console.log(info.friend.name)
info.running()

03 - Modify object properties

info.age = 25
info.running = function() {
  alert("I am running~")
}
console.log(info.age)
info.running()

04 - Add object properties

info.height = 1.88
info.studying = function() {
  console.log("I am studying~")
}

05 - Delete object properties

delete info.age
delete info.height

4. The square brackets of the object [] Usage

const obj = {
  name: "why",
  "my friend": "kobe",
  "eating something": function() {
    console.log("eating~")
  }
}

//  here  .  Grammar cannot be used 
console.log(obj["my friend"])

console.log(obj.name)
//  This sum  .  Grammar means 
console.log(obj["name"])

//  Use the value of a variable as the object's key
var eatKey = "eating something"
obj[eatKey]()

//  Can be used together 
obj["eating something"]()

5. Traversal of objects

01. Ordinary for loop

// Object.keys() =>  Get all the objects key
const infoKeys = Object.keys(info)
for (let i = 0; i < infoKeys.length; i++) {
  //  Get key Value 
  let key = infoKeys[i]
  //  Get value Value 
  let value = info[key]
  console.log(`key: ${key}, value: ${value}`)
}

02 - for ... in ...

//  You can get the object directly key
for (let key in info) {
  let value = info[key]
  console.log(`key: ${key}, value: ${value}`)
}

03 - Follow up update slowly ～

6. Object's memory allocation

js The code can run on browser , It can also run on node Environmental Science , Whatever the environment , In the end are all Running in memory

The memory is mapped to the physical memory of the real computer , So the more memory , The faster you run ～～～

Basic types : Stored in memory Stack memory
Reference type : Stored in memory Heap memory

01. Interview question one

const obj1 = {}
const obj2 = {}
console.log(obj1 === obj2) // false

02. Interview question two

const info = {
  name: "why",
  friend: {
    name: "kobe"
  }
}

const friend = info.friend
friend.name = "james"
console.log(info.friend.name) // james

03. Interview question three

function foo(a) {
  a = 200
}
const num = 100
foo(num)
console.log(num) // 100

04. Interview question 4

function foo(a) {
  a = {
    name: "star"
  }
}
const obj = {
  name: "obj"
}
foo(obj)
console.log(obj) //{ name:obj }

05. Interview question 5

function foo(a) {
  a.name = "star"
}

const obj = {
  name: "obj"
}
foo(obj)
console.log(obj) // {name : star}

7. How to create a series of objects

01. Write one by one

A little stupid ～

const stu1 = {
  name: 'star',
  age: 16,
  height: 1.66,
  running: function () {
    console.log('running~');
  }
};
const stu2 = {
  name: 'coder',
  age: 17,
  height: 1.77,
  running: function () {
    console.log('running~');
  }
};
const stu3 = {
  name: 'liuli',
  age: 18,
  height: 1.88,
  running: function () {
    console.log('running~');
  }
};

02. adopt for Write in cycles

Still a little stupid ～

const nameArr = ['star', 'coder', 'liuli'];
const ageArr = [16, 17, 18];
const heightArr = [1.66, 1.77, 1.88];
const funcs = {
  running: function () {
    console.log('running~');
  }
};

for (let i = 0; i < nameArr.length; i++) {
  let stu = {
    name: nameArr[i],
    age: ageArr[i],
    height: heightArr[i],
    running: funcs.running
  };
  console.log(stu); //{name: 'star', age: 16, height: 1.66, running: ƒ} ...
}

03. Through the factory function

//  Factory function ( Factory production student object ) ->  A design pattern 
//  Through the factory design pattern ,  I have defined such a function by myself 
function createStudent(name, age, height) {
  const stu = {};
  stu.name = name;
  stu.age = age;
  stu.height = height;
  stu.running = function () {
    console.log('running~');
  };
  return stu;
}

const stu1 = createStudent('stare', 16, 1.66);
const stu2 = createStudent('coder', 17, 1.77);
const stu3 = createStudent('liuli', 18, 1.88);
console.log(stu1);
console.log(stu2);
console.log(stu3);

disadvantages : The types of data obtained are Object type

04. adopt new Operator to create

Simply understand the constructor

// JavaScript It has been provided to us by default, which can be more consistent with JavaScript Way of thinking ( Object oriented way of thinking ) A rule for creating objects 
//  In a function this Generally, it points to an object 
/*
   If a function is new Operator call 
    1. Create a new empty object 
    2. Of this object  __proto__  To the constructor  prototype
    3. Give Way this Point to this empty object 
    4. Execute the code block of the function body 
    5. If you do not explicitly return a non empty object ,  that this The object pointed to will be returned automatically 
*/
function Coder(name, age, height) {
  //   amount to new The operator does 
  //  let obj = {}
  //  this = obj
  this.name = name
  this.age = age
  this.height = height
  this.running = function() {
    console.log("running~")
  }
  // return this
}

//  Add... Before the function call  new  keyword ( The operator )
const stu1 = new coder("why", 18, 1.88)
const stu2 = new coder("kobe", 30, 1.98)
console.log(stu1, stu2)

6、 ... and 、 Array Array - JavaScript | MDN

1. Accessing array elements

01 - [ Indexes ]

const names = ["abc", "cba", "nba"]

console.log(names[0]) // abc
console.log(names[names.length - 1]) //nba

02 - at

const names = ["abc", "cba", "nba"]

console.log(names.at(0)) // abc
console.log(names.at(-1)) // nba

2. newly added ｜ Delete Elements

01 - push : Added at the end

const names = ["abc", "cba"]

names.push("star", "kobe")
console.log(names) // ["abc", "cba","star", "kobe"]

02 - pop : Tail delete

const names = ["abc", "cba"]

names.pop()
console.log(names) // ["abc"]

03 - unshift : New head

const names = ["abc", "cba"]

names.unshift("star", "kobe")
console.log(names) // ["star", "kobe","abc", "cba"]

04 - shift : Head delete

const names = ["abc", "cba"]

names.shift()
console.log(names) // ["cba"]

Be careful : push/pop The method runs faster , and shift/unshift It's slow , Cannot be called in a chain

The tail operation will not affect the array structure , The head operation will cause the subsequent elements to move

05 - splice : Add... Anywhere / Delete / Replacement elements

splice : It can be said to be a sharp tool for processing arrays , It can do everything ： add to , Delete and replace elements

Be careful : This method will modify the original array

Parameter one : start, Where to start manipulating elements
Parameter two : deleteCount, Delete the number of elements , If 0 Or a negative number means not to delete
Parameter 3 : Elements that can be added perhaps Alternative elements

Delete

const names = ["abc", "cba", "nba", "mba", "abcd"]
//  Start at the first position , Delete two elements 
names.splice(1, 2)
console.log(names) // ["abc", "mba", "abcd"]

newly added

const names = ["abc", "cba", "nba"]

//  Start at the first position , Add two elements , Note that the number of deleted elements is 0
names.splice(1, 0, "star", "kobe")
console.log(names) // ["abc","star", "kobe","cba", "nba"]

Replace

const names = ["abc", "cba", "nba", "mba"]

//  Let's start with the first element , Delete two elements , At the same time, add elements , Deleted and added elements can be different  =>  It looks like a replacement 
names.splice(1, 2, "star", "kobe", "james")
console.log(names) // ["abc", "star", "kobe", "james", "mba"]

3. length attribute

01 - To obtain the length of the

const arr = [1,2,3,4]

console.log(arr.length) // 4

02 - Modify the length

If we manually add one larger than the default length The numerical , Then it will increase the length of the array
But if we reduce it , The array will be truncated
The easiest way to empty an array is ：arr.length = 0

const names = ['abc', 'cba', 'nba', 'mba'];

//  Set up length More than the original number of elements 
names.length = 10;
console.log(names); // ["abc", "cba", "nba", "mba",empty × 6]

//  Set up length Less than the original number of elements 
names.length = 2
console.log(names) // ['abc', 'cba']

4. Traversal of array

01 - for loop

const names = ['abc', 'cba', 'nba', 'mba'];

for (var i = 0; i < names.length; i++) {
  console.log(names[i])
}

02 - for...in

const names = ['abc', 'cba', 'nba', 'mba'];
// index =>  Indexes 
for (var index in names) {
  console.log(index, names[index])
}

03 - for...of

const names = ['abc', 'cba', 'nba', 'mba'];
// item =>  value 
for (var item of names) {
  console.log(item)
}

5. slice : Array truncation

const names = ["abc", "cba", "nba", "mba", "why", "kobe"]

// slice Method :  The original array will not be modified 
// splice There's a difference : splice Modify the original array 
// start  Where to start 
// end  End position ,  It doesn't contain end In itself 
const newNames = names.slice(2, 4)
console.log(newNames) // ["nba", "mba"]

6. Array merge

01 - concat

const names1 = ["abc", "cba"]
const names2 = ["nba", "mba"]
const names3 = ["why", "kobe"]

const newNames2 = names1.concat(names2, names3)
console.log(newNames2)

02 - ... Operator

const names1 = ["abc", "cba"]
const names2 = ["nba", "mba"]
const names3 = ["why", "kobe"]

names1.push(...names2, ...names3)

7. join : The array becomes a string

const names = ["abc", "cba", "nba", "mba", "why", "kobe"]

console.log(names.join("-")) // "abc-cba-nba-mba-why-kobe"

8. Find elements in array

01 - indexOf

const names = ["abc", "cba", "nba", "mba"]

//  Can find ,  Returns the corresponding index 
//  Can't find ,  return -1
console.log(names.indexOf("nbb")) // -1

02 - includes

const names = ["abc", "cba", "nba", "mba"]

console.log(names.includes("cba")) // true
console.log(names.includes("nbb")) // false

03 - find

const students = [
  { id: 100, name: "why", age: 18 },
  { id: 101, name: "kobe", age: 30 },
  { id: 102, name: "james", age: 25 },
  { id: 103, name: "why", age: 22 }
]

//  How many items , How many times will it be executed find function , When executing, the value of the current item , Indexes , Pass the array 
const stu = students.find(function(item,index,arr) {
  console.log(item,index,arr)
  //  When the returned value is not empty , It means finding , Will stop looking for , Returns the current item 
  if (item.id === 101) return true
})

// The arrow function can be used for simple writing 
const stu1 = students.find(item => item.id === 101)

04 - Manual implementation find function

const names = [
  { id: 100, name: 'why', age: 18 },
  { id: 101, name: 'kobe', age: 30 },
  { id: 102, name: 'james', age: 25 },
  { id: 103, name: 'why', age: 22 }
];
//  Bind this method to the array prototype .  Can be specified this
Array.prototype.starFind = function (fn,thisArgs) {
  let bool = false;
  for (let i = 0; i < this.length; i++) {
    //  Accept the return of bool value 
    bool = fn.call(thisArgs, this[i], i, this);
    //  If you return true, It means that 
    if (bool) {
      //  Return the found value of this item 
      return this[i];
    }
  }
  //  If not found , Will default back to undefined
};
//  Directly callable , At the same time, accept the returned value 
const findValues = names.starFind((item, index, arr) => {
  return item.id === 102;
},{});
console.log(findValues); // { id: 102, name: 'james', age: 25 }

05 - findIndex

const names = ["abc", "cba", "nba"]

//  and find The method is similar to , But here is the index value of the returned search item 
const findIndex = names.findIndex(function(item, index, arr) {
  return item === "nba"
})

//  Easy to write 
var findIndex1 = names.findIndex(item => item === "nba")

9. sort : Sort of array

It's a function of higher order , Used to sort arrays , And generate a new array after sorting

If compareFunction(a, b) Less than 0 , that a It will be arranged to b front
If compareFunction(a, b) be equal to 0 , a and b The relative position of
If compareFunction(a, b) Greater than 0 , b It will be arranged to a front
in other words , Who is younger is in line front

const nums = [20, 4, 10, 15, 100, 88]
// sort:  Sort 
nums.sort(function(item1, item2) {
  //  Ascending 
  return item1 - item2 // [4,10,15,20,88,100]
  //  Descending 
  // return item2 - item1
})

// --------------------------------------------

const students = [
  { id: 100, name: "why", age: 18 },
  { id: 101, name: "kobe", age: 30 },
  { id: 102, name: "james", age: 25 },
  { id: 103, name: "curry", age: 22 }
]

students.sort(function(item1, item2) {
  return item1.age - item2.age
})
console.log(students)

10. reverse : Inversion of array

11. Array used by other higher-order functions

01 - forEach

const names = ['avbc', 'fggd', 'eerw'];

//  You can get the value of each item in the array , Indexes , The array itself 
//  The second parameter , Pass in the specified this object 
names.forEach(function (item, index, names) {
  console.log(item, index, names, this);
}, {});

02 - Manual implementation forEach function

const names = ['abc', 'abvc', 'aser'];
//  Bind this method to the array prototype 
Array.prototype.starForEach = function (fn,thisArgs) {
  // this Point to the object that called the function ,names call , So the point to names Array 
  for (let i = 0; i < this.length; i++) {
    fn.call(thisArgs, this[i], i, this);
  }
};
//  Directly callable 
names.starForEach((item, index, arr) => {
  console.log(item, index, arr);
},{});

03 - filter

const nums = [11, 20, 55, 100, 88, 32];

//  Filtering data , Those who meet the conditions will push To the internal array , Finally, we return together 
const newNums = nums.filter(function (item) {
  return item % 2 === 0;
});
console.log(newNums); // [20,100,88,32]

04 - map

const nums = [11, 20, 55, 100, 88, 32]
// map =>  mapping  ,  The data after the return operation is saved in a new array , Finally, we return together 
const newNums = nums.map(function(item) {
  return item * item
})
console.log(newNums)

05 - reduce

const nums = [11, 20, 55, 100, 88, 32]
//  First execution : preValue->0 item->11
//  Second execution : preValue->11 item->20
//  Third execution : preValue->31 item->55
//  The fourth execution : preValue->86 item->100
//  Fifth execution : preValue->186 item->88
//  The sixth execution : preValue->274 item->32
//  The last time it was executed  preValue + item,  It will serve as reduce The return value of 

// initialValue:  initialize value ,  When it was first executed ,  Corresponding preValue

//  If initialValue No transmission , The first time preValue = 11  item = 12
const result = nums.reduce(function(preValue, item) {
  console.log(`preValue:${preValue} item:${item}`)
  return preValue + item
}, 0)
console.log(result)