JS中常见的几个问题及概念

《我心中尚未崩坏的地方》

写在前面

此文作为笔记所用,且有的地方可能有点小错误什么的,欢迎大佬们指点或指正,小花在此谢过~

1. JS中浅拷贝及深拷贝

数组浅拷贝代码举例

var arr = ["One","Two","Three"];

var arrto = arr;
arrto[1] = "test";
document.wrirteln("数值的原始值:" + arr + "<br />");  //Export:数组的原始值:One,test,Three

document.wrirteln("数值的原始值:" + arrto + "<br />");  //Export:数组的新值:One,test,Three
  • 解决数组浅拷贝的方法有:

    1. arr.slice(0) 得到的是一个新数组
    2. var arrtooo = arr.concat();
  • 对象的深拷贝(将对象中属性遍历一次得到一个新数组):

方法一:

var deepCopy = function(source){
    var result = {};
    
    for (var key in source){
        result[key] = typeof source[key] === 'object'?deepCopy(source[key]):source[key];
    }
    
    return result;
}

方法二:

str = JSON.stringify(obj), //系列化对象
newobj = JSON.parse(str); //还原

将它封装成一个函数之后:
function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

var clone = jsonClone(obj);

2. 关于chrome无法访问XMLHttpRequest

关于chrome无法访问XMLHttpRequest,原因是chrome 到安全性的问题,限制了本地跨域,可用的方式有,利用jQuery来改写,还有就是在chrome图标属性的目标项更改参数设置为"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" (此处有一个空格)--args --disable-web-security

3. JSON的输出方式

//此部分不重要,初学者可观看
var data01 = {
        "total_page": 2,
        "cover_url_large": "xxx",
        "tracks": [{
            "id": 237730,
            "track_title": "张杰 - 无情的情书(live版)",
            "announcer": {
                "nickname": "tiny121",
            },
            "duration": 310,
            "subordinated_album": {
                "album_title": "tiny550_album 001",
            },
            "source": 2,
        },
            {
                "track_title": "张杰 - 无情的情书(...)",
                "announcer": {
                    "nickname": "dgfsgdfdhfgdsgfhdsgu",
                },
                "duration": 310,
                "subordinated_album": {
                    "id": 86492,
                },
                "source": 2,
            }
        ]
    }
    document.write(data01.tracks[0].track_title);
    document.write(data01.tracks[0].announcer.nickname);
    document.write(data01.tracks[1].announcer.nickname);
    document.write(data01.tracks[1].track_title);
    
    //其中data01为json名,tracks为一个数组包含多个对象

4. 自执行匿名函数(IIFE)

  • 常见格式:(function() { /* code */ })();
  • 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。
  • 作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访问,除非你允许(变量前加上window,这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。
  • 最大的用途是创建闭包

注意:函数声明后面不允许在后面直接使用小括号

函数声明和函数表达式不同之处在于,一、Javascript引擎在解析javascript代码时会‘函数声明提升’(Function declaration Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函 数表达式,二、函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以fnName()形式调用 。

fnName();

function fnName(){
    ...
} //正常,因为‘提升’了函数说明,函数调用可在函数声明之前

fnName();
var fnName = function(){
    ...
}//报错,变量fnName还未保存对函数的应用,函数调用必须在函数表达式之后

var fnName = function(){
    alert('Hello World');
}(); //函数表达式后面加括号,当JavaScript引擎解析到此处时能立即调用函数

function fnName(){
    alert('Hello World');
}(); //不会报错,但是JavaScript引擎只解析函数声明,忽略后面的括号,函数声明不会被调用

function(){
    console.log('Hello World');
}(); //语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作,
//所以JavaScript引擎开头的function关键字当做函数声明,报错:需要一个函数名

javascript中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖 掉,根据javascript函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变 量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。

5.dataset 自定义属性

  • 这里的data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用CSS属性选择器进行样式设置。数量不受限制,在控制和渲染数据的时候提供了非常强大的控制。
var expenseday2 = document.getElementById('day2-meal-expense');  
var typeOfDrink = expenseday2.dataset.drink;
  • 删除data属性:delete expenseday2.dataset.meal;
  • 添加data属性:expenseday2.dataset.dessert = 'icecream';
  • data在css中的使用: .mm[data-name='张含韵']{ }

6. 迭代器模式

提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示。

  • 访问一个聚合对象的内容而无需暴露它的内部表示。
  • 访问一个聚合对象的内容而无需暴露它的内部表示。
  • 遍历的同时更改迭代器所在的集合结构可能会导致问题

7. map()和filter()

  • filter是满足条件的留下,是对原数组的过滤;filter 是根据返回的值是否为真来判断是否保留元素
  • map则是对原数组的加工,映射成一一映射的新数组
function pp(x){return x % 2;}
function px(x){return x % 2;}
var m = xx.map(pp);
var f = xx.filter(px);
  • array.map(callback[, thisObject]);

callback : 从当前的元素函数产生新的数组的元素。
thisObject : 对象作为该执行回调时使用

8. 闭包

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

  • 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。(解决方法是,在退出函数之前,将不使用的局部变量全部删除)
  • 闭包会在父函数外部,改变父函数内部变量的值。

9. ES5中的bind()方法

bind和call以及apply一样,都是可以改变上下文的this指向的。不同的是,call和apply一样,直接引用在方法上,而bind绑定this后返回一个方法,但内部核心还是apply。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容