JavaScript 基础

访问量:1496 创建时间:2022-11-24

浏览器执行JS

浏览器分成两部分渲染引擎和JS引擎渲染引擎: 用来解析html 与css ,俗称内核，比如chrome浏览器的blink,老版本的webkit JS引擎： JS解释器，用来读取网页中javascript代码，对其处理后运行，比如chrome浏览器的v8

JS的组成

ECMAscript javascript语法 DOM页面文档对象模型 BOM浏览器对象模型

JS有行内，内嵌，外部三种写法

js中推荐使用单引号

<!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>Document</title>
    <!-- 外部 -->
    <script src="./my.js"></script>

    <!-- 内嵌 -->
    <script>
        alert('沙漠')
    </script>
</head>

<body>
    <!-- 行内 -->
    <input type="button" value="tangbohu" onclick="alert('秋香')">
</body>

</html>

注释

// 单行注释

输入输出

alert() console.log() prompt() 输入框

变量，内存中存储数据的空间。变量名是房间名。

1 声明变量 2 赋值

var age; 声明一个名称为age的变量。

    <script>
        var age;
        age = 20;
        alert(age)
        var myname = prompt('请输入名字');
        alert(myname);
    </script>

变量只声明，未赋值，是undefined 不声明，不赋值，报错，变量 is not defined 不声明，直接赋值.是允许的，会变成全局变量。

明明规范

大小写字母数组下划线 $ 大小写区分不能以数字开头不能是关键字、保留字驼峰命名法，首字母小写，后面单词首字母大写

基本(值)类型

String: 任意字符串 Number: 任意的数字， 0开头是8进制数(010是十进制的8)，0x 表示16进制。Infinity 无穷大 -Infinity无穷小 NaN not a number 代表一个非数值 boolean: true/false undefined: undefined null: null -->使用typeof时返回object symbol (ECMAScript 2016新增)。 -->Symbol 是基本数据类型的一种，Symbol 对象是 Symbol原始值的封装 (en-US) 。 bigint， -->BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数。

变量数据类型可以变化的。变量类型通过它的值来确认。 isNaN() 如果是数字返回false ,如果不是数字返回true

字符串转义 \n 换行 \t tab \ \' \" \b空格

检测获取字符串长度 length 属性 var str = 'my name is andy' console.log(str.length)

字符串拼接，只要有字符串和其他类型相加，结果是字符串 console.log('沙漠'+'骆驼')

typeof 检测变量数据类型 var num = 19; console.log(typeof num); 结果number var ti = null console.log(typeof ti); 结果 object

数据类型转换

转换为字符串 toString() var num=1;vlert(num.toString()); String() 强制转换 var num=1;alert(String(num)); 加号拼接字符串 var num=1; alert(num+"");

转数字

parseInt(string)函数 parseInt('6545') parseFloat(string)函数 parseFloat('232.32') Number() 强制转换 Number('12') js隐式转换（- * /） '12'-0

转布尔类型

Boolean() 函数 '' 、0、NaN、null、undefined 会转换为false

运算符

算术运算符递增和递减运算符，++num 与num++ 单独用一样， num++ 先返回原值，然后再加1 比较运算符 > < >= <= == 会转型(18 == '18') != === !== 要求数值和类型都一致逻辑运算符 && and || or ！ not 赋值运算符

逻辑中断(短路操作) console.log(123 && 456) 456 console.log(0 && 456) 0 console.log(123 || 456) 123 console.log(0 || 456) 456

var num=0 console.log(123 || num++) 返回123， num++ 不执行 console.log(num) 0

赋值运算符

+= -= *= /= %=

优先级

() 一元运算符算运算符关系相等逻辑（逻辑与比或权重高）赋值逗号运算符

流程控制

顺序，分支，循环

分支

if （条件表达式为真）{ 要执行的语句 }

if （条件表达式为真）{ 要执行的语句1 } else { 要执行的语句2 }

if （条件表达式为真）{ 要执行的语句1 } else if (表达式2) { 要执行的语句2 } else {

}

三元表达式: 条件表达式 ? 表达式1：表达式2 num > 5 ? '是的': '不是'

switch(表达式){ case value1: 执行语句1； break; case value2: 执行语句1； break; ... default: 执行语句; }

