vue框架前置知识数组常用方法(基于es6) ①增删改查 arr.push()：往数组最后添加元素，返回值是数组长度 a

数组常用方法(基于es6)

①增删改查

arr.push()：往数组最后添加元素，返回值是数组长度
arr.unshift()：往数组最前添加元素，返回值是数组长度
arr.shift()：删除数组的第一个元素，返回值是删除的元素
arr.pop()：删除数组的最后一个元素，返回值是删除的元素

arr.splice()：用法一：

let arr = [10,20,30,40,50];
let res = arr.splice(2,1,60); //表示在第index=2的地方删除一个，换成60
//res是被删除元素的数组[30]

用法二：

let arr = [10,20,30,40,50];
let res = arr.splice(2,1); //表示在第index=2的地方删除一个元素
//res是被删除元素的数组[30]

arr.join()：arr.join(",")表示用逗号把数组连接成一个字符串
arr.reverse()：反转数组

arr.sort()：arr.sort((a,b)=>a-b)升序排列，b-a为降序排列

//配合对象使用
let pArr = [
            { name: '张三', age: 18 },
            { name: '李四', age: 15 },
            { name: '王五', age: 22 }]
//根据年龄排序  a和b就是数组中相邻的元素
pArr.sort((a, b) => {return a.age - b.age})
console.log(pArr);

②数组迭代

arr.forEach()：对数组进行遍历循环，参数是function类型，这个传入的方法参数为(遍历的数组内容,对应的索引,数组本身)

const arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

arr.map()：理解成Python中的生成数组就好

