天天看点
返回

ES6精简总结（上）1、let 和 const 命令2、变量的解构赋值3、ES6字符串扩展4、ES6数组扩展5、ES6 对象扩展

1、let 和 const 命令

1.1 let命令

基本用法

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

{
    let a = ;
    var b = ;
    console.log(a) //11
    console.log(b)
}
console.log(b)  //22
console.log(a) //ReferenceError: a is not defined.

复制代码

上面代码快中，分别用let和var声明了两个变量，让这两个变量分别在代码块内和在代码块外打印，由结果可以看出，在代码块内用let声明的变量可以打印，而在代码块外用let声明的变量出现引用错误，而用var声明的变量在代码块内或者代码块外都可以正确打印，这表明，let声明的变量只在它所在的代码块有效。

使用技巧

for循环中，就非常适合使用let命令

for (let i = ; i < ; i++) {  
}
console.log(i) //ReferenceError: i is not defined
复制代码

上面的i使用let声明的，只在for循环体内有效

//例一
var a = [];
for (let i = ; i < ; i++) { 
    a[i] = function () {
        console.log(i);
      };      
}
a[]()  //6

//例二
var a = [];
for (var i = ; i < ; i++) { 
    a[i] = function () {
        console.log(i);
      };      
}
a[]()  //10
复制代码

上面的例一中的i是用let声明的，声明的变量仅在块级作用域内有效，最后输出的是6。

而例二变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值

let 与 var的区别

1. let声明的变量中不存在变量提升，var声明的变量存在变量提升

console.log(b) //undefined
console.log(a) //ReferenceError: a is not defined
let a = ;
var b = ;
复制代码

2. let声明的变量存在“暂时性死区(TDZ)”

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为

var str = "aaa"
if (true) {
    //TDZ start
  str = "bbb"  //ReferenceError
  let str;  //TDZ end
  console.log(str);  
}
复制代码

上面代码中，在let命令声明变量str之前，都属于变量str的“死区”。 "暂时性死区"结束之后str可以重新赋值

3.let命令不允许重复声明

let不允许在相同的作用域内，重复声明同一个变量

//例一
function f() {
    let a = ;
    let a = ;  //SyntaxError: Identifier 'a' has already been declared
  }
  f()
//例二
  function f() {   
    var a = ;
    let a = ;  //SyntaxError: Identifier 'a' has already been declared
  }
  f()
复制代码

根据以上情况，得出不能在函数内部重新声明参数。

//例一
function func(arg) {
  let arg; // 报错
}
//例二
function func(arg) {
  {
    let arg; // 不报错
  }
}
复制代码

4. let命令为JavaScript新增了块级作用域

function f1() {
    let n = ;
    if (true) {
      let n = ;   
      console.log(n);  //10  
    }
    console.log(n); // 5
  }
f1()
复制代码

上面的函数有两个代码块，都声明了变量n,根据输出的情况说明内外层代码块互不影响。

1.2 const命令

基本用法

1. cosnt声明一个只读的常量，而且一但声明，常量的值就不能改变

const PI = ;
PI // 3.1415

PI = ;
// TypeError: Assignment to constant variable.
复制代码

2. const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const foo;
// SyntaxError: Missing initializer in const declaration
复制代码

3.const的作用域与let命令相同：只在声明所在的块级作用域内有效。

if (true) {
  const MAX = ;
}
console.log(MAX) //ReferenceError: MAX is not defined
复制代码

4.const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

if (true) {
    console.log(MIN) //ReferenceError: MIN is not defined
    const MIN = ;
  }
复制代码

5.const声明的常量，也与let一样不可重复声明。

var message = "Hello!";
let age = ;

// 以下两行都会报错
const message = "Goodbye!";
const age = ;
复制代码

2、变量的解构赋值

2.1 数组的解构赋值

基本用法

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）

之前为变量赋值，只能直接指定值

var arr = [,,]
var a = arr[]
var b = arr[]
var c= arr[]
console.log(a) //1
console.log(b) //2
console.log(c) //3
复制代码

ES6允许写成以下这样，表示可以从数组中提取值，按照对应位置，对变量赋值。只要等号两边模式相同，左边的变量就会被赋予对应的值