switch 是 ===

循环

for（var i = 1;i<=100; i++）{ console.log("hello"); }

while

do while

break continue

数组

var arr= new Array(); var arr = []; var arr1= [1,2,'pink',true];

arr1[0] arr1[1]

arr1.length

return 终止函数并返回一个值。如果返回多个值可以用数组。

arguments 的使用，arguments存储了所有的实参。

arguments 伪数组具有数组的length属性按照索引的方式存储它没有真正数组的一些方法pop() push()等

函数声明的方式

1、利用函数关键字自定义函数(命名韩式) function fn(){};

调用fn();

2、函数表达式(匿名函数)

var 变量名 = function(){};

var fun = function(){}

fun是变量名，不是函数名

js的作用域

作用域: 就是代码名字(变量)在某个范围起作用和效果。目的为了提高程序可靠性，减少命名冲突。

全局作用域: 整个script标签，或者是一个单独的js文件。局部作用域: 在函数内部就是局部作用域，这个代码名字只在函数内部起效果和作用。

全局变量和局部变量

全局变量：在全局作用域下的变量。在函数内也可以使用。如果在函数内部没有声明，直接赋值的变量也是全局变量。

局部变量: 函数内的变量，在函数外不能调用。

从执行效率来看全局变量和局部变量

1、全局变量只有在浏览器关闭时才会销毁，比较占内存资源。 2、局部变量当程序执行完毕就会销毁，比较节源资源。

JS没有块级作用域。在es6新增块级作用域。{}

if （3<5）{ var num= 10; } console.log(num); //可以调用num,js没有块级作用域

作用域链。

内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就成为作用域链。

预解析

console.log(num); //undefined var num = 10;

预解析js引擎会把js里面所有的var还有function提升到当前作用域的最前面。执行代码按照代码书写的顺序从上往下执行。

预解析分为变量预解析和函数预解析(函数提升)

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

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

        var num = 10;
        fun();
        function fun() {
            console.log(num);
            var num = 20;
        }
        fun();

js对象

在js中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

为什么需要对象？保存一个值用变量，保存多个值用数组。保存一个人的完整信息？

创建对象三种方法

字面量创建对象

var obj = {} //创建一个空对象

var obj = { uname： 'zhangsan', age: 18, sex:'男', sayHi: function(){ console.log('hi~'); } } console.log(obj.uname); 调用对象属性对象名.属性 console.log(obj['uname']); 对象名['属性名']

调用方法 obj.sayHi();

变量和属性都是用来存储数据的。变量单独声明并赋值，使用时候直接写变量名，单独存在属性在对象里面的不需要声明，使用时 duixiang.shuxing

函数和方法的相同点，都是实现某种功能

new Object创建对象

var obj = new Object(); //创建空的对象

obj.uname= 'zhangsan'; obj.age = 18; obj.sex='男'； obj.sayHi = function(){ console.log('hi~')};

利用构造函数创建对象,一次可以创建多个对象

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

new 构造函数名();

构造函数名字的首字母要大写

function Start(uname,age,sex){ this.uname=uname; this.age = age; this.sex= sex; this.sing = function(sang){ console.log(sang); } }

var ldh = new Start('liudehua',18,'男') // 调用函数返回一个对象 conslole.log(typeof ldh)

调用构造函数要用new.

new 关键字的作用

new 构造函数在内存中创建一个空对象 this 就会指向刚才创建的空对象执行构造函数里面的代码，给这个空对象添加属性和方法。返回这个新对象(构造函数里面不需要return)

遍历对象

var obj = { name ： ‘pin’, age : 18, sex: '男', fn: function(){}, }

for in {} 遍历

for （var k in obj） { console.log(k); // 属性名 console.log(obj[k]); }

java 中的对象分为三类，自定义对象，内置对象，浏览器对象

内置对象

Math Date Array String

MDN文档

检测数组 arr instanceof Array Array.isArray(arr)

基本包装类型

就是把简单数据类型包装成了复杂数据类型。 var str = 'andy';

var temp = new String('andy') str = temp; temp = null;

字符串不可变。

简单数据类型复杂数据类型

复杂数据类型传参

<< 上一章节

登陆评论: 使用GITHUB登陆