JS和TS学习总结

数据类型

js 中可以用var,let,const或者直接写变量名来声明变量,其中包括:
undefined       逻辑运算为0
object          null逻辑运算为0
boolean         false逻辑运算为0
number          整数范围(-2^53,2^53)不包括端点,比其他语言的long类型大小小,所以后端传前端过大的数需要用字符串;
                也可以表示浮点数
string

var a
console.log(typeof(a))
var a=null
console.log(typeof(a))
var a=true
console.log(typeof(a))
var a=123
console.log(typeof(a))
var a="123"
console.log(typeof(a))

从上面的代码可以看到,用var是可以重复定义的,除此之外还有其他特性

console.log(a)
// console.log(b)
var a = "a"
// let b = "b"

上面这段代码虽然我们先访问了a,此时a还未声明,不过我们还是能够访问,只不过是undefined,不会报错
而我们用let就会报错,编译器甚至不能检查到错误

function f(){
    {
        //函数内局部变量
        var x = "var x";
        //{}内  局部变量
        let y = "let y";
        //全局变量
        z ="z";
        console.log("in {} "+x)
        console.log("in {} "+y)
        console.log("in {} "+z)
    }
    console.log("in f() "+x)
    // console.log("in f() "+y)//报错
    console.log("in f() "+z)
}
f()
// console.log("out of f() "+x) //报错
// console.log("out of f() "+y) //报错 
console.log("out of f() "+z) // 

上面这段代码说明了3种声明方式的作用域

for(var i=1;i<=3;i++){
    setTimeout(function() {
        console.log(i); // 输出 4 三次
    }, 100);
}
for(let i=1;i<=3;i++){
    setTimeout(function() {
        console.log(i); // 输出 1 2 3
    }, 100);
}

上面这段代码显示了var和let在循环中的不同

运算符

js中存在`===`和`!==`运算符
3个等号意思是不仅值相等,而且类型相等;相当于其他语言的2个等号;
而2个等号的意思是值相等 即整数123可以变成字符串"123"从而与字符串"123"相等
下面代码示例

const a ="123"
const b = 123
const c = 123
if(a===b){
    console.log("a===b")
}
if(a==b){
    console.log("a==b")
}
if(b===c){
    console.log("b===c")
}
if(b==c){
    console.log("b==c")
}

数组

//var 可以声明多种类型的
var a  = [1,2,"123",undefined,null,true]
//下标遍历
for(var i in a){
    console.log(a[i])
}
console.log("--------end of foreach-------")
//对象遍历
for(var x of a){
    console.log(x)
}
console.log("--------end of foreach-------")

var b = a;
b[2] = "b2";
console.log(a[2])

//浅拷贝防止直接引用
var c = [...a]
c[2] = "c2"
for(var i in a){
    console.log("a["+i+"] = "+a[i])
}
console.log("--------end of foreach-------")
for(var i in c){
    console.log("c["+i+"] = "+c[i])
}
console.log("--------end of foreach-------")

函数

const fun1 = function(){
    console.log("匿名函数")
}
const fun2 = () => console.log("箭头函数");

(function(args){
    console.log("自执行函数" + args)
})(12);
fun1();
fun2();

对象

在ES6之前没有类,只有对象,
在对象和类里面需要注意箭头函数的this不是指向对象的

let num = {
    number: 1 ,
    //链式语法 返回this
    Increse(){
        this.number++
        console.log(this.number)
        return this
    }
    //箭头函数  运行会报错 
    //因为this指针不是指向num对象,
    // Increse : () => {
    //     this.number++;
    //     console.log(this.number)
    //     return this
    // }
}
num.Increse().Increse();

如果要遍历对象中的每个属性,(对象不是数组),一样可以用for循环来实现
当对象的属性非常多 而且需要提交表单不为null 可以用此方法赋值

for(let key of Object.keys(obj)){
	obj[key] = 'Initial value';
	console.log(key+" : "+obj[key]);
}

模板字符串

在模板字符串中可以用${变量名}还获取变量的值
模板字符串中不是用双引号 " 而是用反单引号 `

let obj = {
    name : "",
    output(name){
        this.name = name;
        //用反单引号包起来
        console.log(`obj's name = ${name}`)
    }
}
obj.output("obj")
//用反单引号包起来
const str = `
1 2 3
4 5 6
7 8 9
`
//没有模板字符串的定义
const str2 = "\
1 2 3\n\
4 5 6\n\
7 8 9\n\
"

console.log(str)
console.log(str2)