JavaScript 基础语法

news2024/11/20 16:31:18

✏️作者：银河罐头
📋系列专栏：JavaEE

🌲“种一棵树最好的时间是十年前，其次是现在”

目录

  • JavaScript 的组成
  • 第一个程序
    • JavaScript 的书写形式:
    • 注释
    • 输出
  • JS 变量
  • 理解动态类型
  • 基本数据类型
  • 运算符
  • 数组
    • 创建数组
    • 访问数组元素
    • 数组的遍历
    • 新增数组元素
    • 删除数组元素
  • 函数
    • 关于参数个数
    • 函数表达式
    • 作用域
  • 对象

JavaScript 的组成

ECMAScript(简称 ES): JavaScript 语法

DOM: 页面文档对象模型, 对页面中的元素进行操作

BOM: 浏览器对象模型, 对浏览器窗口进行操作

第一个程序

hello world

通过 script 标签嵌入到 html 里面

image-20230221154851050

JavaScript 的书写形式:

1.内部 js，刚才看到的 js 标签。

	<script>
        // alert('hello');
    </script>

2.外部 js，写成一个单独的 js 文件，让 html 引入

 <script src="app.js"></script>

alert('hello');

3.行内 js， 写到 html 元素内部

<div onclick="alert('hello js')">这是一个 div, 点我下试试</div>

注释

注释方式：

html：

css：/* */

js：// /* */

输出

alert 能够弹框，从而让用户看到程序的输出。

有些对话框一弹出来，就会阻止用户操作界面的其他部分，这种叫做模态对话框。

console.log 就可以在控制台中打印日志。

image-20230221160514874

JS 中的 console.log 就类似于 Java 里的 println , 有用的调试手段。

JS 变量

var 变量名 = 初始值；

var a = 10;
console.log(a);
var b = 'hello';
console.log(b);

定义变量不用写类型。不写类型，不意味着没有类型，而是变量的类型，是通过初始化操作的值来确定的。

a 的类型是 number 类型( JS 不区分 int 和 double ，统一都叫 number)

b 的类型是 string 类型

let a = 10;
let b = 'hello';

JS 里定义变量使用的关键字还可以写作 let

var 是属于老式写法

let 是新式写法， 规则更接近 c++，Java 主流语言。

理解动态类型

JS 是一个动态类型的编程语言。

<script>
        let a = 10;
        console.log(a);
        a = 'hello';
        console.log(a);
</script>

image-20230222221515540

一个变量在程序运行过程中，类型可以发生改变，动态类型。JS，Python，PHP，Lua…

一个变量在程序运行过程中，类型不能发生改变，静态类型。C语言，Java，C++，Go…

动态类型，

好处：代码非常灵活。

坏处：一个变量当下是什么类型，里面存了啥样的值，里面提供了哪些方法哪些属性，都是不确定的。

基本数据类型

JS 中内置的几种类型

number: 数字. 不区分整数和小数.

boolean: true 真, false 假.

string: 字符串类型.

undefined: 只有唯一的值 undefined. 表示未定义的值.

null: 只有唯一的值 null. 表示空值

null 相当于空盒子，

undefined 相当于盒子都没有

别的语言中，如果访问到某个东西没有定义，直接就报错。而 JS 不报错，返回个 undefined。JS 把别的语言认为非法的行为合法化。

运算符

  • 比较运算符