var arr = [,,]
var [a,b,c] = arr
console.log(a) //1
console.log(b) //2
console.log(c) //3
复制代码

默认值

解构赋值允许指定默认值。

//例一
var [a,b,c=] = [,]
console.log(a) //1
console.log(b) //2
console.log(c) //999

//例二
var [a,b,c=,d=,e] = [,,null,undefined]
console.log(a) //1
console.log(b) //2
console.log(c) //null
console.log(d) //66
console.log(e) //undefined
复制代码

注意：ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的,上面的代码中null不严格等于undefined 所以默认值不起效。

默认值可以引用解构赋值其他变量，但是引用的变量必须已经声明，如例四会报错是因为x在引用y变量时，y变量还没有声明

//例一
let [x = , y = x] = []; 
console.log(x,y)     // x = 1,y = 1

//例二
let [x = , y = x] = []; 
console.log(x,y)     // x=2; y=2

//例三
let [x = , y = x] = [,];
console.log(x,y)    // x=1; y=2

// 例四
let [x = y, y = ] = []; 
console.log(x,y)   // ReferenceError:y is not defined 
复制代码

注意细节

1. 解构不成功，变量的值就等于undefined

//例一
var [a,b,c] = [,]
console.log(a) //1
console.log(b) //2
console.log(c) //undefined

//例二
var [a] = [];
console.log(a)  //undefined
复制代码

2. 等号的右边不是数组,将会报错

// 例一
var [a] = ;
console.log(a)  //TypeError: 1 is not iterable

// 例二
let [b] = {};
console.log(b)  //TypeError: {} is not iterable
复制代码

3. Set解构也可以使用数组的解构赋值

let [x,y,z] = new Set(["a", "b", "c"]);
console.log(x,y,z) //a,b,c
复制代码

4.嵌套解析赋值

//例一
var [a,b,c] = [,,[]]
console.log(a) //1
console.log(b) //2
console.log(c) //[3]

// 例二
var [a,b,[c]] = [,,[]]
console.log(a) //1
console.log(b) //2
console.log(c) //3
复制代码

2.2 对象的解构赋值

1. 与数组解析赋值的不同点

数组的元素是按次序排列的，变量的取值由他的位置决定，但是对象的属性设置没有次序，变量名需与属性同名，才能取得正确的值

//例一
var { name, age } = { age: , name: "bbb" };
console.log(name) //bbb
console.log(age) //666

// 例二
var { name, age ,sex } = { age: , name: "bbb" };
console.log(name) //bbb
console.log(age) //666
console.log(sex) //undefined
复制代码

上面的例一等号左右两边的同名属性次序不一样，但对取值没有影响，例二，sex变量没有对应的属性名，所以取不到值，最后等于undefined。

注意细节

1.对象的解构赋值是下面形式的简写,对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者

var  {name:n, age:a } = { age: , name: "bbb" };
console.log(n) //bbb
console.log(a) //666
console.log(name) //ReferenceError: name is not defined
console.log(age) //ReferenceError: age is not defined
复制代码

2.对于用let和const声明解构的变量，变量不能重复声明，否则会报错

// 例一
let age;
let {age} = {age: }; // SyntaxError: Duplicate declaration "age"

// 例二
let age;
({age} = {age: }); 
console.log(age) //1
复制代码

在例二中let命令下面一行的圆括号是必须的，否则会报错，因为解析器会将起首的大括号，理解成一个代码块，而不是赋值语句

2. 与数组解析赋值的相同点

和数组一样，解构也可以用于嵌套结构的对象。

var { p: [x, {y} ]} = {p:['hello',{y:"world"}]};
 console.log(x,y) //hello world
复制代码

注意这里的p不是变量,y其实也不是变量，（参考上面介绍）

对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。

var {x = } = {x: null};
console.log(x) //null
复制代码

数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

var arr = [, , ];
var { : first, [arr.length - ] : last} = arr;
console.log(first) //1
console.log(last) //3
复制代码

数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3

2.3 字符串的解构赋值

基本用法

字符串在进行结构赋值时，被转化成了一个类似数组的对象

var [a,b,c,d,e] = 'hello';
console.log(a) //"h"
console.log(b) //"e"
console.log(c) //"l"
console.log(d) //"l"
console.log(e) //"o"
复制代码

