ES6学习笔记

作者: 前端陈陈陈 | 来源:发表于2020-09-17 11:53 被阅读0次

es6学习

一、in用法：

一、判断对象
let aa = {a :1 ,b:2 ,c :3}
console.log('a' in aa)  // 判断对象里面有没有这个变量或者方法 输出： true

二、判断数组
let aa = ['1' ,'2' , '3']
console.log(1 in aa)  // 下标1有值， 输出： true

let aa = ['1' ,'2' , '']
console.log(2 in aa)  // 下标2没有值， 输出： false

二、数组处理方法：

一、json转数组
let json = {
    '0':'a',
    '1':'b',
    '2':'c',
    '3':'d',
    length:4
}
console.log(Array.from(json )) 输出： ["a", "b", "c", "d"]
 
####二、for of  数组循环

let arr = ['a','b','c','d'];
 
for(let val of arr){
    console.log(val);  输出：a  b  c  d
}

（2）、取下标
let arr = ['a','b','c','d'];
 
for(let val of arr.keys()){
    console.log(val);  //输出： 0 1 2 3 
}
（3）、取值与下标
let arr = ['a','b','c','d'];
 
for(let [val,index] of arr.entries()){
    console.log(val+':'+index); // 输出：0：a ,1:b ,2:c 3:d
}

三、数组查找（Array.find()）

let arr = ['1,2,3,4,5,6,7,8,9','aa'];
//value 表示要查找的值
//index 表示通过下标查找值
//arr   表示当前的数组
console.log(arr.find(function(value,index,arr){
    return value =='aa' // aa
    //return index == 1     //aa
}));

四、Array.fill的用法
        提供三个参数Array.fill(value,starts.end)
value：填充值。  start：填充起始位置，可以省略。  end：填充结束位置，可以省略，实际结束位置是end-1。

let arr = ['a,','b','c','d'];
arr.fill('e',1,3);
console.log(arr);  //输出：[a ,e ,e,d]

五、entries( )的用法
基于entries()返回的遍历器，调用遍历器的next()的方法可以获取每一个元素的访问入口，该入口有一个done属性可以表明是否便利结束。通过入口可以拿到value属性，其就是元素的索引和值的数组。

let arr = ['c++,','java','python','go'];
 
let arrEntry = arr.entries();
 
let entry = arrEntry.next();
while(!entry.done){
    console.log(entry.value);
    entry = arrEntry.next()
}

三、数字操作

1、二进制、八进制、十六进制的表示

let a= 0b101010;  //以0b开头，不区分大小写

let b = 0o666;    //以0o开头，不区分大小写
 
let c = 0xABC;    //以0x开头，不区分大小写

2、判断数字是否为数字 （Number.isFinite(arg)）
let a= 11;
let b='not a number';
 
console.log(Number.isFinite(a))  //true
 
console.log(Number.isFinite(b))  //false

3、判断数字是否为整数 (Number.isInteger(arg))
let a= 11;
let b=110.1
 
console.log(Number.isInteger(a))  //true
 
console.log(Number.isInteger(b))  //false


4、判断数字是否为浮点型 
let a= 11;
let b=110.1;
let c= NaN;
console.log((!Number.isInteger(a)&&!Number.isNaN(a)))  //false
 
console.log((!Number.isInteger(b)&&!Number.isNaN(b)))  //true
 
console.log((!Number.isInteger(c)&&!Number.isNaN(c)))  //false


5、判断数字是否为NaN
let a = 11;
let b = NaN;
 
console.log(Number.isNaN(a));//false
console.log(Number.isNaN(b));//true

6、最大/最小安全整数，以及他们的判断
console.log(Number.MAX_SAFE_INTEGER);//最大安全整数
console.log(Math.pow(2,53)-1);       //最大安全整数,(2^53)-1 
 
console.log(Number.MIN_SAFE_INTEGER);//最小安全整数
console.log(-Math.pow(2,53)+1);      //最小安全整数 -(2^53)+1

判断：Number.isSafeInteger（number）

console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER));//true
 
console.log(Number.isSafeInteger(Number.MIN_SAFE_INTEGER));//true
 
console.log(Number.isSafeInteger(123123));//true
 
console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER+1)); //false
 
console.log(Number.isSafeInteger(Number.MIN_SAFE_INTEGER-1));//false

7、类型转换
// 整形转浮点型

let a = 11;
 
let b = 12.12;
 
console.log(Number.parseFloat(a));   //整形转浮点型
 
console.log(Number.parseInt(b));     //浮点型转整形

四、模板字符串

1.ES5对字符串的拼接

var str1 = 'tony';
 
var str2 = "hello!"+str1+",welcome to my home"
 
console.log(str2);
2.ES6对字符串的拼接

let str1 = 'tony';
 
let str2 = `hello!${str1},welcome to my home`
 
console.log(str2);
同时还可以满足基本的运算

let a = `${1+3}`;
 
console.log(a); //输出3
3.字符串查找

以下是ES5对字符串的查找

var str1 = 'hello';
 
var str2 = 'hello,i am here!'
 
document.write(str2.indexOf(str1));
意思是从低0 个开始出现所找的字符，一般用来判断字符串否存在

document.write(str2.indexOf(str1)>0);

以下是ES6对字符串的查找

let str1 = 'hello';
 
let str2 = 'hello,i am here!'
 
document.write(str2.includes(str1));

五、拓展运算符

1、对象扩展运算符（...）
// fun()里面的参数个数未知，这里用（...）标识，arg为参数数组，如下:
function fun(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
}
fun(1,2,3)

