JavaScript（1）

无敌的小周

已于 2022-04-11 10:36:47 修改

阅读量923

点赞数

分类专栏：前端基础文章标签： js基础 JavaScript

于 2022-04-10 20:54:27 首次发布

本文链接：https://blog.csdn.net/weixin_52972575/article/details/123879173

版权

前端基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.学前基础

1.JS可以实现的功能

1.实现表单的账号密码检测，比如输入的格式不合格，就没有必要发送给服务器，在浏览器内部用js解决。

2.浏览器如何执行JS

浏览器分为两部分：渲染引擎和JS引擎

渲染引擎：解析HTML和CSS，俗称内核

JS引擎：也称为JS解析器，读取JS代码，对其处理再运行。

3.JS组成

4.JS输出语句

<script>
        prompt("输入年龄");
        alert("您未满18，该网站不适合你");
        console.log("我是控制台");
</script>

二.变量

变量的使用
<script>
        var age = prompt("输入你的年龄");
        if(age<18){
            alert("小于18岁，不适合浏览该网站");
        }else {
            alert("欢迎"+age+"岁的你");
        }
</script>
扩展

1.声明了变量，如果不赋值，该变量的值为undefined。

2.不声明，直接赋值使用是可以的，默认自动声明。不声明会变成全局变量。

3.不要用name作为变量名，它在浏览器中有特殊含义。

三.数据类型

1.介绍

介绍

1.js是弱类型语言，不用提前声明变量的类型，在程序运行过程中，类型会根据等号右边的值被自动确定。

2.变量的数据类型是可以变化的。

如var x = 10； x = 'zzz';

分类

2.Number

Number中的最大值最小值

三个特殊值

判断是不是数值
<script>
        alert(isNaN(10));
        alert(isNaN('zz'));
</script>

3.String

String 字符串型

字符串的嵌套
var nickNmae = "新‘秋十’二";
特殊字符的表示

字符串的API
判断字符串的长度
var nickNmae = "新‘秋十’二";
alert(nickNmae.length);

4.布尔，未定义，null

布尔类型

true参加运算看作1，false参加运算看作0
alert(true+1);        //2
未定义类型
var v = undefined;
alert(v + 'comz');  //字符串类型   ‘undefinedcomz’
alert(v + 1);       //NAN
null类型
var v = null;
alert(v + 'comz');  //字符串类型   ‘nullcomz’
alert(v + 1);       //1
获取变量数据类型
var a = 'a';
alert(typeof a);

5.数据类型转换

数据类型转换

转为字符串类型

转为数字型

比如将表单中拿到的参数该为数字

+表示字符串拼接，结果是字符串类型。

-，*，/会先变成number类型，再进行运算。

转换为布尔型

四.运算符

这里只记录一些陌生的运算符知识点

等号
alert(18=='18');
返回true，==会将等式两边的表达式先转为number类型

全等号
alert(18==='18');
返回false，全能符号要求两侧的值和数据类型要完全一致

&&
alert(123&&456);//456
alert(0&&456);//0
如果表达式1不为0，那么返回第二个表达式

如果表达式1为0，那么返回0

'' NAN null undefined 都视为假的

||
alert(123||456);//123
alert(0||456);//456
第一个为真，则返回第一个，否则返回第二个
var num = 0;
alert(123||num++);
alert(num); //0
遇到123，就逻辑中断，后面的num++不再执行，所以num为0

五.数组

声明数组

var arr = new Array();//创建了一个空数组
var arr = new Array(2);//创建了一个长度为2的数组，数组是空的
var arr = new Array(2，3);//里面有两个数组元素2和3
var arr = [1,'two',3.0,4];

获取数组中的元素

var arr = [1,2];
alert(arr[0]);

遍历数组

var arr = [1,'two',3.0,4];
alert(arr);
或用for循环和下标来遍历

数组的长度

var arr = [1,'two',3.0,4];
alert(arr.length);//4

