js语法(es6)

es6新特性：

1.let和const关键字

2.解构赋值

3.箭头函数

4.模板字符串：使用反引号``代替双引号创建字符串

5.标签模板

6.扩展运算符

//扩展运算符能将数组转为逗号分割的参数列表：[1,2,3] =>  1,2,3

            //扩展运算符的使用:  
            //数组克隆
            const fruits = ['苹果','梨','橘子']
            const newFruits = [...fruits]
            console.log(newFruits)//['苹果','梨','橘子']
            const num = [{a:1},{b:2},{c:3}]
            const newNum = [...num]// 扩展运算符拷贝数组，如果数组中有引用类型的数据，则是浅拷贝。如果改变克隆数组某元素的值，原数组的值也会改变，要注意
            console.log(newNum)//[{a:1},{b:2},{c:3}]
            const newNum1 = JSON.parse(JSON.stringify(newNum))//深拷贝一份
            newNum1[0].a = 11
            console.log(num)//原数组就不会被改变了

            //数组合并
            const flowers1 = ['月季','玫瑰']
            const flowers2 = ['牡丹','菊花']
            const newFlowers = [...flowers1,...flowers2]
            console.log(newFlowers)

            //将伪数组转为真正的数组
            let items = document.querySelectorAll('.item')
            let newItems = [...items]
            console.log(newItems)//转成真正的数组后就能使用forEach()

深拷贝与浅拷贝：
深拷贝：内存上重新拷贝值，开辟新内存。更改该数据，不会改变被拷贝的数据。
浅拷贝：拷贝引用地址，改变新数据，会改变被拷贝数据。

7.新增了一些字符串和数组方法（includes、map、filter、reduce、some、find()和findIndex()、repeat）

//7.1 新增的字符串方法
const str = '我们都有一个家'
console.log(str.includes('一')) //true
console.log(str.startsWith('我们')) //false,判断某个字符串是否在原字符串的头部
console.log(str.endsWith('家')) //true,判断某个字符串是否在原字符串的尾部
//7.2 新增的数组方法
const arr = [4,9,16,25]

//7.2.1 includes方法(es7新增的方法)
console.log(arr.includes(9)) //true
//注意，数组元素是引用类型的时候，使用includes（）无法查找。
const arr = [{name:'yy'},{name:'uu'},{name:'jj'}]
console.log(arr.includes({name:'uu'}))//false

//7.2.2 map()方法:得到一个经过处理后的新数组
let newArr = []
arr.map(item=>{
        newArr.push(Math.sqrt(item))
    })
console.log(newArr)//[2,3,4,5]

//7.2.3 filter()方法:过滤操作，得到想要的结果
let newArr1 = arr.filter(item=>{
    return item > 10
})
console.log(newArr1)

//7.2.4 reduce(prev,current,index,arr)
let total = arr.reduce((prev,current)=>{ //求和
    return prev + current
})
console.log(total)

const arr1 = [[1,2],[3],[4,6]]
let newArr2 = arr1.reduce((prev,current)=>{ //二维数组变成一维数组(数组扁平化)
    return prev.concat(current)
})
console.log(newArr2)

const arr2 = [1,2,[3,4,[5,6]],7,8]
function flatten(arr){
        let newArr = arr.reduce((pre,cur)=>{ //多维数组变为一维数组(数组扁平化)
              return pre.concat(Array.isArray(cur)?flatten(cur):cur)
        },[])
        return newArr
}
console.log(flatten(arr2))

//需求：把“我正在学习php和css”中的php和css替换成超链接
 const arr = ['php','css']
const str = '我正在学习php和css'
let replaceStr = arr.reduce((pre,cur)=>{
     return pre.replace(cur,`${cur}`)
},str)
document.body.innerHTML  = replaceStr

//7.2.5 some(callback):检查数组中的每个元素是否符合条件，只要有一个满足条件就返回true,都不满足返回false
const ageArr = [16,17,18,19,20]
console.log(ageArr.some(item=>item>17))

//7.2.6 Array.from(new Set(arr)):数组去重
const arr3 = [1,1,2,3,4,5,5,5,6]
console.log(Array.from(new Set(arr3))) //[1,2,3,4,5,6]
//数组去重的其它方法:利用reduce()或者Object.keys(obj)
let arr31 = arr3.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
        return pre.concat(cur)
    }else{
        return pre
    }
},[])
console.log(arr31)//[1,2,3,4,5,6]

let obj = {}
arr3.forEach(item=>{
    obj[item] = 1
})
let newArr32 = Object.keys(obj).map(item=>{
    return Number(item)
})
console.log(newArr32)//[1,2,3,4,5,6]

//7.2.7 find()和findIndex()
 const arr = [{name:'yy'},{name:'uu'},{name:'jj'}]
    let res = arr.find(item=>{ //查找数组中符合回调函数要求的第一个数组元素。意思就是：如果有多个元素元素都符合此要求，只返回符合的第一个
      return item.name === 'uu'
    })
    console.log(res)

    let index = arr.findIndex(item=>{ //查找数组中的指定元素的索引值
      return item.name === 'uu'
    })
    console.log(index)//1

    const Arr=[1,2,3,4];
    var num = Arr.find(function(value){
      return value > 2
    })
    console.log(num)

    const Arr1 = [1,2,3,4];
    var num1 = Arr1.findIndex(function(value){
      return value > 2
    })
    console.log(num1)//2
    //rest参数：...args，es6中引入这个参数获取多余的实参，代替es5中的arguments。

	function sum(){
	    console.log(arguments)
	}
	sum(1,2,3)//结果不是个数组
	
	function sum1(...args){
	    console.log(args)
	}
	sum1(1,2,3)//[1,2,3]
	
	function multiple(a,...args){
	     return args.map(item=>{
	          return a * item
	   })
	}
	let result = multiple(3,4,5,6,7)
	console.log(result)//[12,15,18,21]
	
	//rest参数必须放到最后
	function sum(a,b,...args){
	    console.log(a,b,args)
	}
	sum(1,2,3,4,5,6,7)//1 2  [3, 4, 5, 6, 7]
//repeat()方法按指定次数返回一个新的字符串。
console.log('hello'.repeat(2));   //'hellohello'
//padStart()/padEnd()，用参数字符串按给定长度从前面或后面补全字符串，返回新字符串
let arr = 'hell';
console.log(arr.padEnd(5,'o'));  //'hello'
console.log(arr.padEnd(6,'o'));  //'helloo'
console.log(arr.padEnd(6));  //'hell  ',如果没有指定将用空格代替

console.log(arr.padStart(5,'o'));  //'ohell'

rest参数：…args，es6中引入这个参数获取多余的实参，代替es5中的arguments。

8. 默认参数

函数可以设置默认参数，当调用函数时没有传入该参数时，会使用默认值。

function sayHi(name = "哇哈哈") {
    console.log("你好", name);
}
sayHi();// 你好 哇哈哈
sayHi("胖胖");//   你好 胖胖

新增运算符

函数绑定”运算符（::）

参考链接1
参考链接2