ES6学习笔记（一）、数组、对象、字符串... es6

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——》无值null 取null /*************************************一***********************************/ //对象 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()

constjson ={//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) // false2代表数组下标·

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)// trueconsole.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（） ——合并对象