Js 入门小Tips

1. Js的变量是没有强类型的，变量的类型随着值而改变。

var a = 0;
console.log(typeof(a));//number
a = '123';
console.log(typeof(a));//string
a = {};
console.log(typeof(a));//object

2. Js变量在文档解析时会进行变量提升，作用域为全域。 即：

console.log(web);
var web = 'name';

//此时段代码相当于=>
var web;
console.log(web);// undefined(因为web变量声明了,并没有赋值,所以不会报错）
web = 'name';

但只有 var 声明变量的时候才会这样
建议使用 let和 const 这样的变量修饰语句都不会将声明提前，即作用域可控。

3. 可以在声明的时候省略var ，但是会造成其他文档共同解析时的误读。

//文档1
fuction run(){
var web = 'name';
};
//文档2
web = '12345';
run();
console.log(web);//name

4. 可以省略每个语句后面的 ； 但是，在压缩文档的时候没有换行，前后语句连起来就不表原义了

let web = '12345'
web = 123;
//压缩空格后
let web = '12345'web = 123;

5. const 在同一个作用域下不能修改其值。修改对象的属性是被允许的，不允许直接给对象赋值 即：

const a = 0；
a = 5；// NO

const obj = {
    name: '123',
    age: '123',
    class: '123',
}
obj.name = 123;// OK
obj.sex = 'boy' ;// OK
obj = {name: '123'};// NO

因为数组Array 和对象Object 都是引用类型，变量保存的是目标的指针，改变值并不会改变目标指针。

---

用 Object.freeze() 方法可以让 const 声明的变量完全不可以修改

const obj = {
    name: '123',
    age: '123',
}
Object.freeze(obj);
obj.sex = 'name';// 报错

---

let 和 const 不可以在同一作用域下重复声明同一变量名。（ var 可以，所以不推荐使用）

let web = 0;
//
//
//
//
let web = 0;// 报错

6. 严格模式 'use strict'； 让代码在严格条件下执行，严格模式下你不能使用未声明的变量。

'use strict';// 严格模式
web = 0；// 报错 （没有使用变量声明修饰句）

7. Js中的传址和传值，数组和对象的为引用类型，变量指向的是一个固定的地址；数字和字符串则为传值。

const obj = {name: '123'}；
abc = obj；
abc.name = '456';
console.log(obj);// 456 (传址)

let a = 0;
b = a;
b = 5;
console.log(a);// 0 (传值)

8. 跨类型比较，== ，自动转换类型；直接核对， === ，不转换类型。

let a = 1;
let b = '1';
console.log(a==b);// true (真，实为字符串转成int类型)
console.log(a===b);// false (假，两个为不同类型，即不同)

9. JS中短路运算符 && 和 || (不是与和或）

var a = 5 && 6;
console.log(a); // 返回的结果为 6
（如果逻辑与运算符左边的值布尔转换后为true，返回右边的值。）

var a = 5 || 6;
console.log(a); // 返回的结果为 5
（如果逻辑与运算符左边的值布尔转换后为true，返回左边的值。）

//三个都可以运行
function run1(n) {
    if (!n) {
        return 5;
    }
    return n;
}
console.log(run1(3));// 3
console.log(run1());// 5

//
function run2(n) {
    return (n || 5);
}
console.log(run2(3));// 3
console.log(run2());// 5

//
function run3(n = 5) {
    return n;
}
console.log(run3(3));// 3
console.log(run3());// 5
//最新的直接简化为 n = 5，5作备选，n有值则跳过备选；

跟c语言一样，a = b||c 假如b为真即跳过执行c判断。

10. switch 可以同义替换if类似逻辑，可读性更佳

function print1(age) {
    if (age > 60) {
        return '老年';
    } else if (age > 40) {
        return '中年';
    } else if (age > 20) {
        return '青年';
    }
}
console.log(print1(50));// 中年

//switch 可以同义替换if类似逻辑
function print2(age) {
    switch (true) {
        case age > 60:
            return '老年';
        case age > 40:
            return '中年';
        case age > 20:
            return '青年';
    }
}
console.log(print2(50));// 中年

update 2022 3-23

11. 函数默认参数设置语法(参数多，对象默认参数；参数少，数字默认参数）

function star1(end = 5) { //默认参数为数字
    let start = 0;
    do {
        document.write('*');
    } while (++start <= end)
}
star1(); //******（六颗星是因为先打了一个，++start是从1开始，5结束。）

function star2(options = { tr: 0, td: 0 }) { //默认参数为对象
    while (options.tr++ != 5) { //从0~4 循环5次
        let td = options.td;
        while (td++ != 3) { //从0~3 循环3次
            document.write('*'); //打印一个* 
        }
        document.write(`</br>`); //换行
    }
}
star2(); // 打印了5x3的*阵列，td++从0开始，2结束，每行循环3次）

12. 循环太多层了，break 只跳一层不适用，用 break label
    （相当于C中的 go to 语句）

shell: for (let n = 1; n < 10; n++) { // shell 就是label
    for (let i = 1; i < 10; i++) { // 10x10 的笛卡尔乘积
        if (i % 2) { // 奇数过滤器
            console.log(n, i);
            if (i + n > 12) 
                break shell; //跳出指定循环（label名）
        }
    }
}

13. for in 和 for of 在数组和对象中的应用

let obj = { tr: 0, td: 0 };// 对象
let hd = 'qwertyuiop'; // 数组

//数组
for (let i in hd) {
    console.log(i, hd[i]);// (索引，值)
}
for (let i of hd) {
    console.log(i); // 直接获得值，但你获取不到遍历内容的索引信息。
}

//对象
for (let i in obj ) {
    console.log(i, obj [i]);// (键，值)
}
for (let i of obj ) {
    console.log(i); // 报错
}

update 2022 3-24

14. 推荐使用 `` 来描述字符串

let a = '我';
let b = '你';
console.log(a + 'love' + b); // 我love你；
console.log(`${a}'love'${b}`); // 我love你；
console.log(`${1+1}'love'${fun()}`); 
// 字符串化可以计算值 和 函数返回值；

15. 用 trim() 函数为字符串去空白

let a = '   abc   ';
console.log(a.length); // 9
console.log(a.trim().length); // 3

update 2022 3-25