Translate

Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Zephyr - Study: JavaScript (2)

1. 内建对象:
        包括 object function array 等

2. 数组 Array 
        也是一个对象
        1)创建数组对象:var arr = new Array();
        2)添加元素:数组[索引] = 值
        3)长度:数组.length
        4)数组可以不连续,不连续的情况下,长度为 最大索引+1 (尽量不要用不连续)
        5)数组元素可以是任意类型
       
        方法:
            1) push() 向末尾添加元素,返回新长度
            2) pop() 删除并返回最后一个
            3) unshift() 向开头添加元素,返回新长度
            4) shift() 删除并返回开头第一个
            5) slice(开始索引,结束索引) 返回选定元素 (开始索引包含,结束索引不包含)
            6) splice(开始索引,删除个数,新增的元素) 删除指定元素并返回且加入新的元素 (会改变原数组)
            7) concat() 连接两个或多个数组,不修改原数组
            8) join(连接符) 可以将数组转化为字符串 (字符串就是把所有元素 默认用逗号连接)
            9) reverse() 倒转数组 会修改原数组
            10) sort() 排序数组 会修改原数组
                    升序:
                        arr.sort(function(a,b){
                            return a - b
                        })
                    降序:
                        arr.sort(function(a,b){
                            return b - a
                        })

            
3. 函数的方法:
        1) call()   2) apply()  这两个都会调用函数执行
            区别是:
                在调用call() 和 apply()时候,可以将一个对象指定为第一个参数,此时这个对象会成为函数执行时的this
                例子:
                    fun();                      this: window
                    fun.call(obj);            this: obj
                    fun.apply(obj);         this: obj
                
                call()方法的第一个对象后面的参数 就是 函数的实参
                apply()方法要把实惨封装到一个数组里

                fun.call(obj, 2, 3);
                fun.apply(obj, [2,3]);

4. arguments 是一个类数组对象,是调用函数时会隐含传递进去的参数 (另一个是this)
        调用函数时,传递的实参都会在arguments中

5. Date对象
        封装代码执行的时间
        格式: 月/日/年 时:分:秒

6. 正则表达式
        创建正则表达式对象 var reg = new RegExp("正则表达式", "匹配模式");
        或者直接 var reg = /正则表达式/匹配模式

        检测是否符合正则表达式:
            var result = reg.test(str);

        "匹配模式":
                i : 忽略大小写
               g : 全局匹配

        | 表示 或者
         [] 里面的内容也是或的关系 [ab] = a | b
         [a-z] 任意小写字母
         [A-Z] 任意大写字母
         [A-z] 任意字母
         [^ ] 除了 以外还有没有

        search() 搜索并返回符合条件的内容,返回的是第一个符合的索引
        match() 提取符合条件的内容,返回的是第一个符合的内容,可设置为全局

7. DOM    (属于宿主对象)
        Document / Object / Model
        JS 通过 DOM 来对 HTML 文档进行操作
        Document:
            一个html就是一个文档
        Object:
            将网页里的每一个部分都换转为一个对象
        Model:
            使用模型来表示对象对象之间的关系


        节点 Node,是构成网页的最基本的组成部分,通常分为四种
                1)文档节点:整个html文档
                2)元素节点:html文档的html标签
                3)属性节点:元素的属性
                4)文本节点:html标签中的文本信息


        浏览器提供了文档节点,该节点对象是window的属性:document
        例:
            获取button对象
            var btn = document.getElementById("btn")
            修改按钮文字
            btn.innerHTML = "新的文字";
        

8. 事件:就是用户与浏览器之间的交互行为
            例如:点击按钮,鼠标移动,关闭窗口...

    DOM event

    btn.onclick = function(){
        alert("aaa");
};

    onload事件会在整个页面加载完成之后才触发
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert("aaa");
        };
};
    * 这样就可以避免因为书写顺序导致的错误,比如先写了单击事件,后写了按钮对象


9. 获取元素节点
    通过调用document对象的
    1)getElementById                 :通过id属性获得一个元素节点对象
    2)getElementsByTagName    :通过标签名获得一组元素节点对象
    3)getElementsByName         :通过name属性获得一组元素节点对象




        
        
        




        





        

        

