ES6
1. let
块级作用域：一个{ }就是一个块级作用域，在 { }中使用 let 关键字和const关键字声明的变量，在 { } 外面访问不到。如for{ }, if{ }, 对象{ }； { }如果想表示一个对象 不可以放在行首，可以给它赋值或者用括号包起来({ })。如果放在行首就会看成是一个块级作用域。
- let 声明的变量没有变量提升
- 不可以重复声明
- 不会给window增加属性，var定义的变量可以通过 window.x 访问到
'use strict';
if("ture"){
let fruit = "apple";
}
console.log(fruit); //Uncaught ReferenceError: fruit is not defined
2. const
声明一个恒量，const是限制给恒量分配值的动作，并不是限制恒量里面的值。
- 没有变量提升
- 不可以重复声明
- 不会给window增加属性
- const定义常量，一旦声明必须赋值，且不可以重新赋值
'use strict';
const fruit = "apple";
console.log(fruit);
const fruit = "banana"; // Uncaught SyntaxError: Identifier 'fruit' has already been declared
console.log(fruit);
const vegetables = [];
vegetables.push("apple");
vegetables.push("banana");
console.log(vegetables); // (2) ["apple", "banana"]
vegetables=[];
console.log(vegetables); // Uncaught TypeError: Assignment to constant variable.
3. 解构赋值
Array Destructuring 解构数组
解构数组，数组的结构赋值，将数组里的元素依次赋给相对于位置的变量。
function breakfast(){
return ['cake','tea','apple'];
}
//老的方法
// var tmp = breakfast(),
// dessert = tmp[0], drink = tmp[1], fruit = tmp[2];
//使用解构的方法
let [dessert, drink, fruit] = breakfast();
console.log(dessert, drink, fruit); //cake tea apple
- 设置默认值，当后面解构出来的值为undefined时，就会执行默认值：
let [a,b = (function(){console.log("设置默认值执行了")();return 10})] = [1,undefined];
console.log(a,b); //1 ƒ (){console.log("设置默认值执行了")();return 10}
- 省略赋值，省略的留位置了就可以赋相应位置的值。
let [, , m2] = [1, 2, 3];
console.log(m2); //3
- 不定参数赋值，将后面的项放在一个数组中赋给 x3 = [3,4,5]
let [x1, x2, ...x3] = [1, 2, 3, 4, 5];
- 使用数组的解构赋值形式，如果等号右边不是一个数组，默认会将其转换为数组。(类似数组的对象必须有一个length属性)。对象也同理。
let [x,y] = "123";
console.log(x,y); //1 2
Object Destructuring 解构对象
解构对象
function breakfast(){
return {dessert:'cake', drink:'tea', fruit:'apple'};
}
//let {对象里面的属性： 自己定义的变量名,...}
let {dessert: dessert, drink: drink, fruit: fruit} = breakfast();
console.log(dessert, drink, fruit); //cake tea apple
4. 函数参数的解构赋值
function getA([a,b,c,...d]){
console.log(a,b,c,d);
}
getA([1,2,3,4,5]);
function getB({name,age}){
console.log(name,age);
}
getB([name:"张三", age:19]);
function getB1({name="小团子", age=5} = {}){
console.log(name,age);
}
function getB2({name, age} = {name:"小花花", age = 8}){
console.log(name,age);
}
getB1(); //小团子 5
getB2(); //小花花 8
getB1({}); //小团子 5
getB2({}); //undefined undefined
5. Template Strings 模板字符串
模板字符串跟普通字符串一样使用，但是他可以添加变量
let dessert = 'cake',
drink = 'tea';
// let breakfast = '今天的早餐是 ' + dessert + ' 与 ' + drink + '!';
// console.log(breakfast);
//使用模板字符串的形式改造一下：
// ${}里面的变量会自动替换成变量的值，大括号中还可以包含一些表达式
// 模板字符串还可以很容易的将一句话分成多行显示
let breakfast = `今天的早餐是 ${dessert}
与 ${drink} !` ;
console.log(breakfast);
6. Tagged Templates 带标签的模板字符串
带标签的模板字符串，可以在模板字符串的前面添加一个标签，这个标签可以去处理模板字符串里面的字符还有插入的值。标签（即函数 ） —> 函数。
let dessert = 'cake',
drink = 'tea';
let breakfast = kitchen`今天的早餐是 \n
${dessert} 与 ${drink} !`;
function kitchen(strings,...values){
// console.log(strings);
// console.log(values);
let result = '';
for(var i=0;i<values.length;i++){
result += strings[i];
result += values[i];
}
result += strings[strings.length -1];
return result;
}
console.log(breakfast);
7. 字符串原型上的扩展的方法
在ES6里面添加了许多字符串的方法
- include 返回布尔值 true/false 判断字符串中是否包含指定字符串
includes(“指定字符”,开始查找的位置（可选）) - startsWith endsWith
startsWith(“指定字符”,开始查找的位置（可选）)
endsWith(“指定字符”,num（从前num个中查看，可选）); - repeat(num) 将字符串重复num次，num向前取整不可以是负数或者Infinity
- padStart padEnd （ES7中的）
按照指定字符串补全字符串的指定长度
padStart/padEnd(length,“指定字符”)
let str1='ab';
console.log(str.padStart(7,""ghk)); //“ghkghab”
let dessert = 'cake',
drink = 'tea';
let breakfast = `今天的早餐是 \n
${dessert} 与 ${drink}!`;
console.log(
// breakfast.startsWith('今天') //true //注意 此处都不能加分号
// breakfast.endsWith('tea!') //true
// breakfast.endsWith('今天') //false
// breakfast.includes('cake') //true
breakfast.includes('apple') //false
);
8. Default Parameter Values 默认参数
给定义的函数接收的参数设置默认的值，执行函数的时候，如果不去指定参数的值，就会使用默认的值。
function breakfast(dessert = 'cake',drink = 'tea'){
return `${dessert} ${drink}`
}
console.log(
breakfast() //cake tea
// breakfast('donut','beer')
);
9. Spread 展开操作符
let fruits = ['apple', 'banana'],
foods = ['cake',...fruits];
console.log(fruits); //(2) ["apple", "banana"] 输出数组
console.log(...fruits); //apple banana 数组中元素罗列
console.log(foods); //(3) ["cake", "apple", "banana"]
10. Rest 剩余操作符
…还可以用在函数的参数里面，表示除了指定参数的其他参数
//函数除了可以指定dessert、drink参数的值以外，其余的参数都会被放入foods的数组里
function breakfast(dessert, drink, ...foods){
console.log(dessert, drink, foods)
}
breakfast('cake', 'juice', 'apple', 'pear'); //cake juice (2) ["apple", "pear"]
11. Destructured Parameters 解构参数
使用解构对象的方法可以为函数设置一个对象的参数
function breakfast(dessert, drink, {location, restaurant} = {
//此处对象里面的东西是可选的，给个默认的值，一个空白的对象。这样在使用这个函数时，不指定这个对象的参数也不会报错。
}){
console.log(dessert, drink, location, restaurant);
}
breakfast('cake', 'juice', {location: '北京', restaurant: '苏小❀'}); //cake juice 北京 苏小❀
12. 函数的名字 - name属性
function breakfast(argument){}
console.log(breakfast.name); //breakfast
let breakfast = function superBreakfast(argument){}
console.log(breakfast.name); //superBreakfast
13. 箭头函数 Arrow Functions
函数名 = 参数 => 返回值
函数名 = (参数1,参数2) => {函数体}
let breakfast = dessert => dessert;
let lunch = (dessert, drink) => dessert + drink;
等于
var breakfast = function breadkfast(dessert){
return dessert;
};
var breakfast = function breadkfast(dessert, drink){
return dessert + drink;
};
14. 对象表达式
let dessert = 'cake', drink = 'juice';
let food = {
dessert: dessert, //dessert属性，属性值为dessert对应的值
drink: drink,
breakfast: function(){}
};
console.log(food);
如果想在对象里面添加跟变量名一样的属性，并且属性的值就是这个变量表示的值。可以直接在对象里面加上该属性，并且不需要再去指定属性对应的值。
let dessert = 'cake', drink = 'juice';
let food = {
dessert, //dessert属性，属性值为dessert对应的值
drink,
breakfast(){}
};
console.log(food);
15. 对象属性名
let food = {};
let drink = 'hot drink';
food.dessert = 'cake';
// food['hot drink'] = 'tea'; //当对象的属性名中包含空格时就不能使用'.'的形式
food[drink] = 'tea';
console.log(food);
16. 对比两个值是否相等 - Object.is(作对比的数A,作对比的数B)
+0 == -0 //true
+0 === -0 //true
NaN == NaN //false
Object.is(NaN, NaN) //true
Object.is(+0, -0) //false
17. 把对象的值复制到另一个对象里 - Object.assign(接受者，复制的源)
let breakfast = {};
Object.assign(breakfast,{drink: 'beer'});
console.log(breakfast);
18. 设置对象的prototype - Object.setPrototypeOf(要操作的对象，要设置成的对象)
let breakfast = {
getDrink(){
return 'tea';
}
};
let dinner = {
getDrink(){
return 'beer';
}
};
let sunday = Object.create(breakfast);
console.log(sunday.getDrink()); //tea
console.log(Object.getPrototypeOf(sunday) === breakfast); //true
Object.setPrototypeOf(sunday, dinner);
console.log(sunday.getDrink()); //beer
console.log(Object.getPrototypeOf(sunday) === dinner); //true
19. 对象属性__proto__ - 得到或设置对象里面的__proto__
let breakfast = {
getDrink(){
return 'tea';
}
};
let dinner = {
getDrink(){
return 'beer';
}
};
let sunday = {
__proto__: breakfast
};
console.log(sunday.getDrink()); //tea
console.log(Object.getPrototypeOf(sunday) === breakfast); //true
sunday.__proto__ = dinner;
console.log(sunday.getDrink()); //beer
console.log(Object.getPrototypeOf(sunday) === dinner); //true
20. super + 方法名 - 得到方法返回的东西
let breakfast = {
getDrink(){
return 'tea';
}
};
let dinner = {
getDrink(){
return 'beer';
}
};
// 想在sunday里面重新定义一下getDrink()方法，覆盖掉breakfast里面的getDrink()方法。
// 并且想在sunday的getDrink方法中得到breakfast的getDrink()返回来的东西
let sunday = {
__proto__: breakfast,
getDrink(){
return super.getDrink() + ' milk';
}
};
console.log(sunday.getDrink()); //tea milk
21. 迭代器 - Iterators (轮流交换)
iterators = {next(){return value:xx, done:true/false}}
// 手动创建迭代器
function chef(foods){
let i = 0;
return {
next(){
let done = (i >= foods.length);;
let value = !done ? foods[i++] : undefined;
return{
value: value,
done: done
}
}
}
}
let wanghao = chef(['tomato','egg']);
console.log(wanghao.next()); //{value: "tomato", done: false}
console.log(wanghao.next()); //{value: "egg", done: false}
console.log(wanghao.next()); //{value: undefined, done: true}
22. 生成器 - generators (生成迭代器)
// 定义一个生成器
function* chef(){
yield 'tomato'; //第一次调用next()返回一个西红柿
yield 'egg'; //第二次调用next()返回一个鸡蛋
}
// 基于上面的生成器创建一个迭代器
let wanghao = chef();
console.log(wanghao.next()); //{value: "tomato", done: false}
console.log(wanghao.next()); //{value: "egg", done: false}
console.log(wanghao.next()); //{value: undefined, done: true}
let chef = function*(foods){
for (var i = 0; i < foods.length; i++) {
yield foods[i];
}
}
let wanghao = chef(["tomato","egg"]); //注意传的是数组
console.log(wanghao.next()); //{value: "tomato", done: false}
console.log(wanghao.next()); //{value: "egg", done: false}
console.log(wanghao.next()); //{value: undefined, done: true
23. Classes - 类
class Chef{
constructor(food){
//基于这个类创建实例后会自动的执行这个方法，可以把初始化的东西放在这个方法中
this.food = food;
}
cook(){
console.log(this.food);
}
}
let wanghao = new Chef('tomato');
wanghao.cook(); //tomato
24. get 与 set
class Chef{
constructor(food){
this.food = food;
this.dish = [];
}
get menu(){
return this.dish;
}
set menu(dish){
this.dish.push(dish);
}
cook(){
console.log(this.food);
}
}
let wanghao = new Chef('tomato');
console.log(wanghao.menu = 'fried shrimp balls'); //fried shrimp balls
console.log(wanghao.menu = 'pizza'); //pizza
console.log(wanghao.menu); //["fried shrimp balls", "pizza"]
25. 静态方法 - static
在类里面添加静态方法，静态方法：不需要实例化类就可以使用的方法
class Chef{
constructor(food){
this.food = food;
this.dish = [];
}
get menu(){
return this.dish;
}
set menu(dish){
this.dish.push(dish);
}
static cook(food){
console.log(food);
}
}
Chef.cook('tomato'); //tomato
26. 继承 - extends
class Person{
constructor(name, birthday){
this.name = name;
this.birthday = birthday;
}
intro(){
return `${this.name}, ${this.birthday}`;
}
}
class Chef extends Person{
constructor(name, birthday){
super(name, birthday); // super 可以调用父类里面的东西
}
}
let wanghao = new Chef('wanghao','1995-01-30');
console.log(wanghao.intro()); //wanghao, 1995-01-30
27. Set 一堆东西的集合，Set中不能有重复的内容
let desserts = new Set(['cake','ice-creame','choc-ices']); //创建一个Set，用new Set()
desserts.add('cookie');
desserts.add('cookie'); // 再次添加重复的东西没有作用
console.log(desserts); //Set(4) {"cake", "ice-creame", "choc-ices", "cookie"}
console.log(desserts.size); //4
console.log(desserts.has('cake')); //true
desserts.delete('cake');
console.log(desserts); //Set(3) {"ice-creame", "choc-ices", "cookie"}
desserts.forEach(dessert => {
console.log(dessert); //遍历输出
});
desserts.clear(); // 清空Set
console.log(desserts); //Set(0) {}
28. Map 组织名值对的数据
let food = new Map(); // 创建Map
let fruit = {}, cook = function(){}, dessert = 'dessert';
food.set(fruit, 'lemon');
food.set(cook, 'knife');
food.set(dessert, 'cookie');
console.log(food); //Map(3) {Object{} => "lemon", ƒ => "knife", "dessert" => "cookie"}
console.log(food.size); //3
console.log(food.get(fruit)); //lemon
console.log(food.get(cook)); //knife
food.delete(dessert);
console.log(food.has(dessert)); //false
food.forEach((value,key) =>{
console.log(`${key} = ${value}`); //[object Object] = lemon function (){} = knife
});
food.clear();
console.log(food); //Map(0) {}
3097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
