前端必会的数组方法及类型转换

02-27 阅读 0评论

一、数组的常用方法

1、添加 / 删除

push()

在数组末尾添加数据， 1个或多个数据返回值为修改后的数组长度

$前端必会的数组方法及类型转换,前端必会的数组方法及类型转换,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,前端,方法,第1张$

（图片来源网络，侵删）

var arr = [1, 2, 3, 4];
arr.push(5,6,7)
arr.push(8)
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8]

pop()

从数组末尾删除一个元素，返回值为被删除的元素

var arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.pop();
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]

unshift()

在数组开头添加数据，返回值为修改后的数组长度

var arr = [1, 2, 3, 4, 5, 6, 7]
arr.unshift(-1, 0)
console.log(arr); // [-1, 0, 1, 2, 3, 4, 5, 6, 7]

shift()

从数组开头删除一个元素，返回值为被删除的元素

var arr = [1, 2, 3, 4, 5, 6]
arr.shift();
console.log(arr); // [2, 3, 4, 5, 6]

2、排序 / 翻转

sort()

数组排序，将数组中的元素进行排序，只能排数组中的数字元素，返回值为排序后数组

var arr1 = [8, 3, 7, 9, 89, 72]
arr1.sort(); // 默认时升序，但是如果是多位数排序则从首位排序
arr1.sort(function (a, b) {
    // return a - b;  // 升序
    return b - a; // 降序
})
console.log(arr1); // [89, 72, 9, 8, 7, 3]

reverse()

数组翻转，将数组中的元素翻转，返回值为翻转后的数组

var arr = [0, 1, 2, 3, 4, 5, 6, 7]
arr.reverse();
console.log(arr); // [7, 6, 5, 4, 3, 2, 1, 0]

3、查找

indexOf()

查找数组中是否存在某个数据，查的到返回当前数组的下标，查不到返回-1；从前往后找

$前端必会的数组方法及类型转换,前端必会的数组方法及类型转换,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,前端,方法,第2张$

（图片来源网络，侵删）

var arr = ["jack", "rose", "pink"];
console.log(arr2.indexOf("pink")); // 下标2
console.log(arr2.indexOf("haha")); // -1

lastIndexOf()

查找数组中是否存在某个数据，查的到返回当前数组的下标，查不到返回-1；从后往前找

var arr = ['haha', 'xixi', 'heihei']
console.log(arr.lastIndexOf('xixi')) // 下标1

findIndex()

返回数组中满足提供的测试函数的第一个元素的索引

var arr = [1, 2, 3, 4, 5]
console.log(arr.findIndex(item => item > 2)); // 2

find()

返回数组中满足提供的测试函数的第一个元素的值。

var arr = [1, 2, 3, 4, 5]
console.log(arr.find(item => item > 2)) // 3

includes()

判断数组是否包含某个元素

var arr = [1, 2, 3, 4, 5]
console.log(arr.includes(4)); // true
console.log(arr.includes(9)); // false

4、数组的遍历方法

forEach()

var personArr = [
        {
          name: "张三",
          sex: "男",
          age: 18,
          dec: "你好",
        },
        {
          name: "李四",
          sex: "男",
          age: 18,
          dec: "你真帅",
        },
        {
          name: "王五",
          sex: "男",
          age: 18,
          dec: "憨憨的",
        },
        {
          name: "赵六",
          sex: "女",
          age: 19,
          dec: "傻白甜",
        },
        {
          name: "孙七",
          sex: "男",
          age: 20,
          dec: "憨憨的",
        },
        {
          name: "刘八",
          sex: "男",
          age: 25,
          dec: "抽烟喝酒烫头",
        },
      ];
      var obj = {
        name: "haha",
      };
      personArr.forEach(function (ele, index, self) {
        console.log(ele); // 数组中的每个元素
        console.log(index); // 数组中每个元素的小标
        console.log(self); // 元素组
        console.log(this); // this的指向forEach的第二个参数，如果没有第二个参数则指向window
      }, obj);

map()

与forEach方法用法相同，map方法有返回值，而forEach方法没有返回值

var personArr = [
        {
          name : '张三',
          sex : '男',
          age : 18,
          dec : '你好'
        },{
          name : '李四',
          sex : '男',
          age : 18,
          dec : '你真帅'
        },{
          name : '王五',
          sex : '男',
          age : 18,
          dec : '憨憨的'
        },{
          name : '赵六',
          sex : '女',
          age : 19,
          dec : '傻白甜'
        },{
          name : '孙七',
          sex : '男',
          age : 20,
          dec : '憨憨的'
        },{
          name : '刘八',
          sex : '男',
          age : 25,
          dec : '抽烟喝酒烫头'
        }
      ]
  var a = personArr.map(function(ele,index,self){
    console.log(ele);
    console.log(index);
    console.log(self);
    console.log(this);
    // return { name : ele.name, age : ele.age};
    return true
  })
  console.log(a); // 返回一个新数组

