跟着月影学 JavaScript | 青训营笔记

这是我参与【第五届青训营】伴学笔记创作活动的第3天。

变量，属性，函数，方法的区别

1.变量和属性相同的，都是存储数据 2.变量 单声明并赋值 使用时直接写变量名 单独存在 3.属性 在对象里面不用声明 使用时必须是 对象.属性

  var num=10;
  var obj={
  age=10,
  fn:function(){
  }//方法
  }
  console.log(obj.age);
  function fn(){
  }//函数

4.函数 单独声明 并且调用函数 函数名（）单独存在 5.方法在对象里面 在调用的是 对象.方法（）

创建对象3种方式

1.自变量创建对象

var obj={
uname:'panda',
sex:'男',
age:'18',
}
consolse.log(obj.uname);

在对象字面量中，使用逗号来分隔不同的属性

2.new Object

var obj= new Object();//创建一个空对象；
obj.name='panda'；//加入对象中；

3.使用函数创建对象

function 构造函数名(){
    this.属性=值;
    this.方法=function(){
    }
}
new 构造的函数名();

//构造函数
function str(yourname,sex,age){
 this.name=yourname;
 this.sex=sex；
 this.age=age;
 this sing=function(sang){
 console.log(sang);
 }
 }
var jay=new str("panda",'男',12);//调用函数返回的是一个对象
jay.sing('b');
//利用构建函数创建对象的过程也成为对象的实例化

构造函数不需要return可以返回结果 构造函数名字首字母大写

new执行过程

• 1.在内存中创建一个新对象
• 2.让this指向这个新对象
• 3执行构造函数里面的代码，给新对象添加属性
• 4返回新对象 遍历对象 for in

for(变量 in 对象)
 <script>
        var obj=new Object();
        obj.name="panda";
        obj.sex='男';
        obj.habbit='击剑';
        obj.fn=function() {
            console.log();
        }
        for(k in obj){
             console.log(k);//k 变量输出得到是属性名
             console.log(obj[k]);//obj 得到的是属性值
        }
    </script>

查询MDN文档

随机数

 function getRandom(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
        }
        console.log(getRandom(1,10));

猜文字游戏

     var random=getRandom(1,10);
    while(true){
        var num = prompt('你来猜？输入1~10之间的一个数字');
        if (num > random){
            alert('你猜大了');
        }else if(num < random){
            alert('你猜小了');
        }else{
            alert('恭喜你猜对了');
            break;
        }
    }
    </script>

Date类型

 var date=new Date();
    console.log(date);

无参数则返回则返回系统当前的时间 参数常用的写法 数字型

var date=new Date(2021,3,22);
    console.log(date);

字符型