2.4函数参数的解构赋值

基本用法

1.函数的参数可以使用解构赋值

function add([x, y]){
    return x + y;
  }
  console.log(add([, ])); //3
复制代码

2. 函数参数的解构也可以使用默认值。

function add([x = , y]){
    return x + y;
  }  
  console.log(add([, ])); //7
复制代码

2.5变量的解析赋值用途

1.交换变量的值

[x,y] = [y,x]
复制代码

2.从函数返回多个值

一般情况下函数只能返回一个值，如果想要返回多个值，只能将要返回的数据放到数组或者对象当中，但是在ES6中可以利用解构赋值取出返回的数据

//例一 返回一个数组
function f(){
    var arr = [,,,]
    return arr;
  }
  var [a,b,c,d] = f()
  console.log(a); //1
  console.log(b); //2
  console.log(c); //3
  console.log(d); //4

//例二 返回一个对象
function obj(){
    var obj = {
        name:"zhangsan",
        age:,
        sex:"man"
    }
    return obj;
  }
  var {name,age,sex} = obj()
  console.log(name); //zhangsan
  console.log(age);//23
  console.log(sex);//man
复制代码

3.函数参数的定义 解构赋值可以方便地将一组参数与变量名对应起来

//例一
//参数结构是数组形式，则参数是按照次序赋值的
function f([x,y,z]){
    console.log(x,z,y)  //x = 1, z = 3, y = 2
}
 f([,,])
  
//例二 
//参数的结构是对象的形式，参数是按照相同的属性名赋值的
 function f({x,y,z}){
    console.log(x,y,z) //x =2,y = 3,z = 1
}
 f({z:,x:,y:})
复制代码

4.提取JSON数据 解构赋值对提取JSON对象中的数据，尤其有用

var jsonData = {
        id: ,
        status: "NO",
        data: [, ]
  };
  let { id, status, data: number } = jsonData;
  console.log(id, status, number) // 42 'NO' [ 88, 66 ]
复制代码

5.遍历Map结构

//例一 
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let i of map) {
  console.log(i);   //[ 'first', 'hello' ]  [ 'second', 'world' ]  
}

//例二
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key,value] of map) {
  console.log(key + ":" + value);   //first:hello    second:world
}
复制代码

3、ES6字符串扩展

3.1模板字符串

基本用法

在传统的JS语言中，输出模板比较麻烦，字符串与变量需要使用 + 连接符，拼接在一起，在ES6中新添了模板字符串，解决了传统写法繁琐的问题

1.模板字符串用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

// 字符串中嵌入变量
var name = "Tom",time = "today";
console.log(`Hello ${name}, how are you ${time}?`) //Hello Tom, how are you today?
复制代码

2.如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

// 字符串中嵌入变量
var str = `\`Hello\` Wrode`
console.log(str)  //  `Hello` Wrode
复制代码

3.如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。如果你不想要这个换行，可以使用trim方法消除它。

console.log(
  `
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul> 
  `
)
/*
 <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
 </ul> 
*/
复制代码

4. 模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的JavaScript表达式，可以进行运算，引用对象属性,还能调用函数。

function fn() {
  return "World";
}
console.log(`Hello ${fn()}!`) //Hello World!
复制代码

5.由于模板字符串的大括号内部，就是执行JavaScript代码，因此如果大括号内部是一个字符串，将会原样输出。模板字符串还能进行嵌套

//原样输出
console.log(`Hello "World"`) //Hello "World"

//模板字符串嵌套
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;
const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));

// <table>
//
//   <tr><td><Jane></td></tr>
//   <tr><td>Bond</td></tr>
//
//   <tr><td>Lars</td></tr>
//   <tr><td><Croft></td></tr>
//
// </table>
复制代码

3.2 trim()

除去字符串空格。一般配合正则表达式用的较多

  • trim 左右空格都是去掉
  • trimLeft 左空格去掉
  • trimRight 右空格去掉 
var str = "  a b c  "
console.log(str.trim()) //"a b c"

复制代码

3.3 repeat()

含义及用法

repeat()返回一个新的字符串，表示原字符串将要重复n次

