Js简单学习

1.重构

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. 模板字符串

//普通字符串形式
const dnormalStr = "123";
const normalStr = '123';

//模板字符串
const temStr = `The book title is ${book.title},data:${book.publicationData.split("-")[0]}`;
console(temStr);

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

 3.三元运算符

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

4.箭头函数

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

 

5.短路运算符

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. 可选链

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

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

NaN产生的情况:

NaN = number + not number(like undefined);

 

7.map

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

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

9.reduce

const pagesAllBooks = data.reduce((acc, book) => (acc + book.pages, 0)) //3227


array.reduce((prev, cur, index, arr)=> {
    /***/
}, initialValue)

参数： 
 参数一： callback 函数（执行数组中每个值的函数，包含四个参数）：

    prev 必需 （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    cur 必需（数组中当前被处理的元素）
    index 可选 （当前元素在数组中的索引）
    arr 可选 （调用 reduce 的数组）
参数二：initialValue 可选 （表示初始值，作为第一次调用 callback 的第一个参数。）

        提供初始值，cur 从数组第一项开始，若不提供初始值，则 cur 从第二项开始执行，对应的第一次 prev 是数组第一项的值 

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

10.sort 

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

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

11.数组操作 

1.添加数据

const newArr = [...books,newBook];

2.删除数据

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

3.更新数据

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 则返回聚合对象