JavaScript中数组的方法和函数作用域问题

1 -函数作用域问题-:

函数的外层作用域，在函数创建时就已确定，和函数的调用位置无关

var name = '嘿嘿';

// 函数的外层作用域，在函数创建时就已确定，和函数的调用位置无关

// JS中的作用域被称为 词法作用域

function fn() {

console.log(name);

}

function fn2() {

var name = '哈哈';

fn();

}

fn2();//调用后-输出-嘿嘿

2 数组的其中几种方法1:

var arr = ['孙悟空', '猪八戒', '沙和尚', '唐僧'];

// console.log(arr[arr.length - 1]);

// Array.isArray() 用来检查一个对象是否是一个数组

// console.log(Array.isArray(arr));

// console.log(Array.isArray(1));

/*//---会影响到原数组的方法:

pop()

删除并返回数组的最后一个元素。

push()

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

arr[arr.length] = xxx;

shift()

删除并返回数组的第一个元素。

unshift()

在数组的开头增加一个或多个元素，并返回数组的新长度。

*/

arr = ['孙悟空', '猪八戒', '沙和尚', '唐僧'];

var result = arr.pop();//删除数组中的最后一个元素

result = arr.push('白骨精','玉兔精');

result = arr.shift();

result = arr.shift();

result = arr.unshift('铁扇公主','女儿国王');

// result = arr.unshift('女儿国王');

console.log('result =', result);

console.log(arr+'');

3:数组的方法2:

//---不会影响原数组的方法:

var arr = ['孙悟空', '猪八戒', '沙和尚', '唐僧'];

var arr2 = ['牛魔王','红孩儿','铁扇'];

var arr3 = ['二郎神', '白龙马'];

/*

concat()

- 用来将多个数组连接为一个数组

- 该方法不会影响到原数组，而是将结果存储到一个新数组中返回

join()

- 将数组中的所有元素连接为一个字符串

- 需要一个字符串作为参数，这个字符串会作为元素的连接符

- 如果不知道参数，默认使用,作为连接符

indexOf()

lastIndexOf()

- 查询元素在数组中第一次出现的位置

- 参数：

第一个，要查询的元素

第二个，查询的起始位置

- 返回值：

如果找到了元素，则返回元素第一次出现的索引

如果没有找到元素，则返回-1

- lastIndexOf()它会从最后一个元素向前找

*/

var result = arr.concat(arr2, arr3, '哈哈');

arr = ['a','b','c','d'];

result = arr.join('');//'a,b,c,d'

arr = ['a','c','b','d','e','f','a','a'];

result = arr.indexOf('g', 1);

result = arr.lastIndexOf('a');

console.log(result);

4 :数组的方法3:

/*

slice(起始位置, 结束位置)

- 抽取当前数组中的一段元素组合成一个新数组。

- 该方法不会影响到原来的数组，而是返回一个新数组

- 参数：

第一个参数，截取的开始位置（包括开始位置）

第二个参数，截取的结束位置（不包括结束位置）

- 如果省略第二个参数，则会一直截取最后

- 如果索引是负数，则表示倒数第几个

*/

var arr = ['孙悟空', '猪八戒', '沙和尚', '唐僧'];

var result = arr.splice(1,3);

result = arr.slice(-4,-1);

// console.log(result+'');

/*

splice()

在任意的位置给数组添加或删除任意个元素。

- 该方法是一个破坏性的方法，调用会会影响到原来的数组

- 参数：

第一个参数，表示删除的起始位置

第二个参数，表示删除元素的个数

第三个参数，表示要添加的新元素

- 返回值：

被删除的元素

- 功能：

- 删除并返回指定元素

arr.splice(开始索引, 删除数量);

- 替换元素

arr.splice(开始索引, 删除数量, 新元素, 新元素);

- 在指定位置插入新元素

arr.splice(插入位置, 0, 新元素, 新元素)

*/

arr = ['孙悟空', '猪八戒', '沙和尚', '唐僧'];

result = arr.splice(1,0,'牛魔王', '红孩儿');

console.log(result+'')

console.log(arr+'');

5 数组遍历方法4:

forEach() 也是用来遍历数组的一个方法（只适用于数组）

- 需要一个回到函数作为参数

- 回调函数会执行多次，数组里有几个元素就会执行几次

每次调用时，都会将一个元素的信息已参数的形式传递进函数

可以通过定义参数，来获取信息

- 回调函数中，一共会接收到三个参数：

第一个参数，当前元素的值

第二个参数，当前元素的索引

第三个参数，被遍历的数组

var arr = ['孙悟空', '猪八戒', '沙和尚', '唐僧'];

// arr.forEach(function (value, index, arr) {

// console.log(value, index, arr);

// });

arr.forEach(((value, index, array) => console.log(value)));

6:数组去重的2种方法:

多种方式-》

1.遍历删除重复元素

2.遍历添加不重复的元素生成新数组

3.用 ES6的set 方法去重

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

//获取到数组中的每一个数

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

//nums[i] 表示当前取出的数字

//要将该数字和其他数字进行比较

//获取到当前数字后的所有数字

for(var j=i+1; j<nums.length; j++){

//nums[i] nums[j]

// 比较两个数是否相等

if(nums[i] === nums[j]){

//两个数字相等，说明有重复的情况出现，删除重复数字

nums.splice(j, 1); // j去除新数组中的重复内容,从一开始往后的所有.

//删除元素后，其后的元素会自动向前补位，这样将会导致少比较一个元素

//需要将当前的位置在比较一遍

j--;

}

}

}

