es高亮java java es script

转载

ganmaobuhaowan 2023-09-01 13:56:19

文章标签 es高亮java 学习 javascript 前端 html 文章分类 Java 后端开发

文章目录

一、什么是JavaScript
二、JavaScript三种方式
三、数据存储单位
四、变量
五、数据类型

一、什么是JavaScript

JavaScript（简称“JS”）
JavaScript 是属于 HTML 和 Web 的编程语言。
是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript
基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan
Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript
5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript
2015，但通常被称为ECMAScript 6 或者ES2015。
定义来自于百度百科

JavaScript 的组成

ECMAScript：JavaScript 的语法标准。
DOM：JavaScript 操作网页上的元素的 API。
BOM：JavaScript 操作浏览器的部分功能的 API。

JavaScript 的特点

可以使用任何文本编辑工具编写，然后使用浏览器就可以执行程序。
是一种解释型脚本语言：代码不进行预编译，从上往下逐行执行，不需要进行严格的变量声明。
主要用来向 HTML 页面添加交互行为。

1.JavaScript使用案例
新建一个demon.html文件，用于写编码。
案例代码：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
  <!--在html里面直接写js代码，js代码必须在script标签里面-->
  <script>
      console.log("hello world");
    </script>
     <!--在外部引用后缀为js的文件，可以是根路径和绝对路径-->
    <!--<script src="demon.js"></script>  -->
  </body>

上述代码的含义就是在控制台打印一句话：hello world。

首先教大家怎么查看：将上述代码复制到一个 html 文件中，然后在浏览器中运行，点击 F12，再点击控制台上的 Console，即可查看。我们也可以在控制台直接输入JavaScript代码，然后点击enter让其执行，如下图所示：

es高亮java java es script_前端

二、JavaScript三种方式

1.行内式

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
  <input type="button" value="按钮" onclick="alert('hello')"> 
</body>

2.内嵌式

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <script>
        //方式一，给程序员使用 f12
        console.log('hello');
        //方式二，给用户使用
        alert('hello')
        //方式三，给用户输入一些数据
        console.log('hello');
    </script>
</body>

3.外部js文件

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>

<body>
    <script src="文件名称.js"></script>
</body>

三、数据存储单位

大小的关系：bit<byte<kb<GB<TB
1.位（bit）：1bit可以保存一个0或者一个1 （最小的存储单位）
2.字节（Byte）：1B=8b
3.千字节（KB）:1KB=1024B
4.兆字节（MB）:1MB=1024KB
5.吉字节（GB）:1GB=1024MB
6.太字节（TB）:1TB=1024GB

四、变量

JavaScript变量：是存储数据值的容器。
注：变量不是数值本身，变量仅仅是一个用于存储数值的容器。
举个实例：
let x=7其中x是变量，存储值为7

所有 JavaScript 变量必须以唯一的名称的标识。
这些唯一的名称称为标识符。
标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。
构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称
变量名不能有空格。

提示：JavaScript标识符对大小写敏感。

声明变量
let和const是ES6新增的声明变量的关键词，之前声明变量的关键词是var。例如：

var name=“张三”
  let name=“李四”
  const name=“王五”

1.let与var的不同

1.var定义的变量，可以预解析提前调用，结果为undefined；let定义的变量不能预解析，提前调用会报错
2.var定义的变量名称可以重复使用，效果是重复赋值；let定义的变量不能重复，否则执行会报错
3.var定义的变量作用域是全局或者局部（函数内）的；let定义的变量如果在{}中只能在{}中调用，有块作用域

2.const与var的不同

1.var定义的变量可以以预解析，const定义的变量不能预解析，否则结果报错
2.var定义的变量可以重复，const定义的变量不行，否则结果报错
3.var定义的变量作用域是全局/局部作用域。const定义的变量如果在{}中只能在{}中调用。
4.const 定义的变量存储的数据数值不能改变，也就是const定义的变量是常量，不可以被修改

3.代码演示

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <script>
        // 提前调用 预解析
        console.log(test);
        // 提前调用 预解析
        console.log(test1);

        // 定义的变量 
        var test = 100;
        let test1 = 200;
    </script>
</body>

运行结果：提前调用报错

es高亮java java es script_前端_02

<head>
    <meta charset="UTF-8" />
    <title></title>
</head>

<body>
    <script>
        // var 定义的变量 
        var test = 100;
        let test2 = 200;
        console.log(test);
        // 变量名称重复 重复赋值效果
        var test = '北京';
        // 变量名称重复 结果是报错
        let test2 = '上海';  
    </script>
</body>

运行结果：报错

es高亮java java es script_学习_03

<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <script>
        // 在 {} 中 使用 let 定义变量 只能在 { } 中 使用
        // 如果需要在 { } 中 对 let 定义的变量 进行操作 
        // 提前定义 变量 在 {} 中 进行赋值操作
        if (true) {
            var a = 300;
            let b = 400;
            // let 声明的变量 在 { } 中可以调用
            // 对 {} 外定义的变量 进行赋值操作
            console.log(b);
        }
        console.log(a);
        // let 声明的变量 在 { } 外 不能调用 
        console.log(b);
    </script>