var str = "A"
str.repeat()
console.log(str.repeat()) //AAA
复制代码

注意

1. repeat()并没有对对原字符串产生影响。

2. repeat()d的参数时小数会向下取整，如果是负数会报错

3. 参数NaN等同与0

3.4 includes() startsWidth() 和 endsWith()

含义及用法

在ES6中新添加了三种方法用来确定字符串是否包含在另一个字符串中

  • includes():表示是否找到了参数字符串,返回布尔值
  • startsWidth():表示参数字符串是否在源字符串的头部,返回布尔值
  • endsWith():表示参数字符串是否在源字符串的尾部,返回布尔值 
var s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
复制代码

注意：这三个方法都支持第二个参，使用第二个参数n时，endsWith()是针对n之前的字符串，includes()和startsWidth()是针对n之后直到结束的字符串。

var s = 'Hello world!';

s.startsWith('world', ) // true
s.endsWith('Hello', ) // true
s.includes('Hello', ) // false
复制代码

3.5 padStart() 和 padEnd()

含义及用法

ES7推出了字符串补全长度的功能，如果某个字符串不够指定长度，会在头部或尾部补全。padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串

  • padStart() 用于头部补全
  • padEnd() 用于尾部补全 
'x'.padStart(, 'ab') // 'ababx'
'x'.padStart(, 'ab') // 'abax'
复制代码

注意

1. 如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串

console.log("bbb".padStart(,"ac")) //bbb
复制代码

2. 如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

'x'.padStart(, 'abc') // 'abax'
复制代码

3.如果省略第二个参数，则会用空格补全长度。

常见用法

1. 为数值补全指定位数

2. 提示字符串格式

//数值补全指定位数
'1'.padStart(, '0') // "0000000001"
//提示字符串格式
'09-12'.padStart(, 'YYYY-MM-DD') // "YYYY-09-12"

复制代码

4、ES6数组扩展

4.1 Array.from()

含义及作用

含义 这个方法是 Array 构造器的静态方法

作用 将把类数组对象和可遍历的对象（包括ES6新增的数据结构Set和Map），转成真正的数组

常见的类数组对象

  • DOM操作返回的NodeList集合(如例一)
  • 函数内部的arguments对象(如例二) 
<!-- 例一 -->
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</body>
<script>
      let ps = document.querySelectorAll('p');
      Array.from(ps).forEach(function (p) {
      console.log(p);
      });
      //<p>1</p>
      //<p>2</p>
      //<p>3</p>
</script>
复制代码
           
//例二
function f(){
  var args  = Array.from(arguments)
  console.log(args) //[1,8,6,7]
}
f(,,,)
复制代码

Array.from 还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from([, , ], (x) => x * x) //[1,4,6]
复制代码

常见用法示例

1. 取出一组DOM节点的文本内容

<body>   
    <span class="dd">hh</span>
    <span class="dd">xx</span>
    <span class="dd">ll</span>
</body>
<script>
    let spans = document.getElementsByTagName('span');
     //Array.from()
    let name1 = Array.from(spans,s=>console.log(s.textContent)) // hh dd ll
    // map()
    let name2 = Array.prototype.map.call(apans,s=>console.log(s.textContent))
</script>
复制代码

2. 返回各种数据的类型

function typrOf(){
  return Array.from(argurments,values=>typeof value)
}
typeOf(null,[],NaN) //['object', 'object', 'number']

复制代码

4.2 Array.of()

含义及目的

含义 Array.of() 方法用于将一组值，转换为数组

目的 是弥补数组构造函数Array()的不足，因为参数个数的不同，会导致Array()的行为有差异

注意

  1. 不存在由于参数不同而导致的重载。它的行为非常统一。
  2. Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。 
Array.of() // []
Array.of(undefined) // [undefined]
Array.of() // [1]
Array.of(, ) // [1, 2]
复制代码

4.3 数组实例的find()和findIndex()

find()和findexIndex()的不同点

1 . find()是找出第一个符合条件的数组，返回值为数组元素 只能找到第一个满足的条件 ，并不会把所有都满足的条件找出来，如果没有符合条件的成员，则返回undefined。

findIndex()是返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[, , , ].find(function(value, index, arr) {
  return value > ;
}) // 10