添加数组元素

 var arr = [1,'two',3.0,4];
        alert(arr.length);//4
        arr.length = 5;
        alert(arr[4]);//undefined
        arr[4] = 5;
        alert(arr[4]);//5

       var arr = [1,2,3];
       arr.push(4);
       alert(arr);
       arr.pop();
       alert(arr);
       arr.unshift(0);
       alert(arr);
       arr.shift();
       alert(arr);

检测是否为数组

        var arr = [];
       alert(arr instanceof Array);
       alert(Array.isArray(arr));

数组反转

var arr = [1,2,3];
arr.reverse();

数组排序

//只能排位数相同的数组元素的顺序
var arr = [1,3,2,5];
arr.sort();

//位数不同，升序排列
var arr = [1,3,2,5];
arr.sort(function(a,b){
    return a-b;
});

//位数不同，降序排列
var arr = [1,3,2,5];
arr.sort(function(a,b){
    return b-a;
});

数组的索引

       var arr = ['one','two','three'];
       alert(arr.indexOf('one'));

数组转为字符串

      var arr = [1,2,3];
      alert(arr.toString());//用逗号进行分割   "1,2,3"
      alert(arr.join('-'));//可以指定分隔符    "1-2-3"

六.函数

声明和调用函数

function add(){
     alert("hi");
}
     add();
var add = function(){
            console.log(1);
         }
         add();
下面这种函数没有名字，add是变量名，所以这种函数称为匿名函数

带参数的函数

function add(character){
     alert(character);
}
     add("hi");

形参和实参的匹配问题

实参多于形参

function add(character1,character2){
            alert(character1+character2);
         }
         add("hi","hello","oops");//hihello

形参多于实参

function add(character1,character2){
            alert(character1+character2);
         }
         add("hi");//hiundefined
         add(1);//NAN

函数的返回值

function add(character1,character2){
            var result = character1+character2;
            return result;
         }
         var result = add(1,2);
         alert(result);
只能返回一个值，要返回多个值可以用数组
function add(c1,c2){
            return [c1+c2,c1-c2,c1*c2];
         }
         var result = add(1,2);
         alert(result);
函数如果没有return，则返回undefined。也就是说所有的函数都有返回值。

arguments的使用

当不确定有多少个参数传递的时候，可以用arguments来获取，arguments对象中存储了传递的所有参数。
function add(){
            console.log(arguments);
         }
        add(1,2);
arguments是伪数组，不是真正意义上的数组。

伪数组的特点：

1.具有length属性

2.按照索引方式进行存储

3.没有数组的一些方法，如pop（），push（）

七.作用域

全局作用域

在js文件中的变量或在script标签中的变量的作用域

注意：在函数中如果定义一个变量时没有用var，而是直接给一个变量赋值，那么这个变量就是全局变量。

局部作用域

在函数中的变量的作用域

函数的形参也是局部变量

对比

全局变量只有浏览器关闭的时候才会销毁，比较占内存。

局部变量当我们程序执行完毕就会销毁。

注意

现阶段没有块级作用域
if(1){
    var a = 1;
}
alert(a);
不会报错

JS在es6的时候新增了块级作用域，在花括号里面的内容

八.预解析

js引擎运行js，分为两步。

1.预解析：js引擎会把js里面所有var的变量还有function提升到当前作用域的最前面。

变量提升就是把所有的变量声明提升到当前的作用域最前面。不提升赋值操作。
        //1.
        alert(num1);//会报错
        //2.
        alert(num2);
        var num2 = 10;//输出undefined
        //3.
        fn();
        function  fn(){
            alert(1);    //正常输出
        }
        //4.
        fn();
        var fn = function (){
            alert(1);   //会报错
        }
第二个例子中，预解析时num2被提到最前面，然后alert（num2）会输出未定义，再给num2赋值。

第四个例子中，先将var fn提到前面，再执行fn();因为fn没有赋值，所以报错。

函数提升是把所以的函数声明提升到当前作用域的最前面

第三个例子就是把函数提到了fn()前面。赋值形式的函数不能提升。

九.对象

1.自定义对象

创建对象

