js第一课引入方式参数函数

js引入方式，实例演示;

行内脚本

<button onclick="alert(1)">Click</button>

内部脚本将js写在一对script标签中

<style>
.active{
 color: red;
 background: yellow;
}
</style>
<script>
 function toggleColor() {
     document.querySelector("h1").classList.toggle("active");
   }
</script>
<button onclick('toggleColor')></button>

外部引入将js代码写入到外部的js中，在html中进行引用
toggle.js:

function toggleColor() {
document.querySelector("h1").classList.toggle("active");
}

html中的代码：

<script src="toggle.js"></script>

变量与常量的声明与使用方式，变量的类型和转换;

在es6之前是没有常量。

<script>
   //传统方式：在es6之前 没有常量
   //   变量：数据共享
   let email = "admin@qq.com";
   console.log(email);
   console.log(email);
   console.log(email);
</script>

如果变量没有初始化，那么就是undenfined

let user;
console.log(user);

userName=null;
   console.log(userName);

赋值null，相当于把这个变量删除
常量：

//常量
   const GENDER = "male";

常量通常使用大写，多个单词之间使用下划线这个是不允许被更新的
因为不允许被更新，所以声明的时候必须赋值。
js是严格区分大小写。
命名方式：

驼峰式：userName, unitPrice
帕斯卡式：UserName  UnitPrice
蛇形式：user_name unit_price
匈牙利式：将数据类型放在变量的最前面
object类型的：oBtn
推荐使用驼峰式

数据类型

<script>
   // 一旦将数据类型确定，那么基于这个数据的允许的操作也就确定了
   console.log(100 * "abc"); // NaN
 </script>

1、原始类型：数值字符串布尔型 undenfined null
undefined类型就是undefined
null一定是一个对象
2、复合类型：将原始值以某种规则进行组合，就构成了复合类型
也叫引用类型：对象object，数组，函数
既然函数是对象，那么对象就允许添加属性或方法

function getName(){}
getName.userName="perper";
console.log(getName.userName);

输出的就是perper

通常只有相同类型的数据才在一起参与计算，这样的运算才有意义比如100+100
+ 除了表示加法，也是字符串的拼接运算符
== 也会触发自动类型转换,它是非严格判断，它只检查值，不检查类型。建议使用”===”，它是要求值相等且类型也相等，它不会触发自动类型转换。
console.log(100 == “100”);

函数与高阶函数，实例演示;

一般函数分两步：
声明：

function test(){}

调用：

test();

函数允许重写，或者说是函数声明提升

<script>
function getName(name){
    console.log("welcom to :", name)
}
console.log(getName("xxxxx"));
function getName(name){
    console.log("欢迎：", name);
}
</script>

上述代码输出的是欢迎xxxxx

如果不希望函数提升，必需先声明在使用用匿名函数

let getName = function(name){
    console.log(name);
}

匿名函数就是将一个函数的声明作为值赋值给一个变量或常量,然后通过这个变量或常量来引用这个函数的声明

函数的参数

函数都是单值返回

let sum = function(a,b){
    return a+b;
}
console.log(sum(1,2));

如果只给一个值那么返回的就是NaN

console.log(sum(1));

我们也可以给函数一个默认参数

sum = function(a, b=1){
    return a+b;
}
console.log(sum(1));

归并参数

归并参数，rest语法，将所有参数压到一个数组中来简化参数的获取过程

let sum = function(...arr){
    console.log(arr);
}
console.log(sum(1,2,3,4,5,6,7));

这样得到的参数怎么相加？可以使用for进行遍历，也可以使用reduce()

let t=0;
sum = function (...arr) {
        for (let i = 0; i < arr.length; i++) {
          t += arr[i];
        }
        return t;
      };
      console.log(sum(1, 2, 3, 4, 5, 6, 7));
sum = function (...arr) {
        return arr.reduce((p, c) => p + c); //28
      };
      console.log(sum(1, 2, 3, 4, 5, 6, 7));

高阶函数偏函数纯函数箭头函数立即执行函数

高阶函数

使用函数作为参数，或者将函数作为返回值。

fucntion demo(f){
    reuturn f;
    }
}
console.log(demo(function(){}));

function demo() {
        return function () {
          return "abc";
        };
      }
      let a = demo();
      console.log(a);
      console.log(a());

函数作为参数也叫回调函数。

偏函数

function sum(a,b,c,d){
    return a+b+c+d;
}
console.log(sum(1,2,3,4));

我们可以将此函数进行柯里化内层函数可以访问外层函数

let sum = function(a,b){
    return function(c,d){
        return a+b+c+d;};
};
let f1 = sum(1,2);
console.log(f1(3,4));


      let sum = function (a) {
        // 柯里化
        return function (b) {
          return function (c) {
            return function (d) {
              return a + b + c + d;
            };
          };
        };
      };
      let res = sum(1)(2)(3)(4);
      console.log(res);

结果都是一样的

纯函数

纯函数就是不调用自身之外的参数

//这个就不是纯函数 他调用了自身之外的参数c
let c= 199;
function sum(a,b){
    return a+b+c;
}
//这个是纯函数
function sum(a,b){
    return a+b;
}

箭头函数

匿名函数，可以使用箭头函数来简化

let sum = function(a,b){
    return a+b;
}
let sum = (a,b) => {return a+b};
//如果函数体只有一句参数 可以删除{} 并且自带return
let sum = (a,b) => a+b;
//如果只有一个参数，连参数列表的圆括号 都可以删除  推荐括号加上，带上去可以容易看出来不是个变量 而是参数
let tips = name => console.log(name);

注意：如果函数中要使用到this的时候，就不要用箭头函数了箭头函数不支持this，所以箭头函数不能当构造函数用。

立即执行函数

就是声明调用二合一。
模板 ()()

//一个普通函数
function sum(a,b){
    return a+b;
}
//转换成立即执行函数
(function sum(a,b){
    return a+b;
})(1,2);

js引入方式，实例演示;

变量与常量的声明与使用方式，变量的类型和转换;

函数与高阶函数，实例演示;

函数的参数

归并参数

高阶函数偏函数纯函数箭头函数立即执行函数

高阶函数

偏函数

纯函数

箭头函数

立即执行函数

更多相关文章

随机推荐

js第一课 引入方式 参数 函数

js引入方式，实例演示;

变量与常量的声明与使用方式，变量的类型和转换;

函数与高阶函数，实例演示;

函数的参数

归并参数

高阶函数 偏函数 纯函数 箭头函数 立即执行函数

高阶函数

偏函数

纯函数

箭头函数

立即执行函数

更多相关文章

随机推荐

js第一课引入方式参数函数

高阶函数偏函数纯函数箭头函数立即执行函数