JavaScript基础
引入方式JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。
内部引入
写在 body 结束标签的上方。
<!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>Document</title>
</head>
<body>
</body>
</html>外部引入
// 文件名 demo.js
alert('我是外部的 js文件')<!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>Document</title>
</head>
<body>
</body>
</html>内联引入
<!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>Document</title>
</head>
<body>
</body>
</html> 按钮输入输出
输出
[*]alter() 以弹窗形式输出。
[*]document.writer() 输出在页面上。可以写 HTML 标签，会被解析。
[*]console.log() 控制台输出。
输入
展示一个输入弹窗。
prompt()
prompt(message)
prompt(message, defaultValue)参数说明：
[*]message：提示信息
[*]defaultValue：文本框中的默认值
变量
声明及赋值
let name1;
let name1 = value1;
let name1 = value1, name2 = value2;
let name1, name2 = value2;
let name1 = value1, name2, /* …, */ nameN = valueN;参数说明：
[*]nameN：变量名称。
[*]valueN：变量初始值，默认值为 undefined。
关键字
JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：
以下是使用 let 时的注意事项：
[*]允许声明和赋值同时进行
[*]不允许重复声明
[*]允许同时声明多个变量并赋值
[*]JavaScript 中内置的一些关键字不能被当做变量名
以下是使用 var 时的注意事项：
[*]允许声明和赋值同时进行
[*]允许重复声明
[*]允许同时声明多个变量并赋值
大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let。
命名规则
关于变量的名称（标识符）有一系列的规则需要遵守：
[*]只能是字母、数字、下划线、$，且不能能数字开头
[*]字母区分大小写，如 Age 和 age 是不同的变量
[*]JavaScript 内部已占用于单词（关键字或保留字）不允许使用
[*]尽量保证变量具有一定的语义，见字知义
常量
概念：使用 const 声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
命名规范：和变量一致
const PI = 3.14注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
数据类型
可以通过 typeof 关键字检测数据类型
document.writer(typeof 1) // number
document.writer(typeof '字符串') // string
document.writer(typeof true) // boolean
let tmp
document.writer(typeof tmp) // undefined基本数据类型
[*]number：数值型
[*]string：字符串型
[*]// 使用 "" '' `` 包裹的都为字符串
// 当使用 `` 时，为模板字符串，例如： `我今年${age}岁`，可以避免字符串拼接
let age = 20
document.writer(`我今年${age}岁`)
[*]boolean：布尔型
[*]undefined：未定义型
[*]null：空类型
引用数据类型
[*]object：对象
数组
定义数组
let arr = []
// a) 数组单元值的类型为字符类型
let list = ['HTML', 'CSS', 'JavaScript']
// b) 数组单元值的类型为数值类型
let scores =
// c) 混合多种类型
let mixin = 操作数组
[*]push 动态向数组的尾部添加一个单元
/*
push()
push(element0)
push(element0, element1)
push(element0, element1, … , elementN)
*/
const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count);
// Expected output: 4
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows"]
animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]
[*]unshit 动态向数组头部添加一个单元
/*
unshift()
unshift(element1)
unshift(element1, element2)
unshift(element1, element2,…,elementN)
*/
const array1 = ;
console.log(array1.unshift(4, 5));
// Expected output: 5
console.log(array1);
// Expected output: Array
[*]pop 删除最后一个单元
[*]shift 删除第一个单元
[*]splice 从指定位置开始，删除0~N个数
/*
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)
start：开始位置，包括该位置
deleteCount（可选）：删除的个数，如果为0则必须有 item，即将 item 插入指定索引位置
item（可选）：要插入的元素
*/
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]
函数声明
/*
function：关键字
形参与返回值是可选的，非必须
*/
function 函数名(形参) {
// 逻辑代码
return 返回值;
}
/*
匿名函数，一般用于函数表达式
*/
let fun = function() {
console.log('函数表达式')
}
// 调用
fun()
/*
立即执行函数
多个立即执行函数之间必须要使用 ; 隔开
*/
(function(形参) {
})(实参);
(function(形参) {
}(实参));对象
对象的构成与声明
// 空对象
let obj = {}
// 对象构成
let 对象名 = {
属性名: 属性值,
方法名: function() {}
}对象的操作
属性访问与方法调用
/*
属性名需要使用 "" 或 '' 包裹，但可以省略
当属性名包含特殊符号时则必须使用上述符号包裹
*/
const person = {
name: ["Bob", "Smith"],
age: 32,
bio: function () {
console.log(`${this.name} ${this.name} 现在 ${this.age} 岁了。`);
},
introduceSelf: function () {
console.log(`你好！我是 ${this.name}。`);
},
};
// 点表示法
person.name;
// 括号表示法，一般用于属性名有特殊符号的时候
person['name'];
person.name;
person.age;
person.bio();
// "Bob Smith 现在 32 岁了。"
person.introduceSelf();
// "你好！我是 Bob。"遍历对象
const obj = {
uname: '张三',
age: 18,
gender: '男'
};
for (let key : obj) {
console.log(obj)
/*
张三
18
男
*/
}
来源:https://www.cnblogs.com/fallingintodreams/p/17806169.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]