2023百度前端训练营Day 6 --- JavaScript基础（1）

                                                                                     使用环境与Hello World（本课程使用codesandbox演示）

JavaScript最大的优点是可以直接执行在浏览器中

        ·本地生成一个空的html文件，然后通过script标签引入js文件

        ·一些简单的语句，可以直接使用开发者工具的console面板

·输出经典的 “Hello，world”

        ·console.log : 将值输出到控制台上

        ·document.body.innerHTML : 将网页body元素的内容替换为新的HTML内容

·基本数据类型与类型转换：（1）字符串string：通过单引号或双引号定义。       

                                             （2）数字number：只有一种类型，浮点数

                                             （3）布尔类型boolean：true或false

                                             （4）typeof操作符

                                             （5）undefined与null

                                             （6）自动类型转换： +、 == 与 ===

                                             （7）falsy值：false 0空字符串 null undefined NaN

//在js中只有一种类型：浮点数
console.log(1 == 1.0)   //所以1.0和1是相等的


//在js中，没有单独的char类型（双引号或单引号里面写一个或多个字符都认为是一个字符串），可用单引号或双引号。
console.log("hello world" == 'hello world');  
console.log('say "hello world"');         //在单引号里面加双引号
console.log("say 'hello world'");         //在双引号里面加单引号
console.log('say \'hello world\'');  //在单引号里面使用单引号就需要转义，用反斜杠再加单引号就不           会被认为是终止字符


//true false
console.log(1 > 0,true == false);


//typeof操作符(获取值的类型）
console.log(typeof 1, typeof(''), typeof false);   //输出结果为：number string boolean


//两个空值，undefined 与 null
//访问一个没有赋值过的变量（属性），会返回undefined
console.log(undefined,typeof undefined);    //输出结果为：undefined"undefined"
//使用null，通常是想强调说，这里本应该是一个对象，但这个对象还不存在的时候
console.log(null,typeof null);            //输出结果为：null"object"


//字符创与别的类型相加会转换为字符串
console.log(1 + "1",null + "is not" + undefined);         //输出结果为：11 null is not undefined


// + 也可用于字符串转数字
console.log(+'1', +(1 + '1'), +'不是一个数字'）；    //输出结果为：1 11 NaN
//NaN表示一个数字运算出错时的处理，它是一个number
console.log(typeof NaN);           //输出结果为number



//不建议使用 ==，因为会进行类型转换再进行比较
console.log(
    1 == 1,
    1 == "1",
    1 == true,
    0 == false,
    '' == false,
    null == undefined,
);                       //它们的返回结果都是true


//最好使用 === 三等号，不相等就是 ！== ，它们不转换类型
console.log(
    1 === "1",
    1 === true,
    0 === false,
    null === undefined,
);                             //它们的返回结果都为false


//false值：在循环或判断语句中期望遇到一个布尔值
if(false || 0 || '' || undefined || null || NaN)  //如果被给与这里面的值，会被认为是一个false
{
    console.log('不应该走到这里！！！')；   //若给的是1或任一true的值则会调到else
}
else
{
    console.log('false 值')；
}                                 //输出结果为：false值

·变量定义：（1）使用let、const，不建议使用var

                   （2）变量名：必须是合法的标识符，不能以数字开头

                   （3）表达式：返回一个值，与语句区别

                   （4）动态类型：类型运行时可变，可动态检测

                   （5）使用let或const会生成块级作用域

                   （6）变量屏蔽与作用域

let a = 1 +2;
//let是关键字，注意不是使用int、string之类的类型关键字
//a是变量名（必须是合法标识符，不能以数字开头或包含空格）
// = 是赋值符
//1 + 2 是表达式
//上面整行是一个语句（语句和表达式的区别在于：表达式返回一个值，而语句他本身就是一条语句不会返回任何东西）
//在同一个作用域下，同一个变量名不能重复声明


//变量可以修改类型
a += 3;
console.log(typeof a);       //输出结果为number

// a 不限制类型
a = "33";
console.log(typeof a);       //输出结果为string



//也可以用const定义变量，但由const定义的变量的值不能改变
const b = 1;


//使用方括号{},定义块级作用域，并且在不同作用域下同一个变量名可以重复声明
//内部作用域的优先级更高，为屏蔽掉外部但不会删掉。
let num = 100；
let str = ".";
console.log('作用域1'，num，str)；
{
    let str = "-";
    console.log('作用域2'，num, str);
    {
        let num = 200;
        num = 10;
        str += "-";
        console.log('作用域3'，num, str);
    }
}
 

//作用域不会相互叠加，也不会覆盖，永远优先使用内层直到访问不到才会使用外层
let sum = 0;
for(let i = 0; i < 3; ++i)
{
    for(let i = 0; i < 3; ++i)
    {
        sum += i;
    }
}
console.log(sum);

    

        ·函数：（1）函数声明：function关键字、参数、返回值

                    （2）函数声明提升        

                    （3）函数表达式

                    （4）箭头函数

                    （5）函数作为值

                    （6）闭包与作用域

实践：输出任意层级的文件树

//函数作用域还包括参数
function add(a,b)
{
    return a + b;
}


console.log(typeof add);
console.log(add(1.2));

function voidFunc(a,b)
{
    console.log('voidFunc 参数',a,b);     //等于return undefined
}


console.log(voidFunc(1,2));


//传入更多、更少的参数
voidFunc()
voidFunc(1);
voidFunc(1,2,3);


//function addWithDefoult(a,b)
{
    if(typeof b === 'undefined')
    {
        b = 0;
    }
    if(typeof a === 'undefined')
    {
        a = 0;
    }
}


//js可以先调用再声明
console.log(minius(10,2));

//function 定义提升(在js里会把所有定义的函数进行提升到文件头部，所以调用可以不用考虑所在位置)
function minius(a,b)
{
    return a - b;
}

//也可以把函数赋给一个变量，后续通过调用变量来使用函数（这种方法无关定义提升，必须先声明后调用）
const minius1 = function minius2(a,b){
    return a - b;
} ;


//箭头函数（等于号加大于号）
const minius4 = (a,b) => {
    return a - b;
};

//如果函数体只是一个表达式，可以把大括号和return省略掉
const minius5 = (a,b) => a - b;

//如果只有一个参数，可以把小括号省略掉
const returnSelf = x => x;


//函数作为参数
function binaryOperator(Operand1,Operand2,func){
    const res = func(operand1,operand2);
    console.log(res);
    return res;
}


binaryOperator(2,5,'+');       //表示2+5

//把空格重复多次，返回
const repeatspace(4) + '空格');
//如果需要别的函数把空格重复多次呢，或者感叹号！
//写一个生成函数的函数
const buildRepeatChar = char => {
    return num => {
        let res = '';
        while(num--) {
            res += char;
        }
        return res;
    }
}