js es5和es6

标签：es6 es5 console log js 数组 var obj 函数

ES5新增内容

严格模式
概述：我们普通书写的js代码 并没有特别多的规范，甚至在某些时候可以随意发挥，这种模式被称为怪异模式。相对而言一种更加规范化的模式被称为严格模式。
严格模式的声明    

使用 use strict 进行声明,他的声明位置必须在第一行 （常用于源码书写）
严格模式的特性

严格模式的特性

• 声明一个变量必须需要关键词
• arguments形参与实参不同步
• 不能使用八进制
• 函数内this不指向window
• 函数声明必须在对应的位置进行声明

数组新增的高阶函数

forEach  遍历数组  没有返回值

map  遍历数组  有返回值

filter 过滤 

reduce 计算

some  every 判断是否存在

字符串新增

字符串模板

var username='李丹'
var str=`hello${username}`
console.log(str)//hello李丹

改变this指向新增方法

相关方法 

bind 手动调用

apply 自动调用 传递一个数组

call 自动调用 一个个的数据传递

function fn(arg,arg1){
      console.log(this);
      console.log(arh,arg1)
}    
fn() //打印window
var  obj={name:'jack'}
//调用bind方法来更改this指向
//将对应的函数绑定给obj这个对象 bind不会执行函数
//函数调用的bind方法返回的是一个函数 这个函数不会自动调用 需要你手动调用
var v = fn.bind(obj)
//执行函数
v()
//bind方法运用 需要手动调用需要()来调用 传参传入到对应的()里面
fn.bind(obj)('你好','世界')
//apply 自动调用 第一个参数是绑定的对象 第二个参数是传递的参数（以数组进行传递）
fn.apply(obj,['hello','world'])
//call 自动调用 第一个参数是绑定的对象 第二个参数是传递的参数 （以一个个的元素进行传递）
fn.call(obj,'吃饭了吗','睡觉了吗')

apply方法和call方法的区别

apply方法传递的是数组

call方法传递的是一个个的数据

共同点

都是自动调用的

ES6新增内容

字符串新增方法

startwith  是否开头

endwith 是否结尾

includes 是否包含

repeat 平铺

var str = 'abc'
//是否开头 返回boolean类型
//是否以a开头
console.log(str.startsWith('a'));//true
// 是否结尾 返回boolean类型
//是否以a结尾
console.log(str.endsWith('a'));//false
//是否包含 返回boolean类型
//是否包含ac
console.log(str.includes('ac'));//false
//平铺 返回的是一个新的字符串
var newStr = str.repeat(2) //将对于的abc平铺俩遍
console.log(newStr);//abcabc

数组新增方法

find 根据条件查找对应的值

findindex  根据条件查找对应的下标

var arr = [1,2,3]
//普通方法(高阶函数) find findIndex
//根据条件查找 返回找到的第一个内容 没有找到返回undefined
//第一个是值 第二个是下标 第三个是数组
var value = arr.find(function(v,i,arr){
return v>1
})
console.log(value);//2
//根据条件返回找到第一次出现的下标 没有找到返回-1
var index = arr.findIndex(function(v,i,arr){
return v>1
})
console.log(index);//1

静态方法

Array.from 将对应的伪数组转为数组

Arrray.of 将对应的传入的元素组成一个新的数组返回

//新增的俩个静态方法
//将伪数组转为数组
var btns = document.querySelectorAll('button') //NodeList 伪数组
// btns.map(function(v){
// console.log(v);
// }) 出错 伪数组没有map方法
//转成数组以后再调用
Array.from(btns).map(function(v){
console.log(v);
})
//将传进去的内容组成一个新的数组出来 返回对应的数组
var newArray = Array.of('a','b','c')
console.log(newArray);

变量修饰关键词新增

es3存在 var 声明伪全局变量

let  块级作用域变量 (不允许重复声明 只能在当前的代码块内起作用)

const 声明常量 (声明必须赋值 不允许修改 块级作用域)

基础数据类型新增

symbol 独一无二的  常用于数组的键值对的键 

BigInt 大的整型

// 新增的类型
//独一无二的值(栈上面)
var sym = Symbol()
var sym1 = Symbol()
console.log(sym);
console.log(sym == sym1);//false
var sym2 = Symbol('你好') //传入的参数是说明
var sym3 = Symbol('你好')
console.log(sym2 == sym3);//false
//一般用于对象的key key不能重复的
var obj = { sym:10}
console.log(obj.sym);
//获取详情
console.log(sym2.description);
//BigInt 大的整型 容纳大的数
//Number中的整型Int容纳范围是有限的 10^16
var bi =
BigInt('111111111111111111111111111111111111111111111111111111111111111')
console.log(bi);

循环

for in(遍历对象)

for of(遍历数组 只要实现了iterator迭代器就可以用for of 遍历)

函数新增

新增默认参数

// 函数新增 默认参数
//默认a为0 b也为0 如果你传递了对应的参数 那么默认值就会被覆盖
function fn(a=0,b=0){
console.log(a+b);
}
fn(1,3)//打印4
fn()//打印0
fn(1)//打印1

新增箭头函数

//新增箭头函数 是一个匿名函数
var fn1 = ()=>{
console.log('我是箭头函数');
}
fn1()

箭头函数的简化写法

• 如果当前的参数只有一个 ()可以省略的
• 如果当前的{}里面的代码只有一句的话 {}也可以省略
• 如果当前的{}里面只有一句代码且你需要返回数据的时候 可以省略return

  //箭头函数的特性
  var obj = {
  say:function(){
  console.log(this);
  console.log(arguments);
  }
  }
  obj.say() //打印obj
  var obj = {
  say:()=>{
  console.log(this);
  console.log(arguments);
  }
  }
  obj.say() //打印window
  //箭头函数里面没有this 所以他会去上面找 根据作用域链找离他最近的
  //箭头函数里面没有arguments

箭头函数的特性

• 没有this 
• 没有arguments

 

 

 

 

标签：es6,es5,console,log,js,数组,var,obj,函数
From： https://www.cnblogs.com/tch001/p/16867179.html