ES5/6/7

ES几个重要版本

  • ES5: 09年
  • ES6: 15年发布, 也称为ECMA2015
  • ES7: 16年发布, 也称为ECMA2016

ES5的几个概念

  • 严格模式

ES5有两种运行模式, 一种为正常模式(混杂模式), 另一种运行模式: 严格模式(strict mode), 这种模式使得JavaScript在更严格的语法条件下运行
1.目的: 消除js语法的一些不合理,不严谨之处,减少一些怪异行为,消除代码运行的一些不安全之处, 为代码的安全运行保驾护航, 为未来的新版本做好铺垫
2.使用: 在全局或函数的第一行定义"use strict"
3.作用: 必须使用var声明变量,
  禁止自定义函数的this只想window,
  创建eval作用域,
  对象不能有重名的属性

  • json方法
    1. JSON.stringify(obj/arr) js对象(数组)转换为json对象(数组)
    2. JSON.parse(json) json对象(数组)转换为js对象(数组)
var obj = {
    name: 'yuyin',
    age: 18
}
obj = JSON.stringify(obj)
console.log(typeof obj) //string
obj = JSON.parse(obj)
console.log(typeof obj) //object
  • Object扩展的方法, 常用的2个
    1. Object.create(prototype, {descriptors})
    作用: 一指定的对象为原型, 创建新的对象, 可以为新的对象添加新的属性, 并对属性进行描述
- value: 指定的值
- writable: 标识当前属性值是否是可修改的, 默认为false
- configurable: 标识当前属性是否可以被删除, 默认为false
- enumerable: 标识当前属性是否能用for in 枚举, 默认为false

var obj = {
   name: 'yuyin',
   age: 18
}
var newObj = Object.create(obj, {
   sex:{
       value: '男',
       writable: true,
       configurable: true,
       enumerable: true
   }
})
newObj.sex = '女'  //如果要修改属性, 必须配置writable: true
delete newObj.sex //如果要删除属性, 必须配置configurable: true
console.log(newObj) //newObj的原型上有obj的属性方法可以直接调用
for(var i in newObj){
   console.log(i) //for in 遍历原型上的属性方法, 配置enumerable: true 可以遍历添加的属性方法
}
   2. Object.defineProperties(object, descriptors)
 作用: 为指定对象定义扩展多个属性, 使用get拿到的值只能通过set修改
  - get: 用来获取当前属性值的回调函数
  - set: 修改当前属性值触发的回调函数, 实参就是修改的值

var obj = {
    fristName: 'yu',
    lastName: 'yin'
}
Object.defineProperties(obj, {
    fullName: {
        get: function () { //获取扩展属性的值自动调用
            console.log('get调用了')
            return this.fristName + ' ' + this.lastName
        },
        set: function (data) { //监听扩展属性值, 如果值改变会自动调用, 参数为修改的值
            console.log('set调用了')
            console.log(data)
            var names = data.split(' ')
            this.fristName = names[0]
            this.lastName = names[1]
        }
    }
})
// console.log(obj.fullName)
obj.fullName = 'ha ha'
console.log(obj.fullName)
  • 数组方法

    Array.prototype.indexOf(value) 值在数组中第一个下标的位置
    Array.prototype.lastIndexOf(value) 值在数组中最后一个下标的位置
    Array.prototype.forEach((item,index)=>{}) 遍历数组
    Array.prototype.map((item,index)=>{}) 遍历数组,返回新数组, 返回加工后的值
    Array.prototype.filter((item,index)=>{}) 遍历过滤数组, 返回新数组, 返回条件为true的值

    注意: map/filter方法都是返回新数组, 在考虑使用哪个方法时可以先考虑返回值

let arr = [1, 'a', 3, 6, 'c']
let newArr = arr.map((ele, index) => ele + 10)
let newArr1 = arr.filter((ele,index) => index > 3)
console.log(newArr,newArr1)
  • 函数绑定this指向
    call/apply 绑定this后, 函数立即执行, 不传参时使用方式一样, 传参apply必须是数组
var obj = {
    name: 'yuyin',
    age: 18
}
function foo(a, b) {
    console.log(this, a, b)
}
foo.call(obj, 18, 20) 
foo.apply(obj, [18, 20])

bind 绑定完this不会立即调用当前函数, 将函数返回, 传参与call一样, 通常在回调函数中使用

foo.bind(obj, 18, 20)()

ES6常用知识

变量声明

  • var

    变量声明提升, 可重复定义, 全局变量挂载到window上

  • let

    变量声明不会提升, 不可以重复定义, 不会挂载到window上, 加强了对作用域的控制配合{}使用产生块级作用域, 变量只能在{}中使用, 在for循环中使用可以解决闭包问题

console.log(a) //报错
 let a = 10;
 let a = 20; //报错
 a = 20;
console.log(window.a) //报错
if(true){
  let a = 10;
  console.log(a);  //10
}
console.log(a)  //报错
//解决闭包
var arr = [];
for(let i = 0; i < 10; i++){
  arr[i] = function (){
    console.log(i);
  }
}
arr[0]();  //0
arr[2](); //2
  • const
    跟let用法一样, 但它是声明常量的, 声明必须赋值,否则会报错, 并且赋值后不能再改变
    可以声明引用值数据类型, 比如对象/数组, 然后可以对对象或数组增删改
