javascript基础入门·1_javascript道生一怎么写代码-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_69015220/article/details/124800865

本文详细介绍了JavaScript的基本操作，包括console.log()、document.write()、innerHTML、window.alert()等输出方法，以及变量与常量的声明、字符串拼接、数据类型、数学运算、逻辑判断和控制结构等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript基础入门

JavaScript 可以通过不同的方式来输出数据

使用 console.log() 写入到浏览器的控制台。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 window.alert() 弹出警告框。

<script>
    // 写入到浏览器的控制台
    window.console.log('桃李不言下自成蹊');
    // 将内容写到 HTML 文档中
    window.document.write('亲爱的母亲');
    // 写入到 HTML 元素
    // 1、找到元素
    // 2、写入到元素
    window.document.querySelector('#msg').innerHTML = '我爱你中国';
    // 弹出警告框
    window.alert('道生一');
</script>

变量与常量的声明
变量 let
常量 const

<script>
    // 变量声明
    let a;
    // 变量赋值
    a = 10;
    window.document.writeln('a = ' + a + '<br>');
    // 声明变量并赋值
    let b = 20
    window.document.writeln('b = ' + b + '<br>');
    let c = 30, d = 40;
    window.document.writeln('c = ' + d + '<br>');
    window.document.writeln('d = ' + d + '<br>');
    let e, f = 50;
    // undefined 这里变量e没有被赋值，f被赋值
    window.document.writeln('e = ' + e + '<br>');
    window.document.writeln('f = ' + f + '<br>');
    let h; // undefined
    window.document.writeln('h = ' + h + '<br>');
    f = 60;
    window.document.writeln('f = ' + f + '<br>');
  
    //常量，不可改变
    const j = 70;
    window.document.writeln('j = ' + j + '<br>');
   
</script>