</body>

运行结果：

es高亮java java es script_前端_04

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <script>
        // const 定义的变量 不能重复赋值
        // const c = 100 ;
        // c = 200 ;
        // 结果是报错
        const arr = [1, 2, 3, 4, 5];
        // 只是修改引用数据类型中,数据单元存储的数据
        // 没有修改 arr变量中 存储的引用数据类型的内存地址
        arr[0] = '北京';
        console.log(arr);
    </script>
</body>

运行结果：

es高亮java java es script_学习_05

五、数据类型

数据类型分为：基本数据类型、引用（复杂）数据类型，还有一种新的原始数据类型：Symbol是ES6引入的，表示独一无二的值。有九种类型

基本数据类型：字符串（Sring）、数字（Number）、布尔（Boolean）、空（null）、未定义（undefined）、Symbol
引用数据类型：对象（Object）、数组（Array）、函数（Function）

1.Undefined：Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。

2.Null：Null类型是第二个只有一个值的数据类型。其特殊值就是Null。从逻辑角度上看，null是一个空的对象指针。而这也正是使用typeof操作符检测null值，会返回“object”的原因。

3.Boolean：即布尔类型，该类型有两个值：true、false。需要注意的是，Boolean类型的字面值true和false是区分大小写的。也就是说，True和False(以及其它的混合大小形式)都不是Boolean值，只是标识符。

4.Number：该类型的表示方法有两种形式，第一种是整数，第二种为浮点数。整数：可以通过十进制，八进制，十六进制的字面值来表示。浮点数：就是该数值中必须包含一个小数点，且小数点后必须有一位数字。

5.String：String类型用于表示由零或多个16位的Unicode字符组成的字符序列，即字符串。至于用单引号，还是双引号，在js中还是没有差别的。记得成对出现。

6.Symbol类型，符号 (Symbols) 是 ECMAScript 第 6 版新定义的。符号类型是唯一的并且是不可修改的

var s = Symbol()

Symbol 函数前不能使用 new 命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象
Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述

7.Object：Object数据类型，称为对象，是一组数据和功能（函数）的集合。可以用new操作符后跟要创建的对象类型的名称来创建。也可以用字面量表示法创建。在其中添加不同名（包含空字符串在内的任意字符串）的属性。

8.Array
JavaScript 数组用方括号书写。数组的项目由逗号分隔。

var cars=["Porsche", "Volvo", "BMW"]

数组索引基于零，这意味着第一个项目是 [0]，第二个项目是 [1]，以此类推。

ECMAScript中的数组和其他语言的数组有着相当大的区别：
ECMAScript 数组的每一项可以保存任何类型的数据；
ECMAScript数组的大小可以动态调整，可向数组添加元素或者删除元素；

9.Function
ECMAScript中的函数是对象，与其他引用类型一样具有属性和方法。因此，函数名实际是一个指向函数对象的指针。
函数只有在调用的时候才能执行函数体里面的代码，不调用就永远不会执行。

1）、函数声明

//函数声明
function sum(num1,num2){    
    return num1+num2;
}
//函数表达式 这里的分号很重要
 var sum = function(num1,num2){  
    return num1+num2;
};

2）、没有重载

function addSomeNumber(num){    
    return num + 100;
}
function addSomeNumber(num){    
    return num + 200；
}
var result = addSomeNumber(100);  //300

创建第二个函数时覆盖了引用第一个函数的变量addSomeNumber。

3）、函数声明与函数表达式

alert (sum(10,10));
function sum(num1,num2){    
    return num1+num2;
}

这样的代码可以正常执行。代码开始执行前，解析器会率先读取函数声明并将其添加到执行环境中，对代码求值前，JS引擎在第一遍会声明函数并将它们放到源代码树的顶部。但改为函数表达式就会出错。

4）、作为值的函数
像传递参数一样把一个函数传递给另一个函数

function callSomeFunction(someFunction,someArgument){   
    return someFunction(someArgument);
}
function add10(num){
    return num+10;
}
var result1 = callSomeFunction(add10,10);
alert(result1);  //20
function getGreeting(name){
    return "Hello"+name;
}
var result2 = callSomeFunction(getGreeting,"Mike");
alert(result2);  //Hello Mike
//callSomeFunction是通用的，函数作为第一个参数传递进去，返回执行第一个参数后的结果

从一个函数中返回另一个函数

function createComparisonFunction(propertyName){
    return function(object1,object2){
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        if(value1<value2){
            return -1;
        }else if(value1>value2){
            return 1;
        }else{
            return 0;
        }
    }
}
var date = [{name:"Mike", age:28},{name:"Amy", age:29}];//创建包含两个对象的数组
date.sort(creatComparisonFunction("name"));
alert(date[0].name);//Amy
date.sort(creatComparisonFunction("age"));
alert(date[0].name);//Mike

5）、ES6箭头函数