js学习笔记

青菜中的油渣
165 阅读5分钟 

const a = 1 && 'x'; // x
const b = 0 && 'x'; // 0
const c = false && 'x'; // false
const d = null && 'x'; // null
const e = undefined && 'x'; // undefined

总结：&&左侧的值转换为布尔值为true则返回右侧，不论右侧为什么

const a = 1 || 'x'; // 1
const b = 0 || 'x'; // x
const c = false || 'x'; // x
const d = null || 'x'; // x
const e = undefined || 'x'; // x

总结：||左侧的值转换为布尔值为true，则返回左侧的值，否则返回右边的值

js背景

  • Netscape公司发明了JavaScript语言，并将这种语言提交给标准化组织ECMA，ECMA将这种语言的语法标准制定了出来， 并把这套标准称为ECMAScript，ES6是ECMAScript的一个版本。
  •  JavaScript用在浏览器，也可以运行在服务器上（需要Node.js这个服务器运行环境）。
  •  Babel是一个将ES6代码转换为ES5代码的转码器。 
  • ESLint是按照规则检查js代码，避免错误和统一代码风格的工具。

异步

  • 单个js脚本运行只在一个线程上（主线程）运行，其他线程后台配合主线程
  • 单线程模式实现简单，但每个任务需要等待前一个任务的执行完成才能接着执行。如果上一个程序没有完成则会拖延整个程序的执行。如浏览器无响应（假死），常是死循环。 
  • 慢的是读写外部数据，等待ajax请求返回结果。 任务排队往往不是计算量大，cpu忙不过来，而是IO操作（输入输出）很慢（ajax操作从网络读取数据），如果等ajax返回结果出来，再接着执行，就会很慢
  • 所以js脚本中cpu可以挂起等待中的任务，先运行后面的任务，等IO操作返回了结果（应该是其他线程去操作），再把挂起的任务（处理返回结果）继续执行下去。 这就是js内部采用的事件循环（event loop） 
  • 一个Ajax请求服务端的数据操作，如果被当作同步任务，则主线程等着ajax操作返回结果，再往下执行；如果这个Ajax操作被当作异步任务则主线程发出Ajax请求后，就直接往下执行，当Ajax操作有了结果，主线程再执行对应的回调函数。

数组遍历的方法

  1. forEach遍历数组，修改原数组，没有返回值（return undefined）
  2.  map遍历数组，返回新的数组，新数组的元素为遍历过程中返回的值
  3.  filter遍历数组，过滤出需要的元素，返回新的数组，新数组中包含符合筛选条件的原来的元素 some遍历数组，只要有一个元素符合条件则返回true，否则返回false，匹配到即跳出，不会全部遍历 
  4. find同some，只不过找到了返回该元素 findIndex同find，返回第一个符合条件的索引 
  5. every遍历数组，遍历全部，查看有没有不符合条件的，有则返回false，如果都符合条件则返回true 
  6.  reduce遍历数组

常用的字符串方法

trim() 去除字符串首尾的空格，字符串的方法应该都是返回新串，因为字符串是无法改变的数据类型

正则去除字符串首尾和中间的空格

根据对象的属性值来获取数组中该对象的索引

arr.forEach((item, index) => {
    for (let i in item) {
        if (item[i] === 'hy') {
            console.log(index)
        }
    }
})

split('')，将字符串根据子串截取成子串数组

let str = 'abc:123'
let subStr = str.split(':') // ['abc', '123']

Number类型：
NaN // NaN表示Not a Number，当无法计算结果时用NaN表示
NaN === NaN; // false
isNaN(NaN); // true
null表示空值，定义了变量并初始化赋了null值
undefined表示定义了变量并没有初始化

字符串方法，无法改变字符串，返回新串：
s.toUpperCase()
s.toLowerCase()
s.indexOf('str') // 10 or -1
s.substring(0, 4)
s.substring(1) // 1 to end

数组方法：
arr.length
arr[1]
arr[1] = '1'
arr.indexOf('30') // return index
arr.slice(0, 3) // 截取子数组
arr.slice(0) // 0 to end
arr.push(1)
arr.push(1, 2)
arr.pop()
arr.unshift(1,2) // add element to array
arr.shift()

arr.sort()
arr.reverse() // 反转元素位置

new一个promise实例对象p，对象中封装了一次异步操作，当调用p.then()时程序监听这次异步操作，并在操作完成之后触发promise的下一步动作，
可以在promise的下一步动作then中处理成功的情况，或者promise的下一步动作catch中处理失败的情况，这里的成功或失败是程序员自定义的
业务成功或失败，在异步操作中绑定的业务

generator生成器像是打断点，程序执行到yield卡住等待上一步操作结果，再次触发执行下一步

const arr1 = [10, 20, 30];
console.log(arr1.includes(10));

for (let key of arr1.keys()) {
	console.log(key);
}
for (let val of arr1.values()) {
	console.log(val);
}
for (let entry of arr1.entries()) {
	console.log(entry);
}
for (let [key, val] of arr1.entries()) {
	console.log(key + ': ' + val);
}

console.log(2**4); // 幂运算符

console.log('liqi'.startsWith('o')); // false
console.log('ritchieli'.endsWith('eli')); // true 

console.log('520'.padStart(10, '0')); // 填充字符
console.log('500'.padEnd(5, '0'))

参数解构：

const set = ({ count }) => {
  console.log(count)
}

参数解构就是一个函数是接收一个对象作为实参调用，将参数解构获取到对象中的属性，语法糖

删除对象属性

delete xiaoming.name

判断对象是否含有某个属性

xiaoming.hasOwnProperty('name')

null undefined 0 NaN '' 都是false

typeof

typeof 123 // 'number'

typeof只有判断基本类型的变量时才有价值

typeof能判断出number, string, boolean, function, undefined

判断数组用 Array.isArray(arr)

判断null

typeof null
typeof []
typeof {} 
// 都属于 'object'

用 String()转换任意类型到字符串


avatar
文章
阅读
粉丝