console.log(nums+'');

nums = [1,2,2,3,4,5,5,5,4,5,6];

//先创建一个新数组

var newNums = [];

//遍历老数组

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

//判断新数组中是否存在该元素

if(newNums.indexOf(nums[i]) === -1){

// 如果新数组中没有该值，则将其添加到新数组中

newNums.push(nums[i]);

}

}

console.log(newNums+'');

7引用函数和接收函数返回值的区别:

function fn(callback) {

//调用函数

callback();

// console.log(callback);

}

function test() {

console.log('test执行了~~~');

}

// test 表示函数对象，以test作为参数时，是将函数对象作为参数传递

fn(test);

test() // 表示调用函数，函数执行后会有返回值，test()相当于将函数的返回值作为参数传递

fn(test());

8 数组方法5:

/* every()

- 用来检查数组中的每个元素是否符合某个条件

如果所有的元素都符合条件，它会返回true，否则返回false

- 它需要一个回调函数作为参数，回调函数需要返回一个布尔值

如果返回true，则表示元素满足条件

如果返回false，则表示元素不满足条件

some()

- 用来检查数组中是否有元素符合某个条件

*/

var arr = [3,4,5,6,7,8];

var result = arr.every(function (ele) {

return ele > 6;

})

result = arr.every(ele => ele>6);

result = arr.some(ele => ele>6);

// console.log(result);

/*

filter()

- 用来获取数组中所有的符合条件的元素

*/

result = arr.filter(a => a != null && a%2===0);

/*

map()

- 用来对数组中的每一个元素做一个操作，返回一个新数组

*/

arr = [3,4,5,6,7,8];

var result = arr.map(function (a) {

if(a % 2===0){

return a ** 2;

}else{

return a;

}

});

/*

reduce()

- 将数组中的所有元素汇总为一个值

- 需要回调函数作为参数，参数有两个：

第一个参数，表示累加器

第二个参数，表示当前元素

*/

arr = [3,4,5,6,7,8];

result = arr.reduce(function (a, b) {

return a + b;

});

console.log(result);

//----------

// find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

//在数组每一项上执行的函数，接收 3 个参数：

//element当前遍历到的元素。

//index可选当前遍历到的索引。

//array可选数组本身。

// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

// const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));

针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:element当前元素。index当前元素的索引。array调用findIndex的数组。

9数组方法6:

/*

reverse()用来对数组进行反转操作

- 该方法会影响到原来数组

*/

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

arr.reverse();

/*

sort() 用来对数组进行排序

- sort()在排序时默认是安装Unicode编码进行排序的

即使你数组中的元素是数字，它也是这么做的

- 如果希望在按照数字的大小进行排序，则可以自己通过回调函数来指定排序规则

*/

arr = [3,1,2,4,5,6,8,9,7,10];

// arr = ['c','d','a','e','f','g'];

arr = [3, 4];

/*

sort()中的回调函数，用来指定元素的排列规则

它会被多次调用，每次调用时会传递数组两个元素作为参数

可以定义两个参数来接收元素

两个元素具体是谁不确定，但能确定的是a在数组中位于b的后边（只适用于新版的Chrome）

sort会根据回调函数的返回值，来决定两个元素是否交换位置

如果返回的是负值，则两个元素会交换位置

如果返回的是正值，则两个元素的位置不变

如果返回0，表示两个元素的值的相等，位置不变

在其他的浏览器中，规则和新版的Chrome完全相反，但是使用时没有任何区别

*/

arr = [3,1,2,4,5,6,8,9,7,10];

// arr.sort(function (a, b) {

// //b,a

// // // 希望小的数字在前

// // if(a > b){

// // // 后边的数字大于前边的数字

// // return 1;

// // }else if(a === b){

// // //两个数字相等

// // return 0;

// // }else{

// // // 后边的数字小

// // return -1;

// // }

//

//

// // 希望大的数字在前

// if(a > b){

// // 后边的数字大于前边的数字

// return -1;

// }else if(a === b){

// //两个数字相等

// return 0;

// }else{

// // 后边的数字小

// return 1;

// }

//

// });

arr.sort(function (a, b) {

// 如果返回a-b，则表示数字升序排列

// return a - b;

// 如果返回b-a，则表示数字降序排列

return b - a;

});

console.log(arr+'');

// fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

const array1 = [1, 2, 3, 4];

console.log(array1.fill(0, 2, 4));

console.log(array1.fill(5, 1));

console.log(array1.fill(6));

//includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false

const array1 = [1, 2, 3];

console.log(array1.includes(2));// true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));//true

console.log(pets.includes('at')); //false

//keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

const array1 = ['a', 'b', 'c'];

const iterator = array1.keys();

for (const key of iterator) {

console.log(key);

} //0, 1,2

// reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(

(accumulator, currentValue) => accumulator.concat(currentValue)

);

console.log(array1);

// expected output: Array [4, 5, 2, 3, 0, 1]

// values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

const array1 = ['a', 'b', 'c'];

const iterator = array1.values();

for (const value of iterator) {

console.log(value);

} //’a’,’b’,’c’

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！