ES6学习 笔记(一)、数组、对象、字符串...

ES6学习 笔记

ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是可以互换的。


文章目录

  • ES6学习 笔记
  • 前言
  • 一、新的声明方式
  • 二、变量的解构赋值
  • 三、扩展运算符,rest扩展运算符(...)
  • 四、字符串模板
    • 1、``${}`添加变量
    • 2、判断是否出现某字符串(字符串查找)
    • 3、字符串复制
  • 五、ES6数字操作
    • ①、十进制
    • ②、二进制(一个字节八个位 补齐时首位0为正,1为负)
    • ③、八进制
    • ④、十六进制
    • 1、10进制转N进制
    • 2、N进制转10进制
    • 3、安全数(2的53次方——最大安全数)
  • 六、ES6新增的数组知识
    • 1、数组的json格式转换为数组Array.from()
    • 2、Array.of()
    • 3、find() ——实例方法查找
    • 4、fill()——实例方法替换
    • 5、数组遍历
    • 6、in 判断数组是否存在某值
    • 7、数组转换成字符串arr.tostring(),arr.join('|')
  • 七、ES6操作对象新知识
    • 1、in 判断对象中是否存在某值
    • 2、对象赋值
    • 3、key值构造
    • 4、自定义对象方法
    • 5、ES6新特性 is()对象进行比较
    • 6、assign() ——合并对象
  • 总结


前言

面试经常会被问到一些关于ES6的问题,项目中也会用到ES6所以迫切的需要系统性学习一波了,最近时间比较充裕,所以空出来系统的学习了一下ES6


一、新的声明方式

var(全局) 、 let(局部) 、const(常量——声明之后不再改变如果改变则会报错)

注:常量声明 const ,不能二次声明,不能通过再次声明改变其值如:

const a =1
var a =2 
//报错
①、const ...from 'Vue' 引入过vue时,我们不希望vue再被引入
②、引入插件时,不希望他被改变故用const

二、变量的解构赋值

es6 允许按照一定模式,从数组和对象中提取值。对变量进行赋值(数组、对象、字符串解构赋值)

//数组
let [a,b='前端']=['YSQ',undefined]
console.log(a+b) YSQ前端  ——》有值取默认值
let [a,b='前端']=['YSQ',null]
console.log(a+b) YSQnull  ——》无值nullnull
/*************************************一***********************************/
//对象
let foo;
{foo}={foo:‘YSQ’} => ({foo}={foo:‘YSQ’})
consolo.log(foo)   //YSQ
/*************************************一***********************************/
const JSONStr={name:‘YSQ’,age:'24'const {name,age} = JSONStr
console.log(name,age) YSQ24

三、扩展运算符,rest扩展运算符(…)

定义:扩展运算符是三个点(…)将一个数组转化为用逗号隔开的参数序列,是rest的参数的逆运算

...   扩展运算符
let arr1 =[1,2,3]
let arr2 = [...arr1]
arr2.push(2020)
console.log(arr1)
// [1,2,3]
console.log(arr2)
//[1,2,3,2020]
/*************************************一***********************************/
rest扩展运算符
function ABC(first,...org){
 console.log(org)  //[1,2,3,4]
}
ABC(0,1,2,3,4)

四、字符串模板

1、``${}`添加变量

let a = “狼人”
let b =`天黑请闭眼${a}请睁眼`

2、判断是否出现某字符串(字符串查找)

