0


JavaScript基础总结---重点

目录

JavaScript简介

什么是JavaScript

  • JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思)
  • 脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行,也称为解释型语言,不需要被编译为机器码在执行,跟C++这种需要被编译的语言不一样
  • 现在也可以基于 Node.js 技术进行服务器端编程

浏览器执行JS过程

浏览器分成两部分:渲染引擎和JS 引擎

渲染引擎:用来解析

HTML

CSS

,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit

JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8

浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。

JS的组成

JavaScript的三大组成部分是:

ECMAScript

DOM

BOM

在这里插入图片描述

ECMAScript

ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM

DOM是文档对象模型(Document Object Model)的简称。是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

BOM

BOM 是浏览器对象模型(Browser Object Model)的简称。它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

JS的引入方式

1、行内式JS

<inputtype="button"value=""onclink="javascript:alert('你好')"/>
  • 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如: onclink
  • 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
  • 可读性差,在 HTML 中编入 JS 大量代码时,不方便阅读
  • 特殊情况下使用

2、内嵌式JS

<script>alert('你好');</script>
  • 可以将多行JS代码写到

3、外部JS

<scriptsrc="my.js"></script>
  • 利于HTML页面代码结构化,把单独JS代码独立到HTML页面之外,既美观,又方便
  • 引用外部JS文件的script标签中间不可以写代码
  • 适合于JS代码量比较大的情况

函数与作用域

arguments的使用

当我们不确定有多少个参数传递的时候,可以用

arguments

来获取。在 JavaScript 中,

arguments

实际上它是当前函数的一个内置对象。所有函数都内置了一个

arguments

对象,arguments 对象中存储了传递的所有实参。

arguments

存放的是传递过来的实参

arguments

展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点

  1. 具有 length 属性
  2. 按索引方式储存数据
  3. 不具有数组的 push , pop 等方法
<script>// 当我们不确定有多少个参数传递的时候,可以用 arguments 来获取。//在 JavaScript 中,arguments 实际上它是当前函数的一个内置对象。//所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。// 函数声明functionfn(){
            console.log(arguments);//里面存储了所有传递过来的实参
            console.log(arguments.length);// 3
            console.log(arguments[2]);// 3}// 函数调用fn(1,2,3);// 利用函数求任意个数的最大值functionmaxValue(){var max = arguments[0];for(var i =0; i < arguments.length; i++){if(arguments[i]> max){
                    max = arguments[i];}}return max;}
        console.log(maxValue(1,2,3,4));;</script>

全局变量与局部变量

全局变量

  • 在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)
  • 全局变量在代码的任何位置都可以使用
  • 在全局作用域下 var 声明的变量 是全局变量
  • 特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)

局部变量

  • 在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
  • 局部变量只能在该函数内部使用
  • 在函数内部 var 声明的变量是局部变量
  • 函数的形参实际上就是局部变量

区别
全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间

<script>// 现阶段没有块级作用域{},只有全局和局部,es6才新增块级// 在C++不行// if(3 < 5) {//     int num = 10;// }// cout<<num;if(3<5){var num =10;}
    console.log(num);// 报错,局部变量只能在里面使用functionsort(){var num2 =22;}
    console.log(num2);</script>

预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。
预解析:js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面

代码执行:从上到下执行JS语句

预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是

undefined

,为什么在函数声明之前就可以调用函数。

<script>// js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面// 1.undefined
    console.log(num1);var num1 =11;// var num1;// console.log(num1);// num1 = 11;// 2.22fun1();functionfun1(){
        console.log(22);}// 函数声明       // fun1();// function函数提升到当前作用域(全局)最前面声明// function fun1() {//     console.log(22);// }// 3.报错fun2();varfun2=function(){
        console.log(33);}// var fun2;// fun2();函数未声明就调用,报错// fun2 = function() {//     console.log(33);// }</script>

对象

创建对象的三种方式

1.利用字面量创建对象

对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法
{ } 里面采取键值对的形式表示
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)

