震惊:原来JavaScript 中类型转换有这些(超细)

背景

        JavaScript 是一种面向对象、基于原型的脚本语言,最初由Netscape的程序员Brendan Eich于1995年设计而成。起初命名为LiveScript,后来改为JavaScript。JavaScript是一种动态语言,通常用于在网页上实现交互式行为,被广泛应用于网页开发。

特点

  • 轻量级:JavaScript的语法相对简单,学习起来较为容易。
  • 客户端执行:它主要由浏览器解释执行,用于增强用户与网页的交互性。
  • 事件驱动:JavaScript依赖于用户交互和事件处理,可以响应用户的操作。
  • 跨平台:JavaScript不依赖于特定的操作系统,因此可以在各种设备和平台上运行。

用途

  • 网页交互:JavaScript用于处理网页中的用户交互,包括表单验证、动态内容更新等。
  • 前端开发:通过框架(如React、Angular、Vue.js),JavaScript用于构建复杂的单页应用程序。
  • 服务端开发:通过Node.js,JavaScript也能够在服务器端进行编程和开发。
  • 移动应用:JavaScript可以通过框架(如React Native、Ionic)用于移动应用程序的开发。

总之,JavaScript在Web开发领域发挥着重要作用,它不仅提供了丰富的交互特性,还能处理复杂的业务逻辑。同时,它的灵活性也使得它成为一个全栈开发者的首选语言之一。

类型转换

        JavaScript中的类型转换指的是将一个数据类型转换为另一个数据类型的过程。这种转换可以是隐式的(由JavaScript自动完成),也可以是显式的(通过使用内置函数或操作符来执行)。理解类型转换的概念对于编写具有一致性和可靠性的代码至关重要,因为它直接影响着值的比较、运算和数据处理的结果。类型转换的正确应用有助于确保数据的合理性,并促进代码的可维护性和可读性。

强制类型转换

        强制类型转换,指的是开发人员明确地将一个数据类型转换为另一个数据类型的过程。在 JavaScript 中,可以使用内置函数或操作符来执行显式类型转换,以满足特定需求。

String()
let num = 123;
let strNum = String(num); // 将数字转换为字符串
let bool = true;
let strBool = String(bool); // 将布尔值转换为字符串,结果为 "true"
let date = new Date();
let strDate = String(date); // 将日期转换为字符串
let arr = [1, 2, 3];
let strArr = String(arr); // 将数组转换为字符串,结果为 "1,2,3"
let obj = { key: "value" };
let strObj = String(obj); // 对象默认调用 toString() 返回 "[object Object]"
toString()
let num = 123;
let strNum = num.toString(); // 将数字转换为字符串
let bool = true;
let strBool = bool.toString(); // 将布尔值转换为字符串
let date = new Date();
let strDate = date.toString(); // 将日期转换为字符串
let arr = [1, 2, 3];
let strArr = arr.toString(); // 将数组转换为字符串
let obj = { key: "value" };
let strObj = obj.toString(); // 对象默认调用 toString() 返回 "[object Object]"

模板字符串

模版字符串属于es6的语法,使用反引号

let num = 12;
let strNum = `${num}`; 

let bool = true;
let strBool = `${bool}`; 

let date = new Date();
let strDate = `${date}`; 

let arr = [1, 2, 3];
let strArr = `${arr}`; 

let obj = { key: "value" };
let strObj = `${obj}`; 

JSON.stringify() 

比较万能的方法

let arr = [1, 2, 3];
let strArr = JSON.stringify(arr); 


let str = "12";
let numStr = parseInt(str);


let num = 0;
let boolNum = Boolean(num); 

隐式类型转换

字符串拼接运算符(+)
let number = 1;
let string= "数字: " + number;
数学运算符(-)(*)(/)他们都是隐式类型转换

数组方法

        JavaScript中的数组是一种特殊的对象,用于存储多个值。它是一种有序的集合,每个值都有一个对应的索引来标识其位置。

