<!--作者:zhangfan
页面名称:数组的常用方法-->
<template>
<div class="topCon">
<el-button type="primary" @click="clickBtn">主要按钮</el-button>
</div>
</template>
<script>
export default {
name: "enterpriseDetail",
data() {
return {
tags: []
};
},
computed: {},
methods: {
clickBtn() {
var arr = [1, 2, 3, 4];
var arr2=[11,12,13]
//方法1 join()
// join() (数组转字符串)
// join对数组元素以指定的分隔符进行分隔,参数为空,默认以“,”进行分隔。返回值是分隔后形成的字符串
console.log(arr.join()); // 输出为: 1,2,3,4
console.log(arr.join("-")); // 输出为: 1-2-3-4
console.log(arr); // 输出为: [1,2,3,4] 原数组不变
// join() (实现重复字符串)
console.log(this.repeatStr("你好",3)); // 输出为: 你好你好你好
//2 push()和pop()(数组尾操作)
// push():方法可向数组的末尾添加一个或多个元素,并返回新的长度。
var push_arr=arr.push("Tom","Sun");
console.log(push_arr) // 输出为: 6
console.log(arr) // 输出为: [1, 2, 3, 4, "Tom", "Sun"] 原数组发生改变
//pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。
var pop_arr=arr.pop();
console.log(pop_arr) // 输出为: Sun
console.log(arr) // 输出为: [1, 2, 3, 4, "Tom"] 原数组发生改变
// 3.shift() 和 unshift()(数组首操作)
// shift():方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
var shift_arr=arr.shift();
console.log(shift_arr) // 输出为: 1
console.log(arr) // 输出为: [2, 3, 4, "Tom"]
// unshift:将参数添加到原数组开头,并返回数组的长度。
var unshift_arr=arr.unshift("Jack");
console.log(shift_arr) // 输出为: 5
console.log(arr) // 输出为: ["Jack",2, 3, 4, "Tom"]
// 4.sort()(数组排序)
// sort()对现有数组进行排序,改变原始数组。此方法会在排序之前首先对数组的每一项调用toString()方法,再进行排序
console.log(arr.sort()) // 输出为: [2, 3, 4, "Jack", "Tom"]
console.log(arr) // 输出为: [2, 3, 4, "Jack", "Tom"]
// 5.reverse()(反转数组)
// reverse()颠倒数组元素顺序,改变原始数组,不会创建新数组。
console.log(arr.reverse()) // 输出为: ["Tom", "Jack", 4, 3, 2]
// 6.concat() (连接两个或多个数组)
// concat()连接两个或多个数组,返回被连接数组的副本,不会改变原始数组
var arr_concat = arr.concat(arr2);
console.log(arr_concat) // 输出为: ["Tom", "Jack", 4, 3, 2, 11, 12, 13]
console.log(arr) // 输出为: ["Tom", "Jack", 4, 3, 2]
// 6.slice()(数组截取)
// slice() 从已有数组中返回选定元素,此操作不会修改原始数组。
// start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
// end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
var arr_slice = arr.slice(0,3);
console.log(arr_slice) // 输出为:["Tom", "Jack", 4]
console.log(arr) // 输出为: ["Tom", "Jack", 4, 3, 2]
// 7.splice()
// splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。(该方法会改变原始数组)
// arr.splice(index , howmany , item1,.....,itemX)
// index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
// howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。
// item1, ..., itemX:可选。向数组添加的新项目。
// 返回值:含有被删除的元素的数组,若没有删除元素则返回一个空数组。
var arr_splice = arr.splice(0,3);
console.log(arr_splice) // 输出为: ["Tom", "Jack", 4]
console.log(arr) // 输出为: [3, 2]
var arr_spliceAdd = arr.splice(1,0,"小刚");
console.log(arr_spliceAdd) // 输出为: []
console.log(arr) // 输出为: [3,"小刚",2]
var arr_spliceAdd = arr.splice(1,1,"小刚2");
console.log(arr_spliceAdd) // 输出为: ["小刚"]
console.log(arr) // 输出为: [3,"小刚2",2]
// 7.indexOf()和 lastIndexOf()
// indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。
// lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。
console.log(arr.indexOf(3)) // 输出为: 0
console.log(arr.indexOf(6)) // 输出为: -1
console.log(arr.lastIndexOf(3)) // 输出为: 0
console.log(arr.lastIndexOf(6)) // 输出为: -1
// 8.forEach()(迭代方法)
// 这几个方法语法都一样,都不会改变原数组。
// forEach():对数组进行遍历循环,这个方法没有返回值。jquery()也提供了相应的方法each()方法。
// 语法:array.forEach(function(currentValue , index , arr){//do something}, thisValue)
// currentValue : 必需。当前元素
// index: 可选。当前元素的索引值。
// arr : 可选。当前元素所属的数组对象。
// thisValue: 可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
arr.forEach(function(currentValue,index,currentArr){
console.log(index+"--"+currentValue+"--"+(currentArr===arr)); // 0--3--true , 1--小刚2--true , 2--2--true
})
// 改写成箭头函数形式
arr.forEach((currentValue,index,currentArr)=>{
console.log(index+"--"+currentValue+"--"+(currentArr===arr)); // 0--3--true , 1--小刚2--true , 2--2--true
})
console.log(arr) // 输出为: [3, "小刚2", 2]
// 9.includes()(用来判断一个数组是否包含一个指定的值,返回 true或 false。)
console.log(arr.includes("小刚2")) // 输出为: true
console.log(arr.includes("小刚")) // 输出为: false
console.log(arr) // 输出为: [3, "小刚2", 2]
// 10.toString()(不会改变原数组,返回一个字符串,表示指定的数组及其元素。)
console.log(arr.toString()) // 输出为: 3,小刚2,2
},
repeatStr(str, n) {
return new Array(n + 1).join(str);
}
}
};
</script>
<style scoped lang="less">
</style>