// 1.{}字面量
var obj = {
    name: 'hai',
    sex: '男',
    fun: function() {
        alert('大家好');
    }
}
// 调用对象的方式
console.log(obj.name);
console.log(obj['name']);
obj.fun();

2.利用 new Object 创建对象

var 对象名 = new Object();

var obj2 = new Object();
obj2.name = 'hhh';
obj2.fun2 = function() {
    alert('你好');
}
console.log(obj2.name);
console.log(obj2['name']);
obj2.fun2();

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

构造函数 :是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
使用构造函数要注意以下两点:

  1. 构造函数用于创建某一类对象,其首字母要大写
  2. 构造函数要和 new 一起使用才有意义
function Star(uname ) {//大写
    this.name = uname;
    this.fun3 = function(sang) {
        console.log(sang);
    }
}
new Star();//空对象
var jjl = new Star('周杰伦');
console.log(typeof jjl);//typeof 运算符返回数据类型
console.log(jjl.name);
jjl.fun3('稻香');

遍历对象属性

for(var k in jjl) {
    console.log(k);//返回属性
    console.log(jjl[k]);//返回属性值
}

变量、属性、函数、方法总结

变量:单独声明赋值,单独存在
属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征
函数:单独存在的,通过“函数名()”的方式就可以调用
方法:对象里面的函数称为方法,方法不需要声明,使用 “对象.方法名()”的方式就可以调用,方法用来描述该对象的行为和功能。

new关键字执行过程

new 在执行时会做四件事:

  1. 在内存中创建一个新的空对象。var jjl = new Star('周杰伦');
  2. 让 this 指向这个新的对象。this.name = uname;
  3. 执行构造函数里面的代码,给这个新对象添加属性和方法
  4. 返回这个新对象(所以构造函数里面不需要return)

内置对象

JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象
内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能
JavaScript 提供了多个内置对象:Math、 Date 、Array、String等

Math对象

Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。与其他全局对象不同的是,Math 不是一个构造器。Math 的所有属性与方法都是静态的。

<script>
    console.log(Math.max(1,2,3));// 封装自己的数学对象var myMath ={
        max:function(){var max = arguments[0];for(var i =0; i < arguments.length; i++){if(arguments[i]> max){
                    max = arguments[i];}}return max;}}
    console.log(myMath.max(1,2,3,4));
    console.log('\n');// 取整
    console.log(Math.floor(1.2));//向下取整1
    console.log(Math.floor(1.6));//1
    console.log(Math.ceil(1.2));//向上取整2
    console.log(Math.ceil(1.6));//2// 四舍五入
    console.log(Math.round(1.2));//1
    console.log(Math.round(1.6));//2
    console.log(Math.round(-1.2));//-1
    console.log(Math.round(-1.5));//-1特殊,.5往大的取
    console.log('\n');// 随机数函数 随机返回一个小数,其取值范围是 [0,1),左闭右开 0 <= x < 1(表示一种概率)
    console.log(Math.random());
    console.log('\n');// 得到两个数之间的随机整数,并且包含这两个整数(因为左闭右开所以要+1)functionmyRandom(min, max){return Math.floor(Math.random()*(max - min +1))+ min;}
    console.log(myRandom(1,10));;</script>

Date对象

创建一个 JavaScript Date 实例,该实例呈现时间中的某个时刻。Date 对象则基于Unix Time Stamp,即自 1970 年 1 月 1 日(UTC)起经过的毫秒数。

  • Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
  • 创建一个新Date对象的唯一方法是通过new操作符
  • Date 实例用来处理日期和时间
    方法名说明代码getFullYear()获取当年dObj.getFullYear()getMonth()获取当月(0-11)dObj.getMonth()getDate()获取当天日期dObj.getDate()getDay()获取星期几(周日0到周六6)dObj.getDay()getHours()获取当前小时dObj.getHours()getMinutes()获取当前小时dObj.getMinutes()getSeconds()获取当前秒钟dObj.gerSeconds()
    <script>// 日期对象Date()  是一个构造函数 必须使用new来调用我们创建的对象var arr =newArray();// 如果没有输入任何参数,则 Date 的构造器会依据系统设置的当前时间来创建一个 Date 对象。var date =newDate();
      console.log(date);// 参数常用写法1.数字 2.字符串// console.log(Date('2022-10-1 20:55:10'));没new实例化,不能实现var date1 =newDate('2022-10-1 20:55:10');
      console.log(date1);
      console.log('\n');var date2 =newDate();
      console.log(date2.getFullYear());
      console.log(date2.getMonth()+1);//0~11月
      console.log(date2.getDate());
      console.log(date2.getDay());//1~6~0星期天是0// 封装一个函数返回当前的时分秒 格式 08:08:08functiongetTimer(){var time =newDate();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;}
      console.log(getTimer());</script>
    

