数组中常用的方法总结

6、fill() 用一个固定的值填充一个数组从起始到终止索引内的全部元素（不包括终止元素）

• 参数：arr.fill(value[,start[,end]])

• 返回值：修改后的数组，会改变原数组

var arr1 = [0,1,2,3,4,5,6,7,8];

console.log(arr1.fill(‘a’, 2,7)); //[0,1,‘a’,‘a’,‘a’,‘a’,‘a’,7,8]

var arr3 = [0,1,2,3,4,5,6,7,8];

console.log(arr3.fill(‘b’)); //[‘b’,‘b’,‘b’,‘b’,‘b’,‘b’,‘b’,‘b’,‘b’];

7、filter() 创建一个新数组，包含了通过测试的所有元素

• 参数：arr.filter(callback[,thisAge]); 第一个参数为执行函数，第二个是函数的this

callback被传入三个参数，元素值，元素索引，原数组

• 返回值：新数组，不会改变原来的数组

8、find() 返回数组中满足函数测试的第一个值

• 参数：arr.find(callback[, thisArg])

• 返回值：有一个符合则返回该值，反之返回undefined 不会改变原数组

var arr = [1,2,3,4,5,6];

function nfewr(element){

return element%2 == 0;

}

console.log(arr.find(nfewr)); //2

9、findIndex() 和find()有一些类似，该函数返回的是符合条件的索引

10、flat() 深度遍历数组，并将所有元素与遍历道德子数组中的元素合并为一个新元素返回

• 参数：depth 深度

• 返回值：返回一个新数组，不改变原有的数组

var m = [1,2,[3,4,[5,6,7]]];

console.log(m.flat()); //[1,2,3,4,[5,6,7]];

console.log(m.flat(3)); // [1,2,3,4,5,6,7]

11、flatMap() 将结果压缩成一个新的数组

• 参数: callback(currentValue)

• 返回值：返回一个新的数组，深度为1

var m = [1,2,3,4];

function fun1(currentValue){

return [[currentValue*2]];

}

console.log(m.flatMap(fun1)); //[[1],[2],[3],[4]]

var arr2 = [“你好呀”,“”",“一起出去玩吧！”];

console.log(arr2.flatMap((x)=>x.split(“”))); //[“你”, “好”, “呀”, “一”, “起”, “出”, “去”, “玩”, “吧”, “！”]

12、forEach() 对数组中的每个元素执行一次提供的函数

• 参数：arr.forEach(callback[, thisArg]) ;

• 返回值：undefined 不会改变原数组

var arr = [1,2,3,4];

function fun2(item){

console.log(item*2);

}

console.log(arr.forEach(fun2));

13、includes() 判断数组是否包含一个指定的值，如果存在，返回true，反之false

• 参数：arr.include(valueToFind[, fromIndex]) 第二个参数是从该位置开始查找

• 返回值：

var arr = [1,2,3,4,5];

console.log(arr.includes(8)); //false

console.log(arr.includes(1,3)); //false

高阶

1、 concat 用于连接俩个或俩个以上数组，并保留引用

var num1 = [1,2,3];

var num2 = [4,5,6];

var num3 = num1.concat(num2); //[1,2,3,4,5,6]

num1.push(5);

console.log(num4); // [1,2,3,4,5,6] 合并基本类型不会改变num3

var arr1 = [[1,2,3],4,5];

var arr2 = [5,6];

var arr3 = arr1.concat(arr2); // [[1,2,3],4,5,5,6];

arr1[0].push(9); //arr1[[1,2,3,9],4,5]

//由于arr1[0]是应用类型，所以当arr1[0]改变时，就会改变arr3

console.log(arr3); // [[1,2,3,9],4,5,5,6];

• 返回值：新的数组实例

2、entries 返回一个新的Array Iterator对象

var m = [‘a’,‘b’,‘c’,‘d’];

var it = m.entries();

console.log(it); //Array Iterator {}

//此时就需要使用next()

console.log(it.next());

/*

{

done: false

value: (2) [0, “a”]

}

使用一次next就会一次向后遍历一次,done表示迭代器是否完成

*/

for(var i=0;i<m.length+1;i++){

var temp = it.next();

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

CBEs-1726039066346)]

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中…(img-v3JQowDc-1726039066349)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。