07_换种方式学javascript

学了两天了，说实话，什么都没记住，什么也没有学会。不知道怎么才能真正掌握javascript。一直在跟着菜鸟教程或w3c走，虽然教程很详细，但总是觉得学不会。所以我思考了一下，决定换种方式来学习Js，准备直接啃Js的手册，将它所有的对象和方法都过一遍。

不说废话了，开始学了。

Array对象

就是咱们经常说的数组。

定义

或者说是初始化

普通的数组 定义代码如下：

1.第一种方法
var array = new Array();
array[0] = "我";
array[1] = "学不会";

2.第二种方法
var array = new Array("才","怪");

3.第三种方法
var array = ["难","受","真难学"];

但是我们肯定知道，一个普通的数组，肯定满足不了我们后续的使用，所以我们要学一下如何定义一个二维数组，或者多维数组，

多维数组 定义请看下面：

1.定义一个二维数组
var secondArray = [[]];

2.第二种方法
var secondArray = new Array();
for(let i=0;i<length;i++) {
    secondArray[i] = new Array();
}

3.第三种方法(刚接触会比较难理解)
var secondArray = new Array(10).map(item => new Array(10));
//这句代码就创建了一个 10*10 的二维数组，其实和第二种方法是一样的。

4.第四种方法
var secondArray = new Array().fill(new Array());
//fill()函数是将该数组中的所有元素填充为该函数的参数。

5.多维数组与二维数组的定义是一样的，无非是多循环几次。

访问

或者说是遍历，一个意思。

1.访问数组中的某个值
var word = array[1];
//注意到了吧，只要知道下标，我们就直接去找这个值。

2.修改数组中的某个值
array[1] = word;
//同样的，只要我们知道这个元素在哪，我们就能修改它。

3.遍历数组
for(let i=0;i<array.length;i++) {
    xxx = array[i];
}

4.还有一种遍历方法
array.forEach((item,index,array) => {
    xxx = item;
    xxx = index;
    array[index]  ==  item;
    ...
})

//forEach遍历数组中的每个元素，并且执行括号内的函数，传的三个参数分别是 (子元素，位置，原数组)

属性

接下来我们学一下数组的属性，菜鸟教程上的参考手册给的属性有三个，分别是：

属性	作用
constructor	返回创造数组对象的原型函数
length	返回数组的长度，即元素个数
prototype	允许你向数组对象添加属性和方法

接下里我们分别来讲一下这三个属性的用法。

1.constructor
var array = new Array();
console.log(array.constructor)
// 输出的值就是    function Array() { [native code] }

2.length
var array = new Array(10).fill(0);
// 这句话是定义一个长度为10，并且填充为0的一个数组
var arrayLength = array.length;
// 10

3.prototype
Array.prototype.myAttribute = "哈啊，这是我自己给数组定义的属性";
Array.prototype.myFunction(e) {
    xxx
    这是我自己的方法;
}
// 创建一个数组，就可以使用自己定义的方法了
var array = new Array();
array.myFunction(e);
console.log(array.myAttribute);
// 哈啊，这是我自己给数组定义的属性

方法

接下来是重中之重了，到了数组的操作函数了

先放一张菜鸟教程的原文表格，转载自（JavaScript Array 对象 | 菜鸟教程），侵权删。

concat()	连接两个或更多的数组，并返回结果。
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()	返回数组的可迭代对象。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
from()	通过给定的对象中创建一个数组。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

然后我们挨个讲解，尝试。

1.concat(array1, array2, ..., arrayn)

拼接数组，新的数组会拼接在原数组的末尾，并且会返回一个新数组，不会影响原数组

var first = ["I","'","m"];
var second =  ["Hero"];
var newArray = first.concat(second);
// 输出结果--->  I,',m,Hero

2.copyWithin(target, start, *end)

拷贝指定位置的值并赋值给另一指定位置，*号表示可选，默认end为length

var array = ["hello","world","hi","see"];
array.copyWithin(2,0,*2)
// hello,world,hello,world

3.entries()

返回数组的迭代对象，该对象包含数组的键值对(key/value)

var array = ["apple","orange","banana"];
var arrayObject = array.entries();
console.log(arrayObject.next())
// {value: [0,"apple"], done: false}