var date=new Date('2021-3-22 8:8:8');/* (2021/3/22 写法也可以)
    console.log(date);

Array 类型

• 创建数组两种方式：

1.var colors = new Array(); 在使用 Array 构造函数时也可以省略 new 操作符

2.创建数组的第二种基本方式是使用数组字面量表示法。数组字面量由一对包含数组项的方括号表示，多个数组项之间以逗号隔开

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
var names = []; // 创建一个空数组alert(colors.length); //3
alert(colors.length); //3

• 数组长度

这个例子中的数组 colors 一开始有 3 个值。将其 length 属性设置为 2 会移除最后一项（位置为 2 的那一项），结果再访问 colors[2]就会显示 undefined 了。如果将其 length 属性设置为大于数组 项数的值，则新增的每一项都会取得 undefined 值，如下所示：

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
colors.length = 4; 
alert(colors[3]); //undefined
colors[colors.length] = "black"; //（在位置 3）添加一种颜色

• 检测是否为数组

1.
var arr=[];
console.log(arr instanceof Array);//true
2.
console.log(Array isArray(arr));//true

• 数字转换为字符串

1.toString()将数组转化为字符串
var arr=['1','2','3'];
console.log(arr.toString());//1,2,3;
2.join(分隔符可以自己设置)
var arr1=['green','blue','red'];
console.log(arr1.join());//green,blue,red;
console.log(arr1.join('-'));//green-blue-red;

• 栈方法 1.push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。而 2.pop()方法则从数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项

var colors = new Array(); // 创建一个数组
var count = colors.push("red", "green"); // 推入两项
alert(count);
var item = colors.pop(); // 取得最后一项
alert(item); //"black" 
alert(colors.length); //2



var colors = ["red", "blue"]; 
colors.push("brown"); // 添加另一项
colors[3] = "black"; // 添加一项
alert(colors.length); // 4 
var item = colors.pop(); // 取得最后一项
alert(item); //"black"

• 队列方法 shift()，它能够移除数组中的第一个项并返回该项，同时将数组长度减 1。结合使用 shift()和 push()方法，可以像使用队列一样使用数组

var colors = new Array(); //创建一个数组
var count = colors.push("red", "green"); //推入两项
alert(count); //2 
count = colors.push("black"); //推入另一项
alert(count); //3 
var item = colors.shift(); //取得第一项
alert(item); //"red" 
alert(colors.length); //2

• 反向队列 unshift()与 shift()的用途相反： 它能在数组前端添加任意个项并返回新数组的长度。因此，同时使用 unshift()和 pop()方法，可以 从相反的方向来模拟队列，即在数组的前端添加项，从数组末端移除项，

var colors = new Array(); //创建一个数组
var count = colors.unshift("red", "green"); //推入两项
alert(count); //2 
count = colors.unshift("black"); //推入另一项
alert(count); //3 
var item = colors.pop(); //取得最后一项
alert(item); //"green" 
alert(colors.length); //2

• 反向排列（reverse()和 sort()） reverse()方法会反转数组项的顺序

var values = [1, 2, 3, 4, 5]; 
values.reverse(); 
alert(values); //5,4,3,2,1

• 数组排序 在默认情况下，sort()方法按升序排列数组项——即最小的值位于最前面，最大的值排在最后面（限于个位数可直接使用）。 为了实现排序，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串，如下所示。

var values = [0, 1, 5, 10, 15]; 
values.sort(); 
alert(values); //0,1,10,15,5

数值 5 虽然小于 10，但在进行字符串比较时，"10"则位于"5"的前面，于是数组的顺序就被修改了

要完全实现sort排序可以加入函数

var arr=[1,4,12,7,66];
arr.sort(function(a,b)
{
 return a-b;//升序排列 1，4，7，12，66
 return b-a;//降序排列 66,12,7,4,1
});
console.log(arr);

• slice() 它能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以 接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，slice()方法返回从该 参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项— —但不包括结束位置的项。注意，slice()方法不会影响原始数组。请看下面的例子。

var colors = ["red", "green", "blue", "yellow", "purple"]; 
var colors2 = colors.slice(1); 
var colors3 = colors.slice(1,4); 
alert(colors2); //green,blue,yellow,purple 
alert(colors3); //green,blue,yellow

可实现功能： 1.删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。 例如，splice(0,2)会删除数组中的前两项。 2.插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数） 和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如， splice(2,0,"red","green")会从当前数组的位置 2 开始插入字符串"red"和"green" 3。替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起 始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如， splice (2,1,"red","green")会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串 "red"和"green"。

var colors = ["red", "green", "blue"]; 
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue 
alert(removed); // red，返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); // 从位置 1 开始插入两项
alert(colors); // green,yellow,orange,blue 
alert(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两项，删除一项
alert(colors); // green,red,purple,orange,blue 
alert(removed); // yellow，返回的数组中只包含一项

• 位置方法（返回数组索引） indexOf()和 lastIndexOf()： indexOf()方法从数组的开头（位置 0）开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。若不存在返回-1. 如果有两个参数indexOf('要查找的字符'，[起始的位置])

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4)); //5

迭代方法

• every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。
• filter()：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
• forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。
• map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
• some()：对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。

在这些方法中，最相似的是 every()和 some()，它们都用于查询数组中的项是否满足某个条件。 对 every()来说，传入的函数必须对每一项都返回 true，这个方法才返回 true；否则，它就返回 false。而 some()方法则是只要传入的函数对数组中的某一项返回 true，就会返回 true。

var numbers = [1,2,3,4,5,4,3,2,1]; 
var everyResult = numbers.every(function(item, index, array){ 
 return (item > 2); 
}); 
alert(everyResult); //false 
var someResult = numbers.some(function(item, index, array){ 
 return (item > 2); 
}); 
alert(someResult); //true


var numbers = [1,2,3,4,5,4,3,2,1]; 
var filterResult = numbers.filter(function(item, index, array){ 
 return (item > 2); 
}); 
alert(filterResult); //[3,4,5,4,3]

归并方法

reduce()和 reduceRight()。这两个方法都会迭 代数组的所有项，然后构建一个最终返回的值。其中，reduce()方法从数组的第一项开始，逐个遍历 到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

var values = [1,2,3,4,5]; 
var sum = values.reduce(function(prev, cur, index, array){ 
 return prev + cur; 
}); 
alert(sum); //15

第一次执行回调函数，prev 是 1，cur 是 2。第二次，prev 是 3（1 加 2 的结果），cur 是 3（数组的第三项）。这个过程会持续到把数组中的每一项都访问一遍，最后返回结果。

封装节流和防抖函数

防抖函数

   <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖函数</title>
  </head>
  <body>
    <h3>
      防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次
    </h3>
    <h3>
      常用的应用场景search搜索时，用户在不断输入值时，用防抖来节约请求资源。
    </h3>
    <input type="text" />
  </body>
  <script>
    window.addEventListener("load", function () {
      let input = document.querySelector("input");
      function debounced(fn, time) {
        let timer = null;
        return function () {
          clearTimeout(timer);
          timer = setTimeout(() => {
            fn();
          }, time);
        };
      }
      function fnc() {
        console.log(input.value);
      }

      input.addEventListener("input", debounced(fnc, 2000));
    });
  </script>
</html>

节流函数

   <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>节流函数</title>
 </head>
 <body>
   <h3>
     节流(throttle)：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发(规定时间内执行一次)
   </h3>
   <h3>
     常见应用场景 1.鼠标不断点击触发,mousedown(单位时间内只触发一次)
     2.监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
   </h3>
   <input type="text" value="" />
   <button>2秒内点我加1</button>
 </body>
 <script>
   window.addEventListener("load", function () {
     let input = document.querySelector("input");
     let btn = document.querySelector("button");
     input.value = 0;
   		//封装的节流函数
     function throttle(fn, time) {
       let flag = false;
       return function () {
         if (flag) {
           return;
         }
         flag = true;
         setTimeout(() => {
           fn();
           flag = false;
         }, time);
       };
     }
   		
     function fnc() {
       input.value++;
     }
     btn.addEventListener("click", throttle(fnc, 2000));
   });
 </script>
</html>