JavaScript学习笔记4

1.预解析

​ JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。

  • Js引擎会把js里面的所有的变量和函数提升到当前作用域的最前面

    1. 变量预解析（变量提升）和函数预解析（函数提升）

      变量提升就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作。

    2. 函数提升，就是把所有函数声明提升到当前作用域的最前面，不调用函数。

  • 代码执行，按照代码书写的顺序从上往下执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//预解析案例

   f1();
   console.log(c);
   console.log(b);
   console.log(a);
   function f1(){
       var a = b = c = 9;
       console.log(c);
        console.log(b);
        console.log(a);
   }
   
   //分析过程
   function f1(){
       var a = b = c = 9;
       // 相当于var a = 9; b = 9; c = 9;b和c 直接赋值没有var 相当于全局变量
       //集体声明 var a = 9 ,b = 9 , c = 9;
       console.log(c); //9
        console.log(b);//9
        console.log(a);//9
   }
    f1();
   console.log(c);//9
   console.log(b);//9
   console.log(a);//Uncaught ReferenceError: a is not defined

2.对象

​ 在JavaScript中对象是一组无序的相关属性和方法的集合。

2.1创建对象的三种方法

  • 利用字面量创建对象（**{}**）

    1
    2
    3
    4
    5
    6
    7
    var obj = {
    	name: 'aa',
        age: '18',
        sex: 'man',
        fn: function(){
        }
    }

  • 利用new object创建对象

    1
    2
    3
    4
    5
    6
    7
    var obj = new Object();
    obj.uname = 'aa';
    obj.age = '18';
    obj.sex = 'man';
    obj.fn = function(){

    }

  • 利用构造函数创建对象

    ​ 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

    1. 构造函数名字首字母要大写
    2. 构造函数不需要return就可以返回对象。
    3. 调用构造函数返回的是一个对象
    4. 调用构造函数必须使用new
    5. 我们只要new ()调用函数就创建一个对象。
    6. 属性和方法前面必须添加this
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //声明构造函数
    function 构造函数名(){
    	this.属性 = 值；
    	this.方法 = function(){
    	
    	}
    }

    //调用
    new 构造函数名();

    //举例
    function Example(name,age,sex){
    	this.name = name；
        this.age = age；
        this.sex = sex；
    }
    new Example('aa','18','man',);

    new关键字执行过程

    1. new 构造函数可以在内存中创建一个空的对象
    2. this 就会指向刚才创建的空对象
    3. 执行构造函数里面的代码，给这个空对象添加属性和方法
    4. 返回这个对象

    2.2使用对象

    1. 调用对象的属性 对象名.属性名；对象名[‘属性名’]
    2. 调用方法 对象名.方法名()

    2.3遍历对象

    1
    2
    3
    4
    for(var k in obj){
    	console.log(obj[k]);//属性值
        console.log(k);//属性名
    }

    3.内置对象

​ JavaScript中的对象分为三种：自定义对象、内置对象、浏览器对象

3.1Math对象

1
2
3
4
//最大值
console.log(Math.max(1,22,33));//33
console.log(Math.max(1,22,'33'));//NaN
console.log(Math.max());//-Infinity
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//利用对象封装自己的数学对象 
    var myMath = {
        PI: 3.1415926,
        max: function(){
            var Max = arguments[0];
            for (let index = 0; index < arguments.length; index++) {
                if(arguments[index] > Max){
                    Max = arguments[index]
                } 
            }
            return Max;
        },
        min: function(){
            var Min = arguments[0];
            for (let index = 0; index < arguments.length; index++) {
                if(arguments[index] < Min){
                    Min = arguments[index]
                } 
            }
            return Min;
        }
    }
   console.log(myMath.PI) 
   console.log(myMath.max(1222,33,22222,555)) 
   console.log(myMath.min(0.9,0,-9))

  • Math.PI() 圆周率

  • Math.floor() 向下取整

  • Math.ceil() 向上取整

  • Math.round() 四舍五入 就近取整 -3.5 结果是3

  • Math.abs() 绝对值

    1
    console.log(Math.abs('-1') )//隐式转换 ，会把字符串型-1转换为数值型

  • Math.max()和Math.min()

  • Math.random()

    返回一个随机小数（大于等于0小于1），方法里面不跟参数。

    1. 得到一个两数之间的随机数