1.利用字面量创建对象

       var obj = {
            uname : '周',
            age : 18,
            sex : '男',
            sayHi:function (){
                alert("hi");
            }
        }; //创建了一个空的对象
        //跟数组的区别：数组是中括号，创建对象是大括号
        alert(obj.uname);
        alert(obj['sex']);

2.利用new关键字创建对象

        var obj  = new Object();
        obj.uname = '周';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function (){
            alert("hi");
        }
        alert(obj.uname);
        obj.sayHi();

3.利用构造函数来创建对象

    function Star(uname,age,sex){
           this.uname = uname;
           this.age = age;
           this.sex = sex;
       }
       var star = new Star('周',18,'男');

遍历对象

for in 语句对数组或对象属性进行循环操作

得到属性名

 var obj = {
            name : "zhou",
            age :18,
            sex : '男'
        }
        for( k in obj){
            alert(k);
        }

得到属性值

var obj = {
            name : "zhou",
            age :18,
            sex : '男'
        }
        for( k in obj){
            alert(obj[k]);
        }

2.内置对象

Math

        alert(Math.PI);
        alert(Math.max(1,20,300));//求最大值
        alert(Math.floor(3.1));//向下取整
        alert(Math.ceil(3.1));//向上取整
        alert(Math.round(3.1));//四舍五入
        alert(Math.abs(-5));//绝对值
        alert(Math.min(1,2,5));//最小值
        function getRandom(min,max){//返回两个数之间的随机整数并且包含这两个整数
            return Math.floor(Math.random() * (max-min+1))+min;
        }
        alert(getRandom(1,10));

会将类似这样的字符串‘1’ 转换为number类型

Date

Date是构造函数，需要创建Date对象，跟Math不同。

        var date = new Date();
        alert(date);//返回当前系统的当前时间
        var date1 = new Date(2020,4,10);
        alert(date1);//返回的月份会大一个
        var date2 = new Date('2021-4-10 8:30:20');
        alert(date2);//输出字符串中的时间

日期格式化

        //输出2022 4月10日 星期三
        var date = new Date();

        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day = date.getDay();
        alert('今天是'+year+'年'+month+'月'+dates+'日'+arr[day]);

封装一个格式为xx:xx:xx的返回时间的函数

        function time(){
            var time = new Date();
            var h = time.getHours();
            h = h<10? '0'+h : h;
            var m = time.getMinutes();
            m = m<10? '0'+m : m;
            var s = time.getSeconds();
            s = s<10? '0'+s : s;
            return h+':'+m+':'+s;
        }
        alert(time());

Date的总毫秒数（时间戳，不是当前时间的毫秒数，而是距离1970年一月一日过了多少毫秒数）四种方法

        var date = new Date();
       alert(date.valueOf());//距离1970 1月1日多少毫秒

       alert(date.getTime());//距离1970 1月1日多少毫秒

       var date1 = +new Date();
       alert(date1);//距离1970 1月1日多少毫秒

       alert(Date.now());//距离1970 1月1日多少毫秒

倒计时案例

       function countDown(time){
           var nowTime = +new Date();//返回当前时间距离1970总的毫秒数
           var inputTime = +new Date(time);//返回输入时间距离1970的总毫秒数
           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+'秒';
       }
       alert(countDown('2022-5-1 18:00:00'));

字符串对象

将普通的变量包装成了复杂对象，除了String类型还有Boolean和number
     var str = "abca";
     alert(str.indexOf('a'));
     alert(str.indexOf('a',2));  //从索引2的位置开始查找

根据位置返回字符

拼接字符串

替换字符

    var str = "abcaaaaaaaaaaa";
     alert(str.replace('a','b'));//只替换第一个字符a
     //替换所有的a
     while(str.indexOf('a')!=-1){
         str = str.replace('a','b');
     }
     alert(str);

字符转为数组

    var str = "a,b,a,a,aa";
     var arr = str.split(",");//逗号表示识别字符串中的分隔符
     alert(arr);

无敌的小周

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（1）

复制链接

扫一扫

专栏目录