== 比较相等(会进行隐式类型转换）

!= 是 == 的非运算

=== 比较相等(不会进行 隐式类型转换)

!== 是 === 的非运算

let a = 10;
let b = '10';
console.log(a == b);

//结果为
true

a==b 这个代码中触发了 “隐式类型转换”，JS 中针对不同类型的 数据进行比较/运算，会尝试尽可能的转成相同类型。所以这里就把 10 这个整数 转成 ‘10’ 字符串了。

‘==’ 会触发隐式类型转换

let c = true;
let d = 1;
console.log(c == d);//true

let c = true;
let d = 2;
console.log(c == d);//false

像 Java 这种不太支持 隐式类型转换的语言，称为"强类型"语言；

像 JS 这种比较能支持 隐式类型转换的语言，称为"弱类型"语言；

image-20230222224335193

let a = 10;
let b = '10';
console.log(a === b);//先比较类型不相等直接就 false
let c = true;
let d = 1;
console.log(c === d);//false

数组

创建数组

let arr = new Array();
let arr2 = [];
let arr3 = [1, 2, 3, 4];

注意: JS 的数组不要求元素是相同类型. 这一点和 C, C++, Java 等静态类型的语言差别很大. 但是 Python, PHP 等动态类型语言也是如此.

let arr4 = [1, 'hello', true, []];

访问数组元素

let arr = ['红楼梦', '水浒传', '西游记'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr);

image-20230222230357162

arr[2] = '三国演义';//修改某个元素
console.log(arr);

image-20230222230507036

let arr = ['红楼梦', '水浒传', '西游记'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr);
console.log(arr[100]);

理论上来说，这里打印 arr[100], 应该会报错。但是不然

image-20230222230831139

console.log(arr[100]);
console.log(arr[-1]);
console.log("程序仍然在正常往下进行, 没有因为下标越界而异常终止");

image-20230222231110738

arr[100] = '三国演义';
console.log(arr);

image-20230222231510664

arr[-1] = '三国演义';
console.log(arr);

image-20230222231644727

arr[-1] = '三国演义';
arr['hello'] = '三国演义';
console.log(arr);

image-20230222231835159

JS 已经不是一个传统意义上的数组(只能按下标来取元素)，而是还带有 "键值对"的性质。

数组的遍历

//第 1 种
for(let i = 0;i < arr.length;i++){
    console.log(arr[i]);
}
//第 2 种
for(let i in arr){
    //此处的 i 是数组下标
    console.log(arr[i]);
}
//第 3 种
for(let elem of arr){
    //此处的 elem 是数组元素
    console.log(elem);
}

新增数组元素

给数组添加元素(尾插)

使用 push 方法

let arr = ['红楼梦', '水浒传', '西游记'];
arr.push('三国演义');
for(let i = 0;i < arr.length;i++){
    console.log(arr[i]);
}

红楼梦
水浒传
西游记
三国演义

删除数组元素

splice

万能方法，可以用来插入、修改、删除。

  • splice(startIndex, count, 变长参数)

把后面的变长参数，替换到前面的指定区间之内。

如果后面没有变长参数，就相当于是删除；

如果后面变长参数和前面指定区间个数一样，就是替换/修改

如果后面变长参数比前面指定区间个数长，就是新增

//删除
let arr = ['红楼梦', '水浒传', '西游记', '三国演义'];
arr.splice(2, 1);
console.log(arr);

['红楼梦', '水浒传', '三国演义']

//替换
let arr = ['红楼梦', '水浒传', '西游记', '三国演义'];
arr.splice(2, 1, '三国志');
console.log(arr);

['红楼梦', '水浒传', '三国志', '三国演义']

//新增
let arr = ['红楼梦', '水浒传', '西游记', '三国演义'];
arr.splice(2, 0, '三国志');
console.log(arr);

['红楼梦', '水浒传', '三国志', '西游记', '三国演义']

函数

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}

hello();
function hello(){
    console.log('hello');
}
//函数定义和调用不要求前后顺序

function add(x, y){//这里不需要写类型
    return x + y;
}
console.log(add(10, 20));
console.log(add('hello', 'world'));
console.log(add(10, true));//true 隐式类型转换成 1
console.log(add(undefined, 10));
console.log(add(undefined, '10'));//undefined 隐式类型转换成 "undefined"

30
helloworld
11
NaN
undefined10

NaN ：not a number

关于参数个数

console.log(add(10));
console.log(add('10'));

NaN
10undefined

