基础的JavaScript函数

Posted 风起了,风停了

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基础的JavaScript函数相关的知识,希望对你有一定的参考价值。

基础的javascript函数

  • 1.首字母大写
  • 2.去除数组重复项
  • 3.数组的排序
  • 4.闭包

1. 把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字(使用JavaScript的map函数)

var arr = [‘A‘, ‘B‘, ‘C‘];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印‘A‘, ‘B‘, ‘C‘
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});
function normalize(arr) {
    return arr.map(function(item,index){
    item=item.slice(0, 1).toUpperCase()+item.slice(1).toLowerCase();
    return item;
    })
}
normalize([‘adam‘, ‘LISA‘, ‘barT‘]);

2. filter()接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身

var r;
var arr = [‘apple‘, ‘strawberry‘, ‘banana‘, ‘pear‘, ‘apple‘, ‘orange‘, ‘orange‘, ‘strawberry‘];
r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});

3. sort()数组的排序

//这是排正序
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});
console.log(arr); // [1, 2, 10, 20]

//这是排倒序
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
});

4. 闭包

当一个函数返回了一个函数后,其内部的局部变量还被新函数引用。
返回的函数并没有立即执行,而是直到f()才执行。

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

在上面的例子中,每次循环,都创建一个新的函数,然后把创建的三个函数都添加到了一个Array中返回。
你可能认为调用f1(),f2()和f3()结果应该是1,4,9,但实际结果是:

f1(); // 16
f2(); // 16
f3(); // 16

全部都是16!原因就在于返回的函数引用了变量i,但它并非立刻执行。等到3个函数都返回时,它们所引用的变量i已经变成了4,因此最终结果为16。

返回闭包时牢记的一点就是:返回函数不要引用任何循环变量,或者后续会发生变化的变量。

如果一定要引用循环变量怎么办?方法是再创建一个函数,用该函数的参数绑定循环变量当前的值,无论该循环变量后续如何更改,已绑定到函数参数的值不变:

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9


以上是关于基础的JavaScript函数的主要内容,如果未能解决你的问题,请参考以下文章

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

JavaScript 作用域 与 作用域链

jQ选择器学习片段(JavaScript 部分对应)

几个关于js数组方法reduce的经典片段

201555332盛照宗—网络对抗实验1—逆向与bof基础