JavaScript快速入门——变量

最新推荐文章于 2024-07-22 15:13:59 发布

偷猪的王某人

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量111

点赞数

分类专栏：前端—JavaScript基础文章标签： javascript es6

本文链接：https://blog.csdn.net/qq_44642822/article/details/116791523

版权

前端—JavaScript基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript快速入门——基础

初识JavaScript
- 什么是JavaScript？
- 它可以做什么？
JavaScript基础

初识JavaScript

什么是JavaScript？

	JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。

它可以做什么？

	- 在变量中储存有用的值。比如上文的示例中，我们请求客户输入一个新名字，然后将其储存到 name 变量中。
	- 操作一段文本（在编程中称为“字符串”（string））。
	- 运行代码以响应网页中发生的特定事件。
	- - - -
	JavaScript 语言核心之上所构建的功能更令人兴奋。应用程序接口（Application Programming Interfaces（API））将为你的代码提供额外的超能力。（**至于不清楚API的我以后再讲，现在就理解为一套可以直接使用的代码组件**）

JavaScript基础

编译入门之HelloWord

相信每一门编译语言我们最先学会的总是输出HelloWord！（这是经典）
来看代码

<!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>Hello Word！</title>
</head>
<body>
    <h3>Hello Word!!</h3>
    <script>
        alert("hello word!!")
        console.log("hello word!!");
    </script>
</body>
</html>

运行之后，浏览器界面会有弹框
在这里插入图片描述
确定之后才能展示其他内容

在这里插入图片描述
这个时候右键检查或者直接按F12查看开发者界面，在控制台可以看到我们输出的Hello Word！

OK！你已经掌握了最基本的JavaScript知识

JavaScript的位置

在上述代码中我们的JavaScript代码是写在script标签中嵌套在html文件中，除此自外我们还能进行外部引用。
在上述代码中我们先将之前的内容注释掉，然后在你的同级目录创建一个对应的js文件
在这里插入图片描述
通过相对路径（当然你也可以调用绝对路径或者网络资源，这些后期再一一讲）调用文件，这样我们再次运行html文件，这个时候效果和刚才一样，这样有一定的好处，就和外部引用css文件一样，相信大家都比较清楚是什么好处。（懂得都懂哈！）
在这里插入图片描述

JavaScript的变量

javascript常用变量类型：Numbers, String, Boolean, Object, Undefined, Null
在这里插入图片描述
在这段代码中出现了两种变量声明的方式，一种是const，一种是let，他们的区别如下

let	const
不可重复声明	不可重复声明
代码块作用域	代码块作用域
定义后值可变	定义后值不可变（常量）

变量类型检测typeof

console.log('typeof name:', typeof name);
console.log('typeof isCool:', typeof isCool);
console.log('typeof x:', typeof x); // typeof并不能显示原始的数据类型null，而是显示Object
console.log('typeof y:', typeof y);
console.log('typeof z:', typeof z);
console.log('x:', x); 
console.log('y:', y); 
console.log('z:', z); 
console.log('z[0]:', z[0]);
console.log('zzzzz', z['1']);
z = ["ston",18,"false"];
console.log('z:', z);

在这里插入图片描述
其中值得一提的是数组（Object）类型查找其中单个信息时的方式，可以使用下表（从0开始），也可以使用’符号’，但除了数字之外其他字母或者符号都会输出undefined未定义。

String——字符串

console.log('----------------String------------------')
console.log(name+ ',' + age);
console.log(`${name},${age}`);
console.log('name.length:', name.length); // 属性没有括号，方法才有括号
let hello = 'hello world';
console.log('hello.toLocaleUpperCase():', hello.toLocaleUpperCase()); // 转换为大写，方法需要括号
console.log('hello.substring(0,5).toLocaleUpperCase():', name_m.substring(0,5).toLocaleUpperCase());//切分字符串
console.log("hello.split(' '):", name_m.split(' '));//按照某个符号将字符串分割

在这里插入图片描述

Arrays——数组

console.log('----------------Arrays------------------')
const ary = [name, age, hobby];
console.log('ary:', ary);
ary.push('egg');   		// 在最尾部添加
console.log('尾部添加后ary:', ary);
ary.unshift('ihave');     // 在最头部添加，注意不能ary='grapes'或f=['grapes']
console.log('头部添加后ary:', ary);
ary.pop();    		    // 去掉最尾一个
console.log('尾部去掉一个后ary:', ary);
console.log('Array.isArray(ary):', Array.isArray(ary))//判断是否是数组
console.log("ary.indexOf('hobby'):", ary.indexOf(hobby))//按照值查找对应下标

在这里插入图片描述

Object——对象类型

在编程中，对象是现实生活中的模型的一种代码结构。

console.log('----------------Object------------------')
// 建立一个人对象
const person = 
{
    firstName : 'Ston',
    lastName  : 'Leo',
    age       : 18,
    hobbies   : ['music', 'game', 'sports'],
    address   : 
    {
        street: '50 main st',
        city  : 'Boston',
        state : 'MA'
    }
}	
person.email = 'Ston@gmail.com';
console.log('person:', person);
console.log("person['firstName']:", person['firstName'])
console.log('person.hobbies[0]:', person.hobbies[0]);
console.log('person.address.city:', person.address.city);
const 
{
    firstName, 
    lastName, 
    address:
        { city }
} = person;	// 这样写是抓出person里面的某属性
console.log('firstName:', firstName);
console.log('city:', city)
// 事务对象
const todos = 
[
    {
        id          : 1,
        text        : 'do homework',
        isCompleted : true
    },
    {
        id          : 2,
        text        : 'Meeting with boss',
        isCompleted : true
    },
    {
        id          : 3,
        text        : 'go shop with girlfriend',
        isCompleted : false
    },
];
console.log('todos:', todos);
console.log('todos[1].id:', todos[1].id);

在这里插入图片描述
注意：这种方式叫做解构，是es6的语法，允许按照一定模式，从数组和对象中提取值，对变量进行赋值。

JSON类型

JSON (JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。而数据传输是我们在敲代码时，经常遇到的一个场景,前后端交互。给数据一个统一的格式有利于我们编写和解析数据。

const todoJSON = JSON.stringify(todos);//转换JSON格式
console.log(todoJSON)
const nameJSON = JSON.stringify(name)
console.log(nameJSON);

在这里插入图片描述

所有的代码都在https://github.com，尚在更新中！！

偷猪的王某人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript快速入门——变量

JavaScript快速入门——基础初识JavaScript什么是JavaScript？它可以做什么？JavaScript基础编译入门之HelloWordJavaScript的位置JavaScript的变量String——字符串Arrays——数组Object——对象类型JSON类型所有的代码都在[https://github.com](https://github.com/wwj3054718283/JavaScript-)，尚在更新中！！初识JavaScript什么是JavaScript？ Jav
复制链接

扫一扫

专栏目录