let a = "狼人"
let b = "天黑请闭眼狼人请睁眼"
console.log(b.indexof(a)// 5  > 0 存在
console.log(b.includes(a)// true  存在
console.log(b.startsWith(a))  // false  一头是否存在
console.log(b.endsWith(a)//false   一尾是否存在

3、字符串复制

'YSQ'.repeat(3) //YSQYSQYSQ

五、ES6数字操作

注:面试题中会出现,前端声明一个二进制数字并打印出来?

  // 二进制 声明  Binary
 	 let binary = 0B010101
      console.log(binary)
  // 八进制 声明 Octal   
 	 let octal = 0o666 
      console.log(octal)

①、十进制

0,1,2,3,4,5,6,7,8,9

②、二进制(一个字节八个位 补齐时首位0为正,1为负)

0,1

③、八进制

0,1,2,3,4,5,6,7

④、十六进制

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

1、10进制转N进制

除N ,取余 ,倒排

2、N进制转10进制

乘权(N)次方 ,相加

3、安全数(2的53次方——最大安全数)

 console.log(Number.MAX_SAFE_INTEGER)  // 9007199254740991
 console.log(Number.MIN_SAFE_INTEGER)  // -9007199254740991
 console.log(Number.isSafeInteger(arrg[0]+arrg[2]))  // true

六、ES6新增的数组知识

1、数组的json格式转换为数组Array.from()

  const  json ={  //json数组格式   {key:value;length:3}
      0:'YSQ',
      1:24,
      2:'山东路代理商',
      length:3
    }
     console.log(Array.from(json))
     //["YSQ", 24, "山东路代理商"]

2、Array.of()

console.log(Array.of(1,2,3,4))
// [1, 2, 3, 4]

3、find() ——实例方法查找

   const arr1 = [0,1,2,3,4]  //实例方法
   arr1.find(function(value,index,arr){
     console.log(value,arr)
     0,[0, 1, 2, 3, 4]
	 1,[0, 1, 2, 3, 4]
	 2,[0, 1, 2, 3, 4]
	 3,[0, 1, 2, 3, 4]
	 4,[0, 1, 2, 3, 4]
   })

4、fill()——实例方法替换

	const arr1 = [0,1,'2',3,4]  //实例方法
	arr1.fill('今天天气好',2,4)
	console.log(arr1)
	// [0, 1, "今天天气好", "今天天气好", 4]

5、数组遍历

一、for…of…循环

 for(const [index,item] of arr1.entries()){
      console.log(index,item)
    }
    // 0 0
	// 1 1
	// 2 "今天天气好"
	// 3 "今天天气好"
	// 4 4

二、forEach

  aor.forEach((element,index) => {
      
  });

三、filter

  aor.filter((item,index)=>{
     console.log(item,index)
  })

四、map——替换

const aor =[1,2,3,9,8,7]
console.log(aor.map((element,index)=>{
   return index
}))   // [0,1,2,3,4,5]
console.log(aor)
// [1,2,3,9,8,7]

6、in 判断数组是否存在某值

 let arr = [1,2,,,,]
 console.log(2 in arr)
 // false  2代表数组下标·

7、数组转换成字符串arr.tostring(),arr.join(’|’)

七、ES6操作对象新知识

1、in 判断对象中是否存在某值

let obj = {
  a:123,
  b:456
}
console.log('a' in obj)

2、对象赋值

 let name = 'yyy'
 let age = 24
 let d ={name,age}
 console.log(d)
 // {name:'yyy',age:24}

3、key值构造

 let key = 'sk2'
 let obj ={
   [key]:'web'
 }

4、自定义对象方法

 let obj={
  add:function(a,b){
    return a+b
  }
 }
 console.log(obj.add(1,2))  // 3

5、ES6新特性 is()对象进行比较

  let obj1 = {name:'ysq'}
  let obj2 = {name:'ysq'}
  console.log(Object.is(obj1.name,obj2.name))  // true
  console.log(obj1.name===obj2.name)    // true
  
    console.log(+0===-0)  // true
    console.log(NaN===NaN)  // false
    console.log(Object.is(+0,-0))  // false
    console.log(Object.is(NaN,NaN))  // true
    // ===同值,同类型相等 ;  Onject.is() 严格相等
    //NAN===NAN 两者都为对象 无法判断值是什么  

6、assign() ——合并对象

 let a = {aa:1}
 let b = {bb:2}
 let c = {cc:3}
 let d = Object.assign(a,b,c)
 console.log(d)
 // {aa:1,bb:2,cc:3}

总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

你可能感兴趣的:(es6)