javascript基础

风知道往哪走
111 阅读13分钟

Math 数学内置对象

Math不是函数对象

绝对值

Math.abs(-11)	// 11

向上取整

Math.ceil(1.1)	// 2

向下取整

Math.floor(1.1) // 1

返回一组数的最大值

Math.max(1, 2, 3, 4, 5) // 5
const arr = [4, 5, 6, 7, 100]
Math.max(...arr)			// 100 数组的话要结构

返回一组数的最小值

Math.min(1, 2, 3, 4, 5) // 1
const arr = [4, 5, 6, 7, 100]
Math.min(...arr)	// 4

返回四舍五入后的整数

Math.round(1.1) // 1
Math.round(1.5) // 2

返回一个数的符号

此函数共有5种返回值, 分别是 1, -1, 0, -0, NaN. 代表的各是正数, 负数, 正零, 负零, NaN。

Math.sign(33) 	// 1
Math.sign(-33) 	// -1
Math.sign(0)		// 0

返回0-1的随机数

Math.random()

得到一个两数之间的随机整数

这个例子返回了一个在指定值之间的随机整数。这个值不小于 min （如果 min 不是整数，则不小于 min 的向上取整数），且小于（不等于）max。

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}

得到一个两数之间的随机整数，包括两个数在内

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}

创建数组的方式

没有必要使用 JavaScript 的内建数组构造器 new Array()

const arr = [1, 2, 4];           // 优
const arr1 = new Array(1, 2, 4)	 // 差

new 关键词只会使代码复杂化。它还会产生某些不可预期的结果

const arr = new Array(4)		// 当创建的数组只有一个数字时，意思是创建一个数组长度为4个的数组
console.log(arr)				// [empty × 4]
console.log(arr[0])     // undefined

判断是否为数组的方式

  • Array.isArray()——判断是否为数组

Array.isArray(要判定的数组名称)  // 返回一个布尔值
const arr = [1,2,3]
const a = Array.isArray(arr)
console.log(a)   // true

数组方法

arr.sort()对数组元素的排序

​ ——影响原数组——

1.当元素为字符串时

var arr = ["cb","a","g", 'b',"cy"];    //默认情况下会将元素按照字符串进行比较
arr.sort();
console.log(arr)    									//['a', 'b', 'cb', 'cy', 'g']

2.当元素为数字时

var arr2 = [20,13,11,8,0,11];   //默认将数字元素当做字符串来进行比较。先比较第一位，第一位相同时在比较后一位。
arr2.sort();
console.log(arr2); //[0,11,11,13,20,8]

3. 控制sort()方法的排序方式

var arr3 = [20,13,11,8,0,11];
arr3.sort((a, b) => {
  return a-b
})
console.log(arr3)  //[0, 8, 11, 11, 13, 20]

4.随机顺序排序数组

var arr4 = [20,13,11,8,0,11];
arr4.sort(() => {
  return 0.5 - Math.random()
})
console.log(arr4)   // 随机排列

arr.unshift()添加数组元素

向数组最前面添加新元素

const arr = [1, 2, 3, 4, 5, 6]
arr.unshift(0)   // 返回新数组的长度
console.log(arr) // [0, 1, 2, 3, 4, 5, 6]

arr.push()添加数组元素

向数组最后面添加新元素

向数组添加新元素的最佳方法是使用 push() 方法

const arr = [7,5,6,8,9,8,4,3,5]
arr.push(0)																				// 向数组后面添加一个元素
console.log(arr)    // [7,5,6,8,9,8,4,3,5,0]

const a = arr.push(0)
console.log(a) // 返回的时数组的长度10

添加数组元素也可以用数组索引值来添加

const arr1 = [1,2,3,4]
arr1[4] = 5
console.log(arr1)  // [1, 2, 3, 4, 5]

// 如果添加的索引超过当前索引两个以上，会创建一个未定义的洞
const arr2 = [1,2,3,4]
arr2[7] = 8
console.log(arr2)   // [1, 2, 3, 4, empty × 3, 8]

arr.shift()删除数组中第一个元素

影响原数组

const arr = [1, 2, 3, 4, 5]
arr.shift() // 返回一个被删除的值; 值为1
console.log(arr) // [2, 3, 4, 5]

arr.pop()删除数组中最后一个元素

影响原数组

const arr = [1, 2, 3, 4]
arr.pop()
console.log(arr) // [1, 2, 3]
const a = arr.pop() // 会返回一个被删除的值
console.log(a)   // 3

arr.splice()删除数组中指定位置的元素

影响原数组，被删除的元素会返回一个新数组

