ES6新特性详细介绍

一、var let const 的区别

  1. let和const声明变量不存在变量提升,如果要使用这个变量,我们需要在变量定义之后使用;
  2. let和const不能重复声明变量,如果重复声明会报错;
  3. 用let 和 const 在全局声明变量不会给window增加属性;
  4. let和const出现在代码块中,会把代码块(字面量声明对象除外)变成块级作用域,并且出现暂时 性死区

二、创建导入/导出模块(文件/组件)

import/export

三、new set(数组去重)

// 数组去重
        var arr = [1, 2, 1, 3, 4];
        var arr2 = [...new Set(arr)];
        console.log(arr2) // [1,2,3,4]
        var arr3 = Array.from(new Set(arr))
        console.log(arr3); // [1,2,3,4]
        // 字符串去重
        var str = [...new Set('ababbc')].join('')
        console.log(str); // abc

四、Symbol(唯一的值)

var age = Symbol();
        var obj1 = {
            [age]: 18,
            name: "wangcai"
        }
        console.log(obj1[age]); // 18

五、…ary(展开运算符、剩余运算符)

在这里插入代码片var ary = [1, 2, 3]
        console.log(...ary); // 1 2 3

        let a = [1, 2, 3];
        let [b, ...c] = a;
        console.log(b) // 1
        console.log(c) // [2,3]

六、${} 模板字符串

var hello = 'good day'
        var world = `please look "${hello}", please enjoy it`
        console.info(world) // please look "good day", please enjoy it

七、解构赋值

//---------数组的解构赋值
        let arr5 = [0, 1, 2]
        let [e, f, g] = arr5
        console.log(e) // 0
        console.log(f) // 1
        console.log(g) // 2

        //---------对象的解构赋值
        let { name, age2 } = { name: "lht", age2: 22 }
        console.log(name) // 'lht'
        console.log(age2) // 22

八、for of 循环

九、()=>{} 箭头函数

注意:箭头函数中的this指的是定义时所在的对象,且箭头函数中没有arguments对象

十、数组新增方法

flat:数组平铺,也可以理解为降维
filter : 返回符合条件的新数组
findIndex : 返回符合条件的数组的索引
every : 所以的条件都满足才返回true
some : 只要有一个条件满足就返回true

十一、对象新增方法

Object.assign() 用于对象的合并

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.values() 返回可枚举属性的值

 var obj = {10: 'a',1: 'b', 2: 'c'};
 console.log(Object.values(obj)); // ['b', 'c', 'a']

Object.keys() 传入对象, 返回 包含对象可枚举属性和方法的数组
注:如果传入的是字符串或者数组,则返回索引值

var obj = {'name': 'xiaoming', 'age': 18};
console.log(Object.keys(obj)); // ["name","age"]

Object.create() 创建对象

// new Object() 方式创建
var a = {  rep : 'apple' }
var b = new Object(a)
console.log(b) // {rep: "apple"}
console.log(b.__proto__) // {}
console.log(b.rep) // {rep: "apple"}

// Object.create() 方式创建
var a = { rep: 'apple' }
var b = Object.create(a)
console.log(b)  // {}
console.log(b.__proto__) // {rep: "apple"}
console.log(b.rep) // {rep: "apple"}

注:new Object() 通过构造函数来创建对象, 添加的属性是在自身实例下。Object.create()方法创建的对象时,属性是在原型下面的,也可以直接访问 b.rep ,此时这个值不是吧b自身的,是它通过原型链proto来访问到b的值。

你可能感兴趣的:(javascript)