JS基础参考笔记整合版

    科技2022-07-13  138

    JS基础参考笔记

    JS是什么JS现在的使用方向JS和html、css的区别JS的组成JS的书写位置什么是JS中的变量如何使用变量 JS的数据类型注释算数运算符关系运算符赋值运算符逻辑运算符运算符的优先级表达式和表达语句流程控制分支结构if语句switch语句 循环结构while语句do...while语句for循环语法 数组为什么要学习数组数组的定义创建数组方法获取数组元素遍历数组数组中新增元素 函数什么是函数函数的定义函数的调用函数的参数函数的返回值 作用域全局变量和局部变量块级作用域作用域链预解析 内置对象MDNMath对象Date对象Array对象String对象

    JS是什么

    JS就是JavaScript的简称,JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。JavaScript与Java名称上的近似,是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和JavaScript的关系就像张雨和张雨生的关系,只是名字很像。JavaScript 运行在客户端(浏览器)的编程语言。

    JS现在的使用方向

    JavaScript 发展到现在几乎无所不能。小到网页特效、桌面程序,大到服务端开发、命令行工APP以及游戏开发都用得到。

    JS和html、css的区别

    JS可以用来控制网页内容增加动态效果而css大多数情况下只用来美化网页,html做到的是提供网页结构和其中的内容。打个比方的话,html可以看做是一个人,css可以看做是那个人的衣服而JS则是那个人的行为举止。

    JS的组成

    JS由ECMAScript、DOM与BOM构成。ECMAScript是JS的核心,它定义了JS的语法规范,描述了语言的基本语法和数据类型。BOM则是浏览器对象模型,通俗的说就是操作浏览器的API,通过BOM可以对浏览器进行控制分辨率等操作。DOM为文档对象模型,和BOM类似的是他们同为API但是不同的在于BOM的对象是浏览器而DOM为页面元素,DOM可以对HTML进行详细的操作。

    JS的书写位置

    JS一般情况下分为三种书写方式,一为行内书写,二为标签内书写,三为外部书写页面引入。我们下面主要说一下标签内书写和外部文件书写引入。

    写在script标签中 <body> <script> alert('hello world'); </script> </body> 写在外部文件页面引入 <script src="move.js"></script> 注意在外部的文件不能带有script标签直接书写就好

    什么是JS中的变量

    其实js中的变量和其他的变量都一样,都是是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据。作用也不尽相同,都是为了更简便的获取或者修改内存数据。

    如何使用变量

    使用变量得先声明,在js中变量的声明用var属性 var iii; 是个变量就得赋值,赋值就是给变量一个值 var iii; iii=1;

    如此便是给变量进行赋值了。

    可同时声明多个变量且可全部进行赋值 var i,j,k; i=1; j=2; k=3; 变量也有一个规则,其中便有不能以数字开头,不能是关键字或者保留字如for,区分大小写,不遵守规则就会报错。其中有不合法的变量名,比如a、1、name、_sex等等。

    JS的数据类型

    Number、String、Boolean、Undefined、Null,我们现在只介绍前两个类型

    Number类型 进制:八进制、十进制与十六进制浮点数:最高精度为17位小数,但是算术计算精度不如整数,两个浮点数不相等数值判断:NaN就是not a number的简称,他与任何值都不相等,包括他本身。 String类型

    转义符

    \n 表示换行\t 表示制表\b 表示空格\r 表示回车\f 表示进制\ 表示斜杠’ 表示单引号" 表示双引号

    字符串长度 length属性用来获取字符串长度

    var id ='你hao世界'; console.log(id.length);

    字符串拼接 字符串凭借用+来进行连接

    console.log(1+1); console.log('a'+'b'); console.log('10'+'10'); 如果两边都是数字就是算术功能 反之有一边不是数字则是拼接功能

    注释

    单行注释 //这是一个变量 多行注释 /*这还是一个变量 这不是一个变量 不知道是不是变量 */

    算数运算符

    + - * / % 一元运算符 即只有一个操作数的运算符,1+2就不是一元运算了 因为他有两个操作数,所以是二元运算。 一元运算符有++ 自身加一 - - 自身减一 前置++:先加1,后参与运算后置++:先参与运算,后加1前置-- :先减1,后参与运算后置-- :先参与运算,后减1

    关系运算符

    < > == <= >= != === !== =====的区别在于==只进行值的比较,===类型和值同时相等时才相等

    赋值运算符

    = += -= /= *= %=

    逻辑运算符

    &&读作与 ||读作或 !读作非

    运算符的优先级

    优先级从高到低为 ()优先级最高 一元运算符++ -- ! 算术运算符先*/%+- 关系运算符> >= < <= 相等运算符 == != === !== 逻辑运算符 先&&|| 赋值运算符

    表达式和表达语句

    表达式

    一个表达式可产生一个值,可能是运算、函数调用也可能是字面量。

    语句

    可以理解为一个行为,循环语句和判断语句就是经典的语句。

    流程控制

    程序的三种基本结构

    顺序结构 从上到下执行的代码就是顺序结构,程序默认就是依顺序结构执行。分支结构 根据不同的情况,执行相应的代码循环结构 重复的去进行一件事情接下来我们详细的介绍分支结构与循环结构.

    分支结构

    if语句

    语法结构

    if(条件表达式){ 执行语句 } if(条件表达式){ 成立执行语句 }else{ 否则执行语句 } if(条件1){ 成立执行语句 }else if(条件2){ 成立执行语句 }else{ 最后默认执行语句 }

    switch语句

    语法格式

    switch(expression){ case 常量1: 语句; break; case 常量2: 语句; break; case 常量n: 语句; break; }

    break可以省略,如果省略则继续执行下一个case switch语句比较时使用的是全等操作符。

    循环结构

    在js中有while、do…while和for三种循环

    while语句

    基本语法

    当循环条件为true时,执行循环体吗,反之结束循环。 while (循环条件){ 循环体 }

    do…while语句

    do…while循环和while循环很相似,可以与while循环相互替代,但是do…while循环不管条件成立与否都只会执行一次

    do{ 循环体; }while(循环条件);

    for循环语法

    for循环的表达式之间用的是;分隔 for(初始化表达式1;判断式2;自增表达式3{ 循环体4 }

    它的执行顺序为1243—243—243(知道循环条件变为false)

    continue和break

    continue:立即跳出当前循环,继续下一循环,落点位置为自增表达式的地方 break:立即跳出整个循环,开始执行循环后边的内容,落点位置为大括号末尾的地方

    数组

    为什么要学习数组

    数组可以按照一定顺序吧多个元素放到一个集合中。

    数组的定义

    数组是个有序列表,可以在数组中存放任意数据 ,并且长度可以实时调整。

    创建数组方法

    创建空数组 var arr1 = []; 创建一个包含数值的数组,数组项应用,隔开 var arr2 = [1,2,3]; 创建一个包含两个字符串的数组,字符串应用''标记 var arr3 = ['a','b']; 可以通过length属性获取数组长度 console.log(arr3.length);

    获取数组元素

    格式为:数组名[下标(索引)] 可以获取数组对应下标的那个值,如果下标不存在则返回undefined。

    var arr = ['1','2','3','4',]; arr[0]; 此时得到的数据为1 arr[1]; 此时得到的数据为2 arr[2]; 此时得到的数据为3 arr[9]; 因数组最大下标为3,因此返回undefined

    遍历数组

    遍历顾名思义就是遍及所有,简而言之就是对数组的每一个元素都访问一次就叫遍历

    基本语法

    for(var i=0;i<arr.length;i++){ 数组遍历的固定结构 }

    数组中新增元素

    格式为:数组名[下标]=值; 如果下标有对应值,则将其覆盖反之则新增一个元素

    var arr = ['1','2','3','4']; arr[0]='100' 此操作会将1替换成100 arr[4]='5' 此操作会新增一个5的值

    函数

    什么是函数

    把一段相对独立的具有特定功能的代码封装,使其形成一个独立实体就是函数。作用就是封装一段代码,将来可以重复使用

    函数的定义

    声明 function 函数名 (){ 函数体 } 表达式 var fn = function(){ 函数体 }

    函数的调用

    语法 函数名();

    函数的参数

    语法 function 函数名(形参,形参,形参...){ 函数体 } //调用 函数名(实参,实参,实参...)

    函数的返回值

    当函数执行完的时候,可以让函数返回一些东西,就是返回值,可以通过return返回一个返回值。

    语法

    function 函数名(形参,形参...){ 函数体 return 返回值; } //可以通过变量接收 var 变量 = 函数名(实参,实参...)

    作用域

    就是变量可以起作用的范围

    全局变量和局部变量

    全局变量就是在任何地方都可以访问到的变量,对应全局作用域局部变量就是只在固定代码片段可以访问到的变量,对应局部作用域

    块级作用域

    任何一对({})中的语句集都属于一个块,在其中定义的含量在块外是不可见的,称之为块级作用域。

    作用域链

    只有函数可以制造作用域结构, 那么只要是代码,就至少有一个作用域, 即全局作用域。凡是代码中有函数,那么这个函数就构成另一个作用域。如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域。将这样的所有的作用域列出来,可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

    预解析

    过程

    把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。 把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用。 先提升var,在提升function

    内置对象

    js中的对象分为3种:内置对象、浏览器对象、自定义对象 对象只是带有属性和方法的特殊数据类型

    MDN

    是Mozilla 开发者网络(MDN)提供有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。

    Math对象

    Math对象不是构造函数,它具有数学常数和函数的属性和方法,都是以静态成员的方式提供

    Math.PI // 圆周率 Math.random() // 生成随机数 Math.floor()/Math.ceil() // 向下取整/向上取整 Math.round() // 取整,四舍五入 Math.abs() // 绝对值 Math.max()/Math.min() // 求最大和最小值 Math.sin()/Math.cos() // 正弦/余弦 Math.power()/Math.sqrt() // 求指数次幂/求平方根

    Date对象

    创建 Date 实例用来处理日期和时间。Date 对象基于世界标准时间1970年1月1日起的毫秒数。

    var now = new Date(); console.log(now.valueOf()); // 获取距1970年1月1日(世界标准时间)起的毫秒数 Date构造函数的参数 1. 毫秒数 1498099000356 new Date(1498099000356) 2. 日期格式字符串 '2020-10-4' new Date('2020-10-4') 3. 年、月、日…… new Date(2015, 4, 1) 日期格式化 toString() // 转换成字符串 valueOf() // 获取毫秒值 // 下面格式化日期的方法,在不同浏览器可能表现不一致,一般不用 toDateString() toTimeString() toLocaleDateString() toLocaleTimeString() 获取日期的指定部分 getTime() // 返回毫秒数和valueOf()结果一样,valueOf()内部调用的getTime() getMilliseconds() getSeconds() // 返回0-59 getMinutes() // 返回0-59 getHours() // 返回0-23 getDay() // 返回星期几 0周日 6周6 getDate() // 返回当前月的第几天 getMonth() // 返回月份,***从0开始*** getFullYear() //返回4位的年份 如 2020 计算时间差案例 function getInterval(start, end) { var day, hour, minute, second, interval; interval = end - start; interval /= 1000; day = Math.round(interval / 60 /60 / 24); hour = Math.round(interval / 60 /60 % 24); minute = Math.round(interval / 60 % 60); second = Math.round(interval % 60); return { day: day, hour: hour, minute: minute, second: second } }

    Array对象

    创建数组对象的两种方式 字面量方式new Array() // 1. 使用构造函数创建数组对象 // 创建了一个空数组 var arr = new Array(); // 创建了一个数组,里面存放了3个字符串 var arr = new Array('zs', 'ls', 'ww'); // 创建了一个数组,里面存放了4个数字 var arr = new Array(1, 2, 3, 4); // 2. 使用字面量创建数组对象 var arr = [1, 2, 3]; // 获取数组中元素的个数 console.log(arr.length);

    检测对象是否为数组

    instanceofArray.isArray() HTML5中提供的方法,有兼容性问题。函数的参数,如果要求是一个数组的话,可以用这种方式来进行判断。

    toString()/valueOf()

    toString() 把数组转换成字符串,逗号分隔每一项valueOf() 返回数组对象本身

    数组常用方法

    push()、shift()、unshift()、reverse()、sort()、splice()、indexOf() // 1 栈操作(先进后出) push() pop() //取出数组中的最后一项,修改length属性 // 2 队列操作(先进先出) push() shift() //取出数组中的第一个元素,修改length属性 unshift() //在数组最前面插入项,返回数组的长度 // 3 排序方法 reverse() //翻转数组 sort(); //即使是数组sort也是根据字符,从小到大排序 // 带参数的sort是如何实现的? // 4 操作方法 concat() //把参数拼接到当前数组 slice() //从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始 splice() //删除或替换当前数组的某些项目,参数start, deleteCount, options(要替换的项目) // 5 位置方法 indexOf()、lastIndexOf() //如果没找到返回-1 // 6 迭代方法 不会修改原数组(可选) every()、filter()、forEach()、map()、some() // 7 方法将数组的所有元素连接到一个字符串中。 join() 清空数组 // 方式1 arr = []; // 方式2 arr.length = 0; // 方式3 arr.splice(0, arr.length);

    String对象

    字符串的不可变 var str = 'abc'; str = 'hello'; // 当重新给str赋值的时候,常量'abc'不会被修改,依然在内存中 // 重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变 // 由于字符串的不可变,在大量拼接字符串的时候会有效率问题 创建字符串对象 var str = new String('Hello World'); // 获取字符串中字符的个数 console.log(str.length); 字符串对象的常用方法 // 1 字符方法 charAt() //获取指定位置处字符 charCodeAt() //获取指定位置处字符的ASCII码 str[0] //HTML5,IE8+支持 和charAt()等效 // 2 字符串操作方法 concat() //拼接字符串,等效于+,+更常用 slice() //从start位置开始,截取到end位置,end取不到 substring() //从start位置开始,截取到end位置,end取不到 substr() //从start位置开始,截取length个字符 // 3 位置方法 indexOf() //返回指定内容在元字符串中的位置 lastIndexOf() //从后往前找,只找第一个匹配的 // 4 去除空白 trim() //只能去除字符串前后的空白 // 5 大小写转换方法 to(Locale)UpperCase() //转换大写 to(Locale)LowerCase() //转换小写 // 6 其它 search() replace() split() fromCharCode() // String.fromCharCode(101, 102, 103); //把ASCII码转换成字符串
    Processed: 0.011, SQL: 8