这几天整理了一下JavaScript常用知识 数据类型 数组 字符串 类型转换

JavaScript/前端
235
0
0
2024-01-11
实用的日期选择器插件集合（PC端 + 移动端）
上一篇
基于HTTP流式传输的长时响应体验提升
下一篇

数据类型

在 JavaScript 中，我们可以分成两种类型：

  • 基本类型
  • 复杂类型

两种类型的区别是：存储位置不同

基本类型

基本类型主要为以下6种：

  • Number
  • String
  • Boolean
  • Undefined
  • null
  • Symbol

Number

数值最常见的整数类型格式则为十 进制 ，还可以设置 八进制 （零开头）、十六进制（0x开头） 

 let intNum = // 10进制的55
let num = 070 // 8进制的56
let hexNum = 0xA //16进制的10

浮点类型则在数值汇总必须包含小数点，还可通过 科学计数法表示 

 let floatNum = 1.1;
let floatNum = 0.1;
let floatNum = .1; // 有效，但不推荐
let floatNum =.125e7; // 等于 31250000

在数值类型中，存在一个特殊数值 NaN ，意为“不是数值”，用于表示本来要返回数值的操作失败了（而不是抛出错误）

 console.log(/0); // NaN
console.log(-/+0); // NaN

undefined

Undefined 类型只有一个值，就是特殊值 undefined 。当使用 var 或 let 声明了变量但没有初始化时，就相当于给变量赋予了 undefined 值

 let message;
console.log(message == undefined); // true

包含 undefined 值得变量跟未定义变量是有区别的

 let message; // 这个变量被声明了，只是值为 undefined

console.log(message); // "undefined"
console.log(age); // 没有声明过这个变量，报错

String