1
2
3
4
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
//返回了一个在指定值之间的随机数。这个值不小于 min（有可能等于），并且小于（不等于）max。
2.得到一个两数之间的随机整数，包括两个数在内
1
2
3
4
5
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//猜数字游戏
var min = prompt('请输入随机数起始范围')
var max = prompt('请输入随机数截至范围')
function gerRandom(min,max){
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; 
}
var i = gerRandom(min,max)
while(true){
    var guess = prompt('请输入您猜的数字')
    if (i > guess) {
    alert('猜小了！')
    
} else if(i < guess) {
    alert('猜大了！')
   
}else{
    alert('恭喜，猜对了！')
    break;
}
}

3.2日期对象（Date）

​ Date日期对象是一个构造函数，必须使用new来创建日期对象

1
var date = new Date();

  1. 如果没有提供参数，那么新创建的Date对象表示实例化时刻的日期和时间。

  2. 参数的常用写法 数字型（2020，01，09）或者是字符串型（’2020-01-09 8:8:9’）

  3. 日期格式化

    方法名 说明 代码
    getFullYear() 获取当前年份 date.getFullYear()
    getMonth() 获取当前月份（0-11） date.getMonth()
    getDate() 获取当天日期 date.getDate()
    getDay() 获取星期几（0-6） date.getDay()
    getHours() 获取当前小时 date.getHours()
    getMinutes() 获取当前分钟 date.getMinutes()
    getSeconds() 获取当前秒钟 date.getSeconds()

  4. 获取日期的总的毫秒数（时间戳）

    Date对象是基于1970年1月1日（世界标准事件）起的毫秒数

    • 通过valueOf()
    • 通过getTime()
    • var date = +new Date()
    • H5新增Date.now()

  5. 倒计时小案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //倒计时小案例

    function countDown(time){
        var nowTime = +new Date();//返回当前时间总的毫秒数
        var inputTime = +new Date(time);//返回用户输入时间总的毫秒数
        var times = (inputTime - nowTime) / 1000; //剩余时间的秒数 
        var d = parseInt(times / 60 /60 / 24);
        d = d < 10 ? '0' + d : d;
        var h = parseInt(times / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        var m = parseInt(times / 60 % 60);
        m = m < 10 ? '0' + m : m;
        var s = parseInt(times % 60)
        s = s < 10 ? '0' + s : s;
        return d + '天' + h + '时' + m + '分' + s + '秒';
    }
    console.log(countDown('2022-2-12 23:00:00'))

    3.3数组对象

    1. 检测是否为数组

      • instanceof运算符

        1
        2
        3
        4
        var arr = []
        var obj = {}
        console.log(arr instanceof Array) //true
        console.log(obj instanceof Array) //false
  - Array.isArray()[H5新增方法]

    
1
2
3
4
5
6
7
8
Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false
  1. 添加删除数组元素
    • push()在数组末尾添加一个或者多个数组元素;push()返回值为新数组长度
    • unshift()在数组前边添加一个或者多个数组元素；unshift()返回值为新数组长度
    • pop()删除数组的最后一个元素；pop()返回值为删除的元素
    • shift()删除数组的第一个元素；shift()返回值为删除的元素
  2. 数组排序
    方法名 说明 是否修改原数组
    reverse() 颠倒数组中元素的顺序，无参数 改变原来的数组，返回新数组
    sort() 对数组的元素进行排序 改变原来的数组，返回新数组 
    1
    2
    3
    4
    5
    6
    var arr = [13,4,77,1,7]
    arr.sort();//[1,13,4,7,77]
    arr.sort(function(a,b){
    	return a - b;//升序排列 
    	return b - a;//降序排列 
    })
  3. 数组索引方法
    方法名 说明 返回值
    indexOf() 数组中查找给定元素的第一个索引 若存在返回索引号，不存在返回-1
    lastIndexOf() 数组中查找给定元素的最后一个索引 若存在返回索引号，不存在返回-1 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    //数组去重案例

    var array = [1,2,33,4,3,1,5,6,7,6]
    function unique(array){
        var newArray = [];
        for (let index = 0; index < array.length; index++) {
            var i = newArray.indexOf(array[index])
           if(i === -1){
            newArray.push(array[index])
           }
        }
        return newArray
    }
    console.log(unique(array))
  1. 数组转换为字符串
    方法名 说明 返回值
    toString() 把数组转换成字符串，逗号分隔每一项 返回一个字符串
    join(‘分隔符’) 把数组中的所有元素转换为一个字符串 返回一个字符串
  1. 其他
    方法名 说明 返回值
    concat() 连接两个或多个数组，不影响原数组 返回一个新数组
    slice() 数组截取 返回被截取的新数组
    splice() 数组删除splice(第几个开始，要删除的个数) 返回被删除后的数组，影响原数组

    splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

    1
    2
    3
    4
    5
    6
    7
    array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
    //start 指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
    //deleteCount 可选 整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
       //如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
        //如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
    //item1, item2, ... 可选
        //要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const months = ['Jan', 'March', 'April', 'June'];
    months.splice(1, 0, 'Feb');
    // inserts at index 1
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "June"]

    months.splice(4, 1, 'May');
    // replaces 1 element at index 4
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "May"]

    3.4字符串对象（基本包装类型）

    ​ 为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number和Boolean。

    ​ 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

    ​ 字符串的不可变：指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

    ​ 字符串中所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。