const a = 10;
const b; //报错
a = 20;  //报错
//声明引用值, 可以对值修改
const obj = {
     name: 'yuyin'
};
obj.name = 'aaa';
obj.age = 18
console.log(obj) //{name: "aaa", age: 18}

解构赋值

从对象或数组中提取数据, 并赋值给变量

let obj = {
    name: 'yuyin',
    age: 18,
    abc: 'abc'
}
 // var name = obj.name
let {name, age} = obj   //只写需要的属性

let arr = [1, 'a', 2, 'b', 3]
let [a, b, c, d, e] = arr
console.log(a, b, c, d, e) //1 "a" 2 "b" 3
let [aa,,,,bb] = arr
console.log(aa,bb) //1 3

// 函数参数使用
function foo(obj){
    console.log(obj.name,obj.age)
}
function foo1({name,age}){
    console.log(name,age)
}
foo(obj)
foo1(obj)

模板字符串(简化字符串的拼接)

  • 定义字符串必须用``包含
  • 变化的部分使用${xxx}
let obj = {
    name: 'yuyin',
    age: 18
}
let { name, age } = obj
// let str = '我的名字叫' + name + ',今年' + age + '岁'
let str = `我的名字叫${name},今年${age}岁`
console.log(str)

对象简写方式

  • 对象属性名于属性值的变量一样时可以只写属性名
  • 方法可以直接写方法名,省略function
let name = 'yuyin'
let age = 19
let obj = {
    name,
    age,
    // 方法简写
    getName(){
        console.log(this.name)
    }
}
console.log(obj)

箭头函数

多用来定义回调函数

  • 箭头函数的几种形式
// 没有形参
let fun = () => console.log('我是箭头函数')
fun()
// 只有一个形参, 可以省略()
let fun1 = a => console.log(a)
fun1(1)
// 两个及更多的参数
let fun2 = (x, y) => console.log(x, y)
fun2(1, 2)
// 函数体只有一条语句或者是表达式的时候{}可以省略,会自动返回语句执行的结果或者是表达式的结果
let fun3 = (x, y) => x + y
console.log(fun3(2, 3))
//加{}, 必须return结果
let fun4 = (x, y) => { return x + y }
console.log(fun4(2, 3))
// 函数体是多条语句,必须使用{}
let fun5 = (x, y) => {
    x += 1;
    y--;
    console.log(x - y)
    return x + y
}
fun5(10, 8)
  • 箭头函数特点
    没有自己的this, 箭头函数的this不是调用的时候决定的, 是在定义的时候处在的对象就是它的this
    其实就是看外层是否有函数, 如果有外层函数的this就是内部箭头函数的this, 如果没有this指向window
btn1.onclick = function () {
    console.log(this)//  btn1
}

btn2.onclick = () => {
    console.log(this)// window
}

let obj = {
    name: '箭头函数',
    getName() {
        btn3.onclick = () => {
            console.log(this) // obj
        }
    }
}
obj.getName()

let obj1 = {
    name: '箭头函数',
    getName: () => {
        btn4.onclick = () => {
            console.log(this) // window
        }
    }
}
obj1.getName()

运算符...(简化书写长度, 提升开发效率)

作用: spreed展开, rest收集功能, 可以从读和写两个角度考虑

  • 写:(收集,比如函数的参数), 解决参数不固定的问题,相当于arguments(类数组),但它是数组,可以直接使用数组的方法
function sum(...arg) {
    console.log(arg);  //[1, 2, 3]
    let sumNumber = 0;
    arg.forEach(function(ele){
        sumNumber += ele;
    })
    return sumNumber;
}
console.log(sum(1, 2, 3));

可以指定前面的参数, ...arg必须作为最后的参数

function test(a, b, ...arg) {
    console.log(a, b, arg); //1 2 [3, 4, 5]
}
test(1, 2, 3, 4, 5)
  • 读:(展开数组,es7可以展开对象) ,可以用于数组合并
let arr = [1, 2, 'a', 'b'];
console.log(...arr)  //1 2 "a" "b"
let arr2 = ['abc'];
let newArr = [...arr, ...arr2];
console.log(newArr); //[1, 2, "a", "b", "abc"]
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 二十四、ES5_6_7语法
    ES5 1.ECMAScript理解 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范...
    风中丶凌乱阅读 577评论 0赞 0
  • WEB基础入门十四：ES5、6、7
    一、ECMAScript 1、它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范2、我们...
    瘦不下去了阅读 909评论 0赞 1
  • ES5 6 7常用语法
    ECMAScript 简介 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范 而我们学...
    冬来Angus阅读 1,063评论 0赞 0
  • ES5&6&7
    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manu...
    fastwe阅读 1,254评论 0赞 2
  • 2019-06-28 ES5—6—7
    ES5 的严格模式 use strict 严格语法的声明 声明变量必须使用var 禁止自定义的函数中的this指...
    陈_066c阅读 204评论 0赞 0