js-MediumGrade-base.js

// 1.JavaScript 中的类型包括

    Number(数字)
    String(字符串)
    Boolean(布尔)
    Symbol(符号)(第六版新增)
    Object(对象)
        Function(函数)
        Array(数组)
        Date(日期)
        RegExp(正则表达式)
    Null(空)
    Undefined(未定义)

// 2.数字

    Math.sin(3.5);
    var d = Math.PI * r * r;

    parseInt("123", 10); //10进制
    parseInt("120", 8);     //8进制
    parseInt("120", 16); //16进制
    parseInt("hello", 10); // NaN

    parseFloat()

    isNaN(NaN); // true
    Infinity(正无穷)
    -Infinity(负无穷)

    isFinite(1/0); // false
    isFinite(-Infinity); // false
    isFinite(NaN); // false

// 3.字符串

    "hello".length; // 5
    "hello".charAt(0); // "h"
    "hello, world".replace("hello", "goodbye"); // "goodbye, world"
    "hello".toUpperCase(); // "HELLO"

// 4.变量

    var a;
    var name = "simon";

// 5.运算符

    x += 5; // 等价于 x = x + 5;
    "hello" + " world"; // hello world
    "3" + 4 + 5; // 345
    3 + 4 + "5"; // 75

    123 == "123" // true
    1 == true; // true

    1 === true; //false
    123 === "123"; // false

// 6.控制结构

    var name = "kittens";
    if (name == "puppies") {
      name += "!";
    } else if (name == "kittens") {
      name += "!!";
    } else {
      name = "!" + name;
    }
    name == "kittens!!"; // true

    ///////////////////////////////////////////

    while (true) {
      // 一个无限循环!
    }
    var input;
    do {
      input = get_input();
    } while (inputIsNotValid(input))

    ///////////////////////////////////////////

    for (var i = 0; i < 5; i++) {
      // 将会执行五次
    }

    ///////////////////////////////////////////

    switch(action) {
        case ‘draw‘:
            drawIt();
            break;
        case ‘eat‘:
            eatIt();
            break;
        default:
            doNothing();
    }

// 7.运算符

    var name = o && o.getName();
    var name = otherName || "default";
    var allowed = (age > 18) ? "yes" : "no";  //三元操作符

// 8.对象

    var obj = new Object();
    var obj = {};

    var obj = {
        name: "Carrot",
        "for": "Max",
        details: {
            color: "orange",
            size: 12
        }
    }
    obj.details.color; // orange
    obj["details"]["size"]; // 12

// 9.数组

    var a = new Array();
    a[0] = "dog";
    a[1] = "cat";
    a[2] = "hen";
    a.length; // 3

    // 遍历数组的三种方法 依次更好
    for (var i = 0; i < a.length; i++) {
        // Do something with a[i]
    }

    for (var i = 0, len = a.length; i < len; i++) {
        // Do something with a[i]
    }

    for (var i = 0, item; item = a[i++];) {
        // Do something with item
    }

array方法名称    描述

a.toString()    //返回一个包含数组中所有元素的字符串,每个元素通过逗号分隔。
a.toLocaleString()    //根据宿主环境的区域设置,返回一个包含数组中所有元素的字符串,每个元素通过逗号分隔。
a.concat(item1[, item2[, ...[, itemN]]])    //返回一个数组,这个数组包含原先 a 和 item1、item2、……、itemN 中的所有元素。
a.join(sep)    //返回一个包含数组中所有元素的字符串,每个元素通过指定的 sep 分隔。
a.pop()    //删除并返回数组中的最后一个元素。
a.push(item1, ..., itemN)    //将 item1、item2、……、itemN 追加至数组 a。
a.reverse()    //数组逆序(会更改原数组 a)。
a.shift()    //删除并返回数组中第一个元素。
a.slice(start, end)    //返回子数组,以 a[start] 开头,以 a[end] 前一个元素结尾。
a.sort([cmpfn])    //依据 cmpfn 返回的结果进行排序,如果未指定比较函数则按字符顺序比较(即使元素是数字)。
a.splice(start, delcount[, item1[, ...[, itemN]]])    //从 start 开始,删除 delcount 个元素,然后插入所有的 item。
a.unshift([item])    //将 item 插入数组头部,返回数组新长度(考虑 undefined)。