// 用法 arr.splice(从哪索引几开始删，删几个，参数1，参数2，参数3...)
const arr = ['秦', '齐', '楚', '韩', '汉', '赵', '魏']
arr.splice(0, 3, 1, 2, 3)  // 以数组的方式返回被删除的元素 ['秦', '齐', '楚']
console.log(arr) // [1, 2, 3, '韩', '汉', '赵', '魏']

如果其余参数被省略，则没有新元素添加


const arr = ['秦', '齐', '楚', '韩', '汉', '赵', '魏']
arr.splice(3, 2) // ['韩', '汉']
console.log(arr)  ['秦', '齐', '楚', '赵', '魏']

arr.slice()裁剪数组

不影响原数组，返回一个新数组

const arr = [0, 1, 2, 3]
const arr1 = arr.slice(2)  // 代表从数组索引2开始切出一段数组
console.log(arr1)   // [2, 3]

const arr2 = arr.slice(1, 3) // 代表切出数组索引为1开始，到索引3结束的这段数组,不包括索引为3的元素
console.log(arr2)  // [1, 2]

arr.concat()合并数组

不影响原数组，并返回一个新数组

const arr = [1, 2, 3, 4]
const arr1 = [5, 6, 7, 8]
const arr2 = [9, 10, 11, 12]
const newArr = arr.concat(arr1, arr2) // 可以合并任意多个数组
console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

delete删除数组元素的运算符

影响原数组

const arr = [1, 2, 3, 4]
delete arr[0]    
console.log(arr) // [empty, 2, 3, 4] 会留下一个未定义的洞

arr.toString()把数组转换为字符串

不影响原数组

把数组里的值转换成以逗号分隔的字符串

const arr = ['h', 'e', 'l', 'l', 'o']
console.log(arr.toString()) // h,e,l,l,o

arr.join()把数组转换成字符串

不影响原数组

join() 方法也可将所有数组元素结合为一个字符串, 但是可以规定分隔符

const arr = ['h', 'e', 'l', 'l', 'o']
console.log(arr.join('-')) // h-e-l-l-o
console.log(arr.join(''))  // hello
console.log(arr.join(' ')) // h e l l o

arr.forEach()遍历数组

数组有多少元素就循环多少次

arr.forEach(function(数组当前项的值, 索引, 数组本身) {})

const arr = [1, 2, 3]
arr.forEach((val, index, array) => {
  console.log(val)    // 输出3次，分别是1， 2， 3
})

arr.filter()筛选数组

不影响原数组，返回一个新数组

arr.filter(function(数组当前项的值，索引，数组本身){})

把符合条件的所有元素返还回来形成一个新数组

const arr = [1, 2, 3, 4, 5]
const newArr = arr.filter((value) => {
  return value > 2     // 把大于2的筛选出来赋值给新数组newArr
})
console.log(newArr)  // [3, 4, 5]

arr.some()查找数组

不影响原数组，返回一个布尔值

arr.some(function(数组当前项的值，索引，数组本身))

如果找到有符合条件的元素，就返回一个true，没有则false，如果找到第一个满足条件的元素，则会终止循环，不在继续查找

const arr = [1, 2, 3, 4, 5]
const flag = arr.some((value) => {
  return value > 2
})
console.lot(flag)   // true

arr.find()查找数组

不影响原数组，返回一个第一个找到的值，如果没有返回undefined

const found = arr.find(value => value > 2)
console.log(found) // 3	 返回的是第一个

arr.findIndex()查找数组索引值

要写成函数形式

查找当前数组中满足条件的第一个元素的索引值，没有则返回-1

const index = arr.findIndex(value => value > 2)
console.log(index)		// 2 返回第一个找到的值的索引值

arr.indexOf()查找数组索引值

查找当前数组中满足条件的第一个元素的索引值，没有则返回-1

const arr = [1, 2, 3, 4, 5, 5]
console.log(arr.indexOf(3)) // 2	返回的是索引值
console.log(arr.indexOf(6))	// -1 没有找到则返回-1

arr.includes()查找数组

判断当前数组是否包含这个值，有返回true，否则false

const arr = [1, 2, 3, 4, 5, 5]
console.log(arr.includes(5))	// true
console.log(arr.includes(99))	// false

typeof用法

判断一个变量属于什么值

const arr = [1, 2, 3]
console.log(typeof arr) // object  因为在javascript中数组也是对象
const str = 'abc'
console.log(typeof str) // string  
const num = 123
console.log(typeof num) // number

还有function，undefind, boolean, symbol

还可以进行判断变量是否为某个值，返回一个布尔值

typeof 37 === 'number'
console.log(typeof 37 === 'number') // true

数组解构

