Js-w3school（2020(1)

var person = [];

person[“firstName”] = “Bill”;

person[“lastName”] = “Gates”;

person[“age”] = 62;

var x = person.length; // person.length 将返回 0

var y = person[0]; // person[0] 将返回 undefined

在 JavaScript 中，数组使用数字索引。

在 JavaScript 中，对象使用命名索引。

10. 避免 new Array()

没有必要使用 JavaScript 的内建数组构造器 new Array()

var points = new Array(); // 差

var points = []; // 优

比如，下面这个就会造成歧义：是一个数组有40个元素还是我们要一个只有一个元素的数组其值为40

var points = new Array(40); // 创建包含 40 个未定义元素的数组！！！

11. 如何识别数组

Array.isArray(fruits); // 返回 true

自定义isArray函数：

function isArray(x) {

return x.constructor.toString().indexOf(“Array”) > -1;

}//假如对象原型包含单词 “Array” 则返回 true。

instanceof 运算符返回 true：

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits instanceof Array // 返回 true

12.JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串

13. join() 方法也可将所有数组元素结合为一个字符串，split（）的逆运算

var fruits = [“Banana”, “Orange”,“Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = fruits.join(" * ");

// Banana * Orange * Apple * Mango

14 pop() 方法从数组中删除最后一个元素, pop() 方法返回“被弹出”的值

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

var x = fruits.pop(); // x 的值是 “Mango”,并弹出原数组

15 push() 方法（在数组结尾处）向数组添加一个新的元素，返回新数组的长度

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits.push(“Kiwi”); // 向 fruits 添加一个新元素

var x = fruits.push(“Kiwi”); // x 的值是 5

16.shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串

17. unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素。unshift() 方法返回新数组的长度。

18. 关系：

·pop()和push()作用于数组尾

·shift() 和unshift()作用于数组头

·pop()和shift()移除，返回移除的值

·push()和unshift()添加，返回添加后的长度

19. JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

delete fruits[0]; // 把 fruits 中的首个元素改为 undefined

会造成空洞，不建议

20. splice() 方法可用于向数组添加新项

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits.splice(2, 0, “Lemon”, “Kiwi”);

//翻译为：在索引为2的位置，删除0个，插入后面元素。插入

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits.splice(2, 2, “Lemon”, “Kiwi”);

//翻译为：在索引为2的位置，删除2个，插入后面元素。替换

能够使用 splice() 在数组中不留“空洞”的情况下移除元素

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits.splice(0, 1); // 删除 fruits 中的第一个元素

21.concat() 方法通过合并（连接）现有数组来创建一个新数组

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数

22. slice() 方法用数组的某个片段切出新数组。slice() 方法创建新数组。它不会从源数组中删除任何元素。一个参数时候要右边，当有两个参数时取两个数中间的一段。

23. sort() 方法以字母顺序对数组进行排序

24. reverse() 方法反转数组中的元素

25.sort（）默认对于字符串排序，当数字时候，要采用比较函数来修正。

升序排序：

var points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b});

当比较 40 和 100 时，sort() 方法会调用比较函数 function(40,100)。该函数计算 40-100，然后返回 -60（负值）。排序函数将把 40 排序为比 100 更低的值。

降序排序：

var points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return b - a});

26.随机排序（应用比较函数）

var points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return 0.5 - Math.random()});

27.您可以使用 Math.max.apply 来查找数组中的最高值

function myArrayMax(arr) {

return Math.max.apply(null, arr);

}

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

但是，最快的解决方法是使用“自制”方法，函数遍历数组，用找到的最高值与每个值进行比较

function myArrayMax(arr) {

var len = arr.length

var max = -Infinity;

while (len–) {

if (arr[len] > max) {

max = arr[len];

}

}

return max;

}

找最小值只需要Min替换Max

28. JavaScript 数组经常会包含对象

var cars = [

{type:“Volvo”, year:2016},

{type:“Saab”, year:2001},

{type:“BMW”, year:2010}];

sort() 方法仍可用于对数组进行排序，以数值排序

cars.sort(function(a, b){return a.year - b.year});

以字符排序

cars.sort(function(a, b){

return (a.type.toLowerCase())>=(b.type.toLowerCase())?1: -1;});

29. 遍历Array.forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）

var txt = “”;

var numbers = [45, 4, 9, 16, 25];

numbers.forEach(myFunction);

function myFunction(value, index, array) {

txt = txt + value + “
”;

}

大致可以解释为：对象.forReach（被调函数）

30. 映射Array.map()

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

包括三个参数

• 项目值

• 项目索引

• 数组本身

var numbers1 = [45, 4, 9, 16, 25];

var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {

return value * 2;

}

不使用的时候可以省略即：function myFunction(value)

31. 过滤Array.filter()

filter() 方法创建一个包含通过测试的数组元素的新数组

包括三个参数

• 项目值

• 项目索引

• 数组本身

var numbers = [45, 4, 9, 16, 25];

var over18 = numbers.filter(myFunction);

function myFunction(value) {

return value > 18;

}

32.缩减Array.reduce()

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduce() 方法在数组中从左到右工作。

reduce() 方法不会减少原始数组。

• 总数（初始值/先前返回的值）

• 项目值

• 项目索引

• 数组本身

var numbers1 = [45, 4, 9, 16, 25];

var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {

return total + value;

}

total一开始是第一个数，之后是之前的返回值。

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记