// 10.函数

    function add() {
        var sum = 0;
        for (var i = 0, j = arguments.length; i < j; i++) {
            sum += arguments[i];
        }
        return sum;
    }
    add(2, 3, 4, 5); // 14

    // --------------------加法的函数---------------------

    function avg() {
        var sum = 0;
        for (var i = 0, j = arguments.length; i < j; i++) {
            sum += arguments[i];
        }
        return sum / arguments.length;
    }
    avg(2, 3, 4, 5); // 3.5

    // --------------------平均数的函数---------------------

    function avgArray(arr) {
        var sum = 0;
        for (var i = 0, j = arr.length; i < j; i++) {
            sum += arr[i];
        }
        return sum / arr.length;
    }
    avgArray([2, 3, 4, 5]); // 3.5

    // --------------------平均数的函数【逗号连接的变量串】---------------------

    var avg = function() {
        var sum = 0;
        for (var i = 0, j = arguments.length; i < j; i++) {
            sum += arguments[i];
        }
        return sum / arguments.length;
    };

    // --------------------匿名函数---------------------

// 11.自定义对象

    function makePerson(first, last) {
        return {
            first: first,
            last: last
        }
    }
    function personFullName(person) {
        return person.first + ‘ ‘ + person.last;
    }
    function personFullNameReversed(person) {
        return person.last + ‘, ‘ + person.first
    }
    s = makePerson("Simon", "Willison");
    personFullName(s); // Simon Willison
    personFullNameReversed(s); // Willison, Simon

    // --------------------一般写法---------------------

    function makePerson(first, last) {
        return {
            first: first,
            last: last,
            fullName: function() {
                return this.first + ‘ ‘ + this.last;
            },
            fullNameReversed: function() {
                return this.last + ‘, ‘ + this.first;
            }
        }
    }
    s = makePerson("Simon", "Willison");
    s.fullName(); // Simon Willison
    s.fullNameReversed(); // Willison, Simon

    // --------------------对象概念 更优---------------------

    function Person(first, last) {
        this.first = first;
        this.last = last;
        this.fullName = function() {
            return this.first + ‘ ‘ + this.last;
        }
        this.fullNameReversed = function() {
            return this.last + ‘, ‘ + this.first;
        }
    }
    var s = new Person("Simon", "Willison");

    // --------------------this 改进已有的 makePerson函数---------------------

// 12.内部函数

    function betterExampleNeeded() {
        var a = 1;
        function oneMoreThanA() {
            return a + 1;
        }
        return oneMoreThanA();
    }

// 13.闭包

    function makeAdder(a) {
        return function(b) {
            return a + b;
        }
    }
    x = makeAdder(5);
    y = makeAdder(20);
    x(6); // 11
    y(7); // 27

// 14.内存泄露

    // 闭包很容易发生无意识的内存泄露

        function addHandler() {
            var el = document.getElementById(‘el‘);
            el.onclick = function() {
                el.style.backgroundColor = ‘red‘;
            }
        }

    // 这个问题有很多种解决方法,最简单的一种是不要使用 el 变量

        function addHandler(){
            document.getElementById(‘el‘).onclick = function(){
                this.style.backgroundColor = ‘red‘;
            };
        }

    // 有趣的是,有一种破坏因为闭包引入循环引用的窍门是添加另外一个闭包:

        function addHandler() {
            var clickHandler = function() {
                this.style.backgroundColor = ‘red‘;
            };
            (function() {
                var el = document.getElementById(‘el‘);
                el.onclick = clickHandler;
            })();
        }
时间: 2024-10-13 00:40:36

js-MediumGrade-base.js的相关文章

封装常用的js(Base.js)——【01】理解库,获取节点,连缀,

封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库,比如jQuery,Prototype,Dojo等等,这些javascript库已经把最常用的代码进行了有效的封装,以便我们开发,从而提高效率.现在我这里探讨的是自己创建一个javascript库,自己创建的肯定没有那些开源javascript库功能强大,目的主要是为了提升自己的原生javascrip

base.js