获取时间的总毫秒

<script>// 获取Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数// 实例化Date对象var date =newDate();// 1 .通过 valueOf()  getTime() 用于获取对象的原始值
    console.log(date.valueOf());//得到现在时间距离1970.1.1总的毫秒数
    console.log(date.getTime());// 2.简单的写法var date1 =+newDate();// +new Date()返回的就是总的毫秒数,
    console.log(date1);// 3. HTML5中提供的方法 获得总的毫秒数 有兼容性问题
    console.log(Date.now());</script>

倒计时案例

<script>functiongetTimer(time){var end =+newDate(time);var now =+newDate();var countDown = end - now;
        countDown /=1000;var d =parseInt(countDown /60/60/24);var h =parseInt(countDown /60/60%24);//取余24进位var m =parseInt(countDown /60%60);var s =parseInt(countDown %60);//取余60进位return d +'天'+ h +'时'+ m +'分'+ s +'秒';}
    console.log(getTimer('2022-10-11 22:43:20'));;</script>

Array对象

创建Array数组对象的两种方式

  • 字面量方式
  • new Array()

判断是否为数组

两种方法:

  1. instanceof运算符,可以判断一个对象是否属于某种类型
  2. Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法
<script>var arr =[];var obj ={};// 1.instanceof 运算符 检测是否为数组,可以翻译为“是”
    console.log(arr instanceofArray);
    console.log(obj instanceofArray);// 2.Array.isArray(参数);h5新增方法  IE9以上版本支持
    console.log(Array.isArray(arr));
    console.log(Array.isArray(obj));</script>

数组排序

方法名说明是否修改原数组reverse()颠倒数组中元素的顺序,无参数该方法会改变原来的数组,返回新数组sort()对数组的元素进行排序该方法会改变原来的数组,返回新数组

<script>var arr =[3,22,4,1];
    arr.sort()
    console.log(arr);//默认排序顺序是在将元素转换为字符串,22不生效// 解决  内联函数  要比较数字而非字符串,比较函数可以简单的用 a 减 b,如下的函数将会将数组升序排列 反之
    arr.sort(function(a, b){return a - b;});
    console.log(arr);</script>

数组索引

方法名说明返回值indexOf()数组中查找给定元素的第一个索引如果存在返回索引号,如果不存在,则返回-1lastIndexOf()在数组的最后一个索引,从后向前索引如果存在返回索引号,如果不存在,则返回-1

案例数组去重

去除数组[1,2,3,3,4,4]中重复的元素
核心算法:我们遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加。

<script>functionunique(arr){var newArray =[];for(var i =0; i < arr.length; i++){if(newArray.indexOf(arr[i])==-1){//新数组不存在就加入
                newArray.push(arr[i]);}}return newArray;}var demo =unique([1,2,3,3,4,4]);
    console.log(demo);</script>

String对象

基本包装类型

为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。

基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。例如字符串可以调用length方法求其长度。
把基本数据类型包装为复杂数据类型,其执行过程如下 :

// 1.生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2.赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;

字符串的不可变

字符串里面的值不可变,虽然看上去可以改变内容,本质是地址变了,内存中新开辟了一个内存空间。

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候,常量'abc'不会被修改,依然在内存中
// 重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变
var str = '';
for(var i = 0; i < 1000000;  i++){
    str += i;
}
console.log(str);
// 运行出结果需要花费大量时间,因为需要不断的开辟新的空间

根据字符返回位置

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
方法名****说明indexOf(‘要查找的字符’,开始的位置)返回指定内容在元字符串中的位置,如果找不到就返回-1,开始的位置是index索引号lastIndexOf()从后往前找,只找第一个匹配的
查找重复字符串案例
查找字符串 "aoooaaoo"中所有o出现的位置以及次数
核心算法:先找到第一个o,只要

str.indexOf('o')

不为-1(即还有)就继续往后找

<script>var str ="aoooaaoo";var index = str.indexOf('o');var num =0;while(index !=-1){
        console.log(index);
        num++;
        index = str.indexOf('o', index +1);}
    console.log(num);</script>

根据位置返回字符

方法名说明使用charAt(index)返回指定位置的字符(index字符串的索引号)str.charAt(0)charCodeAt(index)获取指定位置处字符的ASCII码(index索引号)str.charCodeAt(0)str[index]获取指定位置处字符HTML,IE8+支持和charAt()等效
判断一个字符串 “aeieeouuee” 中出现次数最多的字符,并统计其次数
核心算法:利用

charAt(index)

遍历字符串,字符储存给对象,最后遍历对象

<script>// 有一个对象 来判断是否有该属性 对象['属性名']var obj ={
        sex:'男'};if(obj['sex']){
        console.log(true);}else{
        console.log(false);}// 判断一个字符串 'aeieeouuee' 中出现次数最多的字符,并统计其次数。// 利用charAt(index)遍历字符串,字符储存给对象,最后遍历对象var str ="aeieeouuee";var o ={};for(var i =0; i < str.length; i++){var chars = str.charAt(i);if(o[chars]){//如果字符存在,属性值加加
            o[chars]++;}else{
            o[chars]=1;}}
    console.log(o);// 遍历对象var max =0;var ch ='';for(var k in o){if(o[k]> max){
            max = o[k];
            ch = k;}}
    console.log(max);
    console.log('最多的字符是'+ ch);</script>

