<!--作者：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>