function on(node,eventType,handler) { //e=window.event||e; node=typeof node=="string"?document.getElementById(node):node; if(document.all) //IE { node.attachEvent("on"+eventType,handler); } else { node.addEventListener(eventType,handle

搭建自己的base.js(1)

前言 从今天开始搭建自己的base.js,主要实现封装各浏览器兼容函数及常用操作. JS中,最常见的浏览器兼容问题估计就是事件兼容问题了,比如获取事件对象.绑定事件等,我们可以将这些兼容函数放在一个全局对象EventUtil里面,减少全局变量污染,并保证随时扩充. 事件绑定 在Firefox.Chrome等支持DOM2的浏览器中,绑定事件使用的方法是addEventListener(type,handler,useCapture),三个参数分别表示事件类型.绑定事件的函数.是否在捕获阶段处理事件

使用Backbone.js, ExpressJS, node.js, MongoDB的web应用样板工程

这是web应用的一个完整的样板工程,用到了Backbone.js & Marionette, node.js & ExpressJS,MongoDB & Moogoose, Handlebars, Grunt.js, Bower和Browserify! 我建立了一个超级基础的单页面应用程序(SPA),就是一个简单的通讯录管理器, 但麻雀虽小,五脏俱全.我写这篇文章的目的是介绍一下这个应用所用到的整个技术栈:后端,数据,前端,工具和测试.主要包括下面这些技术: 后端: node.js

记录:sea.js和require.js配置 与 性能对比

最近有点忙,很久无写博客,记录一下之前的配置require.js和sea.js的配置.(有误有望提出 require.js 文件目录 /app(项目使用js) /lib(require.js jq存放处) /plugin(框架对应的功能插件) require.js比较方便在于,不是amd的模块组件可以通过配置文件进行依赖配置.而且异步加载js 页面加载速度是杠杠的.当然会有点问题的,网速过慢的话,可能会出现js,timeout(可以通过配置解决. config.js (配置文件) // 配置信息

JavaScript模块化-require.js,r.js和打包发布

在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发布,性能优化,工程化管理都有密切的关系,这么重要的事情,在JavaScript大行其道的今天,不可能没有成熟的解决方案,所以从我的实践经验出发,从模块化讲到工程化,分享一下自己的经验. 这篇文章主要是讲require.js和r.js在项目中的使用,不会涉及到工程化问题,对此熟悉的看官可以略过此文.对

OSChina 开源周刊第三十三期 —— Node.js 和 io.js 准备合作!

每周技术抢先看,总有你想要的! 开源资讯 Node.js 和 io.js 准备合作!合久必分,分久必合? Nervana 开源深度学习软件,性能超 Facebook.Nvidia产品 B 站建开源工作组 多 APP 使用其开源项目 Android 新开发技术 Sky:Dart 开发 Android 应用 谷歌红帽及 VMware 宣布支持 CoreOS 容器 Oracle 宣布 Java 7 生命周期终结 Java 9 公布发行计划,明年 9 月发布正式版 IO.js 2.0.0 发布,服务器

青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,"青出于蓝而胜于蓝".今天,K就从下面几个方面来跟大家一起探讨一下,Vue.js到底在哪些方面更"胜于蓝". (一)简单的操作 这是K看来Vue.js最杰出的的方法,Vue.js致力于视图层的展现,这使它在与其他项目进行整合的时候会变得非常easy,这也使它更容易"嵌

Angular、React.js 和Node.js到底选谁?

为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情,但在这种情况下,对于到底应该选择哪种框架,程序员之间并没有一致的意见,每个人都有不同的想法,并且听起来都相当合理. 为了让一切归于和谐,本文就来探究一下这三大框架各自的优缺点. 基础知识部分: 在我们深入研究这三种框架的具体细节之前,先来了解一些前情提要.yigouyul22.com xucaiz

Require.js、Angular.js整合

Require.js 详见: 初识Require.js 解密Require.js Angular.js 详见: 初识Angular.js之爱恨情仇 整合Require.js.Angular.js 配置 在Requirejs中配置angular.js. require-main.js // 配置 requirejs.config({ ... paths: { 'jquery': 'libs/jquery-2.1.3/jquery.min', 'angular': 'libs/angular-1.3