[, , , ].findIndex(function(value, index, arr) {
  return value > ;
}) // 2
复制代码

find()和和indexIndex()的相同点

1.find()和findIndex()的参数都是一个回调函数，回调函数的参数可以接受三个参数，分别表示 当前的值，当前的位置，原数组

2.这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

3.这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足。

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))})  // 0
复制代码

4.4 数组实例的fill()

含义

含义 fill方法使用给定值，填充一个数组 参数含义 fill可以接受第二个和第三个参数，用于指定填充的 起始位置 和 结束位置 不包括结束位置

new Array().fill()
// [7, 7, 7]

['a', 'b', 'c'].fill(,,) //表示起始位置是数组索引的1，结束位置是数组索引的2，不包括结束位置
// ['a', 6, 'c']
复制代码

4.5 数组实例的entries(),key(),values()

含义

含义都用于遍历数组，它们都返回一个遍历器对象，可以用for...of循环进行遍历。

区别

  • keys()是对键名的遍历
  • values()是对键值的遍历
  • entries()是对键值对的遍历。 
for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"
复制代码

4.6 数组的includes()

含义

含义表示某个数组是否包含给定的值，该方法返回一个布尔值

[, , ].includes();     // true
[, , ].includes();     // false
[, , NaN].includes(NaN); // true
复制代码

注意细节

  1. 该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。
  2. 通常也可以使用数组的indexOf方法，检查是否包含某个值。但是会导致NaN的判断失误

4.7 数组的扩展运算符

作用

写法是三个英文的句号即 ...

功能把数据结构转成数组。相当于实现了，数组的复制（这里指浅拷贝）

var arr  = [,,]
var arr1 =[...arr]
console.log(arr1) //[1,2,3]
arr[] = ;
console.log(arr)  //[66,2,3]
console.log(arr1) //[1,2,3]
复制代码

作用可以利用扩展运算符，把类数组转成数组

小总结 ：把一个类数组转成数组有如下几种方式：

  • Array.prototype.slice.call();
  • Array.from();
  • [...类数组对象]

5、ES6 对象扩展

5.1属性的简写

  1. 在ES6中如果属性名和代替属性值的变量相等的话，属性值可以不写，如下 
var str = "hello"
var obj1 = {str}
console.log(obj1) //{ str: 'hello' }
复制代码
  1. 同样的在对象中如果方法名和定义方法名的变量相等的话，方法名可以省略。 
function say(){
   console.log("hello")
}
var obj = {
  say
}
console.log(obj.say()) //hello
复制代码

采用以上写法是不是就简单多了

5.2 Object.is()

在ES5中虽然有两个运算符可以比较两个值是否相等，但是都有各自的优缺点，如（==）运算符会自动转换数据类型，（===）运算符NaN不等于NaN，-0等于+0，有没有一种运算符，只考虑只要两个值相等，他们就应该相等的运算符呢，所以在ES6中提出“同值相等”的算法，即Object.is(),用来比较两个值是否完全相等，与（===）的行为基本一致

Object.is(+,) //false
Object.is(NaN,NaN)//true
Object.is({},{})//true
Object.is("str","str")//true
复制代码

5.3 Object.assign()

Object.assign就去用于对象的合并，将源对象的所有的可枚举属性，复制到目标对象。可以有多个参数，但是第一个参数是目标对象，后面的参数都是源对象。

var target = {a:,b:}
var obj1 = {b:,c:}
var obj2 = {b:,d:}
var obj = Object.assign(target,obj1,obj2)
console.log(obj) // { a: 1, b: 11, c: 4, d: 55 }
复制代码

注意

  1. 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
  2. 这个方法的返回值就是第一个参数的引用，也就是返回了第一个参数。
  3. 这个方法会把原型上面的数据也拷贝了。
  4. 不能拷贝继承过来的属性，也不拷贝不可枚举的属性
  5. 这个方法是属于浅拷贝。

常见用法

  1. 为对象添加属性 
class Point {
    constructor(x, y) {
    Object.assign(this, {x, y});
  }
} 
//通过Object.assign方法，将x属性和y属性添加到Point类的对象实例。
复制代码
  1. 为对象添加方法 