如果实参个数少于形参个数，此时多出的形参的值就是 undefined

  • 如果实参个数比形参个数多呢？

那么多出的实参就没用上。

console.log(add(10, 20, 30));
//30

当形参个数和实参个数不匹配的时候，是不会报错的，只会尽可能的去执行。

  • 也有办法把这多出的实参用上。

每个函数内部都会自动定义一个 arguments 变量，是个数组，包含了所有的实参。

//实现 n 个数的求和
function add(){
    let result = 0;
    for(let elem of arguments){
        result += elem;
    }
    return result;
}
console.log(add(10));
console.log(add(10, 20));
console.log(add(10, 20, 30));
console.log(add(10, 20, 30, 40));

10
30
60
100

对于 JS 这样的动态类型语言来说，它不需要 “重载” 这样的语法。

函数表达式

image-20230223123012945

这里的 add 类型是 function

console.log(typeof(add));//function

JS 中可以像普通变量一样，把函数赋给一个变量。

同时，也可以把函数作为另一个函数的参数，或者把函数作为另一个函数的返回值。(这一点 Java 中无法做到)

函数在 JS 中是"一等公民"

function two(){
    console.log("执行 two");
    return 100;
}
function one(){
    return two;
}
//此时相当于 n = two
let n = one();
n();

作用域

JS 变量中的作用域。

  • 当代码中访问某个变量的时候，要去哪里找变量？

JS 会先找当前作用域，如果当前没有，就往上层作用域找，一直往上找到全局作用域，如果还找不到，报错/undefined

let num = 1;
function test1() {
    let num = 2;
    function test2(){
        let num = 3;
        console.log("test2: " + num);
    }
    test2();
    console.log("test1: " + num);
}
test1();
console.log("global: " + num);

test2: 3
test1: 2
global: 1

let num = 1;
function test1() {
    //let num = 2;
    function test2(){
        //let num = 3;
        console.log("test2: " + num);
    }
    test2();
    console.log("test1: " + num);
}
test1();
console.log("global: " + num);

test2: 1
test1: 1
global: 1

对象

JS 不是面向对象的编程语言。但这里存在对象的概念。

意味着 JS 中关于对象的设定和 Java 差别很大。

JS 中没有 封装，继承，多态，甚至没有类。JS 中所有对象的类型都是 object

JS 的对象，有属性，也有方法(方法本质上也是属性，因为函数在 JS 中是一等公民)

  1. 使用 字面量 创建对象 [常用]
let student = {
    name: '蔡徐坤',
    age: 25,
    height: 180,
    weight: 70,
    sing: function(){
        console.log("鸡你太美");
    },
    dance: function(){
        console.log("铁山靠");
    }
};
console.log(student.name);
console.log(student.age);
student.sing();

蔡徐坤
25
鸡你太美
  1. 使用 new Object 创建对象
let student = new Object();
student.name = '蔡徐坤';
student.age = 25;
student.sing = function(){
    console.log("鸡你太美");
}
console.log(student.name);
console.log(student.age);
student.sing();

student.dance = function(){
    console.log("铁山靠");
}//因为 JS 是动态类型，所以对象里的属性方法可以随时新增

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/408851.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy

前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy

前言&#xff1a; 在前端发出Ajax请求的时候&#xff0c;有时候会产生跨域问题&#xff0c;报错如下: Access to XMLHttpRequest at http://127.0.0.1/api/post from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the…
阅读更多...
06_HTML_表单提交的细节（submit提交按钮的使用细节）

06_HTML_表单提交的细节（submit提交按钮的使用细节）

目录一、submit提交按钮的细节二、关于输入类型(input标签)type属性中file类型(文件上传)和submit类型(提交按钮)的关系三、关于输入类型(input标签)type属性中hidden类型(隐藏域)和submit类型(提交按钮)的关系一、submit提交按钮的细节 form标签是表单标签action属性设置提交…
阅读更多...
【js】多分支语句练习（2）

