初识JS
【摘要】 JavaScriptJavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。DOM&BOM相当于内置模块JQuery相当于第三方模块1.变量var a; /*正常变量，具有函数作用域*/let y = "原神"; /*正常变量，具有块级作用域*/const PI = "3.14"; /*声明常量/*三者特...
JavaScript
JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。
- DOM&BOM
相当于内置模块
- JQuery
相当于第三方模块
1.变量
var a; /*正常变量，具有函数作用域*/
let y = "原神"; /*正常变量，具有块级作用域*/
const PI = "3.14"; /*声明常量/*
三者特点
var:
1、存在变量提升
console.log(a); // undefined
var a = 10;
// 编译过程
var a;
console.log(a); // undefined
a = 10;2、一个变量可多次声明，后面的声明会覆盖前面的声明
var a = 10;
var a = 20;
console.log(a); // 203、在函数中使用var声明变量的时候，该变量是局部的
var a = 10;
function change(){
var a = 20;
}
change();
console.log(a); // 10而如果在函数内不使用var，该变量是全局的
var a = 10;
function change(){
a = 20
};
change();
console.log(a); // 20let:
1、不存在变量提升，let声明变量前，该变量不能使用（暂时性死区）。
console.log(a); // ReferenceError: a is not defined
let a = 10;
2、let命令所在的代码块内有效，在块级作用域内有效
{
let a = 10;
}
console.log(a); // ReferenceError: a is not defined3、let不允许在相同作用域中重复声明，注意是相同作用域，不同作用域有重复声明不会报错
let a = 10;
let a = 20;
// Uncaught SyntaxError: Identifier 'a' has already been declared
let a = 10;
{
let a = 20;
}const:
1、const声明一个只读的变量，声明后，值就不能改变
const a = 10;
a = 20; // TypeError: Assignment to constant variable.2、const必须初始化
const a; // SyntaxError: Missing initializer in const declaration
const a = 10; // ok3、const并不是变量的值不能改动，而是变量指向的内存地址所保存的数据不得改动
const obj = {
age: 17
}
obj.age = 18; // ok
obj = {
age: 18
}
// SyntaxError: Identifier 'obj' has already been declared4、let该有的特点const都有
区别
1,变量提升
var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined
let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错
2,块级作用域
var不存在块级作用域
let和const存在块级作用域
3,重复声明
var允许重复声明变量
let和const在同一作用域不允许重复声明变量
4,修改声明的变量
var和let可以
const声明一个只读的常量。一旦声明，常量的值就不能改变，但对于对象和数据这种引用类型，内存地址不能修改，可以修改里面的值。`
使用
能用const的情况下尽量使用const，大多数情况使用let，避免使用var。
const > let > var
const声明的好处，一让阅读代码的人知道该变量不可修改，二是防止在修改代码的过程中无意中修改了该变量导致报错，减少bug的产生。let声明没有产生预编译和变量提升的问题，先声明再使用可以让代码本身更加规范，let是个块级作用域，也不会污染到全局的变量声明。
最后说一点就是使用的场景说明：let一般应用于基本数据类型；const 一般应用于引用数据类型，也就是函数对象等。
var常见功能：
var GenShen = "原神"；
var name = "原神启动！";
var a1 = name.length;//获取name长度
var a2 = name[0];//原||name[0]==name.charAt(0)
var a3 = name.trim()//去除空白
var a4 = name.substring(0,2);//前取后不取||原神实列
<span id="txt"> 豆✌，伟大，无需多言！！！ </span>
<script>
function show() {
// 在HTML中找到目标并获取内容(DOM)
let tag = document.getElementById("txt");//拿到标签对象
let darastring = tag.innerText;//获取目标内容
/* console.log(darastring)*/
// 2.动态起来：把文本的第一个字符放在字符串的最后。
let firstchar = darastring[0];
let others = darastring.substring(1, darastring.length);
let newtxt = others + firstchar;
console.log(newtxt)
// 3,在HTML中更新内容
tag.innerText = newtxt;
}
//js中的定时器
setInterval(show, 200);//每()ms执行一次show
</script>2.数组
let a1 = [1,2,3,4];
let a2 = Array([1,2,3,4]);
a1[0] = "原神";
a1.push("原神启动！"); //尾部追加字符:[1,2,3,4,"原神启动！"]
a1.unshift("原神启动！") //尾部追加字符:["原神启动！",1,2,3,4]
a1.splice(索引位置,0,元素);
a1.splice(1,0,"原神"); //尾部追加:[1,"原神",2,3,4]
a1.pop() //尾部删除
a1.shift() //头部删除
a1.splice(索引位置,1)
a1.splice(2,1); //删除索引为2的元素:[1,2,4]循环
let a1 = [1,2,3,4];
for(let item in a1){
//idx=0/1/2/3/ data=a1[idx]
}
for(let i=0; i<a1.length; i++){
// i=0/1/2/3/ data=a1[i]
}实例
<script>
let cityname = ['213','321','123'];
for(let idx in cityname){
let text = cityname[idx]
//创建<li></li>
let tag=document.createElement("dd");
//在li标签中写入内容
tag.innerText = text;
// tag.innerText = text;
//添加到id=city中
let biaoqian = document.getElementById("city");
biaoqian.appendChild(tag);
}
</script>3.字典
info = {
"game" : "原神",
"computer" : "联想"，
}
info.game = "崩坏"
info["computer"] = "华硕"
delete info["game"]info = {
"game" : "原神",
"computer" : "联想"，
}
for(let i in info){
//i = game/computer|键 data=info[i]|值
}实例
<form id="pinglun">
<br>
<input style="width: 200px" type="text" id="username" placeholder="yout username" required>
<br>
<br>
<textarea style="width: 200px" id="users" placeholder="评论..." required></textarea>
<button type="submit">提交</button>
</form>
<div id="pingluns"></div>
<script>
document.getElementById('pinglun').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 这一行首先获取了HTML中id为'commentForm'的表单元素，并给它添加了一个提交事件监听器。
// 当表单被提交时（例如用户点击“提交”按钮），这个匿名函数将会执行。
const username = document.getElementById('username').value;
const userComment = document.getElementById('users').value;
// 这行代码阻止了表单的默认提交行为，也就是浏览器不会重新加载页面或导航到新的URL。
// 在这里我们不需要页面刷新，而是希望通过JavaScript来处理提交动作。
// 下面两行代码获取用户在表单中填写的用户名和评论文本
const commentDiv = document.createElement('div');
// 设置这个新创建的`div`元素的文本内容，包含用户名和评论内容
commentDiv.textContent = `${username}: ${userComment}`;
// 把新创建的评论元素添加到ID为'commentsList'的HTML元素内部，这样它就出现在了页面的评论列表中
document.getElementById('pingluns').appendChild(commentDiv);
// 清空表单中的用户名和评论文本框以便用户再次输入新的评论
document.getElementById('username').value = '';
document.getElementById('users').value = '';
});
</script>DOM
js模块，对HTML页面标签进行操作
//通过ID获取标签
let doms = document.getElementById('GengShen');
//获取标签文本
doms.innerText;
//修改标签文本
doms.innerText = "原神启动！";
//创建标签
let make = document.createElement('div');
//标签内写文本
make.innerText = "原神启动！";
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）