给数组对象赋予另外一个数组对象的值时，如下：我们想给arr1的值赋给arr2,但是结果改变arr2时，arr1也跟着改变
let arr1 = ['fit','sed','thd'];
let arr2 = arr1;
console.log(arr2);
 
arr2.push('fth');
console.log(arr1);

这种方式，arr1只是将自己的内存地址赋给arr2,也就是arr1映射到了arr2，系统并没有给arr2开辟新的内存空间，可以用扩展运算符来做，正确写法如下： 

let arr1 = ['fit','sed','thd'];
//let arr2 = arr1;
let arr2 = [...arr1]; //应该这么写，表示的是将arr1里面的值赋给arr2,而不是地址
console.log(arr2);
 
arr2.push('fth');
console.log(arr1);

2、rest运算符（...）
function fun(first,...arg){
 
    console.log(arg.length);
 
}
fun(0,1,2,3,4,5,6,7)

六、 Object.assign()

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

注意:
1、如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
2、如果非对象参数出现在源对象的位置（即非首参数），那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果undefined和null不在首参数，就不会报错。

const v1 = 'abc';
const v2 = true;
const v3 = 10;

const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

上面代码中，v1、v2、v3分别是字符串、布尔值和数值，结果只有字符串合入目标对象（以字符数组的形式），数值和布尔值都会被忽略。这是因为只有字符串的包装对象，会产生可枚举属性。

Object(true) // {[[PrimitiveValue]]: true}
Object(10)  //  {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

上面代码中，布尔值、数值、字符串分别转成对应的包装对象，可以看到它们的原始值都在包装对象的内部属性 [[PrimitiveValue]]上面，这个属性是不会被Object.assign拷贝的。只有字符串的包装对象，会产生可枚举的实义属性，那些属性则会被拷贝。

Object.assign拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。

Object.assign({b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
  })
)
// { b: 'c' }

上面代码中，Object.assign要拷贝的对象只有一个不可枚举属性invisible，这个属性并没有被拷贝进去。

属性名为 Symbol 值的属性，也会被Object.assign拷贝。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

常见用途：
Object.assign方法有很多用处。

（1）为对象添加属性

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

上面方法通过Object.assign方法，将x属性和y属性添加到Point类的对象实例。

（2）为对象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});
// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};

上面代码使用了对象属性的简洁表示法，直接将两个函数放在大括号中，再使用assign方法添加到SomeClass.prototype之中。

（3）克隆对象

function clone(origin) {
  return Object.assign({}, origin);
}

上面代码将原始对象拷贝到一个空对象，就得到了原始对象的克隆。

不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码。

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

（4）合并多个对象
将多个对象合并到某个对象。

const merge = (target, ...sources) => Object.assign(target, ...sources);
如果希望合并后返回一个新对象，可以改写上面函数，对一个空对象合并。

const merge = (...sources) => Object.assign({}, ...sources);

（5）为属性指定默认值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

上面代码中，DEFAULTS对象是默认值，options对象是用户提供的参数。Object.assign方法将DEFAULTS和options合并成一个新对象，如果两者有同名属性，则option的属性值会覆盖DEFAULTS的属性值。

注意，由于存在浅拷贝的问题，DEFAULTS对象和options对象的所有属性的值，最好都是简单类型，不要指向另一个对象。否则，DEFAULTS对象的该属性很可能不起作用。

const DEFAULTS = {
  url: {
    host: 'example.com',
    port: 7070
  },
};

processContent({ url: {port: 8000} })
// {
//   url: {port: 8000}
// }

上面代码的原意是将 url.port改成 8000，url.host不变。实际结果却是options.url覆盖掉DEFAULTS.url，所以url.host就不存在了。

七、Object.defineProperty()

Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);
// expected output: 42

1、obj 需要定义属性的当前对象
2、prop 当前需要定义的属性名
3、desc 属性描述符
一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。

属性的特性以及内部属性
javacript 有三种类型的属性

命名数据属性：拥有一个确定的值的属性。这也是最常见的属性
命名访问器属性：通过getter和setter进行读取和赋值的属性
内部属性：由JavaScript引擎内部使用的属性，不能通过JavaScript代码直接访问到，不过可以通过一些方法间接的读取和设置。比如，每个对象都有一个内部属性[[Prototype]]，你不能直接访问这个属性，但可以通过Object.getPrototypeOf()方法间接的读取到它的值。虽然内部属性通常用一个双吕括号包围的名称来表示，但实际上这并不是它们的名字，它们是一种抽象操作，是不可见的，根本没有上面两种属性有的那种字符串类型的属性
属性描述符
通过Object.defineProperty()为对象定义属性，有两种形式，且不能混合使用，分别为数据描述符，存取描述符，下面分别描述下两者的区别：

数据描述符 --特有的两个属性（value,writable）

let Person = {}
Object.defineProperty(Person, 'name', {
   value: 'jack',
   writable: true // 是否可以改变
})

默认规则

存取描述符 --是由一对 getter、setter 函数功能来描述的属性
get：一个给属性提供getter的方法，如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。
set：一个给属性提供setter的方法，如果没有setter则为undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认值为undefined。

let Person = {}
let temp = null
Object.defineProperty(Person, 'name', {
  get: function () {
    return temp
  },
  set: function (val) {
    temp = val
  }
})

八、Object.keys()

方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。
Object.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

返回值一个表示给定对象的所有可枚举属性的字符串数组。

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

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

ES6学习笔记

一、in用法：

三、数字操作

四、模板字符串

五、拓展运算符

六、 Object.assign()

七、Object.defineProperty()

八、Object.keys()

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

ES6学习笔记

一、in用法 ：

三、数字操作

四、模板字符串

五、拓展运算符

六、 Object.assign()

七、Object.defineProperty()

八、Object.keys()

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

一、in用法：