Js简单学习

1.重构

javascript">function getBook () {return data
}function getBookById (id) {return data.find(e => e.id === id)
}const book = getBookById(1)//重构获取对象中成员属性
const { id, title, genres } = book
console(id, title);//重构获取数组中值,other获取剩下的所有值
const { primaryGenre, secondaryGenre, ...otherGenres } = genres
console(primaryGenre, secondaryGenre, otherGenres)//重构添加新的属性生成新的对象,这里将book所有属性导入，同时添加了一个movie属性
const newBook = { ...book, moviePublicationData: "2001-12-19" }
console(newBook);

可以通过重构对对象或者数组进行操作，在使用时可以将其中数据取出.

2. 模板字符串

javascript">//普通字符串形式
const dnormalStr = "123";
const normalStr = '123';//模板字符串
const temStr = `The book title is ${book.title},data:${book.publicationData.split("-")[0]}`;
console(temStr);

使用占位符嵌入字符串或者值,同时可以嵌入js。

3.三元运算符

javascript">//三元运算符
const temStr = `The book title is ${title},data:${publicationData.split("-")[0]},
The book has ${hasMovieAdaptation ? "" : "not"} been adapted as a movie`

4.箭头函数

javascript">//箭头函数
const addData1 = () => console(book)
const addData2 = () => {console(book)
}

5.短路运算符

javascript">console.log(true && "OK")  //"OK"
console.log(false && "Fa")  //"false"
console.log(false || "Fa") //"Fa"//当其中链路出现undefined时会产生报错,或者当为0时输出应该为0，而不应该是没有数据
const spanishTranslation = book.translations.spanish || "NOT TRANSLATION"//??(空凝聚运算符)检查当前值是否为undefined或者null则抛出NO DATA
const countWrong = book.reviews.librarything.reviewsCount ?? "NO DATA"

js中的与或运算符还是挺有意思的，可以对值的输出进行控制，不要再写if。

6. 可选链

javascript">//当lib没有数据时不会抛出异常，同时??检查当前值是否为undefined或者null则直接为0
const countWrong = book.reviews.librarything?.reviewsCount ?? 0

在链路尾部加上?，当该对象为undefined或者null时不会抛出异常，而会直接返回undefined。

NaN产生的情况:

NaN = number + not number(like undefined);

7.map

javascript">const x = [1, 2, 3, 4, 5].map(e => e * 2) //2,4,6,8,10
const titleArr = data.map(book => book.title) //Mein Kampf,The Cyberiad...//返回聚合对象
const essentialData = data.map(book => {return {title: book.title,author: book.author}
}
)

感觉跟forEach一样，循环遍历元素，暂时没发现其他功能.

8.filter

javascript">//返回聚合对象
const essentialData = data.filter(book => book.pages > 500) //过滤页小于500的数据
.map(book => {return {title: book.title,author: book.author}
}
)

9.reduce

javascript">const pagesAllBooks = data.reduce((acc, book) => (acc + book.pages, 0)) //3227array.reduce((prev, cur, index, arr)=> {/***/
}, initialValue)参数： 参数一： callback 函数（执行数组中每个值的函数，包含四个参数）：prev 必需 （上一次调用回调返回的值，或者是提供的初始值（initialValue））cur 必需（数组中当前被处理的元素）index 可选 （当前元素在数组中的索引）arr 可选 （调用 reduce 的数组）
参数二：initialValue 可选 （表示初始值，作为第一次调用 callback 的第一个参数。）提供初始值，cur 从数组第一项开始，若不提供初始值，则 cur 从第二项开始执行，对应的第一次 prev 是数组第一项的值

reduce 为数组中的每一个元素依次执行回调函数，接受四个参数：初始值 0(initialValue)或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

10.sort

javascript">const sortArr = oldArr.slice().sort((a,b) => a - b); //默认从小到大

排序。。。,排序过后原数组会改变,如不希望改变需要调用.slice()先copy一个arr。

11.数组操作

1.添加数据

javascript">const newArr = [...books,newBook];

2.删除数据

javascript">const newArr = oldArr.shift(); //删除数组中第一个元素
const newArr = oldArr.slice(1); //从1下标开始提取
const newArr = oldArr.filter(e => e !== 3); //删除指定元素

3.更新数据

javascript">const newArr = oldArr.map(e => e.id === 1?{}:e) //如果id = 1 则返回null对象
const newArr = oldArr.map(e => e.id === 3?{...e,dance:true}:e) //如果id = 3 则返回聚合对象