JavaScript 基础(一)

40 阅读4分钟

变量

变量概述

image.png

数据类型

image.png image.png

运算符

算数运算符

image.png

递增递减运算符

image.png

比较运算符

image.png

逻辑运算符

image.png

赋值运算符

image.png

运算符优先级

image.png

选择结构

流程控制(顺序,分支,循环)

image.png

小结

image.png

数组

image.png

函数

函数基本概念

image.png image.png image.png

arguments

image.png

函数声明方式

image.png

JavaScript作用域

image.png

预解析

image.png image.png

sum(1)(2,3)(4,5,6) js的链式调用

function sum(){
let arr = Array.prototype.slice.call(arguments);
fn = function(){
    let arr1 = Array.prototype.slice.call(arguements)
    return sum.apply(null,arr.concat(arr1))
}
//`reduce()` 方法将数组缩减为单个值。
//`reduce()` 方法为数组的每个值(从左到右)执行提供的函数。
//函数的返回值存储在累加器中(结果/总计)。
//注释:对没有值的数组元素,不执行 `reduce()` 方法。
//注释:`reduce()` 方法不会改变原始数组。
   fn.toString = function(){
       return arr.reduce((value,n)=>{
           return value+n
       })
   }
   return fn
}
//柯里化的高级实现
function curry(func){
    return curried(...args){
        if(args.length >= func.length){
            return func.apply(this,args);
        }else{
            return function(...args2){
                return curried.apply(this,args.concat(args2))
            }
        }
    }
}

面试点

image.png

sum(1)(2)(3)怎么实现

面试的时候,面试官让我讲一个这个怎么实现 当时想到的是嵌套闭包,调用返回值,进行累加

//这个是我在其他文章上看到的代码
function sum(a){
    function add(b){
        a =a+b
        return add;
    }
    add.toString = function(){
    return a;
    }    
    return sum;
    

查询了一下,涉及到了一个知识点,函数柯里化

//正常的函数
function sum(a,b){
    var sum = 0;
    sum = a+ b;
    console.log(sum);
}

//柯里化函数
function curry(a){
    return function(b){
        console.log(a+b)
    }
}
const sum = curry(1);
// 这个过程分为三步
// step1:
// addCurry(1)
// 返回下面的函数
// ƒ (arg) {
// 	return judge(1, arg);
// }
// step2:
// addCurry(1)(2)
// 返回下面的函数
// ƒ (arg) {
// 	return judge(1,2, arg);
// }
// step3:
// addCurry(1)(2)(3)
// 返回并执行下面的函数
// return fn(1,2,3);
// 最终得到结果6

函数柯里化

把接收多个参数的函数变换成接受一个单一参数的函数,并且但会接收余下的采纳数并且返回结果的新函数的技术。eg:它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)

参数复用

用于正则表达式的检验

//记录思路
    柯里化检验函数curry 
    const check = curry(); 
    生成工具化函数,进行验证
    const checkphone = check(/'正则表达式'/)
    检验电话号码
    checkphone('122333232');

延迟计算

返回的函数都不会立即执行,而是等待调用(开发者调用)

动态生成函数

比如说,在dom结点中每每绑定一次事件,都需要对环境进行判断,再去绑定这个事件;将这个过程进行柯里化,在使用前进行一次判断
const addEvent = (function() {
	if (window.addEventListener) {
		return function(ele) {
			return function(type) {
				return function(fn) {
					return function(capture) {
						ele.addEventListener(type, (e) => fn.call(ele, e), capture);
					}
				}
			}
		}
	} else if (window.attachEvent) {
		return function(ele) {
			return function(type) {
				return function(fn) {
					return function(capture) {
						ele.addEventListener(type, (e) => fn.call(ele, e), capture);
					}
				}
			}
		}
	}
})();

// 调用
addEvent(document.getElementById('app'))('click')((e) => {console.log('click function has been call:', e);})(false);

// 分步骤调用会更加清晰
const ele = document.getElementById('app');
// get environment
const environment = addEvent(ele)
// bind event
environment('click')((e) => {console.log(e)})(false);
//来自于[一文搞懂Javascript中的函数柯里化(currying) - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/120735088)
柯里化函数后虽然代码比较冗长,但是它的适用性增加了

柯里化封装

eg : sum(1,2,3...)

    //函数柯里化封装(这个封装可以直接复制走使用)
    function curry(fn, args) {
            var length = fn.length;
            var args = args || [];
            return function () {
                newArgs = args.concat(Array.prototype.slice.call(arguments));
                if (newArgs.length < length) {
                    return curry.call(this, fn, newArgs);
                } else {
                    return fn.apply(this, newArgs);
                }
            }
        }
        
        //需要被柯里化的函数
        function multiFn(a, b, c) {
            return a * b * c;
        }
        
        //multi是柯里化之后的函数
        var multi = curry(multiFn);
        console.log(multi(2)(3)(4));
        console.log(multi(2, 3, 4));
        console.log(multi(2)(3, 4));
        console.log(multi(2, 3)(4));
        //转载自[Javascript高级篇之函数柯里化 - 掘金 (juejin.cn)](https://juejin.cn/post/7111902909796712455)

Function.prototype

四个方法:apply,bind,call,toString

Function.prototype.bind()

定义

bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。(MDN)

const module = {
  x: 42,
  getX: function () {
    return this.x;
  },
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// Expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// Expected output: 42

Function.prototype.apply()

function 的实例的apply()方法会以给定的this值和作为数组(或类数组对象)提供arguments调用该函数

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);
console.log(max);
// Expected output: 7
const min = Math.min.apply(null, numbers);
console.log(min);
// Expected output: 2

语法

apply(thisArg) apply(thisArg, argsArray)

参数

//argsArray --- 用于指定调用func时的参数,或者如果不需要向函数提供参数,则为null或undefined

//thisArg --- 调用func 时提供的this值,如果函数不处于严格对象,则null 和undefined 会被替换成全局对象,原始值会被转换成对象

返回值

使用指定的this值和参数调用函数的结果

Function.prototype.call()

Function 实例的 call() 方法会以给定的 this 值和逐个提供的参数调用该函数

//示例
function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// Expected output: "cheese"
//语法
call(thisArg)
call(thisArg, arg1)
call(thisArg, arg1, arg2)
call(thisArg, arg1, arg2, /* …, */ argN)

Function.prototype.toString()

Function 实例的 toString() 方法返回一个表示该函数源码的字符串。

function sum(a, b) {
  return a + b;
}

console.log(sum.toString());
// Expected output: "function sum(a, b) {
//                     return a + b;
//                   }"

console.log(Math.abs.toString());
// Expected output: "function abs() { [native code] }"

放一个JavaScript的链接

转载自:www.cnblogs.com/wangdan0915…