filter()

var personArr = [
        {
          name : '张三',
          sex : '男',
          age : 18,
          dec : '你好'
        },{
          name : '李四',
          sex : '男',
          age : 18,
          dec : '你真帅'
        },{
          name : '王五',
          sex : '男',
          age : 18,
          dec : '憨憨的'
        },{
          name : '赵六',
          sex : '女',
          age : 19,
          dec : '傻白甜'
        },{
          name : '孙七',
          sex : '男',
          age : 20,
          dec : '憨憨的'
        },{
          name : '刘八',
          sex : '男',
          age : 25,
          dec : '抽烟喝酒烫头'
        }
      ]
  
  var a = personArr.filter(function(ele,index,self){
    // console.log(ele,index,self);
    // return true
    // if(ele.sex == "男") {
    //   return true
    // }
    return ele.sex == "男"
  })
  console.log(a);

5、数组的其他方法

concat()

将多个数组中的数据链接在一起，返回为链接好的新的数组

$前端必会的数组方法及类型转换,前端必会的数组方法及类型转换,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,前端,方法,第3张$

（图片来源网络，侵删）

var arr1 = [1, 2]
var arr2 = [3, 4]
console.log(arr1.concat(arr2)); // [1, 2, 3, 4]

slice()

数组截取

var arr = ["jack", "rose", "pink", "haha", "xixi"];
console.log(arr.slice(2,5)); // ['pink', 'haha', 'xixi']

join()

将数组转换成字符串，参数为你想用什么分割符数组中的元素

var arr = ["jack", "rose", "pink"];
console.log(arr.join('')); // jackrosepink
console.log(arr.join('-')); // jack-rose-pink

reduce()

对数组中的每个元素执行一个提供的函数，将其结果汇总为单个返回值

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

reduceRight()

从数组的最后一项开始，向前遍历数组元素，并累计

var arr= [1, 2, 3, 4].reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(arr); // 10

every()

测试数组的所有元素是否都通过了指定函数的测试

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

some()

测试数组的某些元素是否通过了指定函数的测试

var arr = [1, 2, 3, 4].some(item => item > 3);
console.log(arr); // true

toString()

将数组转换为一个字符串，数组中的每个元素都会被转换为字符串，并用逗号分隔。这在需要将数组内容以字符串形式呈现时很有用

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

toLocaleString()

返回一个表示数组元素的本地化字符串版本。对于日期对象等复杂类型，它会调用各自的 toLocaleString() 方法，而不是简单地将元素转换为字符串。这样可以根据用户的所在地区显示合适的日期格式，提供了更好的本地化支持

let dates = [new Date(), new Date(2022, 0, 1)];
let dateStrings = dates.toLocaleString();
console.log(dateStrings); // "12/15/2021, 1/1/2022"

entries()

返回一个数组迭代器对象，包含数组中每个索引的键值对

let arr = arr.entries();
for (let entry of arr) {
  console.log(entry);
}
// [0, "a"]
// [1, "b"]
// [2, "c"]

keys()

返回一个数组迭代器对象，包含数组中每个索引的键

let arr = arr.keys();
for (let key of arr) {
  console.log(key);
}
// 0
// 1
// 2

values()

返回一个数组迭代器对象，包含数组中每个索引的值

var arr = arr.values();
for (let value of arr) {
  console.log(value);
}
// "a"
// "b"
// "c"

from()

从类数组对象或可迭代对象中创建一个新的数组实例

var arr = Array.from('hello');
console.log(arr); // ["h", "e", "l", "l", "o"]

of()

根据传入的参数创建一个新数组

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

isArray()

判断是否是一个数组

var arr = [1, 2, 3, 4, 5, 6]
console.log(Array.isArray(arr)) // true
var arr1 = 'zhangsan'
console.log(Array.isArray(arr1)) // false

二、类型转换

数组转字符串：

使用 join() 方法将数组转换为字符串并使用指定的分隔符连接数组元素

var arr = ["jack", "rose", "pink"];
console.log(arr.join('')); // jackrosepink
console.log(arr.join('-')); // jack-rose-pink

使用 toString() 方法将数组转换为字符串

var arr = [1, 2, 3];
var str = arr.toString();
console.log(str); // "1,2,3"

字符串转数组：

字符串使用 split() 方法将字符串分割为一个新数组

var str = "hellow";
var arr = str.split('');
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

使用扩展运算符(...)将字符串或伪数组转换为字符数组

var str = "hello";
var arr = [...str];
console.log(arr); // ["h", "e", "l", "l", "o"]
// 伪数组转换成数组
var list = document.querySelectorAll('div') // 获取到html中所有的div元素
var arr1 = [...list]
console.log(arr1) // 打印结果为数组形式的div节点列表

以上示例演示了如何使用不同的数组方法在JavaScript中操作数组，以及常见的有关数组的类型转换，希望能对你们有所帮助！