可以将数组里的值一一对应的关系赋值给左边的变量a，b，c

let [a, b, c] = [1, 2, 3]
console.log(a,b,c)  // 1, 2, 3

剩余参数配合数组结构使用

const student = ['小红', '小明', '小澜', '小白', '小莉']
let [s1, ...s2] = student
console.log(s1)			// 小红
console.log(s2)			// ['小明', '小澜', '小白', '小莉']

Array拓展方法,合并数组

方法一

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]
console.log(arr3)    // [1, 2, 3, 4]

方法二

arr.push(...arr2)
console.log(arr)  // [1, 2, 3, 4, 5, 6]

Array.from()伪数组转数组

Array.from(arrayLike, item => item * 2)	//第二个参数是个函数可以将每个值*2

const arrayLike = {
  "0": "1",
  "1": "2",
  "2": "3",
  "3": "张三",
  "length": 4
}
const arr = Array.from(arrayLike)
console.log(arr)  // [1, 2, 3, '张三']

字符串方法

str.trim()

去除字符串两边的空格，但不会去除中间的空格，不影响原字符串，返回一个新字符串

const str = '  abc  '											// 去除字符串两边的空格
const str1 = str.trim()										// 返回一个新字符串
console.log(str1) // abc

str.startsWith()是否以指定字符串开头

方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。默认从0开始

str.startsWith(要搜索的字符串[, 从哪里开始])

const str = 'Saturday night plans'
console.log(str.startsWith('Sat')) // true   区分大小写

console.log(str.startsWith('night', 9))	// true     从第9开始

str.endsWith()是否以指定字符串结尾

用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false。

str.endsWith(要搜索的子字符串，设定字符串长度)

const str1 = 'Cats are the best!';
console.log(str1.endsWith('best!')); // true
console.log(str1.endsWith('best'，17)) // true		原字符串是18位，第二个参数作为当前字符串长度，所以去掉最后一个叹号

str.repeat()复制字符串

构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本

const str = 'abc'
const str1 = str.repeat(2)	
console.log(str1)	// abcabc

new Set()数据结构

Set 对象允许存储任何类型的唯一值，无论是原始值或者是对象引用。

Set对象是值的集合，可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。

let mySet = new Set();
mySet.add(1); // Set [ 1 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add(5); // Set [ 1, 5 ] 不允许重复

Size属性将会返回Set对象中元素的个数。

console.log(mySet.size)  //2 

const s = new Set()
s.add(1).add(2).add(3)	// 向set数据结构添加值
s.delete(2)							// 删除set结构中为2的值
s.has(1)								// 表示set结构中是否有1，返回一个布尔值
s.clear()								// 清楚set结构中所有的值

对象方法

JSON.stringify()

可以把对象转成字符串显示

const obj = { name: '张三', age: 18 }
console.log(JSON.stringify(obj)) // {name: '张三', age: 18}

JSON.parse()

可以解析一个字符串形式的对象，变成对象格式

const str = '"name": "张三"， "age": 18 '
JSON.parse(str)	// {name: '张三', age: 18}

Object.defineProperty

可以用来新增对象属性或者修改原来的属性

Object.defineProperty(对象, '属性(需要添加的属性名)', {
    value: 值，   
    enumerable: true,  //控制属性是否可以枚举，默认值的false,
    writable: true,   //控制属性是否可以被修改, 默认值是false,
    configurable: true  //控制属性是否可以被删除或者再次修改，默认值是false
})

Object.defineProperty的get与set方法——数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

let obj = {x: 100}
let obj2 = {y: 100}
  Object.defineProperty(obj2, 'x', {
      get() {
          return obj.x     //将obj.x的值赋予obj2.x，此时两边的数据绑在一起
      },
      set(value) {
          obj.x = value //通过修改obj2的值来修改obj.x的值
      }
  })

Vue的数据代理图

Object.keys()——获取对象所有属性

返回一个由属性名组成的数组

const obj = {
  name: '张三',
  age: 19,
  sex: '男'
}
const arr = Object.keys(obj)    // 返回的是一个数组
console.log(arr)  // [ 'name', 'age', 'sex' ]

深拷贝与浅拷贝

浅拷贝Object.assign()

es6新增方法

假如源对象是一个对象的引用，它仅仅会复制其引用值。

Object.assign(要拷贝的对象，被拷贝的)

遍历对象for...in...

for(k in obj) {
  
}

对象解构

对象的解构允许使用变量名字匹配对象属性，将匹配成功的属性值赋值给变量

const obj = { name: '张三', age: 18, sex: '男' }
let {name, age} = obj				// 结构出来的值不绑定
console.log(name, age)    // 张三，18