字符串操作方法

方法名方法名 说明concat(str1,str2,str3…)用于连接两个或对各字符串。拼接字符串substr(start,length)从 start 位置开始(索引号), length 取的个数。slice(start,end)从 start 位置开始,截取到 end 位置 ,end 取不到 (两个都是索引号)substring(start,end)从 start 位置开始,截取到 end 位置 ,end 取不到 (基本和 slice 相同,但是不接受负)replace(被替换的字符,要替换为的字符串)在字符串中用一些字符替换另一些字符split(‘分隔符’)将字符串切分为数组

<script>// 连接与截取var str ='1234';
    console.log(str.concat('456'));//1234456
    console.log(str.substr(2,2));//34// 替换
    console.log(str.replace('1','0'));//0234// 替换所有evar str2 ='aeeeiou';while(str2.indexOf('e')!=-1){//只要存在就替换
        str2 = str2.replace('e','E');}
    console.log(str2);//aEEEiou// 切分字符串为数组 对比 join把数组转换为字符串var str3 ='1,2,3,4';
    console.log(str3.split(','));//['1', '2', '3', '4']</script>

简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型

基本数据类型:在存储时变量中存储的是值本身,如:
string ,number,boolean,undefined,null
引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用)如:
通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等

不同的内存分配

简单类型
变量的数据直接存放在变量(即栈空间中)

引用类型
栈空间里存放的是地址,真正的对象实例存放在堆空间中,栈的地址指向堆区的对象

不同类型传参的区别

知道了数据不同的内存分配,那么参数传递的变量也是不一样的,简单类型传参是把一个值复制给了形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。
而把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。

标签: javascript 前端 html

本文转载自: https://blog.csdn.net/btufdycxyffd/article/details/127286672
版权归原作者 叶子与海 所有, 如有侵权,请联系我们删除。

“JavaScript基础总结---重点”的评论:

还没有评论