js基础篇1

数组常用方法

注意：前面7种方法会改变原数组

1. push 后面追加元素

2. pop 后面删除元素

3. unshift 前面追加元素

4. shift 前面删除元素

5. splice 删除与增加，比如arr.splice(1, 1)、arr.splice(1, 0, "lz")

6. reverse 倒序

7. sort 排序：

• 从小到大

  var arr1 = [10, 1, 7, 66, 11]
  arr1.sort(function (a, b) {
      return a-b
  })
  
  // [1, 7, 10, 11, 66]

• 从大到小

  var arr1 = [10, 1, 7, 66, 11]
  arr1.sort(function (a, b) {
        return b-a
  })
  
  // [66, 11, 10, 7, 1]

8. concat 拼接两个数组

9. join 数组转字符串

10. slice 截取

​ 说明：这个可以用于字符串，也可以用于数组

11. indexOf 查找元素

​ 说明: 返回索引

12. forEach 遍历

var arr = ["aaa", "bbb", "ccc", "ddd"]
arr.forEach(function (value, index) {
    console.log(value)
})

// aaa bbb ccc ddd

13. map 映射

var arr = [1, 2, 3, 4, 5]
var arr1 = arr.map(function (value) {
    return value * 2
})
console.log(arr1)

// [2, 4, 6, 8, 10]

14. filter 过滤

var arr = [11, 2, 4, 1, 5]
var arr1 = arr.filter(function (value) {
    return value > 4
})
console.log(arr1)

// [11, 5]

15. every

​ 说明：返回布尔值，如果数组里面的每一项都满足条件返回true,否则为false

var arr = [90, 90, 80, 100, 95]
var arr1 = arr.every(function (item) {
    return item >= 90
})
console.log(arr1);

// false

16. some

​ 说明：返回布尔值，只要数组中的有一项满足条件就返回true，否则为false

var arr = [90, 90, 80, 100, 95]
var arr1 = arr.some(function (a) {
    return a >= 100
})
console.log(arr1);

// true

17. find

​ 说明：返回第一个满足条件的数组元素

var arr = [
    {
        name: "语文",
        grade: 90
    },
    {
        name: "数学",
        grade: 85
    },
    {
        name: "英语",
        grade: 100
    },

]
var arr1 = arr.find(function (item) {
    return item.grade >= 90
})
console.log(arr1)

// {name: '语文', grade: 90}

18. reduce

​ 说明: 每一次运行 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

​

var arr = [1, 2, 3, 4, 5]
var arr1 = arr.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue
})
console.log(arr1);

// 15

字符串常用方法

1. charAt

​

var str = "liuzhe"
var str1 = str.charAt(2)
console.log(str1)

// u

2. charCodeAt

​

var str = "liuzhe"
var str1 = str.charCodeAt(2)
console.log(str1)

// 117

3. fromCharCode 获取26个字母

​

var arr = []
for (var i = 65; i < 91; i++) {
    arr.push(String.fromCharCode(i))
}
console.log(arr)

// ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

4. toLocaleUpperCase && toLocaleLowerCase 大小写的转换

​

var str1 = "ASDasd", str2 = "ZXCzxc"
console.log(str1.toLocaleUpperCase())
console.log(str2.toLocaleLowerCase())

// ASDASD
// zxczxc

5. substr(开始索引，长度) && substring(开始索引，结束索引) 字符串的截取

6. replace 替换

7. split 分割 字符串转成数组

​

var str = "abcd"
console.log(str.split(""))

// ['a', 'b', 'c', 'd']

8. trim 去掉首尾空格

​

var str = "   abcd   "
console.log("|" + str + "|", "|" + str.trim() + "|")


// |   abcd   | |abcd|

new Date()常用方法

​ 注意：获取月份时记得加1

var date=new Date()
console.log(date.getFullYear())//年
console.log(date.getMonth()+1)//月
console.log(date.getDate())//日
console.log(date.getDay())//星期
console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())


//时间戳  getTime()
console.log(date.getTime())

//修改
date.setFullYear(2020)
console.log(date)

浏览器相关

1. 事件

// 页面所有资源加载完成后执行
onload=function(){
    console.log("加载完成")
}
        
// 窗口大小改变就会执行
onresize=function(){
    console.log("resize")
}

//滚动条滚动就会执行 
onscroll=function(){
    console.log("scroll")
}

2. 滚动距离

window.document.documentElement.scrollTop||window.document.body.scrollTop

3. 回到顶部

​ window.scrollTo(0,0)

4. 本地存储

​

// 存储
localStorage.setItem("age","19")

// 获取
localStorage.getItem("age")

// 移除
localStorage.removeItem("age")

// 清除
localStorage.clear()

给dom标签挂标识

1. 新建原生属性

​

var a=document.getElementById("box")
a.setAttribute("name","teichui")

// <div id="box" name="teichui"></div>

2. 获取原生属性的值

​

console.log(a.getAttribute("name"))

// teichui

3. 移除原生属性

​

a.removeAttribute("name")

4. dataset

​

a.dataset.xiaoming="111"

//<div id="box" data-xiaoming="111"></div>


// 删除
delete a.dataset.xiaoming

操作dom类名

1. className(可以赋值,不会去重)

​

var a=document.querySelector("#box")
a.className="box1 box2"

// <div id="box" class="box1 box2"></div>

2. classList(会自动去重)

​

//增加 
a.classList.add("box4")

// 移除
a.classList.remove("box2")

获取指定dom的某个节点

​

var a=document.querySelector("#box")
// 获取所有子节点
console.log(a.children)

// 获取第一个元素子节点
console.log(a.firstElementChild)

// 获取上一个兄弟节点
console.log(a.previousElementSibling)

// 获取下一个兄弟节点
console.log(a.nextElementSibling)

操作dom节点

var a=document.querySelector('#aa')
var b=document.querySelector('#bb')

// 创建节点
var odiv=document.createElement('div')//创建节点
odiv.innerHTML='我是新的'

// 插入子节点
a.appendChild(odiv)

// 在谁的前面插入
a.insertBefore(odiv,bb)

// 删除子节点
a.removeChild(bb)

// 删除自己以及后代
a.remove()

// 节点的替换 replaceChild(新的节点，老的节点)

// 节点的克隆  cloneNode()
// false  不克隆后代
// true    克隆后代
var clon=a.cloneNode(true)