JS的ES5和ES6新增的方法(重点)

ES5 EcmaScript5 严格模式和高阶函数

严格模式

1.全局严格 函数外的是全局

2.局部严格 函数内部的是局部

使用严格模式 "use strict" 必须放在代码的第一行位置,否则失效

在严格模式中window 是顶级对象,宿主对象

为什么使用严格模式

总结:严谨 安全 速度

1.消除JavaScript语法的一些不合理,不严谨支出,减少一些怪异的行为

2.代码运行的一些不安全之处,保证代码运行的安全

3.提高编译器效率,增加运行速度

注意细节

1.声明函数必须使用关键字 var let constant

2.禁止函数内this指向window,默认指向undefined,普通函数默认this指向window

3.禁止使用8进制,不能使用0开头,0x是十六进制

4.不允许在非函数的代码块内声明函数

if(true) function fn(){} if没有大括号就报错

5.arguments 与参数不同步 (arguments不变)

arguments 1).只能在函数内部出现和使用

2).是一个伪数组 3).动态的接收实参

6.eval函数作用域

作用域:

a.全局作用域 b.局部作用域 c.严格模式下的eval局部作用域 d.ES6的块级作用域(let,const)

eval()函数 会将传入的字符串当做js代码来执行 使用eval() 解析数组与对象

7.delete 变量 报错

ES5方法

ES5----bind apply call

绑定一个新对象， 让函数中的this指向该对象， 一般在定时器中使用较多。

bind:改变this指向,但是不会立即执行

bind:第2个参数,给函数传递参数,且它优先于函数的参数

setTimeout和setInterval函数的this默认始终是window

call() 改变this执行,并且会立即执行

call() 从第2个参数开始,都是被调用函数的参数,可以有多个参数

apply() 改变this执行,并且会立即执行

apply() 只有两个参数,第二个参数是数组

据说: call效率高于apply,预先使用call

function fn(o){
                    var str=Object.prototype.toString.call(o)
                    return str.slice(1,str.length-1).split(/ /)[1]
                }
                var arr=[]
                console.log(fn(arr));

与this指向相关的知识点

1. bind,call,apply 改变this的指向
2. new 操作符,也能改变this的指向
3. 函数内的this,默认指向window
4. 对象里的方法的this,默认指向当前的对象
5. 事件里的this,指向当前的绑定者
6. 箭头函数里的this指向上下文对象(环境)
7. 严格模式下函数的this是undefined
8. 类的方法的this,指向当前类的实例
9. 类的静态方法的this,指向当前的类

高阶函数

forEach map reduce some every filter indexOf ...

forEach、map以及reduce的相同点：

都是用于处理数组 都不兼容IE8及以下

forEach、map以及reduce的不同点：

forEach 方法是将数组中的每一个值取出做一些程序员想让他们做的事情

map 方法是将数组中的每一个值放入一个方法中做一些程序员想让他们做的事情后可以返回一个新的数组 reduce 方法 将数组中的每一个值与前面的值处理后得到的最终值

ES6

ES6新增关键字

let 具有块级作用域

const 声明的是常量，一旦声明，值将是不可变的, const 也具有块级作用域 , const 不可重复声明

let 与const的区别?

相同点:

let 和const 都可以避免变量提升 都有块级作用域

不同点:

let 声明的值,可以被修改

const 声明的值是 值类型,不能被修改 / 引用类型,可以修改值,不能修改类型

块级作用域

ES6以前，只有全局作用域和函数局部作用域，ES6之后加入块级作用域，一个大括号{}我们称之为一个代码块，一个大括号{}的内部就是块级作用域

利用块级作用域可以有效解决以下问题

1.防止全局变量泄露

2.防止变量提升带来的覆盖问题,友好遵循了先定义,后使用的规则

ES6 - String新增方法

ES3的字符串方法有哪些?

charAt() charCodeAt() String.fromCharCode() search() match() indexOf() lastIndexOf() slice() substring() substr() replace()

toUpperCase() toLowerCase() concat()和+ split() trim() toString()

ES6方法

padStart()从前填充

padEnd()从后填充

repeat(n)重复n次字符 返回一个新字符串

includes() indexOf,lastIndexOf 返回布尔值，表示是否找到了参数字符串

startsWith() 返回布尔值，表示参数字符串是否在源字符串的头部

endsWith() 返回布尔值，表示参数字符串是否在源字符串的尾部

字符串模板 `${xx}`

ES6-新增数组方法

ES3+ES5数组的方法

push() pop() shift() unshift() sort() reverse() slice() splice() concat() join() Array.isArray() indexOf() forEach() map() some() every() reduce() filter()

ES6新增

Array.from() 把伪数组转换成真的数组

Array.from()方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map） 还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理

Array.of() 将一组值转换为数组

find 找数组对象 findIndex()找下标

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined

for-of 遍历集合

这是目前遍历数组最简洁和直接的语法；它避免了for-in的所有缺陷；

与forEach()不一样，它支持break，continue和return

entries() keys() values()

可以用for-of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

ES6-函数增强

