<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01定义常量.html</title>
<!--常量-->
<script>
//常量：1.一旦定义 不能更改
const PI = 3.14;
// console.log(PI);
// PI = 3.1415; error
// error: 2.必须赋初始值
// const PI1;
// PI1 = 3.1415926;
// console.log(PI1);
</script>
<!--字符串拼接-->
<script>
// 用 + 拼接
var name = "zhang";
var msg = "hello " + name;
console.log(msg);
var name1 = "zhang";
var msg1 = `hello ${name1}`; //${name}
console.log(msg1);
</script>
<!--结构赋值-->
<script>
/*
var a = 1;
var b = 2;
var c = 3;
console.log(a,b,c);
*/
//数组赋值
var [a,b,c] = [11,22,33];
console.log(a,b,c);
var [a,[b,c],d] = [1,[2,3],4];
console.log(a,b,c,d);
//json 赋值
var {a,b,c} = {a:1,c:2,b:3};
console.log(a,b,c);
//结构赋值 等号两边的结构要相同
var [a,{b,c},d] = [1,{c:3,b:2},4];
console.log(a,b,c,d);
/*
var {a = 10, b = 20};
console.log(a,b); //error
*/
var {a = 100,b = 200} = {};
console.log(a,b); // 输出结果 100 200
var {a = 100,b = 200} = {a:111,b:222};
console.log(a,b); // 输出结果 111 222
</script>
<!--扩展运算符-->
<script>
var arr1 = [1,2,3,4,5];
1 数组赋值（error）
var arr2 = arr1; //将arr1的地址赋给了arr2 操作arr2影响arr1
arr2.pop();
1
var arr2 = [];
for(var i = 0; i < arr1.length; i++){
arr2.push(arr1[i]);
}
// 2.
var arr2 = [...arr1];
arr2.pop();
console.log(arr1);
console.log(arr2);
function show(x,y){
console.log(arguments); //arguments不是数组 不能用数组的方法
// arguments.pop();
}
// show(1,2);
//2. 函数定义时使用扩展运算符，把参数保存在一个数组里面
function show1(...mgs){
// console.log(mgs);
mgs.push(33); //mgs是数组
console.log(mgs);
console.log(mgs[0],mgs[1],mgs[2]);
}
// show1(11,22);
//3. 调用时，通过扩展运算符将数组里的值变成参数列表
var argu = [11,22];
show(...argu);
</script>
<!--for of 循环-->
<script>
var arr1 = [11,22,33,44,55];
for(i in arr1){
// console.log(i); // 0 1 2 3 4 i是数组的下标
// console.log(arr1[i]); // 11 22 33 44 55 数组的值
}
for(i of arr1){
// console.log(i); //i是数组的值
}
for(i of arr1.keys()){
// console.log(i) //i是数组的下标
}
var json = {a:44,b:55,c:66};
for(i in json){
// console.log(i); //a b c
// console.log(json[i]); //输出json的值
}
//for of 不能遍历json的值
for(i of json){
// console.log(i); error
}
</script>
<!--map-->
<script>
//map 是一种数据集合，以key/value的形式存储和访问
var map = new Map();
//添加
map.set(‘a‘,11);
map.set(‘b‘,22);
map.set(‘c‘,"33");
map.set(‘d‘,"dddd");
map.set(‘e‘,‘\\‘);
console.log(map);
// 查看
// console.log(map.get(‘a‘));
// console.log(map.get(‘b‘));
// console.log(map.get(‘c‘));
//删除
// map.delete(‘b‘);
// console.log(map);
for(i of map){ //默认 map实体
// console.log(i);
}
for(i of map.entries()){
// console.log(i); //map 实体
}
for(i of map.values()){
// console.log(i); //map 的值
}
for(i of map.keys()){
// console.log(i); //map 的键 a b c d e
}
for([a,b] of map){ //第一个参数是键 第二个参数是值
console.log(a+":"+b);
}
for([key,value] of map){ //获取map的键和值
console.log(key + ":" + value);
}
</script>
<!--函数默认值-->
<script>
function show(x,y){
if(!x){
x = "hello";
}
if(!y){
y = "world";
}
console.log(x,y);
}
// show();
//1.在定义函数时，将默认参数写在参数列表中
function show1(x,y="bbb"){
console.log(x,y);
}
// show1(‘a‘); //把参数赋给x
// show1(‘a‘,‘c‘); // 把a赋给x 把c赋给y
//2.如果默认参数的赋值有变量的话，值是可以动态改变的
var z = 100;
function show2(a = z + 1){
console.log(a);
}
// show2(); //101
//3.结构赋值
function show3({a = 1,b = 2}={}){
console.log(a,b);
}
// show3();
// show3({a:11,b:22});
function show4({a,b} = {}){
console.log(a,b);
}
// show4({a:111,b:222}); 111 222
// show4({a:111,b:222});
function show5({a,b}){
console.log(a,b);
}
// show5({a:100,b:100});
function show6(url,{body = "",method = "get"}){
console.log(method);
}
// show6("http://www.liyuit.com"); //error
// show6("http://www.liyuit.com",{}); //get
function show7(url,{body = "",method = "get"}={}){
console.log(method);
}
show7("http://www.liyuit.com");
</script>
<!--函数-rest参数-->
<script>
//用扩展运算符后的参数来接受多余的参数
function show(x,...args){
console.log(x,args);
}
show(1,2,3,4,5,6); //把1给了参数 x 把 2,3,4,5,6给了args数组
</script>
</head>
<body>
</body>
</html>
<!--封闭空间-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09封闭空间.html</title>
<script>
//封闭空间，就是把匿名函数用括号扩气来，形成自己的作用域
/*
(function(){
console.log("aaa");
})();
//相当于自己调用自己
//匿名函数立即执行并传参
(function(msg){
console.log(msg);
}("bbbb"));
*/
window.onload = function(){
var aBtn = document.getElementsByTagName(‘input‘);
console.log(aBtn);
/*
点击按钮是 输出当前元素的下标
第一种 用this
for(var i = 0; i < aBtn.length; i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
console.log(this.index);
}
}
*/
/*
第二种
for(let i = 0; i < aBtn.length; i++){
aBtn[i].onclick = function(){
console.log(i);
}
}
*/
//第三种
for(var i = 0; i < aBtn.length; i++){
(function(index){
aBtn[index].onclick = function(){
console.log(index);
}
}(i))
}
}
</script>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
</html>
时间： 2024-12-28 17:44:54