添加/删除

  • push()
  • pop()
  • unshift()
  • shift()
  • // push(): 在数组末尾添加一个或多个元素,并返回新的长度。
    let arr = [1, 2, 3];
    arr.push(4);
    console.log(arr); // [1, 2, 3, 4]
    
    // pop(): 移除并返回数组的最后一个元素。
    let poppedElement = arr.pop();
    console.log(arr); // [1, 2, 3]
    
    // unshift(): 在数组开头添加一个或多个元素,并返回新的长度。
    arr.unshift(0);
    console.log(arr); // [0, 1, 2, 3]
    
    // shift(): 移除并返回数组的第一个元素。
    let shiftedElement = arr.shift();
    console.log(shiftedElement); // 0
    console.log(arr); // [1, 2, 3]
    
    

    合并/拆分数组

  • concat()
  • let arr1 = [1, 2];
    let arr2 = [3, 4];
    let newArr = arr1.concat(arr2);
    console.log(newArr);
  • slice()
  • let Arr = [1, 2, 3, 4, 5];
    let slicedArr = Arr.slice(1, 4); // 从索引1开始,到索引4之前结束
    console.log(slicedArr); // [2, 3, 4]
    console.log(Arr);
    

    遍历数组

  • forEach()
  • map()
  • filter() 也叫过滤器
array.forEach(function(currentValue, index, array) {
  // 在这里编写你的代码
});
var new_array = arr.map(function callback(currentValue, index, array) {
  // 返回一个新数组元素
}, thisArg);
var newArray = arr.filter(function callback(element, index, array) {
  // 返回 true 表示保留该元素,否则移除
}, thisArg);

查找/操作元素

  • indexOf()
  • lastIndexOf()
  • findIndex()
  • find()
  • includes()
let arr = [2, 5, 9, 2];

// indexOf(): 返回指定元素的第一个匹配项的索引。
console.log(arr.indexOf(2)); // 0

// lastIndexOf(): 返回指定元素的最后一个匹配项的索引。
console.log(arr.lastIndexOf(2)); // 3

// findIndex(): 返回数组中满足条件的第一个元素的索引。
console.log(arr.findIndex(item => item > 2)); // 1

// find(): 返回数组中满足条件的第一个元素的值。
console.log(arr.find(item => item > 2)); // 5

// includes(): 判断是否包含某个元素。
console.log(arr.includes(2)); // true
console.log(arr.includes(7)); // false

排序/逆序

  • sort()
  • reverse()
let arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

arr.sort((a, b) => a - b);
console.log(arr);

//a-b 升序  b-a  降序

其他常用方法

  • join()
  • reduce()
  • every()
  • some()
// join(): 将数组的所有元素连接成一个字符串。
let arr = ["Apple", "Banana", "Orange"];
let aaa= arr.join(", ");
console.log(aaa); // "Apple, Banana, Orange"


// reduce(): 
let sum = [1, 2, 3, 4].reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10


// every(): 
let bbb= [1, 2, 3, 4].every(item => item > 0);
console.log(bbb); // true

// some(): 
let ccc= [1, 2, 3, 4].some(item => item > 3);
console.log(ccc); // true

数组长度

  • length
let arr = [1, 2, 3, 4, 5];
console.log(arr.length); //5

类型转换

数组转字符串:

join()数组转换为字符串

let arr = ["蔡", "徐", "坤"];
let str = arr.join(', ');
console.log(str); // 输出: "蔡, 徐, 坤"

toString() 数组转换为字符串:

let arr = [1, 2, 3];
let str = arr.toString();
console.log(str); // 输出: "1,2,3"

split()字符串转数组

let str = "蔡, 徐, 坤";
let arr = str.split(', ');
console.log(arr); // 输出: ["蔡", "徐", "坤"]

以上就是类型转换的一些方法,可能不是特别全,欢迎指正!