JavaScript高级、ES6（三）

        文章目录

一、array扩展方法

1.1 Array.from()

1.2 array.find()

1.3 array.findindex()

1.4 array.includes()

1.5 array.map()

1.6 array.filter()

1.7 reduce()

 1.8 join()

二、String的扩展方法

2.1 模板字符串解析变量

 2.2 模板字符串中调用函数

三、遍历操作

3.1 for..of

3.2 for..in

四、结尾

---

一、array扩展方法

1.1 Array.from()

        将为数组或可遍历对象转为真数组。

例1：

const arr = Array.from('12345')
console.log(arr); // [1,2,3,4,5]

例2：

        const Obj = {
            0:'a',
            1:'b',
            2:'c',
            length:3
        }
        console.log(Array.from(Obj)) // ['a', 'b', 'c']

1.2 array.find()

        该方法返回满足函数内判断的数组的第一个元素的值。

例1：

let arr1 = [1,2,3,2];
let target = arr1.find( item => item==2)
console.log(target) // 2
// 如果未找到，返回undefined

例2：

let person = [
    { name: "张三", age: 16 },
    { name: "李四", age: 17 },
    { name: "王五", age: 18 },
]

let target = person.find(item => item.name == '张三')
console.log(target) // {name: '张三', age: 16}

1.3 array.findindex()

        找出第一个符合条件的元素的位置（索引），未找到返回-1。

例：

let arr = [1, 5, 10, 15]
let index = arr.findIndex(item => item > 9)
console.log(index) // 2

1.4 array.includes()

        判断某个数组是否包含给定的值，返回布尔值（true，false）

例：

let arr = [1, 5, 10, 15]
console.log(arr.includes(5)) // true
console.log(arr.includes(2)) // false

1.5 array.map()

        map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

 例1：

let arr = [2,3,4,5,6]
let newarr =  arr.map(v=>v+2)
console.log(arr ) // 2,3,4,5,6
console.log(newarr) // 4,5,6,7,8

例2：

let arr = [1, 5, 10, 15]
const newArr = arr.map(item => {
    return `新数组${item}`
})
console.log(newArr);

• map() 不会对空数组进行检测
• map() 不会改变原始数组

1.6 array.filter()

        filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

 例1：

let arr = [1, 5, 10, 15]
const newArr = arr.filter(item => item > 10)
console.log(newArr)

例2：

const arr = [
    {realname:'张三',score:60},
    {realname:'李四',score:48},
    {realname:'赵一',score:98},
    {realname:'刘二',score:59},
    {realname:'王五',score:62},
    {realname:'陈七',score:81},
]
const newArr = arr.filter(item => {
    return item.score >= 60
})
console.log(newArr)

• filter() 不会对空数组进行检测
• filter() 不会改变原始数组

1.7 reduce()

        reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值，对于空数组是不会执行回调函数的。

例：

const arr = [1, 2, 3, 4]
let sum = arr.reduce((total, value) => {
    return total + value
}, 10); // 从10开始累加
console.log(sum) // 20

 1.8 join()

        join() 方法用于把数组中的所有元素放入一个字符串。array.join('分隔符')

例1：

const arr = ['a','b','c','d']
const str = arr.join('')
console.log(str) // abcd

例2：

const arr = ['a','b','c','d']
const str = arr.join('-')
console.log(str) // a-b-c-d

 

二、String的扩展方法

        ES6新增的创建字符串的方式，使用反引号定义 let name = `张三` （按键Tab上面那个键）

2.1 模板字符串解析变量

例：

<style>
    div{
        width: 100px;
        background-color: antiquewhite;
    }
</style>
<script>
    let person = {
        name: '张三',
        age: 28,
        sex: '男'
    }
    let str = ` <div>${person.name},${person.age},${person.sex}</div> `
    document.write(str)
</script>

 2.2 模板字符串中调用函数

例：

function sayName() {
    return '张三'
}
let greet = `${sayName()} ，放学了！`
console.log(greet) // 张三 ，放学了！

三、遍历操作

3.1 for..of

        for of遍历数组的值(遍历可迭代具备迭代器接口)

例：

const arr = [1,2,3,4]
for(let item of arr){
	console.log(item)
} 

3.2 for..in

        for in遍历索引,键（属性）(遍历可枚举类型)

例1：

const arr = ["a","b","c","d"]
for(let k in arr){
	console.log(k)
}

例2：

const person = {
    realname: '小明',
    age: 15,
    sex: '女'
}
for(let k in person){
	console.log(k,person[k])
}

四、结尾

        ES6的扩展方法还有很多，就不一一赘述了。如果这篇文章对你有帮助的话还请点赞多多支持一下。