function Example(){
}
Example.prototype.showTab = function(){
  console.log("Hello")
}
Object.assign(Example.prototype,{
  say(){
    console.log("world")
  },
  see(){
    console.log("Hi")
  }
})
var example = new Example()
console.log(example.showTab()) //Hello
console.log(example.say()) //world
console.log(example.see()) //Hi
复制代码
  1. 克隆对象
  2. 合并多个对象
  3. 为属性指定默认值

5.4 属性相关的方法

1. Obect.getOwnProertyDescriptor()获取一个对象中某个属性的详细信息 (例一)

2. Object.defineProperty( )精细化设置一个对象的单个属性的(例二)

  • configurable 是否可以删除
  • writeable 是否可以修改
  • enumerable 是否可以枚举
  • value：属性值

3. Object.defineProperties() 精细化设置一个对象的多个属性的(例三)

4.getOwnPropertyNames() 获取自的属性，以数组的格式返回的(例四)

5.Object.keys()得到一个对象的属性名，把属性名放到一个数组中(例五)

6.Object.values()获取对象的值，放到数组中(例六)

//例一
var obj = {
  name:"wangcai",
  age:
}
console.log(Object.getOwnPropertyDescriptor(obj,"name"))
/*{ value: 'wangcai',
  writable: true,
  enumerable: true,
  configurable: true }
*/
// 例二

//添加一个属性
 Object.defineProperty(obj,"name",{configurable:true,value:"wangcai"})

// 例三
//添加多个属性
Object.defineProperties(obj,
                         {
                             name:{configurable:true,value:"wangcai"},
                             id:{writeable:false,value:"123456"}
                         }
)

//例四
var obj = {
  name:"wangcai",
  age:
}
console.log(Object.getOwnPropertyNames(obj)) //[ 'name', 'age' ]

//例五
var obj = {
  name:"wangcai",
  age:
}
console.log(Object.keys(obj)) //[ 'name', 'age' ]

//例六
var obj = {
  name:"wangcai",
  age:
}
console.log(Object.values(obj)) //[ 'wangcai', 16 ]

复制代码

5.5 对象继承相关的方法

1. Object.create()使用Object.create比较适合对字面量对象的继承。 2. getPrototypeOf()获取创建这个对象的构造器的prototype属性

//例一
var newObj = Object.create({}, {
  size: {
      value: "large",
      enumerable: true
  },
  shape: {
      value: "round",
      enumerable: true
  }
});
console.log(newObj.size) //large
console.log(newObj.shape) //round
console.log(Object.getPrototypeOf(newObj)) //{}

//例二
var obj = {
    name:"wangcai",
    age:
}
console.log(Object.getPrototypeOf(obj)==Object.prototype)
复制代码

5.6 对象的遍历总结

在ES6中有以下几种方式可以遍历对象的属性

  1. for in : 会输出自身以及原型链上可枚举的属性。
  2. Object.keys() : 用来获取对象自身可枚举的属性键
  3. Object.getOwnPropertyNames() : 用来获取对象自身的全部属性名

5.7对象的扩展运算符

在前面我们详细的说过数组的扩展运算符，对象的扩展运算符和数组的扩展运算符思想一样，就是取出参数对象的所有可遍历的属性，赋值给当前的对象（看到这里你会发现，对象的扩展运算符等同于Object.assign()这个方法）

let z ={a:,b:}
let n = {...z}
console.log(n) //{a:6,b:4}

console.log(Object.assign({},z)) //{a:6,b:4}
复制代码

作用

  1. 可以用于合并两个对象
  2. 注意如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。 
let a = {x:,y:
}
let x = , y = , aWithOverrides = { ...a, x, y };
console.log(aWithOverrides) //{ x: 1, y: 2 }

复制代码

由于篇幅关系剩余的知识点另开一篇

敬请期待下篇ES6中的函数扩展、Class、Set和Map数据结构、Iterator和for...of

[参考文献]

参考文献 阮一峰ES6入门

转载于:https://juejin.im/post/5b6fc4f5518825612447e90f

数据结构与算法 javascript json
上一篇: ES6 基础概念汇总
下一篇: Sam 数（矩阵乘法）

继续阅读