首页
登录 | 注册

前端基础---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;

浮点数:尽量不要直接判断两个浮点数相不相等,因为计算机存储的浮点数精度会丢失
无穷大: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

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

运算符优先级
前端基础---JS基础

三、流程控制语句

分支结构: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为全局变量写法。)


相关文章

  • 什么是GIL?GIL对多线程的影响 GIL全称Global Interpreter Lock(全局解释器锁).GIL和Python语言没有任何关系,只是因为历史原因导致在官方推荐的解释器Cpython中遗留的问题.(多线程)每个线程在执行的 ...
  • 【前端安全】传输安全
    传输安全 HTTP传输窃听: 过程: 浏览器<->代理服务器<->链路<->服务器 在代理服务器和链路这过程中,可能会造成传输链路窃听篡改.因为HTTP是明文传输的,不会加密. 可以通过 tracert ...
  • 从虚拟化前端Bug学习分析Kernel Dump
    前言 也许大家都知道,分析 Kernel Dump 有个常用的工具叫 Crash,在我刚开始学习分析 Kernel Dump 的时候,总是花大量的时间折腾这个工具的用法,却总是记不住这个工具的功能.后来有一次在参加某次内部分享的时候,有位大 ...
  • 电厂锅炉,火电厂三大主力设备之一.在电厂生产过程中发挥了极其重要的作用,是火电厂生产所必不可少的重要设备.但是,近些年,因为锅炉安全管控不到位而造成的事故屡有发生,给电厂的财产及人员的生命造成极大威胁.分析电厂锅炉的泄漏原因,制定有针对性的 ...
  • 一份还热乎的蚂蚁金服面经(已拿Offer)!附答案!!
    本文来自我的知识星球的球友投稿,他在最近的校招中拿到了蚂蚁金服的实习生Offer,整体思路和面试题目由作者--泽林提供,部分答案由Hollis整理自知识星球<Hollis和他的朋友们>中「直面Java」板块. 经历了漫长一个月的 ...

2020 jeepshoe.net webmaster#jeepshoe.net
13 q. 0.342 s.
京ICP备10005923号