Zephyr - Study: JavaScript (1)

 1. JavaScript

    JavaScript 包含三个部分:ECMAScript / DOM / BOM
        ECMAScript:js的标准
        DOM:文档对象模型
        BOM:浏览器对象模型

    JS 代码写的位置:
        1. 写在script标签中 (script标签放在body的最后)
        2. 写在属性中,如 href属性标签中 / onclick属性标签中 (不推荐 过于耦合)
        3. 写在外部文件,然后用script标签引用 (推荐) <script src="index.js"></script>

    alert: 弹出一个警告框
    document.write(): 向body中输出内容 
    console.log(): 向控制台输出内容


2. 语法

    1. 注释:      /*   多行注释
                        */
                     // 单行注释 

    2. JS 严格区分大小写

    3. 每一句以;结尾
    
    4. 用 var 声明变量          var a;

    5. 用typeof 检查数据类型       typeof a;

    6. typeof Null  -> object

    7. 数据类型的转换:
            转string
            1)b = a.toString() 转换结果为返回值 a不会改变
            2)b = String(a)
                区别:1)不能转 null 和 undefined       2)可以转

            转number
            3)使用 Number()
            4)  针对字符串 用 parseInt() / parseFloat()
                   讲有效的整数部分转化为数字
                   从左到右 取出数字

    8. object 对象数据类型
            var obj = new Object();

    9. JS 的变量都是保存在栈内存中的,
        基本数据类型的值直接在栈内存中保存
        值与值之间独立存在,不互相影响
        
        对象是保存在 堆内存
        栈内存里放内存地址
        如果两个变量指向同一个对象,修改对象,两个变量的都会修改

        比较基本数据类型,比的是值
        比较引用数据类型,比的是地址

    10. 创建object对象 可以直接用 {}
            var obj = {属性名:值,属性名:值...};

    11. 函数
            function 函数名(形参) {
                
}

    12. for (var n in obj) {
            console.log(n);         // n是obj的属性名
            console.log(obj[n]);   // []可以传变量,.n 不可以
}

    13. 全局作用域中有一个全局对象 window
         代表浏览器的窗口
         当在全局作用域中创建变量的时候,都会作为window对象的属性保存

    14.    var 创建的变量会被提前声明
            function 函数名 () {} 这种方法创建的函数,会在所有代码执行前就被创建

    15. 在调用函数的时候,都会向函数内部传递一个隐含的参数 this
            this 指向一个对象 (上下文对象)
            根据调用方式不同,this 指向不同的对象
                    1) 以函数形式:指向window
                    2)以方法形式:指向调用方法的对象

    16. 构造函数 
            function Person(){
                this.name = "a";
                this.age = 16;
}
            var p1 = new Person();

        * 构造函数其实就是函数,但是与new搭配用的时候 可以用来创建对象
            习惯上 首字母大写

        * 构造函数执行过程:
            1)立刻创建一个新的对象
            2)将新建的对象设置为函数中的this
            3)逐行执行函数中的代码
            4)将新建的对象作为返回值返回

    17. 原型 prototype
            每创建一个函数,解析器就会向函数中添加一个属性 prototype
            这个属性是一个对象

            如果函数作为普通函数调用prototype没有任何作用
            当函数以构造函数调用的时候,他所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象;可以通过__proto__来访问该属性

            原型对象就相当于一个公共区域,所有同一类的实例都可以访问到这个原型对象
            所以!!我们可以将对象中共有的内容,统一设置在原型对象中

            当我们访问对象的一个属性或方法时,他会先在对象自身中寻找,如果有则直接使用,如果没有,就去原型对象中寻找

            

            好处:1)在创建对象的时候 不会新建一个对象就新建一个方法;2)也不会污染全局命名空间(因为解决 1 的另一个方法就是建一个全局函数)

    
        18. 垃圾回收 GC
            什么是垃圾:没有变量或属性对其引用的对象
            在JS中有自动的垃圾回收机制,不用手动操作














What is the difference between .js .jsx .ts .tsx

.js 是javascript文件的扩展名,例如main.js。
.jsx 是javascript文件并表明使用了JSX语法。
.ts 是typescript文件的扩展名。
.tsx 表明是typescript文件并使用了JSX语法。

JSX是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。
JSX是JavaScript的语法扩展。
当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。