箭头函数是函数的一种语法糖(拉姆达 lambda)

1.箭头函数的this指向上下文对象(环境)

2.箭头函数不能被实例化,它没有构造器

3.箭头函数绑定给事件,this始终指向window

4.箭头函数的this不能被call,bind,apply改变

tips:

如果只有1个形参,可以不用写小括号

返回的内容,只有一句话,就省略return 与 {} 括号

如果返回的是一个对象,{} 被理解为函数的{} ,而不是对象的{}

扩展运算符

(spread)是三个点（...）,将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用

函数默认参数

function fn(n=100){
                    return n
                }
                console.log(fn());//100
                console.log(fn(200));//200
                console.log(fn(300));//300

ES6-对象的增强
Object.is() 比较 属于全等于 ===
Object.assign() 合并,浅拷贝

//方式的简写
                var obj={
                    name:"zhang",
                    show(){
                        console.log(this);
                    }
                }
                obj.show()

                //属性的简写
                var name="lisi"
                var obj1={name:name}
                var obj2={name}
                console.log(obj1);
                console.log(obj2);

                //[]定义属性和方法
                var a='na'
                var b='me'
                var temp='sayHi'
                var obj3={
                    [a+b]:'wang',
                    ['age']:20,
                    [temp](){

                    }
                }
                console.log(obj3);

ES6-Set

数据结构Set类似于数组，但是成员的值都是唯一的，没有重复的值。

Set的属性和方法:

size : 数量

add(value)：添加某个值，返回Set结构本身

delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

has(value)：返回一个布尔值，表示该值是否为Set的成员

clear()：清除所有成员，没有返回值

ES6-WeakSet

WeakSet和Set一样都不存储重复的元素, 用法基本类似，但有一些不同点, WeakSet的成员只能是对象，而不能是其他类型的值。

ES6-Map

Map 是一个“超对象”，其 key 除了可以是 String 类型之外，还可以为其他类型（如：对象）

方法

size：返回成员总数。

set(key, value)：设置一个键值对。

get(key)：读取一个键。

has(key)：返回一个布尔值，表示某个键是否在Map数据结构中。

delete(key)：删除某个键。

clear()：清除所有成员。

keys()：返回键名的遍历器。

values()：返回键值的遍历器。

entries()：返回所有成员的遍历器。

ES6-解构赋值

数组（完全对称，不完全对称）

var [a,[b,c],d] = [1,[2,3],4];

对象 (属性名相同，属性名不同)

var {name,age} = {name:'zhangsan',age:19}

函数

function func([x,y]){return x - y}；

console.log( func([19,11]) );

解构赋值可以有效解决以下2个问题

1.快速提取JSON字符串 2.交换数组中的2个元素

ES6-Class

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

class Point {  
  constructor(x, y) {      
    this.x = x;        this.y = y;  
  }   
  toString() {   
    return '('+this.x+', '+this.y+')';   
  }}

注意： constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。

Class之间可以通过extends关键字，实现继承

ES6-Symbol
Symbol 是ES6引入的一种新的数据类型，来表示独一无二的值

//创建Symbol值 ，不能添加new
var s1 = Symbol();
var s2 = Symbol();
s1 === s2; // false

//有参数的情况
var s1 = Symbol("foo");
var s2 = Symbol("foo");
s1 === s2; // false

ES6-Generator

Generator Function: 生成器函数, 最大特点就是可以交出函数的执行权（即暂停执行）Generator函数的写法： *号是为了区分于普通函数，

function* gen(x){
      var y = yield x + 2;
      return y;
    }
   var g = gen(1);
   console.log(g.next()) // { value: 3, done: false }
   console.log(g.next()) // { value: undefined, done: true }

整个Generator函数就是一个封装的异步任务，异步操作需要暂停的地方，都用 yield 语句注明，

next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，表示当前阶段的信息（ value 属性和 done 属性）。

value 属性是 yield 语句后面表达式的值，表示当前阶段的值；

done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段

JS中各种循环的区别：
for : JS语言诞生就有的循环， 也是使用最多的循环方式， 很多计算机语言都有的循环方式， 可用于遍历数组，字符串；
while : 很多计算机语言也都有的循环方式， 和for循环在使用上的区别是： for循环一般用于已知遍历次数的情况，while一般用在不知道遍历次数的情况；
do-while: 和while有点类似， 使用较少
for-in : 专门用于遍历对象的循环方式 ， 也可以遍历数组，但不推荐遍历数组
forEach: ES5新增的遍历方式，支持IE9+, 遍历数组的写法比较简洁，快速， 但是不能中断循环，不能使用break和continue；
for-of : ES6新增的遍历方式， 和for-in用法类似， 但比for-in强大很多， for-of可以遍历数组， 字符串， Set， Map等.

补充面试题
attribute和property的区别?
attribute dom对象的属性 ,标签上 href,src,type,class,id...
property js对象的属性

如何检测数据类型?
1.typeof,
2.instanceof,
3.Object.prototype.toString.call()

使用eval() 解析数组与对象
1. JSON.parse() 2. eval()

若有收获，就点个赞吧