访问器属性与字符串,数组常用方法

Js 基本语法 - 5

访问器属性

 语法糖
 1. getter: getAge() => get age()
 2. setter: setAge(value) => set age(value)
按照“属性来访问”，按照“方法”来声明
做判断的话提示错误优先策略
let user = {
    data: {
    firstName: "John",
    names: "墨仔",
    },
    //读取
    get us() {
    return this.data.names + " " + this.data.firstName;
    },
    //设置
    set us1(name) {
    this.firstName = name;
    },
    };
    //   console.log(user.us);
    user.data.firstName = "Liang";
    //输出读取的方法
    console.log(user.us); ////墨仔 Liang

常用字符串方法

let str = "钩针王国";
    // 1. 长度: length
    console.log(str.length)
    console.log("=========================");
    // 2. search: 字符-> 引索 
    console.log(str.search('王'))
    console.log("=========================");
    // 3. replace: 替换 旧值 => 新值
    console.log(str.replace('王','小'))
    console.log("=========================");
    // 4. slice: 子串, 起始索引,结束索引(忽略结束引索的值)
    console.log(str.slice(0,2))
    console.log("=========================");
    // 5. substr: 子串 起始索引,获取的数量  (不用知道到哪结束)
    console.log(str.substr(2,2))
    console.log("=========================");
    // 6. split: string -> array 字符串变数组
    console.log(str.split(' '))
    console.log("=========================");
    // 7. toLowerCase()小写 / toUpperCase()大写
    str = 'Crochet Charts'
    console.log(str.toLowerCase())
    console.log(str.toUpperCase())

数组常用的方法-1

// 1. 在尾部追加与删除 push() 追加 pop() 删除
let arr = ['1','2','3','4','5']
console.log(arr.push('6'))
console.log(arr)
console.log(arr.pop())
console.log("=========================");
// 2. 头部添加与删除  unshift()添加 shift()删除
console.log(arr.unshift('0'))
console.log(arr)
console.log(arr.shift())
console.log(arr)
console.log("=========================");
// 尾进头出 push + shift
arr = []
arr.push(1,2,3)
console.log(arr.shift())
//删除任意位置
arr = ['1','2','3','4','5']
console.log(delete arr[2])
//删除后位置还在但是只是一个占位符空白
console.log(arr); //['1', '2', 空白, '4', '5']
//使用filter过滤掉占位符
let c1 = arr.filter(item => item) 
console.log(c1) // ['1', '2', '4', '5']

作业循环队列

arr = [];
    for(let i = 0; i < 5; i++){
    arr.push(i);
    console.log(arr)
    let c = arr.pop()
    arr.unshift(c)
    }
    console.log(arr) //[4, 3, 2, 1, 0]

作业2

//作业2
//at()接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。
arr = ['1','2','3','4','5']
console.log(arr.at(2)) //3
console.log(arr.at(-2)) //4
//toString() 返回一个字符串，表示指定的字符串
console.log(arr.toString()) 
//trim() 从字符串的两端清除空格，返回一个新的字符串
const greeting = '   Hello world!   ';
console.log(greeting.trim())

数组常用的方法-2

// 1. 键，值，键值对
arr = [1,2,3,4]
//输出 
// 0键: 1值
// 1: 2 键值对
// arr.keys() 键
// console.log(arr.keys())
for(let item of arr.keys()){
console.log(item)
}
console.log("=========================");
// arr.values() 值
// console.log(arr.values())
for(let item of arr.values()){
console.log(item)
}
console.log("=========================");
// arr.entries() 键值对
// console.log(arr.entries())
for(let item of arr.entries()){
console.log(item)
}
console.log("=========================");
// 2. 获取子元素
// arr.slice()
// 返回: 包含起始索引值，但不包括结束索引的值组成的新数组
console.log(arr.slice(1,3)) //[2,3]
// 3. 数组的增删改
// 返回被删除的元素，原数组被改变
// 有三个参数 
// 3.1 删除元素
// 1: 起始位置
// 2: 删除数量
// 3: 附加元素,可选
console.log(arr.splice(1,1))
console.log(arr)
// 3.2 添加操作
// 第2个参数为0：表示不删除
console.log(arr.splice(1,0,'a','b','c'))
console.log(arr) //[1, 'a', 'b', 'c', 3, 4]
// 3.3 更新操作
// 1. 删除 2. 添加
// 先删除1个，在原位置上再添加2个新元素，实现更新
console.log(arr.splice(1,1,'new1','new2','new3'))
console.log(arr) //[1, 'new1', 'new2', 'new3', 'b', 'c', 3, 4]
// 4. 排序 sort 可传入自定义函数
arr = [5,10,6,58,4];
// 小到大
console.log(arr.sort((a,b) =>a-b))
//大到小
console.log(arr.sort((a,b) =>b-a))

数组常用的方法-3

// 数组回调
// 1. 遍历 forEach / map
// forEach 无返回值 map 有返回值
arr.forEach((item)=>console.log(item*2))
let res = arr.map(item => item*2)
console.log(res)
// 2. every :所有成员要满足条件才返回true
// some: 只要有一个满足就返回true
console.log(arr.every(item => item > 0))
console.log(arr.some(item => item > 10))
// 3. filter / find
// 返回满足条件的元素组成的新数组
// 获取第一个满足条
res = arr.find(item => item >= 0)
console.log(arr)
console.log(res)
// 获取最后个满足条
res = arr.findLast(item => item>=0)
console.log(res)
// 获取第一个满足条件的索引
res = arr.findIndex(item => item>=0)
console.log(res)
// 获取最后一个满足条的索引
// 先拿到最后一个元素的值，再根据这个值来获取对应的索引
let value = arr.findLast(item => item >= 0)
res = arr.lastIndexOf(value)
console.log(res)
// 4. 累加器 reduce(callback,init)
// 语法: reduce(function(前一个值,当前一个值){
// ...
// 最终的累加结果 ,由前一个值返回
//})
res = arr.reduce(function(prev,curr){
return prev + curr
},20)
console.log(res)

总结

1. 访问器属性

1. getter
2. setter

2. 字符串常用方法

1. str.length
2. str.search()
3. str.replace()
4. str.slice()
5. str.substr()
6. str.split()
7. str.toLowerCase()
8. str.toUpperCase()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

3. 数组的常用方法

1. arr.push()/arr.pop()
2. arr.unshift()/arr.shift()
3. arr.keys()/arr.values()/arr.entries()
4. arr.slice()
5. arr.splice()
6. arr.sort()
7. arr.forEach()/arr.map()
8. arr.some()/arr.every()
9. arr.filter()/find()/findLast()/findIndex()
10. arr.reduce()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array