4.every(function(item, *index, *array), *thisValue)

检测数组所有元素是否都满足某条件(由函数指定)，如果有一个元素不满足，则返回false，并且不再对剩余元素进行检测

var array = [15,30,18,25];
// 判断数组中元素是否都大于16
var res = array.every((item, index, array) => {
    return item > 16;
})
console.log(res)
// false

5.fill(value, *start, *end)

用一个值来填充数组，即将数组所有元素的值都赋值为该值。

var array = new Array(10).fill(1,*0,*9)
// 0是起始位置，9是结束位置，可选
console.log(array)
// (10) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

6.filter(function(item, *index, *array), *thisValue)

将数组中满足条件的元素放在新数组中，并返回新数组。感觉这个应该是挺有用的，类似于筛选器？

var array = [10,16,0,20,15];
var newArray = array.filter(item => {
    return item > 15;
})
console.log(newArray)
// (2) [16, 20]

7.find(function(item, *index, *array), *thisValue)

与filter作用相似，但只返回符合条件的第一个元素，说实话我感觉有filter()，这个函数意义不大。 

var array = [10,16,0,20,15];
var value = array.find(item => {
    return item > 15;
})
console.log(value)
// 16

8.findIndex(function(item, *index, *array), *thisValue)

和find()作用类似，但返回符合条件的第一个元素位置

var array = [10, 16, 0, 20, 15];
var index = array.findIndex(item => {
    return item > 15;
})
console.log(index)
// 1

9.forEach(function(item, *index, *array), *thisValue)

调用数组的每一个元素，并将元素传递给回调函数

var array = [10, 11, 12, 13];
var sum = 0;
array.forEach(item => {
    sum += item;
})
console.log(sum)
// 46
// forEach方法里操作对象生效，想要操作里面的基本数据类型，就用array[i]的形式直接操作数组。

10.Array.from(object, *myFunction, *thisValue)

通过传入一个对象，生成一个新的数组。

var oldArr = [1,15,20];
var newArr = Array.from(oldArr, item => item * 10);
console.log(newArr)
// (3) [10, 150, 200]

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

var oldArr = 150;
var newArr = Array.from(oldArr);
console.log(newArr)
// []

11.includes(searchValue, *fromIndex)

判断数组是否包含一个指定的值，如果是返回 true，否则false。可选参数为从哪开始查

var array = "wo shi ren";
console.log(array.includes("ren"));
// true

var array = ["apple","hello"];
console.log(array.includes("app"))
// false

var array = [1,2,3];
console.log(array.includes(2))
// true

12.indexOf(item, *startIndex)

与includes()有些类似，判断数组是否有一个指定的元素，如果是返回该元素第一次出现的位置，否则返回 -1。可选参数为从哪开始查。

var array = "wo shi ren";
console.log(array.indexOf("ren"));
// 7

var array = ["apple","hello"];
console.log(array.indexOf("app"))
// -1

var array = [1,2,3];
console.log(array.indexOf(2))
// 1

13.Array.isArray(obj)

判断该对象是否为数组。如果对象是数组返回 true，否则返回 false。

var array = [1,2,3];
console.log(Array.isArray(array));
// true

var array = "isArray";
console.log(Array.isArray(array));
// false

var array = 123;
console.log(Array.isArray(array));
// false

14.join(*separator)

把数组中的所有元素转换一个字符串。参数为可选分隔符。

var array = ["apple","orange","banana"];
var str = array.join('-');
console.log(str);
// apple-orange-banana

15.keys()

这个和第3个函数 entries() 功能类似，也是生成迭代对象，不过只包含键。

var array = [1,2,3,4];
console.log(array.keys().next());
// ↓ {value: 0, done: false}
//     done: false
//     value: 0
//     [[Prototype]]: Object

16.lastIndexOf(item, *startIndex)

与第12个函数 indexOf(item, *startIndex) 功能类似，找到数组中指定元素的最后一个元素位置。可选参数为开始查询位置。

var array = [1,2,3,4,5,1,0];
console.log(array.indexOf(1));
// 0
console.log(array.lastIndexOf(1));
// 5