const arr = [1, 2, 3, 4, 5];
const arr2 = arr.map(function(item){
    return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

arr.filter()：为函数执行一个具有过滤功能的函数，返回过滤后符合规则的数组

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const arr2 = arr.filter(function(x, index) {
    return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

arr.some()：判断数组中是否有有元素满足条件，只要有一个满足就返回true

const arr = [1, 2, 3, 4, 5];
const arr2 = arr.some(function(x) {
    return x < 3;
}); 
console.log(arr2); //true
const arr3 = arr.some(function(x) {
    return x < 1;
}); 
console.log(arr3); // false

arr.every()：必须所有元素都符合，否则返回false

const arr = [1, 2, 3, 4, 5];
const arr2 = arr.every(function(x) {
    return x < 10;
}); 
console.log(arr2); //true
const arr3 = arr.every(function(x) {
    return x < 3;
}); 
console.log(arr3); // false

③创建数组

arr.from() 第一个参数是一个类数组对象，是一个可迭代的结构或者一个有length属性和可索引元素的结构 第二个是可选的映射函数 第三个参数暂时用不到，且不适用于箭头函数形式的映射函数
```
Array.from({ length: 10 }, (item, index) => index); //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
```
arr.of()：传入一组参数后把参数转为数组 ④类型检测
arr.instanceof()
arr.isArray()
arr.findindex()
arr.reduce() ⑤数组复制和填充
arr.fill()

const list = [0,0,0,0,0];
list.fill(5); //[5,5,5,5,5]
list.fill(6,3); //用6填充索引大于3的元素 [5,5,5,6,6]
list.fill(7,1,3); //用7填充索引[1,3)之间的元素 [5,7,7,6,6]

arr.copyWithin()

let ints;
reset = () => ints = [0,1,2,3,4,5,6,7,8,9];
//reset为ints

// 从inits中复制0开始的内容，插入到索引5的位置
// 在源索引或目标索引到达数组边界时停止
ints.copyWithin(5); //[0, 1, 2, 3, 4, 0, 1, 2, 3, 4]

// 从ints中复制索引5开始的内容，插入到索引0开始的位置
ints.copyWithin(0, 5); //[5, 6, 7, 8, 9, 5, 6, 7, 8, 9]

// 从int中复制索引0开始到索引3结束的内容
// 插入到索引4的位置
ints.copyWithin(4, 0, 3); //[0, 1, 2, 3, 0, 1, 2, 7, 8, 9]

⑥转换方法

arr.valueOf()：返回数组本身
arr.toString()：返回逗号拼接字符串
arr.toLocaleString()：得到一个逗号分隔的数组值的字符串，为了得到最终的字符串，会调用每个值的toLocaleString() 方法，而不是 toString() 方法 ⑦操作方法
arr.concat()：该方法首先会创建一个副本，将参数拼接到原数组形成一个新的数组，原数组不变
arr.slice()：同样是创建一个原数组截取的副本，原数组不改变

arr.splice()：很强大的方法，可以实现删除、插入和替换，原数组会改变

let arr = [1,3,5,7,9,11];
let arrRemove = arr.splice(0,2); //[1,3]
console.log(arr); //[5,7,9,11]

//splice(start,deleNum,...insertElem)
//deleNum=0的时候是插入，不等于0的时候可以用来进行替换

⑦查值

arr.indexOf()：正查，返回所查值的索引
arr.lastIndexOf()：反查，返回所查值的索引
arr.includes()：包含参数则返回true，反之为false ⑧断言函数(下面两个方法都是在找到第一个符合的值时不在继续向下找)
arr.find()
arr.findIndex()

const people = [
    {
        name: 'lazy',
        age: 25
    },
    {
        name: 'lazy',
        age: 23
    },
    {
        name: 'make',
        age: 20
    }
]

people.find((element, index, array) => element.age > 21); //{name: "lazy", age: 25}
people.findIndex((element, index, array) => element.age > 21); //0

箭头函数

1.首先箭头函数相当于匿名函数

// 箭头函数
let fn = (name) => {
    // 函数体
    return `Hello ${name} !`;
};

// 等同于
let fn = function (name) {
    // 函数体
    return `Hello ${name} !`;
};

2.参数数量：

没有参数

//没有参数，写空括号
let fn = () => {
    console.log('hello');
};

一个参数

//只有一个参数，可以省去参数括号
let fn = name => {
    console.log(`hello ${name}!`)
};

多个参数

    let fn = (val1, val2, val3, val4) => {
        return [val1, val2, val3, val4];
    }

3.函数体写法：

只返回一个变量或者是一个简单的表达式，可以省略大括号

let f = val => val;
let f = sum => a + b;

返回一个对象，括号不能省略

let getItem = id => ({
    id : id,
    name : 'gaozy'
});

函数体只有一条语句，且不需要返回值(最常用于回调函数)

let fn = () => void doesNotReturn();

箭头函数没有原型prototype，因此没有this指向 箭头函数不会创建自己的this，会继承外层第一个普通函数的this指向

//示例一
var id = 'Global';
//普通函数
function fn1() {
    setTimeout(function () {
        console.log(this.id)
    }, 1000);
}
//箭头函数
function fn2() {
    setTimeout(() => {
        console.log(this.id)
    }, 1000);
}

fn1.call({
    id: 'obj'
});//Global
fn2.call({
    id: 'obj'
});//obj

fn1外面没有包裹对象，所以他的this指向window对象，fn2中的this指向外层函数

//示例二
var id = 'Global';
var obj = {
    id: 'OBJ',
    a: function () {
        console.log(this.id)
    },//方法a普通函数定义
    b: () => {
        console.log(this.id)
    }//方法b用箭头函数定义
};
obj.a();//OBJ
obj.b();//Global

a中的this指向所在的对象OBJ，所以他的this指向OBJ对象，b是箭头函数，他的this一律指向外层普通函数，他外层没有普通函数，所以他的this指向window对象

关于this指向修改的问题 结论是箭头函数的this指向无法被修改，无论是使用call/apply/bind都不可以

var name = 'gaby'
var person = {
    name: 'gabrielle',
    say: function () {
        console.log('say hello', this.name)
    }, //普通函数
    say2: () => {
        console.log('say2 hello', this.name)
    } //箭头函数
}
person.say.call({  //say hello Mike
    name: 'Mike'
})
person.say2.call({ //say hello gaby
    name: 'Amy'
})

其实上面的话说的过于绝对了，不可以直接修改不代表间接修改也办不到