方法名 说明 返回值
indexOf(‘要查找的元素’，[起始位置]) 数组中查找给定元素的第一个索引 若存在返回索引号，不存在返回-1
lastIndexOf() 数组中查找给定元素的最后一个索引 若存在返回索引号，不存在返回-1 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
       var str = 'abcoefoxyozzopp';
        var i = 0;
       // for (let index = 0; index < str.length; index++) {
       //    if(str[index] === 'o'){
       //        console.log(index)
       //        i++;
       //    }
       // }
       // console.log(i)
       
           var index  = str.indexOf('o');
           while(index !== -1) {
               console.log(index);
               i++;
               index = str.indexOf('o',index + 1)
           }
           console.log('o出现的次数是：'+i)

​ 根据位置返回字符

方法名 说明 使用
charAt(index) 返回指定位置的字符（index字符串的索引号） str.charAt()
charCodeAt(index) 获取指定位置处字符的ASCII码 str.chartCodeAt()
str[index] 获取指定位置处的字符 HTML5，IE8+支持 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//判断一个字符串‘'abcoefoxyozzopp’中出现次数最多的字符，并统计其次数。
//核心算法：利用chartAt()遍历这个字符串
//把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
//遍历对象得到最大值和该字符
var str = 'abcoefoxyozzopp';
var s ={};
for (let index = 0; index < str.length; index++) {
   var chars = str.charAt(index)
   if(s[chars]){
    s[chars]++;
   }else{
    s[chars] = 1;
   }
}
var max = 0;
var ch = '';
for (const key in s) {
    if(s[key] > max){
        max = s[key];
        ch = key ;
    }
}
console.log(max)
console.log('出现次数最多的字符为'+ch)

​ 字符串操作方法

方法名 说明
concat(str1,str2…) 连接两个或多个字符串，不影响原数组
slice(start，end) 字符串截取（end处取不到）
substr(start,length) 从start位置开始，lengtn取得个数
substring(start，end) 字符串截取（end处取不到）,不接受负值
replace(‘被替换的字符’,’替换为的字符’) 替换字符，只会替换第一个字符
split(‘分隔符’) 字符转换为数组
toUpperCase() 转换大写
toLowerCase() 转换小写
学习笔记 JavaScript
JavaScript

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！