-
新增模板字符串(为JavaScript提供了简单的字符串插值功能)
模板字符串
-
ES6新增的创建字符串的方式,使用反引号定义
let name = `zhang`; let say = `hello,my name is ${name}` console.log(say);//hello,my name is zhang
-
可换行
let result = { name: 'zhang', age: 12 } let html = ` name: 'zhang', age:12 `; console.log(result); console.log(html);
-
可调用函数
const say = () => { return 'hhhhhhhhhhh'; } let greet = `${say()} aaaaaaaa`; console.log(greet);//hhhhhhhhhhh aaaaaaaa
实例方法
-
startsWith():表示参数字符串是否在原字符串的头部,返回布尔值
-
endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值
let str = `hello world!`; console.log(str.startsWith(`hello`));//true console.log(str.endsWith(`!`));//true
-
repeat():方法表示将原字符串重复n次,返回一个新的字符串
'x'.repeat(3) //xxx
-
-
箭头函数
//语法:() => {} const fn = () => {}
函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号
function sum(num1, num2) { return num1 + num2 } const sum = (num1, num2) => num1 + num2
函数体中只有一句代码,参数只有一个,且代码的执行结果就是返回值,可以省略大括号和小括号
function sum(num1) { return num1 } const sum = num1 => num1
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
const obj = { name: '张三' } function fn() { console.log(this);//obj return () => { console.log(this);//obj } } const res = fn.call(obj) res();
面试题
var age = 10; var obj = { age: 20, say: () => { console.log(this.age);//10 console.log(age);//10 console.log(this.age);//10 } } obj.say();
-
for-of(用来遍历数据—例如数组中的值。)
const arr = [2, 3, 5, 4, 5, 2, 2]; for (let i of arr) { console.log(i) //打印出来的是value 2,3,5,4,2,2 } const obj = { 'a': 1, 'b': 2, 'c': 3 } console.log(Object.keys(obj));//['a','b','c'] //使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组 for (let key of Object.keys(obj)) { console.log(obj[key]); }
-
arguments对象可被不定参数和默认参数完美代替。
当开发人员不好确定用户输入的参数是几个的时候用
//es6之前 //封装自己的数学对象 var myMath = { PI: 3.141592653589793, max: function () { var max = arguments[0]; for (let i = 0; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; } } console.log(myMath.PI);//3.141592653589793 console.log(myMath.max(1, 22, 33, 32));//33 //es6之后 因为箭头函数不可使用arguments对象 //不定参数rest语法返回数组, ...是spread扩展运算符 function sum(...args) { console.log(args);//[10,23,98] } sum(10, 23, 98) --------------------------------------------------------------- const sum = (...args) => console.log(args);//[10,23,98] sum(10, 23, 98)
-
ES6将promise对象纳入规范,提供了原生的Promise对象。
详见另一篇博客
-
增加了let和const命令,用来声明变量。
-
增加了块级作用域
-
let命令实际上就增加了块级作用域。
-
还有就是引入module模块的概念
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。
模块化的好处:
模块化的优势有以下几点:
- 防止命名冲突
- 代码复用
- 高维护性
模块化规范产品:
ES6之前的模块化规范有:
- CommonJS => NodeJS、Browserify
- AMD => requireJS
- CMD => seaJS
ES6模块化语法
模块功能主要由两个命令构成:export 和 import
export :用于规定模块的对外接口
//1.导出简单数据类型 //方式一 let age = 12; let aa = 13; export { age, aa } //方式二 export let bb = 13; //2.导出函数/类 //方式一 export function f(cc) { return cc } export class dd { run() { console.log('banpan'); } } //方式二 function f2(ee) { return ee } class ff { run() { console.log('ban'); } } export { f2, ff } //3.default let ga = "zhangyixing" export default ga
import :用于输入其他模块提供的功能
//1.导入方式一 import { age, bb, f, dd, f2, ff } from "./export.js"; console.log(age); console.log(bb); console.log(f('cc')); const d = new dd(); d.run() console.log(f2('ee')); const d2 = new ff(); d2.run() //2.导入方式二 用default 导出的,导入时可以随便起名且不用大括号 import mmm from "./export.js" console.log(mmm); //3.导入方式三:导入所有 并起别名为info import * as info from "./export.js" console.log(info); console.log(info.age);
ES6新增
最新推荐文章于 2023-04-14 17:36:24 发布