【js】多分支语句练习（2）

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大一在校生&#xff0c;web前端开发专业 &#x1f921; 个人主页&#xff1a;python学不会123 &#x1f43c;座右铭&#xff1a;懒惰受到的惩罚不仅仅是自己的失败&#xff0c;还有别人的成功。 &#x1f385;**学习…
阅读更多...
媒体查询@media

媒体查询@media

media可以针对不同的媒体类型(包括显示器、便携设备、电视机&#xff0c;等等)设置不同的样式规则&#xff0c;CSS3 根据设置自适应显示。 1.使用方法: media 多媒体类型 and (条件) and (条件)... ①多媒体类型: all用于所有多媒体类型设备 print用于打印机 screen用于电脑…
阅读更多...
2022前端笔试面试题

2022前端笔试面试题

目录 以下为笔试题部分&#xff1a; 1.CSS盒子模型的构成是__,__,__,__. 2.二叉树的中序遍历顺序是badce,后续遍历顺序是bdeca&#xff0c;问前序遍历的顺序。 3.flex布局的父级元素中有哪些常用属性。 4.box-sizing:____;表示怪异盒模型&#xff08;IE盒模型&#xff09;…
阅读更多...
JavaScript基础知识总结 14：学习JavaScript中的File API、Streams API、Web Cryptography API

JavaScript基础知识总结 14：学习JavaScript中的File API、Streams API、Web Cryptography API

目录一、Atomics和SharedArrayBuffer二、原子操作基础1、算术及位操作方法2、原子读和写3、原子交换4、原子Futex操作与加锁三、跨上下文消息四、Encoding API五、File API和Blob API1、File类型2、FileReader类型3、FileReaderSync类型4、Blob与部分读取六、Streams API1、应用…
阅读更多...
uniapp和vue组件之间的传值方法（父子传值，兄弟传值，跨级传值，vuex）

uniapp和vue组件之间的传值方法（父子传值，兄弟传值，跨级传值，vuex）

前言 在做vue项目或者uniapp开发微信小程序时&#xff0c;经常会用到组件之间传值&#xff0c;因此想总结记录下。 一、父子传值 父向子传递&#xff1a;props子向父传递&#xff1a;通过 events&#xff08;$emit&#xff09;父组件想调用子组件的方法&#xff1a;通过 thi…
阅读更多...
Get请求报错404出现原因及解决办法

Get请求报错404出现原因及解决办法

ajax中get请求时报404背景环境项目结构问题成因解决办法1解决办法2背景环境 已学习java基础&#xff0c;html&#xff0c;css&#xff0c;js&#xff0c;jquery&#xff0c;bootstrap&#xff0c;layui&#xff0c;maven&#xff0c;servlet和jsp&#xff0c;刚进入spring的学…
阅读更多...
前端下载文件的几种方式

前端下载文件的几种方式

前端下载文件的几种方式 前言 实习一个人负责一个管理系统的前端部分。其中&#xff0c;就有前端下载文件的需要。最终采用的是使用axios发送get请求的方式&#xff0c;因为需要携带token。但是&#xff0c;不应该只注重结果&#xff0c;也应该注重过程&#xff0c;不然可能一…
阅读更多...
jQuery选择器(二)（基本过滤器，内容过滤器，可见过滤器）

jQuery选择器(二)（基本过滤器，内容过滤器，可见过滤器）

写在前面 jQuery是一个快速、简洁的 JavaScript 框架&#xff0c;是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess&#xff0c;DoMore”&#xff0c;即倡导写更少的代码&#xff0c;做 更多的事情。jQuery封装了 JavaScript 常用的功能代码&…
阅读更多...
【Vue】具名插槽

【Vue】具名插槽

要点&#xff1a; 具名插槽&#xff1a;即具有名字的插槽&#xff0c;在默认插槽基础上指定插槽的名字&#xff08;name " "&#xff09;。父组件指明放入子组件的哪个插槽 slot "footer"&#xff0c;如果是template可以写成 v-slot : footer。 父组件中…
阅读更多...
html中关于侧边导航栏和导航栏的编写

html中关于侧边导航栏和导航栏的编写

侧边导航栏 <style>.box{width: 50px;height: 50px;background-color: #483957;transition: width .5s,background-color .2s;}.box:hover{background-color: #004FCB;width: 200px;cursor: pointer;}.a1{position: fixed;right: 40px;top: 200px;float: right;}</st…
阅读更多...
如何搭建一个vue项目(完整步骤)

如何搭建一个vue项目(完整步骤)

如何搭建一个vue项目(完整步骤) 一、环境准备 1、安装node.js 下载地址&#xff1a;https://nodejs.org/zh-cn/界面展示 2、检查node.js版本 查看版本的两种方式 1|node -v 2|node -version 出现版本号则说明安装成功&#xff08;最新的以官网为准&#xff09; 3、为了…
阅读更多...
vue环境搭建

vue环境搭建

前言&#xff1a;1、首先安装nodejs2、其次安装vue-cli&#xff0c;配置vue环境变量3、再次安装webpack、webpack-cli一、NodeJs安装 1、nodejs下载地址&#xff1a;https://nodejs.org/ 2、验证是否安装成功&#xff08;安装时已经自动加入到环境变量的path中&#xff09; 以…
阅读更多...
Referer和Referrer Policy以及图片防盗链

Referer和Referrer Policy以及图片防盗链

​ Referer Referer请求头包含了当前请求页面的来源页面的地址&#xff0c;即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用Referer&#xff08;注&#xff1a;正确英语拼写应该是referrer&#xff0c;由于早期HTTP规范的拼写错误&#xff0c;为了保持向后兼容…
阅读更多...
html 简单表格制作（看了它足以应对大部分表格）

html 简单表格制作（看了它足以应对大部分表格）

目录 基础表格 进阶表格 锦上添花表格 bgcolor background align frame元素 基础表格 首先制作一个表格我们要知道一张简单表格就是由二部分组成分别是表头&#xff0c;表身。 下面就是一个简单的表格。 表头就是黑体加粗的内容&#xff0c;表身就是表格主要表达的内容。…
阅读更多...
css里面设置按钮（button）让字体居中

css里面设置按钮（button）让字体居中

题目&#xff1a;设置button中的字体让其居中&#xff0c;不至于溢出(字体下落&#xff0c;重影等问题) 1&#xff0c;抛出问题&#xff0c;如图所示 2&#xff0c;引出我的代码 <view class"loginBtn"><form action"check.jsp" method"get…
阅读更多...
带你吃透Servlet技术（二）

带你吃透Servlet技术（二）

个人主页&#xff1a; 几分醉意的CSDN博客_传送门 前言&#xff1a;在上一篇&#xff0c;我们已经初步的了解了 Servlet技术 传送门&#xff0c;接下来我们继续深入学习Servlet。 本文目录&#x1f496;继承HttpServlet实现Servlet程序✨代码实战✨自动生成doGet和doPost方法✨…
阅读更多...
猿创征文｜如何使用 Element UI？ 以登录框为例带你感受一下基础使用

猿创征文｜如何使用 Element UI？ 以登录框为例带你感受一下基础使用

目录 前言 一、安装&#xff08;所有内容&#xff09; 二、按需引入 三、案例演示 1.案前整理 2.代码演示&#xff08;后附源码&#xff09; 3.源码 前言 Element-ui&#xff0c;一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库&#xff0c;提供了配套设计…
阅读更多...
el-upload上传文件

el-upload上传文件

el-upload上传文件 前言 公司和学校项目都用到了上传文件的功能&#xff0c;记录一下。 准备 express实现的上传接口 const express require(express); ​ // 文件上传模块 const multiparty require(multiparty) ​ // 提供跨域资源请求 const cors require(cors) ​ …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023