字符串 可以使用 双引号 （”）、 单引号 （’）或反引号（`）标示 

 let firstName = "John";
let lastName = 'Jacob';
let lastName = `Jingleheimerschmidt`

字符串是不可变的，意思是一旦创建，它们的值就不能变了 

 let lang = " Java ";
lang = lang + "Script";  // 先销毁再创建

Null

Null 类型同样只有一个值，即特殊值 null

逻辑上讲， null 值表示一个空对象指针，这也是给 typeof 传一个 null 会返回 “object” 的原因

 let car = null;
console.log(typeof car); // "object"

undefined 值是由 null 值派生而来

 console.log(null == undefined); // true

只要变量要保存对象，而当时又没有那个对象可保存，就可用 null 来填充该变量

Boolean

Boolean （布尔值）类型有两个字面值： true 和 false

通过 Boolean 可以将其他类型的数据转化成 布尔值

规则如下： 

 数据类型      				转换为 true 的值      				转换为 false 的值
 String        				 非空字符串          					"" 
  Number  				非零数值（包括无穷值）						0 、 NaN 
 Object 					 任意对象 							   null
Undefined 					N/A （不存在） 						undefined

Symbol

Symbol （符号）是原始值，且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险 

 let genericSymbol = Symbol();
let otherGenericSymbol = Symbol();
console.log(genericSymbol == otherGenericSymbol); // false

let fooSymbol = Symbol('foo');
let otherFooSymbol = Symbol('foo');
console.log(fooSymbol == otherFooSymbol); // false

引用类型

复杂类型统称为 Object ，我们这里主要讲述下面三种：

  • Object
  • Array
  • Function

Object

创建 object 常用方式为对象字面量表示法，属性名可以是字符串或数值

 let person = {
    name: "Nicholas",
    "age":,
    : true
};

Array

JavaScript 数组是一组有序的数据，但跟其他语言不同的是，数组中每个槽位可以存储任意类型的数据。并且，数组也是动态大小的，会随着数据添加而自动增长

 let colors = ["red",, {age: 20 }]
colors.push()

Function

函数实际上是对象，每个函数都是 Function 类型的实例，而 Function 也有属性和方法，跟其他引用类型一样

函数存在三种常见的表达方式：

  • 函数声明 
 // 函数声明
function sum (num, num2) {
    return num + num2;
}
  • 函数表达式 
 let sum = function(num, num2) {
    return num + num2;
};
  • 箭头函数

函数声明和函数表达式两种方式 

 let sum = (num, num2) => {
    return num + num2;
};

其他引用类型

除了上述说的三种之外，还包括 Date 、 RegExp 、 Map 、 Set 等……

三、存储区别

基本数据类型和引用数据类型存储在内存中的位置不同：

  • 基本数据类型存储在栈中
  • 引用类型的 对象存储 于堆中

当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值

下面来举个例子

基本类型

 let a =;
let b = a; // 赋值操作
b =;
console.log(a); //值

a 的值为一个基本类型，是存储在栈中，将 a 的值赋给 b ，虽然两个变量的值相等，但是两个变量保存了两个不同的内存地址

下图演示了基本类型赋值的过程：

引用类型

 var obj = {}
var obj = obj1;
obj.name = "Xxx";
console.log(obj.name); // xxx

引用类型数据存放在内堆内中，每个堆内存中有一个引用地址，该引用地址存放在栈中

obj1 是一个引用类型，在赋值操作过程汇总，实际是将堆内存对象在栈内存的引用地址复制了一份给了 obj2 ，实际上他们共同指向了同一个堆内存对象，所以更改 obj2 会对 obj1 产生影响

下图演示这个引用类型赋值过程

小结

  • 声明变量时不同的内存地址分配：简单类型的值存放在栈中，在栈中存放的是对应的值引用类型对应的值存储在堆中，在栈中存放的是指向堆内存的地址
  • 不同的类型数据导致赋值变量时的不同：简单类型赋值，是生成相同的值，两个对象对应不同的地址复杂类型赋值，是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

数组

操作方法

数组基本操作可以归纳为 增、删、改、查，需要留意的是哪些方法会对原数组产生影响，哪些方法不会

下面对数组常用的操作方法做一个归纳

增

下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响

  • push()
  • unshift()
  • splice()
  • concat()

push()

push() 方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度

 let colors = []; // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
console.log(count) //

unshift()

unshift()在数组开头添加任意多个值，然后返回新的数组长度 

 let colors = new Array(); // 创建一个数组
let count = colors.unshift("red", "green"); // 从数组开头推入两项
 alert (count); // 2

splice

传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，返回空数组 

 let colors = ["red", "green", "blue"];
let removed = colors.splice(, 0, "yellow", "orange")
console.log(colors) // red,yellow,orange,green,blue
console.log(removed) // []

concat()

首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组 

 let colors = ["red", "green", "blue"];
let colors = colors.concat("yellow", ["black", "brown"]);
console.log(colors); // ["red", "green","blue"]
console.log(colors); // ["red", "green", "blue", "yellow", "black", "brown"]

删

下面三种都会影响原数组，最后一项不影响原数组：

  • pop()
  • shift()
  • splice()
  • slice()

pop()

pop() 方法用于删除数组的最后一项，同时减少数组的 length 值，返回被删除的项

 let colors = ["red", "green"]
let item = colors.pop(); // 取得最后一项
console.log(item) // green
console.log(colors.length) //

shift()

shift() 方法用于删除数组的第一项，同时减少数组的 length 值，返回被删除的项

 let colors = ["red", "green"]
let item = colors.shift(); // 取得第一项
console.log(item) // red
console.log(colors.length) //

splice()

传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组 

 let colors = ["red", "green", "blue"];
let removed = colors.splice(,1); // 删除第一项
console.log(colors); // green,blue
console.log(removed); // red，只有一个元素的数组

slice()

slice() 用于创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组 

 let colors = ["red", "green", "blue", "yellow", "purple"];
let colors = colors.slice(1);
let colors = colors.slice(1, 4);
console.log(colors)   // red,green,blue,yellow,purple
concole.log(colors); // green,blue,yellow,purple
concole.log(colors); // green,blue,yellow

改

即修改原来数组的内容，常用 splice

splice()

传入三个参数，分别是开始位置，要删除元素的数量，要插入的任意多个元素，返回删除元素的数组，对原数组产生影响 

 let colors = ["red", "green", "blue"];
let removed = colors.splice(, 1, "red", "purple"); // 插入两个值，删除一个元素
console.log(colors); // red,red,purple,blue
console.log(removed); // green，只有一个元素的数组

查

即查找元素，返回元素坐标或者元素值

  • indexOf()
  • includes()
  • find ()

indexOf()

返回要查找的元素在数组中的位置，如果没找到则返回 -1 

 let numbers = [, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.indexOf() // 3

includes()

返回要查找的元素在数组中的位置，找到返回 true ，否则 false 

 let numbers = [, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes() // true

find()

返回第一个匹配的元素 

 const people = [
    {
        name: "Matt",
        age:
    },
    {
        name: "Nicholas",
        age:
    }
];
people.find((element, index, array) => element.age <) // // {name: "Matt", age: 27}

排序方法

数组有两个方法可以用来对元素重新排序：

  • reverse()
  • sort ()

reverse()

顾名思义，将数组元素方向反转 

 let values = [, 2, 3, 4, 5];
values.reverse();
alert(values); //,4,3,2,1

sort()

sort()方法接受一个比较函数，用于判断哪个值应该排在前面 

 function compare(value, value2) {
    if (value < value2) {
        return -;
    } else if (value > value2) {
        return;
    } else {
        return;
    }
}
let values = [, 1, 5, 10, 15];
values.sort(compare);
alert(values); //,1,5,10,15

转换方法

常见的转换方法有：

join()

join() 方法接收一个参数，即字符串分隔符，返回包含所有项的字符串 

 let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue

迭代 方法

常用来迭代数组的方法（都不改变原数组）有如下：

  • some()
  • every()
  • forEach ()
  • filter ()
  • map()

some()

对数组每一项都运行传入的测试函数，如果至少有1个元素返回 true ，则这个方法返回 true 

 let numbers = [, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.some((item, index, array) => item >);
console.log(someResult) // true

every()

对数组每一项都运行传入的测试函数，如果所有元素都返回 true ，则这个方法返回 true 

 let numbers = [, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item >);
console.log(everyResult) // false

forEach()

对数组每一项都运行传入的函数，没有返回值 

 let numbers = [, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
    // 执行某些操作
});

filter()

对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回

 let numbers = [, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item >);
console.log(filterResult); //,4,5,4,3

map()

对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组 

 let numbers = [, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item *);
console.log(mapResult) //,4,6,8,10,8,6,4,2

字符串

操作方法

我们也可将字符串常用的操作方法归纳为增、删、改、查，需要知道字符串的特点是一旦创建了，就不可变

增

这里增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作

除了常用 + 以及 ${} 进行字符串拼接之外，还可通过 concat

concat

用于将一个或多个字符串拼接成一个新字符串 

 let stringValue = "hello ";
let result = stringValue.concat("world");
console.log(result); // "hello world"
console.log(stringValue); // "hello"

删

这里的删的意思并不是说删除原字符串的内容，而是创建字符串的一个副本，再进行操作

常见的有：

  • slice()
  • substr ()
  • substring()

这三个方法都返回调用它们的字符串的一个子字符串，而且都接收一或两个参数。 

 let stringValue = "hello world";
console.log(stringValue.slice()); // "lo world"
console.log(stringValue.substring()); // "lo world"
console.log(stringValue.substr()); // "lo world"
console.log(stringValue.slice(, 7)); // "lo w"
console.log(stringValue.substring(,7)); // "lo w"
console.log(stringValue.substr(, 7)); // "lo worl"

改

这里改的意思也不是改变原字符串，而是创建字符串的一个副本，再进行操作

常见的有：

  • trim ()、trimLeft()、trimRight()
  • repeat()
  • padStart()、padEnd()
  • toLowerCase()、 toUpperCase()

trim()、trimLeft()、trimRight()

删除前、后或前后所有 空格符 ，再返回新的字符串 

 let stringValue = " hello world ";
let trimmedStringValue = stringValue.trim();
console.log(stringValue); // " hello world "
console.log(trimmedStringValue); // "hello world"

repeat()

接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果 

 let stringValue = "na ";
let  copy Result = stringValue.repeat(2) // na na

padEnd()

复制字符串，如果小于指定长度，则在相应一边填充字符，直至满足长度条件 

 let stringValue = "foo";
console.log(stringValue.padStart()); // " foo"
console.log(stringValue.padStart(, ".")); // "......foo"

toLowerCase()、 toUpperCase()

大小写转化 

 let stringValue = "hello world";
console.log(stringValue.toUpperCase()); // "HELLO WORLD"
console.log(stringValue.toLowerCase()); // "hello world"

查

除了通过 索引 的方式获取字符串的值，还可通过：

  • chatAt()
  • indexOf()
  • startWith()
  • includes()

charAt ()

返回给定索引位置的字符，由传给方法的整数参数指定 

 let message = "abcde";
console.log(message.charAt()); // "c"

indexOf()

从字符串开头去搜索传入的字符串，并返回位置（如果没找到，则返回 -1 ） 

 let stringValue = "hello world";
console.log(stringValue.indexOf("o")); //

startWith()、includes()

从字符串中搜索传入的字符串，并返回一个表示是否包含的布尔值 

 let message = "foobarbaz";
console.log(message.startsWith("foo")); // true
console.log(message.startsWith("bar")); // false
console.log(message.includes("bar")); // true
console.log(message.includes("qux")); // false

转换方法

split

把字符串按照指定的分割符，拆分成数组中的每一项 

 let str = "+23+34"
let arr = str.split("+") // [,23,34]

模板匹配方法

针对正则表达式，字符串设计了几个方法：

  • match()
  • search()
  • replace()

match()

接收一个参数，可以是一个正则表达式字符串，也可以是一个 RegExp 对象，返回数组

 let text = "cat, bat, sat, fat";
let pattern = /.at/;
let matches = text.match(pattern);
console.log(matches[]); // "cat"

search()

接收一个参数，可以是一个正则表达式字符串，也可以是一个 RegExp 对象，找到则返回匹配索引，否则返回 -1

 let text = "cat, bat, sat, fat";
let pos = text.search(/at/);
console.log(pos); //

replace()

接收两个参数，第一个参数为匹配的内容，第二个参数为替换的元素（可用函数） 

 let text = "cat, bat, sat, fat";
let result = text.replace("at", "ond");
console.log(result); // "cond, bat, sat, fat"
实用的日期选择器插件集合（PC端 + 移动端）
上一篇
基于HTTP流式传输的长时响应体验提升
下一篇