浏览器对es6和es5写法的不兼容浏览器 es6

转载

epeppanda 2024-07-01 16:49:47

文章标签 浏览器对es6和es5写法的不兼容 es6 ES6 数组字符串 文章分类 架构后端开发

文章目录

一、ES6 块级作用域 let、const？

二、ES6解构

1.数组解构

三、ES6扩展运算符

四、ES6模板字符串

五、ES6箭头函数

简介

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的不笨特性和功能。

一、ES6 块级作用域 let、const？

{
  var a = "aaa";
  let b = "bbb";
 
   console.log(a); // aaa
   console.log(b); // bbb
}
console.log(a); // aaa
console.log(b); // b is not defined

结论：对象是一个作用域，var声明的变量是全局的，而 let 声明的变量只存在于作用域里面，同时var声明的会挂在到window上面，而 let 和 const 则不会挂在window上

{
  const c = "ccc";
  console.log(c); // ccc
}
console.log(c); // c is not defined
______________________________________________________________________

const d = "ddd";
      d = 'eee'
console.log(d); // Uncaught TypeError: Assignment to constant variable

const e = ["a", "b"];
      e.push("c");
console.log(d); //['a', 'b', 'c']

结论：const声明的是常量，也是只作用在块级作用域里面，定义之后就不可直接更改，只能通过js的方法去修改，否则会报错。

二、ES6解构

1.数组解构

数组解构就是能快速提取数组中的指定成员（数组的某一项值或所有的值）
解构赋值都是一一对应的，其实获取的就是数组的下标。

const arr = [200,300,400]
const [a,b,c] = arr
console.log(a,b,c) // 200,300,400

也可以取数组中的某一项。

const arr = [200,300,400]
const [, , c] = arr
console.log(c) // 400

如果解构的长度大于数组本身长度，那就会显示undefined

const arr = [200,300,400]
const [a,b,c,d] = arr
console.log('d:', d) // d: undefined

2.对象解构

对象解构跟数组解构差不多，数组取的是下标，对象取得的是变量名。

let object = {
  name: "小熊饼干",
  age: "18",
};
let { name, age } = object;
console.log("name: ", name); // name: 小熊饼干
console.log("age: ", age);   // age: 18

给解构的对象添加新的变量名和变量。

let object = {
  name: "小熊饼干",
  age: "18",
};
let { name, age ，sex = '男'} = object;
console.log("name: ", name); // name: 小熊饼干
console.log("age: ", age);   // age: 18
console.log("sex: ", sex);   // sex: 男

同理，对象里面嵌套对象也是如此,

let object = {
  name: "小熊饼干",
  age: "18",
  link: {
    motion: "羽毛球",
    game: "王者",
  },
};
let { link:{ motion , game } } = object;
console.log("motion: ", motion); // motion: 羽毛球
console.log("game: ", game);     // game: 王者

三、ES6扩展运算符

使用 ... 可以展开元素，获取全部元素。

const arr = [200,300,400]

console.log('all:' , all) // all: [200，300 , 400] 

console.log('all:' , ...all) // all: 200 300 400 

console.log('all:' , {...all}) // all: {0: 200, 1: 300, 2: 400}

四、ES6模板字符串

在使用模板字符串前，我们拼接字符串变量使用 + ，使用 ES6 提供的模板字符串，首先使用 `` 把字符串包起来，当要使用变量时，使用 ${变量}。

let a = "五";
let b = "开心";

let c = "今天星期" + a + ",下班好" + b;
console.log("c: ", c); // c:  今天星期五,下班好开心

let d = `今天星期${a},下班好${b}`;
console.log('d: ', d); // d:  今天星期五,下班好开心

五、ES6箭头函数

es6 新增了使用箭头 => 语法定义函数表达式的能力，箭头函数和普通函数很大程度上是相同的。

// 普通函数
let sum = function(a, b) {
	return a + b;
}
// 箭头函数
let sum1 = (a, b) => {
	return a + b;
}
sum(10 , 20)   // 30
sum1(10 , 20)  // 30

如果只有一个参数，可以不用括号。只有没有参数，或者多个参数的情况下，才需要使用括号。

// 有效
let sum = (x) => {
	return x;
};
// 有效
let sum1 = x => {
	return x;
};
// 没有参数需要括号
let sum2 = () => {
	return 1;
};
// 有多个参数需要括号
let sum3 = (a, b) => {
	return a + b;
};

箭头函数也可以不用大花括号，但这样会改变函数的行为。使用大花括号就说明包含“函数体”，可以在一个函数中包含多条语句，跟常规的函数一样。
省略大括号箭头后面就只能有一行代码；
省略大括号会隐式返回这行代码的值；
省略大括号不能写return。

// 有效
let sum = (a, b) => { return a + b };
// 有效
let sum1 = (a, b) => a + b; // 相当于 return a + b;
// 无效的写法
let sum2 = (a, b) => return a + b;
//比如
let arr = [1, 2, 3, 4, 5];
arr.map(val => val * 2); // [2, 4, 6, 8, 10]

如果函数是使用箭头语法定义的，那么传给函数的参数将不能使用 arguments 关键字访问，虽然箭头函数中没有 arguments 对象，但可以在包装函数中把它提供给箭头函数：

// 普通函数
let sum = function() {
	return arguments.length;
}
sum(1, 2, 3); // 3

// 箭头函数
let sum1 = () => {
	return arguments.length;
}
sum1(1, 2); // Uncaught ReferenceError: arguments is not defined

//包装函数有arguments
function foo() {
	let bar = () => {
		console.log(arguments.length);
	}
	bar(); 
}
foo(5, 5, 5);  // 3

箭头函数中this 指向

let num = 11;
const obj1 = {
	num: 22,
	fn1: function() {
		let num = 33;
		const obj2 = {
			num: 44,
			fn2: () => {
				console.log(this.num);
			}
		}
		obj2.fn2();
	}
}
obj1.fn1(); // 22

原因箭头函数没有this，箭头函数的this是继承父执行上下文里面的this ，这里箭头函数的执行上下文是函数fn1()，所以它就继承了fn1()的this，obj1调用的fn1，所以fn1的this指向obj1，所以obj1.num 为 22。
注意：简单对象（非函数）是没有执行上下文的！

如果fn1也是个箭头函数呢？

let num = 11;
const obj1 = {
	num: 22,
	fn1: () => {
		let num = 33;
		const obj2 = {
			num: 44,
			fn2: () => {
				console.log(this.num);
			}
		}
		obj2.fn2();
	}
}
obj1.fn1();