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()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

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'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

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

8. 默认参数

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

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

新增运算符

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

参考链接1
参考链接2