JavaScript进阶(1)
严格模式
概念
理解:ES5中添加的运行模式:“严格模式”(strict mode),该模式下javascript在更严格的语法条件下运行
目的:
- 消除js中语法的不合理,不严谨的地方
- 消除代码不安全之处
- 为未来新的js版本做铺垫
使用
- 针对整个脚本文件:将use strict 放在整个脚本文件的第一行,则整个脚本文件将以严格模式运行。
- 针对单个函数:将use strict放在函数体的第一行,则整个函数以严格模式运行。
语法和行为改变
- 必须使用var声明变量
- 禁止自定义的函数中的this指向window
- 对象不能有重名的属性
严格模式和普通模式的区别
仅列举一部分
全局变量显式声明
在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。在严格模式中禁止使用这种用法,全局变量必须显式声明。
禁止this关键字指向全局对象:
1 | var foo =function(){ |
上方代码中,普通模式打印的是window,严格模式下打印的是undefined。
构造函数必须通过new实例化对象
构造函数必须通过new实例化对象,否则报错。因为this为undefined,此时无法设置属性。
1 | var Cat = function(name){ |
上方代码,在严格模式下会报错。
属性相关
普通模式下,如果对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。严格模式下,这属于语法错误。
普通模式下,如果有函数有多个重名的参数,可以用arguments[i]读取,严格模式下,多个重名参数属于语法错误。
1 | var obi ={ |
上述代码,在严格模式下属于语法错误,因为有重名的属性。
函数必须声明在顶层
严格模式只允许在全局作用域或函数作用域的最顶层声明函数,也就是说,不允许在非函数的代码块内声明函数。
新增关键字
严格模式新增保留字:
implements,interface,let,package,private,protected,public,static,yield。
JSON对象
json对象转化
js对象(数组)–> json对象(数组)
1
JSON.stringfy(obj/arr)
json对象(数组)–> js对象(数组)
1
JSON.parse(json)
上面两种方法是ES5中提供的。
我们常说的JSON字符串只有两种:json对象,json数组。
typeof json字符串
的返回值是String。
Object的扩展
ES5给Object扩展了一些静态方法,常用的有2个。
- 方法一
1 | Object.create(prototype,[descriptors]) |
作用:以指定对象为原型,创建新的对象,同时,第二个参数可以为新的对象添加新的属性,并对此属性进行描述。
example1:(没有第二个参数)
1 | var obj1 ={username:'smyhvae',age:26}; |
结果:obj1成为了obj2的原型
example2:(有第二个参数时)
第二个参数可以给新的对象添加新的属性,我们修改上面的代码,尝试给obj2添加新属性sex
1 | var obj1={username:'smyhvae',age:26}; |
上方代码中,我们通过第5行的sex给obj2设置了一个新的属性sex
但是要通过value
来设置属性(第6行)。
设置完属性值后,这个属性值默认是不可修改的,要通过writable
来设置。总而言之,这几个关键字解释入下:
value
:设置属性值writable
:标识当前属性值是否可修改 ,如果不写的话,默认为false,不可修改。configurable
:标识当前属性是否可以被删除,默认为false,不可删除。enumerable
:标识当前属性是否能用for in 枚举。默认为false,不可。
单独设置属性
1 | Object.defineProperty(obj2,'sex',{ |
- 方法二
这个方法有点难理解
1 | Object.defineProperties(object,descriptors) |
作用:为指定对象定义扩展多个属性。
example:
1 | var obj2={ |
- get: 用来获取当前属性值的回调函数
- set:修改当前属性值得触发的回调函数,并且实参即为修改后的值
Object的扩展(二)
obj对象本身就自带了两个方法。格式如下:
1 | get 属性名(){}用来得到当前属性值的回调函数 |
example:
1 | var obj={ |
数组的扩展
下面的方法都是给数组的实例用的
方法一:
1 | Array.prototype.indexOf(value) |
作用:获取value在数组中的第一个下标。
方法二:
1 | Array.prototype.lastIndexOf(value) |
作用:获取value在数组中的最后一个下标。
方法三:遍历数组
1 | Array.prototype.forEach(function(item,index){}) |
方法四:
1 | Array.prototype.map(function(item,index){}) |
作用:遍历数组返回一个新的数组,返回的是加工之后的新数组。
方法五:
1 | Array.prototype.filter(function(item,index){}) |
作用:遍历过滤出一个新的子数组,返回条件为true的值。
函数function的扩展:bind()
ES5中新增了bind()函数来改变this的指向。
1 | Function.prototype.bind(obj) |
作用:将函数内的this绑定为obj,并将函数返回。
面试题:call()、apply()和bind()的区别:
- 都能改变this的指向
- call()\apply()是立即调用函数
- bind():绑定完this后,不会立即调用当前函数,而是将函数返回因此后面还需要再加()才能调用。
PS:bind()传参方式和call()一样。
分析:
为什么ES5中要加入bind()方法来改变this的指向呢?因为bind()不会立即调用当前函数。
bind()通常使用在回调函数中,因为回调函数并不会立即调用。如果你希望在回调函数中改变this,不妨使用bind()。
ES6的环境配置 (为了兼容ES5)
掌握ES6之后,如果要考虑ES5的兼容性,可以这样做:写ES6语法的JS代码,然后通过Babel将ES6转换为ES5。
但是,在这之前,我们需要配置一下相关的环境。
建立工程目录
- 先建立一个空的工程目录ES6Demo,并在目录下建立两个文件夹src和dist:
- src:书写ES6代码,我们写的js程序都放在这里。
- dist:利用Babel编译生成的ES5代码。我们在HTML页面需要引入dist里的js文件。
- 在src里创建新建文件index.html:
1 | <!DOCTYPE html> |
注意,上方代码中,我们引入的是dist目录下的js文件。
然后我们新建文件src/index .js:
1 | let a='smyhvae'; |
这个文件是一个ES6语法的js文件,稍后,我们尝试把这个ES6语法的js文件转化为ES5的js文件 。
PS:我们在 写代码的时候,能用单引号尽量用单引号,而不是双引号,前者在压缩之后,程序会执行更快。
全局安装Babel-Cli
(1) 初始化项目:
在安装Babel之前,需要先用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具,进入项目目录,输入如下指令:
1 | npm init -y |
上方代码中,-y代表全部默认同意,就不用一次次按回车了(稍后在再根据需要,在文件中手动修改)。命令执行完成后,会在项目的根目录下生成package.json文件:
1 | { |
PS: VS Code 里打开终端的快捷键是:Contol+~。
(2)全局安装Babel-cli:
在终端输入以下命令:
1 | npm install -g babel-cli |
如果安装比较慢的话,MAC可以用cnpm安装,windows下可以使用npm切换到taobao镜像。
(3)本地安装babel-preset-es2015和babel-cli:
1 | npm install --save-dev babel-preset-es2015 babel-cli |
安装完成后,会发现package.json文件,已经多了devDependencies选项:
(4)新建.babelrc:
在根目录下新建文件.babelrc,输入如下内容:
1 | { |
(5)开始转换:
现在,我们应该可以将ES6的文件转化为ES5的文件了,命令如下:
1 | babel src/ index.js -o dist/index.js |
我们可以将上面这个名令进行简化一下。操作如下:
在文件package.json中修改scripts中的内容:
1 | "scripts":{ |
目前为止,环境配置好了。以后,我们执行如下命令,即可将src/index.js这个ES6文件转化为dist/index.js这个ES5文件:
1 | npm run build |
我们执行上面的命令后发现,dist目录下会生成ES5的JS文件:index.js:
1 | ; |
当我们打开网页后,就可以在浏览器的控制台,看到代码输出的结果。
ES6的变量声明
ES6中新增了let和const来定义变量:
- var:ES5和ES6中,定义全局变量(是variable的简写)。
- let:定义**局部变量 **,替代var。
- const:定义常量(定义后,不可更改)。
var:全局变量
看下面的代码:
1 | { |
上方代码是可以输出结果的,输出结果为1。因为var是全局声明的,所以 ,即使实在区块里声明,但仍然在全局起作用。
再看下面这段代码:
1 | var a=1; |
上方代码的输出结果为2;因为var是全局声明的。
总结:
用var定义的全局变量会污染整个js的作用域。
let:定义局部变量
1 | var a=2; |
上方的代码输出结果为2。用let声明的变量,只在局部(块级作用域内)起作用。
let是防止数据污染,我们来看下面这个for循环的例子,很经典。
1、用var声明变量:()
1 | for (var i=0;i<10;i++){ |
上方代码可以正常打印结果,且最后一行的打印结果是10。说明循环体外定义的变量i,是在全局起作用的。
2、用let声明变量:
1 | for(let i=0;i<10;i++){ |
上方代码的最后一行无法打印结果,也就是说会打印报错。因为用let定义的变量i,只在{ }这个块级作用域里生效。
总结:我们要习惯用let声明,减少var声明带来的污染全局空间。
为了进一步说明let不会带来污染,需要说明的是:当我们定义了let a=1时,如果我们在同一个作用域内继续定义let a = 2,是会报错的。
const:定义常量
在程序开发中,有些变量是希望声明后,在业务层就不再发生变化,此时可以用const来定义。
example:
1 | const name='smyhvae'; |
用const声明的变量,只在局部(块级作用域内)起作用。
let和const的作用【important】
let和const的作用如下:
- 禁止重复声明
- 支持块级作用域
- 控制修改
相反,用var声明的变量:可以重复声明、没有块级作用域、不能限制。
for循环举例【经典案例】
代码1、我们先来看看如下代码:(用var定义变量i)
1 |
|
你可能会感到诧异,为何点击任何一个按钮,弹出的内容都是4呢?这是因为,我们用var定义的变量i,实在全局作用域声明的。整个代码中,自始至终,只有一个变量。当我们还没点击按钮之前,变量i已经循环到4了。
也就是说,上面的for循环,相当于如下代码:
1 | var i=0; |
代码2、上面的代码中,如果我们改为用let定义变量i:
1 |
|
我们用let定义变量i,在循环的过程中,每执行一次循环体,就会诞生一个新的i。循环体执行4次,就会有4个i。
变量的解构赋值
ES6允许我们,通过数组或者对象的方式,对一组变量进行赋值,这被称为解构。
解构赋值在实际开发中可以大量减少我们的代码量,并且让程序结构更清晰。
数组的解构赋值
举例:
通常情况下,我们为一组变量赋值时,一般是这样写的:
1 | let a=0; |
现在我们可以通过数组解构的方式进行赋值:
1 | let [a,b,c]=[1,2,3]; |
二者效果是一样的。
解构的默认值
在解构赋值时,是允许使用默认值的。举例如下:
1 | { |
undefined和null的区别:
如果我们在赋值时,采用的是undefined或者null,那会有什么区别呢?
1 | { |
上方代码分析:
- undefined:相当于什么都没有,此时b采用默认值
- null:相当于有值,但值为null
对象的解构赋值
通常情况下,我们从接口拿到json数据后,一般这么赋值:
1 | var a=json.a; |
上面这样写比较麻烦。
现在,我们同样可以针对对象,进行解构赋值。
举例如下:
1 | let {foo,bar}={bar:'我是bar的值',foo:'我是foo的值'}; |
上方代码可以看出,对象的解构和数组的解构,有一个最重要的区别:数组的元素是按次序排列的,变量的取值由他的位置决定;而对象的属性没有次序,是根据键来取值的。
圆括号的使用:
如果foo在解构前就定义了,此时再去解构就会出问题。
例:
1 | let foo='haha'; |
需要解决报错,只要在解构的语句外边,加一个圆括号:
1 | let foo = 'haha'; |
字符串解构
字符串也可以解构,这是因为,此时字符串被转换为了一个类似数组的对象。举例:
1 | const [a,b,c,d] = 'aaaa'; |
for…of 循环
ES6中如果要遍历一个数组,可以这样做:
1 | let arr1 =[1,2,3,4,5]; |
for…of的循环可以避免 我们开拓内存空间,增加代码运行的效率,建议多使用。
注意:上面的数组中,for…of获取的是数组里的值;for…in获取的是index索引值。
Map对象的遍历
for…of 既可以遍历数组,也可以遍历Map对象。
模板字符串
我们以前让字符串进行拼接的时候。可以这样做:(传统写法的字符串拼接)
1 | var name='aaaa'; |
传统写法比较繁琐且容易出错,ES6写法更为实用
注意,上方代码中,倒数第二行使用的符号是反引号(tab键上方)