let入门使用、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let 基本使用</title>
<script type="text/javascript">
let name = "hspedu教育";
console.log("name=", name);
</script>
</head>
<body>
</body>
</html>
const常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>const常量/只读变量的使用</title>
<script type="text/javascript">
const PI = 3.14;
console.log("PI=", PI)
</script>
</head>
<body>
</body>
</html>
声明对象·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>声明对象的简写方式</title>
<script type="text/javascript">
const age = 800;
const name = "牛魔王";
let monster = {name: name, age: age};
let monster02 = {name, age};
console.log("monster02=>", monster02);
</script>
</head>
<body>
</body>
</html>
模板字符串的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板字符串的使用</title>
<script type="text/javascript">
let str1 = `for(int i = 0;i < 10;i++){
System.out.println("i="+i);
}`;
console.log("str1=", str1);
let name = "hspedu教育";
let str2 = `教育名称=${name}`;
let str3 = `1+2=${1 + 2}`;
let n1 = 80;
let n2 = 20;
let str4 = `${n1}+${n2}=${n1 + n2}`;
console.log("str2=", str2);
console.log("str3=", str3);
console.log("str4=", str4);
function sayHi(name) {
return "hi " + name;
}
let name2 = "tom";
let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;
let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;
console.log("str5=", str5);
console.log("str6=", str6);
</script>
</head>
<body>
</body>
</html>
对象方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象方法的简写形式</title>
<script type="text/javascript">
let monster = {
name: "红孩儿",
age: 100,
sayHi: function () {
console.log("信息: name=", this.name, " age=", this.age);
}
}
monster.f10 = function () {
console.log("哈哈");
};
monster.sayHi();
monster.f10();
let monster2 = {
name: "红孩儿~",
age: 900,
sayHi() {
console.log("信息: name=", this.name, " age=", this.age);
},
f1() {
console.log("f1()");
}
}
monster2.sayHi();
monster2.f1();
</script>
</head>
<body>
</body>
</html>
对象运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象运算符的扩展</title>
<script type="text/javascript">
let cat = {name: "小花猫", age: 2};
let cat2 = {...cat};
cat2.name = "中花猫";
console.log("cat=>", cat);
console.log("cat2=>", cat2);
let monster = {name: "白骨精", age: 100};
let car = {brand: "奔驰", price: 800000};
let monster_car = {...monster, ...car}
monster_car.name = "狐狸精";
console.log("monster=>", monster);
console.log("monster_car=>", monster_car);
</script>
</head>
<body>
</body>
</html>
对象解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象解构</title>
<script type="text/javascript">
let monster = {name: '牛魔王', age: 800};
console.log(monster.name, " ", monster.age);
let {name, age} = monster;
console.log("========================");
console.log("name=", name, " age=", age);
function f1({name, age}) {
console.log("f1-name=", name, " ", "f1-age=", age)
}
f1(monster);
</script>
</head>
<body>
</body>
</html>
let细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let 使用注意事项和细节</title>
<script type="text/javascript">
{
var name = "韩顺平教育";
let job = "java工程师";
console.log("name=", name);
console.log("job=", job);
}
console.log("name=", name);
var num1 = 100;
var num1 = 200;
console.log(num1);
let num2 = 600;
console.log(num2);
console.log("x=", x);
var x = "tom";
console.log("z=", z);
let z = "mary";
</script>
</head>
<body>
</body>
</html>
数组赋值解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组解构赋值</title>
<script type="text/javascript">
let arr = [1, 2, 3];
console.log("arr=>", arr);
let x = arr[0], y = arr[1], z = arr[2];
console.log(x, y, z);
let [a, b, c] = arr;
console.log("==================================");
console.log(a, b, c);
let [num1, num2, num3] = [100, 200, 300];
console.log(num1, num2, num3);
</script>
</head>
<body>
</body>
</html>
箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数的使用</title>
<script type="text/javascript">
var f1 = function (n) {
return n * 2
}
console.log("传统= " + f1(2))
let f2 = (n) => {
return n * 2;
}
console.log("f2() 结果= ", f2(100));
let f3 = n => n * 3;
console.log("f3() 结果=", f3(100));
function hi(f4) {
console.log(f4(900));
}
hi((n) => {
return n + 100
});
hi((n) => {
return n - 100
});
</script>
</head>
<body>
</body>
</html>
箭头函数2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数使用案例2</title>
<script type="text/javascript">
var f1 = function (n, m) {
var res = 0
for (var i = n; i <= m; i++) {
res += i
}
return res
}
console.log("传统= " + f1(1, 10))
let f2 = (n, m) => {
var res = 0
for (var i = n; i <= m; i++) {
res += i
}
return res
};
console.log(f2(1, 10));
</script>
</head>
<body>
</body>
</html>
箭头函数与对象解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数+对象解构</title>
<script type="text/javascript">
const monster = {
name: "红孩儿",
age: 1000,
skill: ['红缨枪', '三位真火']
}
function f1(monster) {
console.log("skill=", monster.skill);
}
f1(monster);
let f2 = ({skill}) => {
console.log("skill=", skill);
}
f2(monster);
let f3 = ({age, name, skill}) => {
console.log("skill=", skill, " age=", age, " name=", name);
}
f3(monster);
</script>
</head>
<body>
</body>
</html>
作业1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
let cat = {name: 'jack', age: 10};
let str = `cat的信息为 name=${cat.name} age=${cat.age}`;
console.log(str);
</script>
</head>
<body>
</body>
</html>
作业2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
let dog = {name: "大黄", age: 3};
let {namex, age} = dog;
console.log("namex=", namex, " age=", age);
</script>
</head>
<body>
</body>
</html>
作业3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
const name = "周星驰";
const job = "演员";
let person = {
name,
job,
show() {
console.log("person信息 name=", this.name, " job=", this.job);
}
}
person.show();
</script>
</head>
<body>
</body>
</html>
作业4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var cal = {
oper: "/",
arr: [1, 2, 3, 5]
}
function f1({oper, arr}) {
let res = 0;
if ("+" == oper) {
res = arr[0];
for (let i = 1; i < arr.length; i++) {
res += arr[i];
}
} else if ("-" == oper) {
res = arr[0];
for (let i = 1; i < arr.length; i++) {
res -= arr[i];
}
} else if ("*" == oper) {
res = arr[0];
for (let i = 1; i < arr.length; i++) {
res *= arr[i];
}
} else if ("/" == oper) {
res = arr[0];
for (let i = 1; i < arr.length; i++) {
res /= arr[i];
}
} else {
console.log("oper输入不正确..")
}
return res;
}
console.log("f1运算的结果=", f1(cal))
</script>
</head>
<body>
</body>
</html>
作业5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function f8(arr, fun) {
console.log(fun(arr));
}
f8([1, 2, 3, 4, 5], (arr) => {
let res = 0;
for (let i = 0; i < arr.length; i++) {
res += arr[i];
}
return res;
})
</script>
</head>
<body>
</body>
</html>