let {name: myName, age: myAge} = obj		// 将匹配出来的属性的属性值赋值给另外的变量
console.log(myName, myAge) // 张三，18

函数

函数的声明和调用

1.函数声明的方式（命名函数）

function fun(){}
fun()

2.函数表达式（匿名函数）

const f = function() {}
f()

3.利用new Function('参数1', '参数2', '函数体')

const fn = new Function('a', 'b', 'console.log(a+b)')
fn(1, 2)  // 输出3

call方法的使用

可以用来修改this指向

用法：调用的函数名.call(指向的对象, 参数1，参数2)

function fn () {
  console.log(this)
}
fn()  // 会指向window

const obj = {
  name: 'obj'
}
fn.call(obj) // 指向obj这个对象

call()方法主要用来继承

function Father(uname, age, sex) {
  this.uname = uname
  this.age = age
  this.sex = sex
}
function Son(uname, age, sex) {
  Father.call(this, uname, age, sex)
}
const son = new Son('李白', 18, '男')
console.log(son)   // Son { uname: '李白', age: 18, sex: '男' }

apply()

apply()也可以用来修改this指向，但是第二个参数必须传一个数组（伪数组）

一般配合数学内置对象求数组的最值

fun.apply(thisArg, [数组])

const arr = [1, 3, 4, 5, 5, 99, 8]
const max = Math.max.apply(Math, arr)
console.log(max)   // 99

bind()

bind()也可以用来修改this指向，但是它不调用函数，返还的是原函数修改this后产生的新函数

fun.bind(thisArg, arg1, arg2, ...)

const obj = {
  name: '张三'
}
function fun() {
  console.log(this)
}
const fn = fun.bind(obj)
fn()      // {name: '张三'} 指向的是obj对象

剩余参数

剩余的变量会表示为一个数组

function fun(a, b, ...c) {
  console.log(a)
  console.log(b)
  console.log(c)
}
fun(1, 2, 3, 4, 5, 6, 7)	// 1;  2; [3, 4, 5, 6, 7]

JS高级

构造函数

实例成员与静态成员

function Fun(age, sex) {
  this.age = age;					// 通过this添加的成员是实例成员，age,sex
  this.sex = sex
}
const f = new Fun(18, '男')
// 实例成员只能通过实例化的对象形式访问，小f就是实例化对象
console.log(f.age) // 18

// 静态成员就是通过构造函数本身上添加的成员
Fun.job = '搬砖';            // job就是静态成员
console.log(Fun.job)    		// 静态成员只能通过构造函数来访问
console.log(f.job)					// undefind 不能通过f来访问

正则表达式

developer.mozilla.org/zh-CN/docs/…

创建方式

利用RegExp对象来创建

const regexp = new RegExp(/123/)

利用字面量创建

const rg = /123/

regexObj.test()测试正则表达式

返回一个布尔值

const flag = regexp.test(123)
console.log(flag) // true

边界符 ^ $

^表示匹配行首的文本以什么开始

const rg = /^123/    // 表示必须以123开始
console.log(rg.test(1123))   // false
console.log(rg.test(1234))   // true

$表示匹配行尾的文本以什么结束

const rg = /abc$/		// 表示必须以abc结尾
console.log(rg.test('abcd'))   //false
console.log(rg.test('aabc'))	 //true

const rg = /^abc$/    // 必须只有abc 并且只有一个abc
console.log(rg.test('abc'))   	//true
console.log(rg.test('abcabc'))	//false

字符类 []

const rg = /[abc]/		// 表示含有abc其中一个就行了
const rg1 = /^[abc]/	// 表示以abc其中一个开头就行
const rg2 = /[abc]$/	// 表示以abc其中一个结尾就行
const rg3 = /^[abc]$/	// 表示只能是abc的其中一个，ab，ac，abc都不行

浏览器本地储存

浏览器端是通过Window.localStorage和Window.sessionStorage属性来实现本地存储机制

localStorage

localStorage存的不会自动清空，只有清除浏览器数据或者用户手动在页面操作过removeItem()

向浏览器储存

localStorage.setItem('key', 'value')
btn() {
  localStorage.setItem('name', '张三')
}

value是一个字符串，如果是数字也会自动变成字符串，如果要传一个对象的话可以用JSON.stringity(obj)

读取浏览器存储数据

localStorage.getItem('key')

删浏览器储存

localStorage.removeItem('key')

清空所有储存

localStorage.clear()

sessionStorage

sessionStorage跟localStorage一样，也有setItem(), removeItem(), clear()，不同的是sessionStorage存的数据会在浏览器关闭的时候清空

avatar
文章
阅读
粉丝