当前位置:   article > 正文

es6常用语法_es6语法

es6语法

1.let const
2.模版字符串
3.解构对象
4.symbol set map
5.数组新方法
Array.from
map,filter,find,some,every,each
6.object
Object.key() Object.value() Object.entries() Object.is() Object.assign()
7.函数
箭头函数
函数默认值
8.Class类,extends
9.promise和proxy
10.模块化 import export

https://es6.ruanyifeng.com/#docs/iterator

es6常用语法
1.let const
块级作用域,不能重复声明,没有提升
const常量,引用类型
暂时性死区
ES6——函数默认参数

2.字符串拼接
两个单引号(反的单引号)拼接字符串

3.解构赋值
对称赋值,更容易理解,一个数组= 另外一个数组,一个对象=另外一个对象

4.展开运算符 …
复制数组方便
var arr1 = [1,2,3,[4,5],[6,7,[8,9]]];
var arr2 = […arr1];
arr2.push(1000);
arr1===arr2 // false

5.新增: 基本数据类型Symbol(命名空间重复时使用),引用数据类型set(利用Set对象唯一性的特点,可以轻松实现数组的去重)、 map(类似object,多了size属性)

6.for…of
for…in
for…each
1.不能创建新数组,没有返回值
2.不能打断
3.可以修改原数组
var myArr=[
{id:1,name:“sdf”},
{id:2,name:“dfsdf”},
{id:3,name:“fff”}
]
myArr.forEach((item,index)=>{
console.log(item.id);
//1,2,3
})

修改原数组
var a = [1,2,3,4,5]
a.forEach((item, index, arr) => {
arr[index] = item * 2
})
console.log(a)

7.函数
7.1 参数默认值
7.2.箭头函数的this永远指向其上下文的 this,任何方法都改变不了其指向,如call(), bind(), apply()
2.默认return,如果多行要用大括号,并且不默认return
3.没有arguments,用…rest参数取代,没有prototype
var C = (…c)=>{ //…c即为rest参数
console.log©; //[3, 1, 2]
}
C(3,1,2);

8.类和继承
@decorator
class Person extends Animal {
constructor(props){
super(props) // 子类才有super
}
}

9.模块化 export 和 import

10.promise
Generator、yield
async await

11.vue3的 proxy代理,数据劫持。可以返回新数组,13中劫持方法,监听整个数组的变化,对象的变化。reflect.defineproperty.

11.对象方法
11.1Object.create(prototype[,propertiesObject])
使用指定的原型对象及其属性去创建一个新的对象。

var parent = {
x : 1,
y : 1
}
var child = Object.create(parent,{
z : { // z会成为创建对象的属性
writable:true,
configurable:true,
value: “newAdd”
}
});
console.log(child); //{z: “newAdd”}
console.log(hild.proto); //{x: 1, y: 1}

11.2Object.assign(target, obj1, obj2…)
Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2
Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]
上面代码中,Object.assign把数组视为属性名为 0、1、2 的对象,因此源数组的 0 号属性4覆盖了目标数组的 0 号属性1。

11.3Object.keys()
不走原型链
for… in会遍历原型
如果key是整数或者整数类型的字符串,那么会按从小到大的排序(排在其它数据类型前面);
其它数据类型,按照实际创建顺序排序;

11.4Object.values()
var an_obj = { 100: ‘a’, 2: ‘b’, 7: ‘c’ };
console.log(Object.values(an_obj)); //[“b”, “c”, “a”]

11.5 Object.freeze()
冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说,这个对象永远是不可变的。该方法返回被冻结的对象。
var obj = {
prop: function() {},
foo: ‘bar’
};
Object.freeze(obj); //{prop: ƒ, foo: “bar”}
obj.foo = ‘eee’;
console.log(obj); //{prop: ƒ, foo: “bar”}
11.6 Object.entries

12.ES6数组新方法:
12.1Array.from
Array.from的设计目的是快速便捷把一个类似数组的可迭代对象创建成一个新的数组实例。
let likeArr = {
‘0’: ‘a’,
‘1’: ‘b’,
‘2’: ‘c’,
length: 3
};

// ES5的写法
var arr1 = [].slice.call(likeArr); // [‘a’, ‘b’, ‘c’]

// ES6的写法
let arr2 = Array.from(likeArr);

12.2Array.of
Array.of(3, 4, 5) // [3, 4, 5]

12.3 find 和 findIndex

12.4flat 数组展平
[1, 2, [3, 4]].flat(Infinity)
// [1, 2, 3, 4]

12.5flatMap
方法对原数组的每个成员执行一个函数(相当于执行 Array.prototype.map),然后对返回值组成的数组执行 flat() 方法。该方法返回一个新数组,不改变原数组。
注意:flatMap() 只能展开一层数组。
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()

arr.map(x=> x*2) 返回一个新数组
arr.filter(x=>x>5) 返回x大于5的新数组

总结

数组新增的方法,一方面起到了增强型作用,一方面让代码变得更加简洁。

其中 Array.from 和 Array.of 属于构造函数方法。

从是否改变数组自身的角度看:

copyWithin、fill 会改变数组自身,

includes、flat、flatMap不会改变数组自身。

entries、keys、values、find、findeIndex属于数组遍历方法。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/673874
推荐阅读
相关标签
  

闽ICP备14008679号