es6特性汇总(一)

1.let命令
ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined。为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ)。例如:在let x前增加一句typeof x就会报错,因为同一块作用域在let x之前,x无法进行任何操作。

let实际上为JavaScript新增了块级作用域,在{}被包围的范围外,不受内层的let变量影响(但会受var的“变量提升”影响)。

2. const命令
const声明一个只读的常量。一旦声明,常量的值就不能改变,且声明时必须立即初始化,不能留到以后赋值。const的作用域与let命令相同:只在声明所在的块级作用域内有效。

3.字符串、数值、数组、对象扩展api

  • 字符串:
    includes(str) : 判断是否包含指定的字符串
    startsWith(str) : 判断是否以指定字符串开头
    endsWith(str) : 判断是否以指定字符串结尾
    repeat(count) : 重复指定次数
 let str = 'abcde';
    console.log(str.includes('b'));//true
    console.log(str.includes('a'));//true
    console.log(str.startsWith('a'));//true
    console.log(str.endsWith('t'));//false
    console.log(str.repeat(3));//abcdeabcdeabcde
  • 数值:
    二进制与八进制数值表示法: 二进制用0b, 八进制用0o
    Number.isFinite(i) : 判断是否是有限大的数
    Number.isNaN(i) : 判断是否是NaN
    Number.isInteger(i) : 判断是否是整数
    Number.parseInt(str) : 将字符串转换为对应的数值
    Math.trunc(i) : 直接去除小数部分
console.log(0b1010);//10
console.log(0o56);//46
console.log(Number.isFinite(123));//true
console.log(Number.isFinite(Infinity));//false
console.log(Number.isNaN(NaN));//true
console.log(Number.isInteger(123));//true
console.log(Number.isInteger(123.456));//false
console.log(Number.isInteger(123.0));//true
console.log(Number.parseInt('321abc456'));//321
console.log(Number.parseInt('a123abc456'));//NaN
console.log(Math.trunc(321.123));//321


  • 数组:
    Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
    Array.of(v1, v2, v3) : 将一系列值转换成数组
    find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素,没有返回undefind
    findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标,没有返回 -1
const arr = [1, 2, 3, 4];
   
let res = arr.find(function (a){
    return a < -1;
 });
 
console.log(res);//返回undefind;
  • 对象扩展:
    Object.is(v1, v2)
    判断2个数据是否完全相等

    Object.assign(target, source1, source2…)
    将源对象的属性复制到目标对象上

    直接操作 proto 属性
    let obj2 = {};
    obj2.proto = obj1;
let obj = {};

let obj1 = {username:'puppy',age:40};

let obj2 = {sex:'男'};

Object.assign(obj,obj1,obj2);

console.log(obj);//{username:'puppy',age:40,sex:'男'};

let obj3 = {};

let obj4 = {money: 4000};

obj3.__proto__= obj4;

console.log(obj3)//{};

console.log(obj3.money);//4000;

4.Set和Map数据结构

  • Set
    ① Set 本身是一个构造函数,用来生成Set 数据结构。Set函数可以接受一个数组作为参数,用来初始化。Set对象允许你存储任何类型的值,无论是原始值或者是对象引用。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set的size属性返回Set实例的成员总数。
    ② Set 对象存储的值总是唯一的,所以需要判断两个值是否恒等。有几个特殊值需要特殊对待:
    Ⅰ. +0 与 -0 在存储判断唯一性的时候是恒等的,所以不重复
    Ⅱ. undefined 与 undefined 是恒等的,所以不重复
    Ⅲ. NaN 与 NaN 是不恒等的,但是在 Set 中认为NaN与NaN相等,所有只能存在一个,不重复。
    ③ Set实例对象的方法
    add(value):添加某个值,返回 Set 本身(可以链式调用)。
    delete(value):删除某个值,删除成功返回true,否则返回false。
    has(value):返回一个布尔值,表示该值是否为Set的成员。
    clear():清除所有成员,没有返回值。
const qq = new Set(['a', 'a', 'b', 1, 2, 1])
console.log(qq)  // {'a', 'b', 1, 2}
qq.add('c').add({'a': 1})
console.log(qq) // {'a', 'b', 1, 2, 'c', {a: 1}}
console.log(qq.size) // 6
qq.has(a) // true

④ Set的遍历方法
由于Set结构没有键名,只有键值,所以keys方法和values方法的返回结果完全相同。
keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回键值对的遍历器。
forEach():使用回调函数遍历每个成员。

const test = new Set(['a', 'b', 'c'])
for (let item of test.keys()) {
  console.log(item)
}
// a
// b
// c
for (let item of test.values()) {
  console.log(item)
}
// a
// b
// c
for (let item of test.entries()) {
  console.log(item)
}
// ["a", "a"]
// ["b", "b"]
// ["c", "c"]
for (let i of test) {
  console.log(i)
}
// a
// b
// c
test.forEach((key, value) => console.log(key + '-' + value))
// a-a
// b-b
// c-c
  • Map
    ① Map和Object有些类似,Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。构造函数Map可以接受一个数组作为参数。它和Object的区别在于:
    Ⅰ. Map中的键值是有序的,而添加到对象中的键值不是
    Ⅱ. Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能遍历计算
    Ⅲ. 一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值
    Ⅳ. Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
    ② Map对象的方法
    set(key, val): 向Map中添加新元素
    get(key): 通过键值查找特定的数值并返回,没有则返回undefined
    has(key): 判断Map对象中是否有Key所对应的值,有返回true,否则返回false
    delete(key): 通过键值从Map中移除对应的数据
    clear(): 将这个Map中的所有元素删除
const one = new Map([['a', 111], ['b', 222]])
console.log(one) // {"a" => 111, "b" => 222}
one.get('a')  // 111
const two = new Map([['c', 3]])
const three = new Map(two)
three.get('c') // 3
three.has('c') // true
three.set('d', 5)
three.get('d') // 5
three.delete('d')
three.get('d')//undefined
three.clear()
three//{}

③ Map的遍历方法
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员

const map = new Map([['a', 1], ['b',  2]])
for (let key of map.keys()) {
  console.log(key)
}
// "a"
// "b"
for (let value of map.values()) {
  console.log(value)
}
// 1
// 2
for (let i of map.entries()) {
  console.log(i)
}
// ["a", 1]
// ["b", 2]
for (let [key, value] of map.entries()) {
  console.log(key, value)
}
// "a" 1
// "b" 2
// for...of...遍历map等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value)
}
// "a" 1
// "b" 2

未完待续。

你可能感兴趣的:(js,javascript,es6)