专题复习三、JS基础还记得么?

写于2017.07.29

js声明变量方法

  • var a =1
    表示声明一个变量。用var声明的变量都存在声明提升,意思就是声明在前,赋值在后。
    上述等价于:var a ; a=1
    同样在一个作用域里面,如果你写:a=1;var a ;等价于var a ; a=1
  • let b =2
    let对应var,它只在当前作用域有效,而不会声明提升
  • const c =3
    const用于声明常量,声明的时候需赋值,同时不能再次更改值
  • d=1
    这样声明在顶级作用域就是全局变量global.d。

js7种基本数据类型

  • number(数值类型)
  • string(字符串)
  • boolean(布尔:FALSE、TRUE)
  • null(typeof null = “object”
  • symbol(产生一个与其他都不相等的值。typeof symbol ="symbol")
  • undefined(针对非对象类型为空的情况,typeof undefined = “undefined”)
  • object(对象类型)
    1、number
    js存储的数字大部分都是近似值,也就是说0.1+0.1(10次)!=1
  • NaN
    ① NaN代表一个目前无法表示的数字 typeof NaN = "number"
    ② NaN === NaN 值为FALSE,因为表示两个均不能表示的数字,值不相等
    ③ window.isNaN()方法判断一个东西是不是NaN,是一个全局API
    window.isNaN(“s”) 值为TRUE,因为首先会把字符串s转换为数字
    Number.isNaN("s")值为FALSE,因为它不转换直接判断
  • Infinity&-Infinity(正无穷大和负无穷大)
    ①window.isFinite()判断一个数字是否无穷大
  • 字符串转换为整数
    ① + ‘1213243556’ 结果:1213243556
    ②window.ParseInt( ‘1213243556’ ,10) 结果:1213243556
  • 字符串转换为浮点数
    window.parseFloat('0.1233444') 结果:0.1233444
    2、字符串
  • 申明方法
    ① var s ="skdf"
    ② var s ='skdf'
    ③ var s =skdf(ES6语法:处理多行字符串,可回车)
  • 取变量内容的两种方法
    ① var name = 'frank'
    var s = 'hi' + ' '+ 'frank'
    console.log(s) : hi frank
    ② var name = 'frank'
    var s =hi, ${name}(这里可以加多个变量)
    console.log(s) : hi, frank
  • 其他注意事项
    ① "s"+"d" : "sd";1 + "2" : "12"(只要有1个是字符串,就都转换为字符串)
    ②var s = 'abcd'
    s[0]="a"; s[1]="b"
    不能对任意一个赋值,如s[0]="7"是无效的
    s.length代表的是字符串的个数
    3、对象
    比较特殊的对象:数组、函数
    简单类型与复杂类型的区别:在内存中占得位数是否确定
  • 对象建立方法
    ①var a ={ }
    ②var a = new object();
    ③var a =Object.create(object.prototype)
    var object = {
    key1:value1;
    key2:value2;
    }
  • 关于key
    ①object.keys( ) 打出对象所有的key
    ②key可以叫做属性或者方法
    ③key的类型是字符串
    4、数组
  • 生成数组
    ① var a =[ ]
    ② var a = new Array[10](表示一个长度为10的数组)
    5、函数
  • 申明方法
    ① function a (p1,p2,p3){ }(申明会提升)
    ② var f =function(){ } (不会提升;相当于var f; f =function(){ })
  • 函数返回值
    ① function f3 ( ){
    function f4( ){
    return 2
    }
    var a =1
    return f4( ) /return f4
    }

return f4( ) 与return f4的区别:f4( ) ===2;f4===“function f4( ){
return 2
}”

② var f =function(){ } (不会提升;相当于var f; f =function(){ })

  • f.length
    指形参的个数
  • f.call()
    f.call(this,argument[0],argument[1],argument[2],)
    例: function f ( ) {
    console.log(this)
    console.log(argiments)
    }
    执行f.call(1,2,3,4)
    则 f.this :1
    arguments : [2,3,4]
    每次调用都会创建新的this和arguments
  • 函数作用域
    var a
    function f1(){
    var a
    function f2(){
    a = 1(向上找,就是f1里面的var a
    }
    function f4(){
    var a
    }
    f2()
    f3()
    }
    function f3(){
    a = 2(向上找就是全局里面的var a)
    }
    先在自己作用域找,没有申明就向上找
    如果申明一个变量没有用var,且在整个作用域都没有申明,那么就是全局变量
    ③申明提升:提升到所在作用域的第一行

扫盲:
1、console.log()与 console.dir()的区别
console.log()向web控制台输出一条消息.
console.dir()将一个JavaScript对象的属性和属性值显示成一个可交互的列表,点击折叠的小三角形可以查看各子属性的内容.
例:
console.log({f1: 'foo', f2: 'bar'})
// Object {f1: "foo", f2: "bar"}

console.dir({f1: 'foo', f2: 'bar'})
// Object
// f1: "foo"
// f2: "bar"
// proto: Object
上面代码显示dir方法的输出结果,比log方法更易读,信息也更丰富。
该方法对于输出DOM对象非常有用,因为会显示DOM对象的所有属性。
2、f.call()、 f.apply()、 f.bind()的区别
call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
apply()方法调用一个函数, 其具有一个指定的this值,以及作为一个数组(或[类似数组的对象]提供的参数。

image.png

apply与 call()非常相似,不同之处在于提供参数的方式。apply
使用参数数组而不是一组参数列表(原文:a named set of parameters)。apply 可以使用数组字面量(array literal),如 fun.apply(this, ['eat', 'bananas']),或数组对象, 如 fun.apply(this, new Array('eat', 'bananas'))。你也可以使用 arguments
对象作为 argsArray参数。 arguments是一个函数的局部变量。 它可以被用作被调用对象的所有未指定的参数。 这样,你在使用apply函数的时候就不需要知道被调用对象的所有参数。 你可以使用arguments来把所有的参数传递给被调用对象。 被调用对象接下来就负责处理这些参数。
function keith(a, b) {
console.log(a + b);
}
keith.call(null, 2, 3); //5
keith.apply(null, [2, 3]); //5
应用1:找出数组里最大的数:
var a = [2, 4, 5, 7, 8, 10];
console.log(Math.max.apply(null, a)); //10
console.log(Math.max.call(null,2, 4, 5, 7, 8, 10)); //10
应用2:将数组的空元素变为undefined
通过apply方法,利用Array构造函数将数组的空元素变成undefined。
console.log(Array.apply(null, [1, , 3])); // [1, undefined, 3]
空元素与undefined的差别在于,数组的forEach方法会跳过空元素,但是不会跳过undefined和null。因此,遍历内部元素的时候,会得到不同的结果。
var
a = [1, , 3];
a.forEach(
function(index) {
console.log(index);
//1,3 ,跳过了空元素。
})
Array.apply(null,a).forEach(
function(index){console.log(index);
////1,undefined,3 ,将空元素设置为undefined
})
应用3:转换类似数组的对象
另外,利用数组对象的slice方法,可以将一个类似数组的对象(比如arguments对象)转为真正的数组。当然,slice方法的一个重要应用,就是将类似数组的对象转为真正的数组。call和apply都可以实现该应用。
console.log(Array.prototype.slice.apply({0:1,length:1}));
//[1]
console.log(Array.prototype.slice.call({0:1,length:1}));
//[1]
console.log(Array.prototype.slice.apply({0:1,length:2}));
//[1,undefined]
console.log(Array.prototype.slice.call({0:1,length:2}));
//[1,undefined]
function
keith(a,b,c){
return arguments;
}
console.log(Array.prototype.slice.call(keith(2,3,4)));
//[2,3,4]

上面代码的call,apply方法的参数都是对象,但是返回结果都是数组,这就起到了将对象转成数组的目的。从上面代码可以看到,这个方法起作用的前提是,被处理的对象必须有length属性,以及相对应的数字键。

bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。
bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体(在 ECMAScript 5 规范中内置的call
属性)。当新函数被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。绑定函数被调用时,bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new
操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。
例:
var a = {
user:"追梦子",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
(console.log(b):
function(){
console.log(this.user);
})

var c = b.bind(a);(意味着c与a有相同的函数体,c调用a作为this)
console.log(c);
(function(){
console.log(this.user);
})

执行c( ) 打印出来“追梦子”

参数赋值
var a = {
user:"追梦子",
fn:function(e,d,f){
console.log(this.user); //追梦子
console.log(e,d,f); //10 1 2
}}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);
输出:追梦子
10 1 2(按照顺序来)

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

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,054评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,717评论 2 17
  • 如何控制alert中的换行?\n alert(“p\np”); 请编写一个JavaScript函数 parseQu...
    heyunqiang99阅读 1,083评论 0 6
  • 总是听到这样一句让我感慨不已:“哎呀,我都不知道该干什么,我很迷茫,也没有方向,只好浑浑噩噩的活着”。 谁的青春不...
    合肥李风丽阅读 327评论 6 0
  • #刁姐人物简笔画故事#-@林潇Ena 欣赏她:创造,积极,文艺 坐标:深圳 知道林潇时,是朋友发了一个她...
    46811c1a010a阅读 484评论 0 0