js学习笔记03-ES6语法

Posted 2020-11-05

ES Harmony==ES6==ES2015

关键字let和const

let,var和const的区别
提升
提升是浏览器解析 javascript 的结果。本质上，在执行任何 JavaScript 代码之前，所有变量都会被“提升”，也就是提升到函数作用域的顶部。
let 和 const 有趣特性
1) let可以重新赋值，但是不能在同一作用域内重新声明。
2) const 必须赋初始值，不能在同一作用域内重新声明，也无法重新赋值。
3) 建议始终使用 const 声明变量,如果需要更新变量或更改变量，则回去将其从 const 切换成 let，放弃使用var

模板字面量

模板字面量用倒引号 ( `` )（而不是单引号 ( ‘‘ ) 或双引号( "" )）表示，可以包含用 ${expression} 表示的占位符。

const myName = ‘fish‘;
let greeting = ‘Hello, my name is ‘ + myName;
greeting = `Hello, my name is ${myName}`;   //倒引号 + ${}
console.log(greeting);

解构

指定要从赋值左侧上的数组或对象中提取的元素
数组

const point = [10, 25, -34];
//const x = point[0];
//const z = point[2];
const[x,,z] = point;    //解构
console.log(x,  z);    //10 -34

对象

const gemstone = {
  type: ‘quartz‘,
  color: ‘rose‘,
  karat: 21.29
};
const {type,  karat} = gemstone; //解构,对象的属性和变量名一致,否则undefined
console.log(type, karat); //对象中的方法也可以解构,但是注意方法体中的this

对象字面量简写法

let radius = 10;
let color = "orange";
let getArea = function() {
    return Math.PI * this.radius * this.radius;
  };
let circle = {radius,color,getArea};   //变量名要规范一致
let circleCopy = {
  radius:radius;
    color:color;
}

循环迭代使用for in

//复数对象名称来表示多个值的集合。就可以使用名称的单数表示集合中的单个值
const digits = [0,1,2,3,4,5];
for (let digit of digits) { //遍历
  console.log(digit); 
}

展开运算符

展开运算符(用三个连续的点 ( ... ) 表示)使你能够将字面量对象展开为多个元素。

const primes = new Set([2, 3, 5, 7, 11]);
console.log(...primes); // 2 3 5 7 11 

用途是结合数组 替换数组的.concat()方法

const fruits = ["apples", "bananas", "pears"];
const vegetables = ["corn", "potatoes", "carrots"];
//const produce = fruits.concat(vegetables);   //替换.cancat()
const produce = [...fruits,...vegetables];
console.log(produce);

剩余参数

剩余参数也用三个连续的点 ( ... ) 表示，使你能够将不定数量的元素表示为数组
1)将多个变量的值赋个数组

const order = [20, 18, "cheese", "eggs", "milk", "bread"];
const [total, subtotal,  ...items] = order;
console.log(total, subtotal,  items);
//20 18 ?[ "cheese", "eggs", "milk", "bread"]

2)处理可变参数函数

function sum() {
  let total = 0;  
  for(const argument of arguments) {//可变参数
    total += argument;
  }
  return total;
}
//上面的函数修改,感觉更好读懂
function sum(...nums) {
  let total = 0;  
  for(const num of nums) {
    total += num;
  }
  return total;
}