前端基础——ES6 新特性

1.let 声明变量

var和let声明变量的区别

// var 声明的变量往往会越域
// let 声明的变量有严格局部作用域 {
var a = 1;
let b = 2; }
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined
// var 可以声明多次 // let 只能声明一次 var m = 1
var m = 2
let n = 3
// let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared
// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined let y = 20;

2.const 声明常量(只读变量)

// 1. 声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable

3.解构表达式

3.1.数组结构

let arr = [1,2,3]; //以前我们想获取其中的值，只能通过角标。ES6 可以这样:
const [x,y,z] = arr;// x，y，z 将与 arr 中的每个位置对应来取值 
// 然后打印
console.log(x,y,z);

3.2.对象解构

const person = {
   name: "jack",
   age: 21,
   language: ['java', 'js', 'css']
}
// 解构表达式获取值，将 person 里面每一个属性和左边对应赋值 const { name, age, language } = person;
// 等价于下面
// const name = person.name;
// const age = person.age;
// const language = person.language; // 可以分别打印
console.log(name);
console.log(age); console.log(language);
//扩展:如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名 const { name: nn, age, language } = person;
console.log(nn);
console.log(age);
console.log(language);

4.字符串扩展

4.1.字符串模板

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

//1、多行字符串
let ss = `
        <div>
            <span>hello world<span>
        </div>`
console.log(ss)
//2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放 入 JavaScript 表达式。
let name = "张三";
let age = 18;
let info = `我是${name}，今年${age}了`; 
console.log(info)
// 3、字符串中调用函数 
function fun() {
	return "这是一个函数" 
}
let sss = `O(∩_∩)O 哈哈~，${fun()}`; 
console.log(sss); // O(∩_∩)O 哈哈~，这是一个函数

5.函数优化

5.1.函数参数默认值

//在 ES6 以前，我们无法给一个函数参数设置默认值，只能采用变通写法: 
function add(a, b) {
	// 判断 b 是否为空，为空就给默认值 1 
	b = b || 1;
	return a + b;
}
// 传一个参数 
console.log(add(10));
//现在可以这么写:直接给参数写上默认值，没传就会自动使用默认值 
function add2(a , b = 1) {
	return a + b; 
}
// 传一个参数 
console.log(add2(10));

5.2.不定参数

不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。
具名参数只能放在参数列表的最后，并且有且只有一个不定参数

function fun(...values) { 
	console.log(values.length)
}
fun(1, 2)      //2
fun(1, 2, 3, 4)  //4

5.3.箭头函数

ES6 中定义函数的简写方式

• 一个参数时:

//以前声明一个方法
var print = function (obj) {
   console.log(obj);
}
// 可以简写为:
var print = obj => console.log(obj); // 测试调用
print(100);

• 多个参数:

// 两个参数的情况:
var sum = function (a, b) {
   return a + b; 
}
// 简写为:
//当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var sum2 = (a, b) => a + b; 
//测试调用 
console.log(sum2(10, 10));//20
// 代码不止一行，可以用`{}`括起来 
var sum3 = (a, b) => {
   c = a + b;
   return c; 
};
//测试调用 
console.log(sum3(10, 20));//30

5.4.实战:箭头函数结合解构表达式

//需求，声明一个对象，hello 方法需要对象的个别属性 
//以前的方式:
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
function hello(person) {
  console.log("hello," + person.name)
}
//现在的方式
var hello2 = ({ name }) => { console.log("hello," + name) }; 
//测试
hello2(person);

6.对象优化

6.1.新增的 API

ES6 给 Object 拓展了许多新的方法，如:

• keys(obj):获取对象的所有 key 形成的数组
• values(obj):获取对象的所有 value 形成的数组
• entries(obj):获取对象的所有 key 和 value 形成的二维数组。格式:[[k1,v1],[k2,v2],...]
• assign(dest, …src) :将多个 src 对象的值 拷贝到 dest 中。(第一层为深拷贝，第二层为浅 拷贝)
  2)、声明对象简写

const person = {
	name: "jack",
	age: 21,
	language: ['java', 'js', 'css'] 
}
console.log(Object.keys(person));//["name", "age", "language"] console.log(Object.values(person));//["jack", 21, Array(3)] console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
//Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。 
Object.assign(target, source1, source2); 
console.log(target)//{a: 1, b: 2, c: 3}