前端基础---JS基础

背景介绍

Javascript 是一种运行在客户端的脚本语言

应用场景
1.网页特效
2.服务端开发(Node.js)
3.命令行工具(Node.js)
4.桌面程序(Elextron)
5.APP(Cordova)
6.控制硬件-物联网(Ruff)
7.游戏开发(cocos2d-js)

javascript组成

  1. ECMAScript 基本语法。

  2. BOM (浏览器对象模型)

  3. DOM (文档对象模型)

三种写法:
1.嵌入到标签中
2.在<script></script>标签内直接书写
3.在外部书写JS文件,用<script src=‘文件名’></script>调用(最常用)

基础语法

变量命名: var 变量名;(所有基础类型都由var来声明,即JS为弱类型的语言)
命名规则:
1.由字母、数字、下划线、$符号组成,不能以数字开头。
2.不能是关键字或保留字
3.区分大小写

命名规范有意义 驼峰命名法

一、数据类型:

①Number类型

数值字面量:数值的固定值的表示法 110 1024 60.5

进制 :进行算术运算时或输出时八进制与十六进制都将被转化为十进制
十六进制: var num = 0x9;
八进制:var num = 07;

扫描二维码关注公众号,回复: 6030676 查看本文章

浮点数:尽量不要直接判断两个浮点数相不相等,因为计算机存储的浮点数精度会丢失
无穷大:Infinity 无穷小:-Infinity
NaN:不是数字
isNaN()可以判断是否是数字,是则返回false。

其他类型转换成Number类型:

1.Number(变量名) ( 转换带有非数字的变量时会返回NaN)
2.取正或取负即在其他类型变量前加 + 或 - (解析方式同Number())
3.‘其他类型变量’ - 0 减法运算会把两边转换成数值类型再进行运算,解析方式同Number()
4.parseInt(变量名) (无法将布尔类型转换成0,1,)
5.parseFloat(变量名) (无法将布尔类型转换成0,1,)
实质上parsesint和parsefloat的解析方式几乎完全相同,只是parseint会将小数点看作非数字,而parseFloat可以解析第一个出现的小数点

var a='12a3b';
Number(a)//只要含有非数字就会返回NaN
>>>NaN
parseInt(a)//从头开始匹配,匹配到数字就返回值,匹配到非数字则结束(第一个字符为非数字则返回NaN)。
>>>12

②String类型
用单引号或双引号(推荐使用单引号,不易与html中的混淆)
获取字符串长度:字符串变量.length
字符串拼接:+(注意:字符串+整数=拼接字符串(把整数转换成了字符串))

其他类型转换成字符串的方法
1.其他类型变量名.toString() (null和undefined没有此方法)
2.String(其他类型变量名) (null和undefined采用此方法)
3.字符串拼接 变量 + ‘’(空字符串)

③Boolean类型
字面量:true 、 false
计算机内部存储true为1,false为0
其他类型转换成Boolean
Boolean(变量名)
null、undefined、空字符串、0、NaN这五种会转换成false,其它的都会转换成true。

④Undefined and Null
undefined 表示一个声明了但还没有赋值的变量,变量只声明的时候默认是undefined
null表示一个空,变量的值可以被手动设置为null。

⑤复杂数据类型

Object

对象定义
1. 字面值
var 对象名 = {
属性名:值,

方法名:function (参数) {函数体}

}
2.构造函数Object
var 对象名 = new Object();建立空对象(Object()是一个构造函数,返回一个空对象)
然后可以进行动态赋值

3.工厂方法 (函数实现类,不推荐使用)

function createStu(age,name) {
            var student = new Object();
            //添加属性和方法
            student.age = age;
            student.name = name;
            student.study = function () {
                console.log('写作业');
            }
            return student;
        }
        var student1 = createStu(19,'wang');//创建对象实例student1.

4.自定义构造函数(最常用)

function Stu(age,name) {
            //this表示自身这个对象
            this.age = age;
            this.name = name;
            this.study = function () {
                console.log('写作业');
            }
        }
        var student1 = new Stu(19,'wang');//创建对象

此时stu相当于一个类

this
1 在函数中 this 指向window
2 在方法中 this 指向这个方法所属的对象
3 在构造函数中 this 指向构造函数创建的对象

new 的执行过程:
1 在内存中创建了一个空的对象
2 让构造函数中的this指向刚刚创建的对象
3 执行构造函数,在构造函数中设置属性和方法(当然也可以做其他事)
4 返回当前对象

访问
Ⅰ。对象 . 属性;对象 . 方法
Ⅱ。对象[‘属性’];

获取数据类型:typeof 变量名
而typeof返回的值的类型为string

var num=12;
var result=typeof num
typeof result
>>>"string"

二、操作符

算术运算符:+ - * / % 规则与python相同
自增自减运算符:++ – 与C相同
逻辑运算符:&& 、||、!
关系运算符:< > == != === !==

var num1 = 10;
var str1 = '10';
console.log(num1==str1)
>>> true
console.log(num1===str1)
>>> false
console.log(num1!=str1)
>>> false
console.log(num1!==str1)
>>> true

==与===的区别:==只要数值相等即可,===必须数值类型都相等。

运算符优先级
在这里插入图片描述

三、流程控制语句

分支结构:if(){} else{}, switch(){}
循环语句:while(){},do{}while();, for(){}。
用法与C语言并无大异,此处不再赘述。

四、函数

函数定义的两种方式
1.function 函数名(形参列表) {函数体 }
2.var 函数名=function(形参列表) {函数体}(无return语句的话函数默认返回值为undefined),其实由此可见JS中函数实际上为一种特殊的数据类型

函数调用:
已定义的函数名(实参列表);

arguments
arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性,也就是说所有函数内部都内置了一个arguments对象,arguments中存储了传递的所有实参,成为一个伪数组,可以进行遍历。利用这个对象,生成含可变参数的函数变得甚至比python还要简单。
可以用来生成参数数量可变的函数

 //求任意个数的数字的最大值
        function setMax() {
            max = arguments[0];
            for (var i = 0; i<arguments.length; i++) {
                if (max < arguments[i]) {
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(setMax(1,5,3,4,3));

变量作用域
全局变量:1.script或独立的文件下定义的变量 2.没有用var定义直接赋值的变量(不建议这么用)
局部变量:函数内部定义的变量(除了全局变量的2)
块级作用域:目前ECMAScript中没有块级作用域

调用函数时,优先在本级作用域中寻找要使用的变量,然后逐级向上查找。

JS引擎在顺序执行代码前要先进行预解析
预解析:
1.变量提升:把变量的声明(即不包括赋值)提升到当前作用域的最上端。
2.函数提升:把函数的声明提升到当前作用域的最上端。
在预解析的过程中如果函数和变量的名字相同,此时函数优先被使用。

(var a = b = c=10;等价于 var a=10;b=10;c=10;b,c为全局变量写法。)

猜你喜欢

转载自blog.csdn.net/qq_43813560/article/details/88727894
今日推荐