17.map(function(item, *index, *array), *thisValue)

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

var array = new Array(5).fill(9);
function myFunc(e) {
    return e / 3;
}
var newArray = array.map(myfunc);
console.log(newArray);
// (5) [3, 3, 3, 3, 3]

使用箭头函数
var newArray = array.map(item => {
    return item / 3;
});
console.log(newArray);
// (5) [3, 3, 3, 3, 3]

18.pop()

删除数组的最后一个元素并返回删除的元素。此方法会改变数组的长度，即 length

var array = [1,2,3,4,5];
console.log(array.pop());
console.log(array.pop());
// 5
// 4

19.push(item1, item2, ..., itemX)

向数组的末尾添加一个或多个元素，并返回新的长度。

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

20.reduce(function(total, item, *index, *array), *initialValue)

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。total为初始值或计算完成后的返回值；可选参数为传递给函数的初始值。

var array = [1,2,3,4,5];
var total = array.reduce((total,item) => {
    return total + item;
})
console.log(total);
console.log(array);
// 15
// (5) [1, 2, 3, 4, 5]

21.reduceRight(function(total, item, *index, *array), *initialValue)

与 reduce(function(total, item, *index, *array), *initialValue) 功能类似，但从右向左进行计算。

22.reverse()

颠倒数组中元素的顺序，会直接改变原数组。

var array = [1,2,3,4,5];
console.log(array.reverse());
// (5) [5, 4, 3, 2, 1]

23.shift()

与pop作用相似，但是方向相反。把数组的第一个元素从其中删除，并返回第一个元素的值，此方法也改变数组长度。

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

24.slice(start, *end)

从已有的数组中返回选定的元素。或者截取选定的字符串的某个部分。截取部分不包括start。

var str = "Hello World!";
console.log(str.slice(6));
// World!
console.log(str.slice(6,11));
// World

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

25.some(function(item, *index, *array), *thisValue)

与every()函数作用相反，检测数组中的元素是否满足指定条件（函数提供）。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

var array = [1,2,3,4,5];
var res = array.some(item => {
    return item == 5;
})
console.log(res)
// true

26.sort(sortfunction)

对数组的元素进行排序。参数必须为函数，如不填则默认为字母升序。

1.数字排序（升序）:
var array= [40,100,1,5,25,10];
array.sort(function(a,b){return a-b});
console.log(array)
// (6) [1, 5, 10, 25, 40, 100]

2.数字排序（降序）:
var array= [40,100,1,5,25,10];
array.sort(function(a,b){return b-a});
console.log(array)
// (6) [100, 40, 25, 10, 5, 1]

27.splice(index,*howmany,*item1,.....,itemX)

用于添加或删除数组中的元素。第一个参数为起始位置，第二个参数为删除元素个数（可选），第三个至n个参数为添加的元素（可选）。

1.添加元素
var array = [1,2,3,4,5];
var num = [7,8,9,10];
array.splice(5,0,6,num);
console.log(array);
// (7) [1, 2, 3, 4, 5, 6, Array(4)]
// Array(4) (4) [7, 8, 9, 10]

array.splice(5,0,6,...(num));
// 解构数组
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2.移除第3，4个元素，并添加元素
var array = [1,2,3,4];
var nums = [5,6];
array.splice(2,2,...nums);
console.log(array);
// (4) [1, 2, 5, 6]

28.toString()

将数组转化为字符串，并返回结果

var array = ["orange","and","apple"];
console.log(array.toString());
// orange,and,apple

29.unshift(item1,item2, ..., itemX)

与 shift() 作用刚好相反，向数组的开头添加一个或更多元素，并返回新的长度。

var array = [9,7,8,6,5];
var nums = [1,2,3,4];
array.unshift(...nums);
console.log(array);
// (9) [1, 2, 3, 4, 9, 7, 8, 6, 5]

30.valueOf()

数组对象的默认方法。返回 Array 对象的原始值。通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

var array = [1,2,3];
console.log(array);
// (3) [1, 2, 3]
console.log(array.valueOf());
// (3) [1, 2, 3]

Array对象的属性以及方法到此结束，把菜鸟教程都过了一遍，明天学Boolean对象，加油！