es6新增的内容与概念

从头 看到尾,不会的话 干脆就回家放一只羊吧,放多了 我怕你 数不过来


目录

  • es6是什么?

  • let 和 const 关键字

  • 数组方法

  • 箭头函数

  • 新增数据类型 Symbol

  • 新增数据结构 set 和 map


一、es6是什么?

ES6的发布标志着JavaScript语言的一个重要演进,为开发者带来了更多便利和功能,并推动了JavaScript的发展和广泛应用。许多现代开发工具和框架已经支持ES6的语法和功能,使开发者能够更好地开发和维护JavaScript应用程序。

二、let 和 const 关键字

ES6引入了let和const关键字,用于声明块级作用域的变量和常量。相比于var,它们具有更好的作用域规则和语义。

只不过和 var 有一些区别

    letconst 不允许重复声明变量   const 是常量 let 是变量

// 使用 var 的时候重复声明变量是没问题的,只不过就是后面会把前面覆盖掉
        var num = 100
        var num = 200

// 使用 let 重复声明变量的时候就会报错了
        let num = 100
        let num = 200 // 这里就会报错了

// 使用 const 重复声明变量的时候就会报错
        const num = 100
        const num = 200 // 这里就会报错了


三、数组方法

  1. forEach:对数组中的每个元素执行一个回调函数。
  2. filter:根据指定条件筛选数组中的元素,并返回一个新的数组。
  3. reduce:对数组中的元素进行累计计算,并返回一个结果。
  4. some:判断数组中是否存在满足指定条件的元素。
  5. every:判断数组中的所有元素是否都满足指定条件。
  6. find:返回数组中满足指定条件的第一个元素。
  7. findIndex:返回数组中满足指定条件的第一个元素的索引。
  8. includes:判断数组中是否包含指定元素。
  9. flat:将嵌套的数组扁平化。
  10. from:将一个类数组对象或可迭代对象转换为数组。
  11. Array.of:将一组值转换为数。
  12. map()用于创建一个新数组,其元素是原始数组经过指定函数处理后的结果。


四、箭头函数

箭头函数是 ES6 里面一个简写函数的语法方式

注意: 箭头函数只能简写函数表达式,不能简写声明式函数

function fn() {} // 不能简写
const fun = function () {} // 可以简写
const obj = {
  fn: function () {} // 可以简写
}

语法: (函数的行参) => { 函数体内要执行的代码 }

const fn = function (a, b) {
  console.log(a)
  console.log(b)
}
// 可以使用箭头函数写成
const fun = (a, b) => {
  console.log(a)
  console.log(b)
}

const obj = {
  fn: function (a, b) {
    console.log(a)
    console.log(b)
  }
}
// 可以使用箭头函数写成
const obj2 = {
  fn: (a, b) => {
    console.log(a)
    console.log(b)
  }


五、新增数据类型 Symbol

Symbol类型-表示独一无二的值 (基本数据类型)

let s1 = Symbol('a')
let s2 = Symbol('a')
console.log(s1===s2)//false 

//作为对象的属性名去使用防止 新增属性名的时候老的属性被覆盖

let obj = {name:"zhangsan",age:18};
let age = Symbol('age');
obj[age] = 19;//新增属性age,不会覆盖原来的age属性

obj[age]//获取symbol属性age     19
obj['age']//获取字符串属性age    18


六、新增数据结构 set 和 map

set类似数组,可以不会存放重复元素

map类似对象,可以存放键值对,属性名:属性值, map的属性名可以是任何类型的,而普通对象的属性名只能是字符串

let s1 = new Set([a,b,a]); 
console.log(s1)//a,b 会把重复的元素去掉
        // 遍历
        s1.forEach(function(v){
            console.log(v)//遍历set中的元素
        })
        
        
 //数组去重 把arr中的重复元素去掉,得到一个新数组
let arr = [1,2,3,1,2,3] 
let resArr = [...new Set(arr)]
let resArr = Array.from(new Set(arr))
 

 let obj = [
            ['username',"aaa"],
            ['age',19]
        ]
        // 创建
        let m = new Map(obj)
        // 设置键值对
        m.set('sex','男');
        m.set(true,'真')
        // 根据键 获取 值
        m.get('sex')
        m.get(true)

总结

ES6是ECMAScript 6的简称,是JavaScript的最新标准。

ES6引入了许多新的语法和特性,改进了JavaScript的开发体验和性能。以下是对ES6的主要特性和改进的总结:

  1. 块级作用域:ES6引入了新的关键字let和const,可以创建块级作用域的变量和常量,解决了var声明变量的函数作用域问题。

  2. 箭头函数:ES6引入了箭头函数(=>)的语法,简化了函数的定义和使用。箭头函数没有自己的this,继承自外围作用域的this,避免了this指向的困扰。

  3. 默认参数:ES6允许定义函数的参数的默认值,简化了函数的调用,避免了传递undefined的问题。

  4. 解构赋值:ES6新增了解构赋值的语法,可以方便地从数组或对象中提取值赋给变量,简化了代码。

  5. 模板字符串:ES6引入了模板字符串的语法,可以使用反引号(`)来定义字符串,支持插值表达式,简化了字符串的拼接和格式化。

  6. 类和继承:ES6引入了class关键字,可以使用类的方式来定义对象和继承关系,使得面向对象编程更加直观和易用。

  7. 模块化:ES6引入了模块化的语法,可以使用import和export关键字来导入和导出模块,实现了模块的封装和复用。

  8. Promise:ES6引入了Promise对象,用于处理异步操作,解决了回调地狱的问题,使得异步编程更加简洁和可读。

  9. Generator:ES6引入了Generator函数,可以用于实现迭代器和异步编程,使得复杂的异步流程更加可控。

  10. 数组和对象的扩展:ES6新增了许多数组和对象的扩展方法和语法,如扩展运算符、Array.from、Object.assign等,方便地操作和处理数据。

总的来说,ES6带来了许多新的语法和特性,使得JavaScript语言更加现代化和强大,提高了开发效率和代码质量。在实际开发中,我们可以充分利用ES6的特性来编写更简洁、可读性更好的

你可能感兴趣的:(es6,前端,ecmascript)