字符串拼接
转义字符 ’ \ ’
拼接 +
拼接模板斜引号 ${}`

<script>
    // 转义字符
    window.document.writeln('\'');
    window.document.writeln("\"");
    window.document.writeln("'");
    window.document.writeln('"');
    let a = '我爱你中国';
    let b = '亲爱的母亲';
    window.document.writeln(a + b);
    let slogan = '桃李不言下自成蹊';
    // 字符串拼接
    window.document.writeln("<br>slogan >>> " + slogan);
    // 字符串模板
    window.document.writeln(`<br>slogan >>> ${slogan}`);
</script>

script 的数据类型
number 数值型
string 字符串类型
boolean 布尔型

 // number 数值型
    let a = 10;
    let b = 3.14;
    window.document.writeln('a 的数据类型 >>> ' + typeof (a) + '<br>');
    window.document.writeln('b 的数据类型 >>> ' + typeof (b) + '<br>');
    // string 字符串类型
    let c = '李';
    let slogan = '桃李不言下自成蹊';
    window.document.writeln('c 的数据类型 >>> ' + typeof (c) + '<br>');
    window.document.writeln('slogan 的数据类型 >>> ' + typeof(slogan) + '<br>');
    // boolean 布尔型 true false
    let d = true;
    let e = false;
    window.document.writeln('d 的数据类型 >>> ' + typeof(d) + '<br>');
    window.document.writeln('e 的数据类型 >>> ' + typeof(e) + '<br>');
    window.document.writeln('true 的数据类型 >>> ' + typeof(true) + '<br>');
    window.document.writeln('false 的数据类型 >>> ' + typeof(false) + '<br>');

    // NaN Not an Number不是数值型
    let result = '李昊哲' / 10;
    // NaN
    window.document.writeln('李昊哲 / 10 = ' + result  + '<br>');
    // number
    window.document.writeln('李昊哲 / 10 的数据类型 >>> ' + typeof(result) + '<br>');;

    // undefined 没有赋值的变量
    let f;
    window.document.writeln('f = ' + f+ '<br>');
    window.document.writeln('f 的数据类型 >>> ' + typeof(f) + '<br>');
</script>

数学运算

<script>
    let a = 10;
    let b = 20;
    window.document.writeln('a + b = ' + (a + b) + '<br>')//30
    window.document.writeln('a - b = ' + (a - b) + '<br>');//-10
    window.document.writeln('a * b = ' + (a * b) + '<br>');//200
    window.document.writeln('a / b = ' + (a / b) + '<br>');//0.5
    window.document.writeln('20 % 3 = ' + (20 % 3) + '<br>');// 2
</script>

逻辑运算符
逻辑与&,逻辑或|，==,!=

<script>
    let a = 10;
    let b = 10;
    // 比较的值
    window.document.writeln("a == b >>> " + (a == b) + '<br>');
    // 比较的内存地址
    window.document.writeln("a === b >>> " + (a === b) + '<br>');
    window.document.writeln("a != b >>> " + (a != b) + '<br>');
    let c = true;
    let d = false;
    window.document.writeln("true == false >>> " + (true == false) + '<br>');
    window.document.writeln("true != false >>> " + (true != false) + '<br>');
    // &&短路与两边都成立为true
    window.document.writeln("true && false >>> " + (true && false) + '<br>');
    // ||短路或两边有一个成立为true
    window.document.writeln("true || false >>> " + (true || false) + '<br>');

</script>

选择结构
if 判断
if else判断

<script>
    // if(条件表达式){代码块}
    // 如果条件返回结果为true则执行代码块,如果条件返回结果为false则不执行代码块
    let flag = true;
    if (flag) {
        window.document.writeln('<h1>flag的值为true<h1>');//输出结果
    }
    window.document.writeln('<h1>第一次判断结束<h1>');//判断结束输出
    if (flag) {
        window.document.writeln('<h1>flag的值为true<h1>');//输出结果
    } else {
        window.document.writeln('<h1>flag的值为false<h1>');
    }
    window.document.writeln('<hr>');
    let weekDay = 10 % 7;//结果为3
    if (weekDay == 1) {//判断weekDay==3
        window.document.writeln('今天是星期一');
    } else if (weekDay == 2) {
        window.document.writeln('今天是星期二');
    } else if (weekDay == 3) {
        window.document.writeln('今天是星期三');//输出为3
    } else if (weekDay == 4) {
        window.document.writeln('今天是星期四');
    } else if (weekDay == 5) {
        window.document.writeln('今天是星期五');
    } else if (weekDay == 6) {
        window.document.writeln('今天是星期六');
    } else {
        window.document.writeln('今天是星期日');
    }
</script>

多分支结构
if else
switch case

<script>
    let weekDay = 10 % 7;
    if (weekDay == 1) {
        window.document.writeln('今天是星期一');
    } else if (weekDay == 2) {
        window.document.writeln('今天是星期二');
    } else if (weekDay == 3) {
        window.document.writeln('今天是星期三');
    } else if (weekDay == 4) {
        window.document.writeln('今天是星期四');
    } else if (weekDay == 5) {
        window.document.writeln('今天是星期五');
    } else if (weekDay == 6) {
        window.document.writeln('今天是星期六');
    } else {
        window.document.writeln('今天是星期日');
    }
    
    switch (weekDay) {//weekDay为3匹配3 的结果
        case 1:
            window.document.writeln('今天是星期一');
            break;
        case 2:
            window.document.writeln('今天是星期二');
            break;
        case 3:
            window.document.writeln('今天是星期三');
            break;
        case 4:
            window.document.writeln('今天是星期四');
            break;
        case 5:
            window.document.writeln('今天是星期五');
            break;
        case 6:
            window.document.writeln('今天是星期六');
            break;
        default:
            window.document.writeln('今天是星期日');
            break;
    }
</script>

while循环

<script>
    let count = 0;
    while (count < 10) {
        window.document.writeln(`循环第 ${count} 次<br>`);
        count++;
    }
</script>

while循环
break后面结束循环

<script>
    let count = 0;
    while (count < 10) {
        // 判断count是否=5不是true 则不进入break结束
        if (count++ ==5) {
            break;
        }
        window.document.writeln(`循环第 ${count} 次<br>`);
    }
</script>

while循环
continue；跳过本次循环

<script>
   let arr=0;
   while(arr<10){
       if(arr++ % 2 == 0){//判断是不是偶数，是偶数跳过 
           continue;
       }
       window.document.writeln('偶数为'+arr);
   }
</script>

for循环

<script>
    for (let index = 0; index < 10; index++) {
        window.document.writeln(`第${index + 1}次说我爱你<br>`);
    }
</script>

for循环
break结束后面的循环

<script>
  for (let index = 0; index < 10; index++) {
     if(index ==6){
         break
     }
      window.document.writeln('第'+(index+1)+'循环')      
  }
</script>

for循环
continue跳过本次循环

<script>
  for (let index = 0; index < 10; index++) {
  //输出偶数跳过奇数
     if(index % 2 == 0){
         continue
     }
      window.document.writeln('第'+(index)+'循环')      
  }
</script>

数组声明

<script>
let arr0 = [1,2,3,4,5,6];
window.console.log(arr0);

let arr1 = new Array(1,2,3,4,5,6,7);
window.console.log(arr1);

let arr2 = new Array(6);
window.console.log(arr2);
</script>

数组遍历
for循环遍历
for of循环直接拿到值
for in循环直接拿索引下标
for Each循环箭头函数

<script>
    let shuzu = ['张三', '张四', '张五', '张六', '张七', '张八', '张九']
    for (let index = 0; index < shuzu.length; index++) {
        const element = shuzu[index];
        window.document.writeln(element);
    }
    // (for of循环直接拿到值======================================)
    for (const arr01 of shuzu) {
        window.document.writeln(arr01)
    }
	//(for in循环直接拿索引下标======================================')
    for (const arr01 in shuzu) {
         const element = shuzu[arr01];
        window.document.writeln(element)
    }
    // (for Each循环箭头函数======================================')
    shuzu.forEach(element => {
        window.document.writeln(element)
    });
</script>

列表生成式

<script>
    let nums = [0, 2, 5, 6, 8];
    // 偶数every() 方法使用指定函数检测数组中的所有元素：
    // 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
    // 如果所有元素都满足条件，则返回 true。
    let res01 = nums.every(num =>{
       return num % 2 == 0;
    });
    console.log(res01);
    let res02 = nums.filter(num => num % 2 == 0);
    console.log(res02);
    let res03 = nums.map(num => num * 2);
    console.log(res03);
    let res04 = nums.reduce((a, b) => a + b);
    console.log(res04);
    let res05 = nums.join('-');
    console.log(res05);
    let strs = ['李','昊','哲'];
    let res06 = strs.join('');
    console.log(res06);
    let times = [1983,11,22];
    let date = times.join('-');
    console.log(date);
</script>

数组排序
升序sort
降序reverse

<script>
    let arr1 = [3,6,7,8,1,2,9,4,5,0];
    // 升序sort
    arr1.sort();
    window.console.log(arr1);
    // 降序reverse
    arr1.reverse();
    window.console.log(arr1);
</script>

数组新增和删除
新增末尾追加元素 push（）
新增起始插入 unshift（）
删除最大下标位置上的元素值 pop()
删除最小下标位置上的元素shift()

<script>
    let array = ['java', 'python'];
    window.console.log(array);
//新增 数组末尾追加元素 push（）
    array[array.length] = '追加1';
    window.console.log(array);
    array.push('追加2');
    window.console.log(array);
//新增 在数组起始位置插入 unshift（）
    array.unshift('起始');
    window.console.log(array);
//删除 以弹栈的方式获取数组最大下标位置上的元素右侧的值 pop()
    let a = array.pop();
    window.console.log(a);
    window.console.log(array);
//删除 以弹栈的方式获取数组最小下标位置的元素左侧的值 shift()
    let b = array.shift();
    window.console.log(b);
    window.console.log(array);
</script>

数组的截取
slice(起始index,结束index)

<script>
    let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    console.log(array);
// slice(起始index,结束index) 注意不包含结束index位置上的元素
//新数组在这里截取到下标3，4，5，6的值，而原数组不变
    let newArr = array.slice(3,7);
    console.log(newArr);
    console.log(array);
</script>

数组的截取
修改，splice(起始index,截取的长度)原数组会发生改变

<script>
    let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    console.log(array);
    // splice(起始index,截取的长度)
    let newArr = array.splice(3,2);
    console.log(newArr);
    console.log(array);
    //再次截取下标3,4的值同时修改为2个字符串
    newArr = array.splice(3,2,'补充','修改');
    console.log(newArr);
    console.log(array);
</script>