c## One, JavaScript data type
Basic data type
number (special NaN) NaN: not a number Infinity
boolean: true, false or a type that can be implicitly converted to true or falseIt can be converted to false only in the following cases: 0, empty string, null, undinfed, NaN, false
string: use the character defined by "or" "or"var str='abcd' var str2="xyz" var str3=`hello,${str}` null:typeof null Object undefined:定义未赋值和没有定义的变量类型都是undefinedThe difference between null and undefined:
http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
Symbol: ES6 new data type, defined by the Symbole() function, representing the defined variable Uniqueness of value
Reference data type (complex data type)
Object,Array,Function,RegExp,String
Object type can add properties to detect whether the object is a property of the object itself: hasOwnProperty
for(var key in obj) {
if(obj.hasOwnProperty(key)) {
console.log(obj[key]) }}
2. Array: Array
Array method
Stack method:
push(): add
pop at the tail: delete at the tail
unshift: add at the head
shift: delete
at the head splice: add, delete and replace at any position in the array
删除：splice(要删除的起始下标,删除数量)
添加：arr.splice(要插入的起始位置,0,要添加的值)
arr.splice(2,0,'全栈1909A')
替换：arr.splice(要替换的志起始位置,替换的数量,替换的值)
arr.splice(4,2,'我要去阿里')
Array built-in traversal method:
forEach(): is the upgraded version of for, forEach return value undeifned
filter(): filter, traverse the array elements that meet the conditions, return a new array
map(): process the original array, get a new array
reduce(): merge,
Merge multiple values into one value findIndex() find the subscript
find() find the matching elements in the array
every() returns true if all of them are satisfied, otherwise it is false
some() returns true as long as one is satisfied, otherwise it is false
includes () Determine whether there is a value in the array, return true if it contains, and return false if it does not.
flat() Flatten the multi-dimensional array into a one-dimensional array
扁平化方法：
1.toString实现
例如:
var arr=[5,5,5,5,[2,4,[2,[23,5],6],7],3,2,2,5]
arr.toString().split(',').map(item=>item*1)
2.用递归来实现数组的扁平化
function flatFn(arr) {
var result=[];
if(!(arr instanceof Array)) return;
for(var key in arr) {
result=result.concat(Array.isArray(arr[key]) ? flatFn(arr[key]) : arr[key] )
}
return result;
}
3.flat() //ES2019发布方法
Array reference documentation:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Redu ce
2. Class array:
– What is an array-like?
Also known as the pseudo-array LikeArray, it can only get the number through length and specify a specific element through the subscript, but you cannot use the API method of the array
Usage scenarios of class arrays: acquired dom collections, arguments,...
– How to convert a class array to an array
1. Array.from (type array) or [...type array]
2. Array.prototype.slice.call (type array)
ES1.0 1997 ES2.0 1998
ES3.0 1999
ES4.0 aborted
ES5.0 2009
ES5.1 2011
ES6 2015, from then on, a new version
ES7 2016
ES8 2017 will be released every year
...
The official ECMA Script repository update address : https://github.com/tc39/proposals/blob/master/finished-proposals.md
Three, string: String
trim() remove the left and right spaces of the string
Disagree with trim, wrap a trim
function trim(str) yourself { var reg=/^\s+|\s+$/g return str.replace(reg,'') }
String.prototype.quchukongge=function() {
var reg=/^\s+|\s+$/g
return this.replace(reg,’’)
}
toUpperCase() Convert letters to uppercase
toLowerCase()
Convert letters to lowercase substr() Take substring str.substr (starting position, take several)
substring (start subscript, end subscript) Take substring
split() String conversion Array join: array to string
slice (start subscript, end subscript) take the substring
replace (the string to be found or the matching regular, the content to be replaced) replace
indexOf() search, return subscript, no Return -1
includes() Same as array usage, it returns true but not false
Four, mathematical objects (Math)
Math.abs(): take the absolute value
Math.random() Random value range: 0~~~~1
Returns the start-end range for any numerical range
Quantity=y-x+1
x=10 ,y=20
11 num=y-x+1
Quantity=11
Starting value: 10
Formula: Math.floor(Math.random()*number) + starting value
Encapsulates a random function:
// start: start index
// end: start index
function randomIndex(start,end) {
var num=end-start+1
return Math.floor(Math.random()*num)+start
}
Math.foor() round down
Math.ceil() round up
Math.round() rounding
Math.max() takes the larger value
var arr = [23,3,34,23,24, -32,34,54,234,234,235,534,235,2]
Math.max.apply(Math,arr)
Math.min.apply(Math,arr)
Math.min.call(Math,…arr)
Math.max.call(Math,…arr)
Math.min() takes the small value
Five, this point
Check if it is on the mobile phone, if yes, jump to the mobile page
try {
if (location.search.indexOf('?pc') !== 0 && /Android|Windows Phone|iPhone|iPod/i.test(navigator.userAgent)) {
window.location.href = 'https://xw.qq.com?f=qqcom';
}
} catch (e) {
}
this的使用场景
*/
//1.直接调用函数 this即window
//console.log(this===window)
/*
function Fn() {
console.log('Fn:',this)
//this.name='1909A'
}
//Fn()
//2. The new function, this is the instantiated object of the current constructor
//var f1=new Fn()
//3.函数属于对象
/*
var obj={
name:'1909A',
Fn:function() {
var hehe=function() {
console.log('this===window:',this===window)
console.log('this===obj:',this===obj)
//console.log('this===Fn:',this===Fn)
}
hehe()
}
}
obj.Fn();
*/
//4.定时器上的this
/*
var obj={
name:'1909A',
Fn:function() {
setTimeout(function() {
console.log('this===window:',this===window)
console.log('this===obj:',this===obj)
},0)
}
}
obj.Fn();
*
/
//5.DOM中的this
var btn=document.querySelector('#btn')
btn.onclick=function() {
// let _this=this;
setTimeout(()=> {
console.log(this===btn)
},0)
}
Summary: Who calls this and who points to this. Is this really the case? ?
var name='ok'
var obj={
name:'alice',
getName:function() {
console.log(this.name)
}
}
(false || obj.getName)()
Welcome to join the group for technical discussions, group number: 954314851
